この記事は最後に更新してから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_print_inline_script_tag（2021年4月19日更新）

void wp_print_inline_script_tag( string $javascript [ , array $attributes = array() ] )

インラインJavaScriptを含むscript要素を出力する。

register_rest_route（2022年8月17日更新）

bool register_rest_route( string $namespace, string $route [ , array $args = array() [ , bool $override = false ] ] )

REST APIのルートを登録する。

wp_determine_option_autoload_value（2024年7月22日更新）

string wp_determine_option_autoload_value( string $option, mixed $value, mixed $serialized_value, boo l |string $autoload )

自動ロードのトリガー値を取得する。

single_tag_title（2018年5月27日更新）

string single_tag_title( [ string $prefix = '' [ , bool $display = true ] ] )

投稿タグアーカイブページの投稿タグ名を取得し、パラメータ$displayがtrueならば表示する。$displayがfalseの場合は、文字列として返す。

home_url（2023年3月31日更新）

string home_url( [ string $path = '' [ , string $scheme = null ] ] )

現在のブログ（サイト）のホームURLを取得する。ホームURLは、管理者ページの「設定」-「一般」の「サイトのアドレス(URL)」のこと。

説明

favicon.ico に書き換える

関連

お勧め