32ピクセルのサイトアイコンを別の画像ファイルに変更する

(4.3.0以降)
32ピクセルのサイトアイコンを別の画像ファイルに変更する - favicon.icoを使ってみる

説明

「サイトアイコン」は4.3の新機能の1つ。管理画面で適当な画像ファイルを指定するだけでサイトアイコンが適用されます。そんなサイトアイコンで、既存の favicon.ico を併用する方法を紹介します。

サイトアイコンを登録したサイトでは、head要素内に次のような4行が出力されます。サイトアイコンの登録時のイメージは、幅・高さとも512ピクセルですが、実際に出力されるのは32ピクセル、192ピクセル、180ピクセル、270ピクセルになるようです。

<link rel="icon" href="http://localhost/wp-content/uploads/2015/08/siteicon-32x32.jpg" sizes="32x32" />
<link rel="icon" href="http://localhost/wp-content/uploads/2015/08/siteicon-192x192.jpg" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="http://localhost/wp-content/uploads/2015/08/siteicon-180x180.jpg">
<meta name="msapplication-TileImage" content="http://localhost/wp-content/uploads/2015/08/siteicon-270x270.jpg">

上記の内容を実際に出力しているのは、wp_head アクションの1つであるwp_site_icon関数です。wp_head アクションはほぼすべてのテーマで利用されており、テーマを変更せずにサイトアイコンが出力されるのはこのためです。もしサイトアイコンが出力されていない場合は、使用しているテーマでwp_head関数が記述されているか確認しましょう。

サイトアイコンはメディア(attachment)として、その投稿IDはサイトのオプション値('site_icon')として登録されます。サイトアイコンはほかのメディアと同様に編集・削除可能になっていますが、サイトアイコンを変更する場合は管理画面の当該メニューから行うようにすべきでしょう。

favicon.ico に書き換える

さて今回の目的はサイトアイコンのURLの一部を変更することですが、4.3.0ではメディアに登録された画像ファイル情報を取得するwp_get_attachment_image_src関数に同名のフィルターが追加され、このフィルターを利用することで目的が達成できそうです。

テーマの functions.php に追加するコードは次の通りです(アクション関数とフィルター関数名は適宜変更をしてください)。

function replace_site_icon_32( $image, $attachment_id, $size, $icon ) {
	if ( ( is_array( $image ) && count( $image ) >= 3 && $image[1] == 32 && $image[2] == 32 ) &&
		( is_array( $size ) &&  count( $size ) == 2 && $size[0] == 32 && $size[1] == 32 ) &&
		$attachment_id == get_option( 'site_icon' ) && !$icon ) {
		$image[0] = '/favicon.ico';
	}
	return $image;
}
function my_template_redirect() {
	add_filter( 'wp_get_attachment_image_src', 'replace_site_icon_32', 10, 4 );
}
if ( version_compare( $GLOBALS['wp_version'], '4.3', '>=' ) ) {
	add_action( 'template_redirect', 'my_template_redirect' );
}

上記のコードでは、管理者ページに影響させないために template_redirect アクションを利用しています。ポイントはサイトアイコンは4.3.0の新機能であるため、4.3以降のみ追加するようにしている点です。template_redirect アクションである my_template_redirect 関数では、wp_get_attachment_image_src フィルターを登録。そのフィルター関数の replace_site_icon_32 関数では、32ピクセルのサイトアイコンの場合にみ画像ファイルのURLを変更しています。

上記のコードを適用した結果は次の通り。32ピクセルのhref属性値が '/favicon.ico' に変更されていることがわかります。

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="http://localhost/wp-content/uploads/2015/08/siteicon-192x192.jpg" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="http://localhost/wp-content/uploads/2015/08/siteicon-180x180.jpg">
<meta name="msapplication-TileImage" content="http://localhost/wp-content/uploads/2015/08/siteicon-270x270.jpg">

今回は favicon.ico に変更しましたが、もっとも小さい32ピクセルのみ全体の縮小イメージではなく別の画像ファイルを指定したい場合はあるのではないでしょうか。その際は '/favicon.ico' を適宜変更してください。

関連

お勧めコンテンツ

is_404(2009年11月26日 登録)

bool is_404( )
要求されているページが、404ページ(投稿データが見つからない)か調べる。

get_the_category_by_ID(2011年6月10日 登録)

mixed get_the_category_by_ID( int $cat_ID )
カテゴリーIDからカテゴリー名を取得する。

update_user_meta(2013年5月7日 登録)

bool update_user_meta( int $user_id, string $meta_key, mixed $meta_value [ , mixed $prev_value = '' ] )
ユーザメタ情報(拡張情報)を更新する。

get_userdatabylogin(2009年12月1日 登録)

mixed get_userdatabylogin( string $user_login )
ログイン名からユーザ情報を取得する。

register_post_type(2012年7月27日 登録)

object register_post_type( string $post_type [ , mixed $args = array() ] )
カスタム投稿タイプを登録する。

最終更新日時 : 2015-08-27 17:17