この記事は最後に更新してから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

お勧め

add_shortcode（2018年5月27日更新）

void add_shortcode( string $tag, mixed $func )

ショートコード（独自タグ）を追加する。ショートコードは、投稿記事内でテキスト内容がない[tag]や、テキストを内包する[tag]テキスト[/tag]の書式で使用できる独自タグのこと。標準の状態では、 the_content関数によって表示する直前のフィルター処理内でパラメータ$funcで指定した関数・メソッドが実行される。

get_user_setting（2022年1月31日更新）

mixed get_user_setting( string $name [ , string $default = false ] )

ユーザーインターフェイス設定を取得する。

have_posts（2018年5月27日更新）

bool have_posts( )

次の投稿データが存在するかを調べる。

in_category（2018年5月27日更新）

bool in_category( mixed $category [ , mixed $post = null ] )

投稿情報が指定したカテゴリーに属しているか調べる。

add_feed（2024年6月24日更新）

string add_feed( string $feedname, callable $callback )

フィードを追加する。

説明

favicon.ico に書き換える

関連

お勧め