この記事は最後に更新してから1年以上経過しています。

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

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

最終更新 : 2018年05月27日 10:45

お勧め

wp_script_is（2019年5月29日更新）

bool wp_script_is( string $handle [ , string $list = 'enqueued' ] )

スクリプトの状態を調べる。

get_author_posts_url（2018年3月12日更新）

string get_author_posts_url( int $author_id [ , string $author_nicename = '' ] )

著者アーカイブページのURLを取得する。

is_main_query（2012年3月5日更新）

bool is_main_query( )

現在の投稿情報が最初に検索されたものか調べる。

wp_delete_post_revision（2023年4月4日更新）

mixed wp_delete_post_revision( int|WP_Post $revision_id )

リビジョンを削除する。

get_comments_number（2018年5月27日更新）

int get_comments_number( [ int $post_id = 0 ] )

投稿ページのコメント数を取得する。パラメータ$post_idに投稿IDを指定することで、任意の投稿ページのコメント件数を取得できる。

説明

favicon.ico に書き換える

関連

お勧め