WordPressで出力されるサイトアイコン（ファビコン等）タグをカスタマイズする方法

先日、Wordpressテーマ関係のことをしていて、サイトアイコン出力を変更する必要が出てきました。

サイトアイコンというのは、Wordpressテーマカスタマイザーの「サイト基本情報」項目にある「サイトアイコン」設定項目にある設定です。

これを設定すると、以下のようなソースコードが出力されます。

<link rel="icon" href="http://127.0.0.1:81/wordpress/wp-content/uploads/2018/01/cropped-free_1-1-32x32.jpg" sizes="32x32" />
<link rel="icon" href="http://127.0.0.1:81/wordpress/wp-content/uploads/2018/01/cropped-free_1-1-192x192.jpg" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="http://127.0.0.1:81/wordpress/wp-content/uploads/2018/01/cropped-free_1-1-180x180.jpg" />
<meta name="msapplication-TileImage" content="http://127.0.0.1:81/wordpress/wp-content/uploads/2018/01/cropped-free_1-1-270x270.jpg" /

デフォルトで出力されているのは以下の4つのタグ。

1. ファビコン32×32px
2. ファビコン192×192px
3. アップルタッチアイコン180×180px
4. MicroSoftアプリケーションタイルイメージ270×270px

以下では、このサイトアイコン出力タグのカスタマイズ方法の紹介です。

サイトアイコン出力タグのカスタマイズ

サイトアイコンの出力をカスタマイズするには、functions.php等に以下のようにコピペして関数内を編集する必要があります。

//サイトアイコン出力の変更
add_filter('site_icon_meta_tags', 'filter_site_icon_meta_tags');
function filter_site_icon_meta_tags($meta_tags) {
  return $meta_tags;
}

利用するのは「site_icon_meta_tags」フィルターフックです。

関数の引数$meta_tagsの中身は、以下のような配列になっています。

array(4) {
  [0]=>
  string(124) "<link rel="icon" href="http://127.0.0.1:81/wordpress/wp-content/uploads/2018/01/cropped-free_1-1-32x32.jpg" sizes="32x32" />"
  [1]=>
  string(128) "<link rel="icon" href="http://127.0.0.1:81/wordpress/wp-content/uploads/2018/01/cropped-free_1-1-192x192.jpg" sizes="192x192" />"
  [2]=>
  string(136) "<link rel="apple-touch-icon-precomposed" href="http://127.0.0.1:81/wordpress/wp-content/uploads/2018/01/cropped-free_1-1-180x180.jpg" />"
  [3]=>
  string(135) "<meta name="msapplication-TileImage" content="http://127.0.0.1:81/wordpress/wp-content/uploads/2018/01/cropped-free_1-1-270x270.jpg" />"
}

n番目のタグを出力しないカスタマイズ

なので、4番目（インデックス番号で3番目）の「meta name=”msapplication-TileImage”」タグを出力したくない場合は、以下のように書けばOKです。

//サイトアイコン出力の変更
add_filter('site_icon_meta_tags', 'filter_site_icon_meta_tags');
function filter_site_icon_meta_tags($meta_tags) {
  //配列の一部を削除
  array_splice($meta_tags, 3);
  return $meta_tags;
}

すると、以下のように最後のタグが出力されません。

<link rel="icon" href="http://127.0.0.1:81/wordpress/wp-content/uploads/2018/01/cropped-free_1-1-32x32.jpg" sizes="32x32" />
<link rel="icon" href="http://127.0.0.1:81/wordpress/wp-content/uploads/2018/01/cropped-free_1-1-192x192.jpg" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="http://127.0.0.1:81/wordpress/wp-content/uploads/2018/01/cropped-free_1-1-180x180.jpg" />

サイトアイコンを全て出力させないカスタマイズ

全てのサイトアイコン出力させたくない場合は、以下のように返り値に空の配列を渡します。

//サイトアイコン出力の変更
add_filter('site_icon_meta_tags', 'filter_site_icon_meta_tags');
function filter_site_icon_meta_tags($meta_tags) {
  return array();
}

このように書くことで、全てのサイトアイコン出力を打ち消すことができます。

まとめ

今回のカスタマイズは、主に「サイトアイコン機能を自前で実装する」といった用途向けです。

例えば、「サイトアイコンが設定されていなかったら、あらかじめ用意してあるデフォルト画像を指定して出力する」みたいなカスタマイズとか。

普通にWordPressを利用してサイトアイコンを設定している分には、デフォルトの機能で十分すぎるので、カスタマイズの必要はないかと思います。