WordPressテーマをリニューアルしてから、oEmbedによるWordPress埋め込みカードのファビコンが表示されていないことに気が付きました。

自作テーマを使用しているとハマる罠かもしれません。

表示されない原因

oEmbedでのファビコン表示にはget_option( 'site_icon' )を使用しているので、linkタグでheader.phpに直接コーディングしても読み取ってくれないのです。

get_option()を使用しているので、WordPress側で設定する必要があります。

oEmbedのファビコン表示に対応する方法

ファビコン画像を用意している前提になります。（png形式、512 × 512ピクセル以上が望ましいです。）

対応方法は至って簡単でして、管理画面メニューの「外観 > カスタマイズ」にあるカスタマイザーを使用します。

「サイト基本情報」をクリックします。

「サイトアイコンを選択」をクリックし、ファビコン画像をアップロードして選択します。

最後にカスタマイザーの「公開」ボタンを押してファビコンを保存しましょう。

これで完了です。

カスタマイザーで設定する方法が最適解かもしれない

対応していて気がついたのですが、ファビコンをheader.phpなどに直にコーディングするより、WordPressのカスタマイザーからファビコンを設定する方法が一番楽です。最適解と言っても過言では無いかもしれません。

以下はカスタマイザーからファビコンを設定した場合に吐き出されたheadタグのコードです。

<link rel="icon" href="https://i1.wp.com/increment-log.com/wp-content/uploads/2019/10/cropped-increment-log-logo_512.png?fit=32%2C32&ssl=1" sizes="32x32"/>
<link rel="icon" href="https://i1.wp.com/increment-log.com/wp-content/uploads/2019/10/cropped-increment-log-logo_512.png?fit=192%2C192&ssl=1" sizes="192x192"/>
<link rel="apple-touch-icon-precomposed" href="https://i1.wp.com/increment-log.com/wp-content/uploads/2019/10/cropped-increment-log-logo_512.png?fit=180%2C180&ssl=1"/>
<meta name="msapplication-TileImage" content="https://i1.wp.com/increment-log.com/wp-content/uploads/2019/10/cropped-increment-log-logo_512.png?fit=270%2C270&ssl=1"/>

通常のファビコン指定の「rel=”icon”」、iPhoneやiPadなどのブックマークアイコン指定の「rel=”apple-touch-icon-precomposed”」、Windows系のブックマークアイコン指定の「name=”msapplication-TileImage”」が全て自動的に最適化されたサイズで出力されます。

また、JetpackのCDN「Site Accelerator（旧名：Photon）」を通したファビコンURL指定になるのでWebサイト表示のパフォーマンスもアップします。

おそらく今後新たにアイコン指定する必要のあるコードが出てきた場合もWordPressが対応してくれるかと思うので、この方法が最適解なのではと判断します。

おまけ：ファビコンを取得しているプログラムの場所

おまけでoEmbedのサイト名やファビコンを取得しているプログラムについて。

「wp-includes/embed.php」の1119行目辺りにありました。

/**
 * Prints the necessary markup for the site title in an embed template.
 *
 * @since 4.5.0
 */
function the_embed_site_title() {
	$site_title = sprintf(
		'<a href="%s" target="_top"><img src="%s" srcset="%s 2x" width="32" height="32" alt="" class="wp-embed-site-icon"/><span>%s</span></a>',
		esc_url( home_url() ),
		esc_url( get_site_icon_url( 32, admin_url( 'images/w-logo-blue.png' ) ) ),
		esc_url( get_site_icon_url( 64, admin_url( 'images/w-logo-blue.png' ) ) ),
		esc_html( get_bloginfo( 'name' ) )
	);

	$site_title = '<div class="wp-embed-site-title">' . $site_title . '</div>';

	/**
	 * Filters the site title HTML in the embed footer.
	 *
	 * @since 4.4.0
	 *
	 * @param string $site_title The site title HTML.
	 */
	echo apply_filters( 'embed_site_title_html', $site_title );
}

もし「oEmbedで表示するファビコンのみ変えたい」といった要望の場合はembed_site_title_htmlフィルターに関数をフックすることで対応可能になります。

もしくはテーマディレクトリ直下に「embed-content.php」という名前でoEmbed用テンプレートを作成し、独自のHTML構造に書き換えることも可能です。デフォルトの埋め込みテンプレートは「wp-includes/theme-compat/embed-content.php」をご参照ください。

追記：上記でもoEmbedにファビコンが表示されない場合

上記の方法でもoEmbedにファビコンが表示されない場合、別プラグインによってHTML構造が書き換わったのが原因の可能性があります。

私の場合は「Autoptimize」のLazy Load機能をONにしているのが原因で表示されませんでした。なのでAutoptimizeのLazy Load機能は諦めてJetpackによる画像遅延読み込みで対応するようにしています。