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' を適宜変更してください。

関連

お勧めコンテンツ

get_next_comments_link(2015年12月16日 登録)

string get_next_comments_link( [ string $label = '' [ , int $max_page = 0 ] ] )
次のコメントリンクを取得する。

sanitize_title(2013年12月4日 登録)

string sanitize_title( string $title [ , string $fallback_title = '' [ , string $context = 'save' ] ] )
タイトルから無効な文字を除外する。

sanitize_html_class(2014年1月13日 登録)

string sanitize_html_class( string $class [ , string $fallback = '' ] )
HTMLのクラス名向けにサニタイズする。

wp_title_rss(2014年3月31日 登録)

void wp_title_rss( [ string $sep = '&#187;' ] )
フィード向けのページタイトルを出力する。

get_status_header_desc(2010年5月24日 登録)

string get_status_header_desc( int $code )
HTTPステータス説明文を取得する。

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