WordPress の Embed 機能を使ってブログカードを表示するようにしたのだけれど、サイトアイコン（ファビコン）が WordPress のロゴになってしまっているのを、外部サイトである Google フォト（旧 Picasa ）においてある画像に変更しました。
目次
サイトアイコンが設定されていないとデフォルトアイコンが表示される
<head> 内に直接 <link> タグにて favicon を設定していても、 WordPress にてサイトアイコンが設定されていないと、ブログカード (Embed) にはデフォルトアイコンが表示されます。これは WordPress のコアにある画像で、 robots.txt で bot がクロールしないように設定しているので、「ブロックされたリソース」として Google に認識されてしまっています。
調べてみると WordPress 4.3 よりサイトアイコン (favicon) が標準機能で設定できるようになっており、ブログカードはそれを利用しているようです。設定されていない場合はコアにあるデフォルトアイコンが表示されるようです。
WordPress のサイトアイコンの設定方法
WordPress の標準のサイトアイコンの機能を使うには「管理画面」→「外観」→「カスタマイズ」→「サイト基本情報 」→「サイトアイコン」にて設定します。
でもこれ、 WordPress のライブラリにアップロードしている画像しか使用することができないのです。
Google フォトの画像をサイトアイコンに設定する
このサイトは Google フォト（旧 Picasa ）に画像を置いて利用しているので、できればライブラリにアップロードすることなくサイトアイコンを設定したいです。
そこで調べてみると get_site_icon_url() という関数にて、サイトアイコンの URL を取得しているのですが、この関数内に get_site_icon_url というフィルターがあるのでこれを利用すれば、外部 URL の画像に書き換えられそうです。
→ WordPress.org ： get_site_icon_url()
そこで以下のような関数を function.php に書いて対応しました。
function set_external_icon( $url, $size, $blog_id ){
$url = 'https://lh3.googleusercontent.com/-uruoD9BILbc/Uk5cJPwpo1I/AAAAAAABSBY/SiLf15A-Zok/s512-c/apple-touch-icon.png';
$url = preg_replace('/\/(w|s|h|d)(\d*)(-c)?(-o)?(-c)?\//', '/s' . $size . '-c/', $url);
return $url;
}
add_filter( 'get_site_icon_url', 'set_external_icon', 10, 3);$url に代入している画像 URL は Google フォト（旧 Picasa ）にアップロードしたものです。 WordPress でも 512 px 四方以上のものを使うことになっているので、それより大きなものをアップロードします。画像 URL の「 s512-c 」という部分は画像サイズを表しており、この部分の数字を変更することで必要なサイズの画像を生成することができます。なので Google フォトの場合は preg_replace() を使って置換するだけで画像サイズを変えることができますが、それ以外の外部サイトを利用している場合はもう少しコードを書かなくてはならないと思います。
こんなふうにブログカードにもこのサイトのサイトアイコンが表示されるようになりました。
またサイトアイコンが設定されているか調べる has_site_icon() という関数も get_site_icon_url() を使って調べているので、 get_site_icon_url() をフィルターで書き換えれば他も動くようです。
サイトアイコンが設定されると以下のようにヘッダに favicon が自動的に出力されるので、ヘッダにアイコンを書き出していた部分も削除しました。
<link rel="icon" href="https://lh3.googleusercontent.com/-uruoD9BILbc/Uk5cJPwpo1I/AAAAAAABSBY/SiLf15A-Zok/s32-c/apple-touch-icon.png" sizes="32x32" />
<link rel="icon" href="https://lh3.googleusercontent.com/-uruoD9BILbc/Uk5cJPwpo1I/AAAAAAABSBY/SiLf15A-Zok/s192-c/apple-touch-icon.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="https://lh3.googleusercontent.com/-uruoD9BILbc/Uk5cJPwpo1I/AAAAAAABSBY/SiLf15A-Zok/s180-c/apple-touch-icon.png" />
<meta name="msapplication-TileImage" content="https://lh3.googleusercontent.com/-uruoD9BILbc/Uk5cJPwpo1I/AAAAAAABSBY/SiLf15A-Zok/s270-c/apple-touch-icon.png" />PNG 画像を使っているので、 IE 9 以下ではファビコンは表示されません。もうサポートも切れたから表示しなくても問題ないかな、と思っています。
ブログカードのレスポンシブ対応
またスマフォで見た時にブログカードがはみ出てしまっていたので、 CSS に以下を追加しレスポンシブ対応しました。
.wp-embedded-content{
max-width: 100%;
}これでスマフォからもブログカードがはみ出ないで表示されるようになりました。
