当サイトのリンクにはアフィリエイト広告が含まれています

WordPressのプロフィール画像（アバター）のAMP対応方法。

2019/3/8 カスタマイズ By

シェフ

どうも、モバイルページをそっくりそのままAMPページにしようと奮闘しているシェフです。

今は「コメント欄」の変換作業をしているんですが、「ここのフィルターフック何〜！？」と、なかなか苦戦してます。

ただ、その過程で、WordPressのプロフィール画像（アバター）をAMPに対応させる方法がわかったので、今回はそのコードをご紹介します。

コード

こちらがそのコード。functions.phpにコピペすればOKです。

function convert_avatar_to_amp_4536 ($avatar) {
 if ( !is_amp() ) {
 return $avatar;
 }

//style属性を取り除く
 $avatar = preg_replace('/ +style=["][^"]*?["]/i', '', $avatar);
 $avatar = preg_replace('/ +style=[\'][^\']*?[\']/i', '', $avatar);

//画像タグをAMP用に置換
 $avatar = preg_replace('/<img/i', '<amp-img', $avatar);

$avatar = '<div>'.$avatar.'</div>';
 return $avatar;
 
}
add_filter('get_avatar','convert_avatar_to_amp_4536', 9999999999);

上記のコードをコピペすれば、コメント欄に表示される画像はもちろんのこと、サイト内のすべてのアバターがAMP用に変換されます。

例えば僕は、自作の「この記事を書いた人」を表示しているんですが、その中のアバターも今回のコードでAMP用になりました。

記事上にプロフィール画像を表示しているサイトもありますが、そういった画像も一発で変換されるはずです。

コードをコピペしても上手くいかない場合

今回のコードでは、is_ampという関数でAMPページかどうかの条件分岐をしていますが、上手くいかない場合は下記の方法を試してみてください。

PHP（WordPress）でAMP対応ページかどうか判別する方法。 Fantastech!! もっと見る

ポイント

ポイントは下記の2つ。

フィルターフックのget_avatar
正規表現を使って変換したアバターをdivで囲む

get_avatarとは？

当初、一覧から該当のフィルターフックを探していたんですが見つからず、最終的にたどり着いたのが、この「get_avatar」です。

本来は、プラガブル関数という、ユーザーのアバターを取得する関数ですが、Gravatar（グラバター）の出力をカスタマイズできる同名のフィルターがある（？）ようです。

参考関数リファレンス/get avatar

amp-imgタグは親要素がないとダメ？

そして、今回で確信しましたが、amp-imgって親要素がないと挙動がおかしくなりますね。

例えば、親要素A内に子要素B、C、Dがあって、そのいずれかの子要素にamp-imgがあると思い通りの挙動にならないんですが、なぜかamp-imgだけを包む親要素があると問題ないんです。

そういった理由から、returnする前にdivで包んでいるんですが、なぜ上記のような挙動をするのかはよくわかっていません。

まとめ

URLを取得して変換してecho…ということをコメント欄でやるのが面倒で今回の方法を思いつきましたが、なかなか便利ではないでしょうか。

他のオプションで変更しているものに関しては変更されないはずなので、サイズなどをAMPのために指定する手間もありませんよ。

以上、ご参考までに！(｀･ω･´)ゞ

カテゴリー：カスタマイズ

シェフ

このサイト「Fantastech」を運営している人

AMPページに「抜粋」と「続きを読む」ボタンの表示する方法。

WordPressでAMPページにもコメントを表示する方法。