WordPressのプロフィール画像(アバター)のAMP対応方法。Fantastech(ファンタステック)Fantastech!!WordPressGoogleアドセンスSEO対策サイトマップお仕事のご依頼WordPressのプロフィール画像(アバター)のAMP対応方法。シェフどうも、モバイルページをそっくりそのままAMPページにしようと奮闘しているシェフです。今は「コメント欄」の変換作業をしているんですが、「ここのフィルターフック何〜!?」と、なかなか苦戦してます。その過程で、WordPressのプロフィール画像(アバター)をAMPに対応させる方法がわかったので、今回はそのコードをご紹介します。コードこちらがそのコード。functions.phpにコピペすればOKです。9999999999);上記のコードをコピペすれば、コメント欄に表示される画像はもちろんのこと、サイト内のすべてのアバターがAMP用に変換されます。僕は、自作の「この記事を書いた人」を表示しているんですが、その中のアバターも今回のコードでAMP用になりました。記事上にプロフィール画像を表示しているサイトもありますが、そういった画像も一発で変換されるはずです。今回のコードでは、is_ampという関数でAMPページかどうかの条件分岐をしていますが、上手くいかない場合は下記の方法を試してみてください。PHP(WordPress)でAMP対応ページかどうか判別する方法。見るポイントポイントは下記の2つ。フィルターフックのget_avatar正規表現を使って変換したアバターをdivで囲むget_avatarとは?当初、一覧から該当のフィルターフックを探していたんですが見つからず、最終的にたどり着いたのが、この「get_avatar」です。本来は、プラガブル関数という、ユーザーのアバターを取得する関数ですが、Gravatar(グラバター)の出力をカスタマイズできる同名のフィルターがある(?)ようです。avataramp-imgタグは親要素がないとダメ?そして、今回で確信しましたが、amp-imgって親要素がないと挙動がおかしくなりますね。親要素A内に子要素B、C、Dがあって、そのいずれかの子要素にamp-imgがあると思い通りの挙動にならないんですが、なぜかamp-imgだけを包む親要素があると問題ないんです。いった理由から、returnする前にdivで包んでいるんですが、なぜ上記のような挙動をするのかはよくわかっていません。まとめURLを取得して変換してecho...ということをコメント欄でやるのが面倒で今回の方法を思いつきましたが、なかなか便利ではないでしょうか。他のオプションで変更しているものに関しては変更されないはずなので、サイズなどをAMPのために指定する手間もありませんよ。́)ゞカテゴリー:カスタマイズシェフこのサイト「Fantastech」を運営している人。WordPressテーマ「4536」の開発中にインプットした情報などを発信中。上に表示された文字を入力してください。AMPページに「抜粋」と「続きを読む」ボタンの表示する方法。WordPressでAMPページにもコメントを表示する方法。「ページを開けません。Jobsの導入方法や注意点などカスタムデータ属性でCSSフレームワークを作ろうきたぞ、国内初の流体シェイプ国内初となる流体シェイプをデザインに取り入れたWordPressテーマ「4536」を公開しました。