先日、Wordpressテーマ関係のことをしていて、サイトアイコン出力を変更する必要が出てきました。
サイトアイコンというのは、Wordpressテーマカスタマイザーの「サイト基本情報」項目にある「サイトアイコン」設定項目にある設定です。
これを設定すると、以下のようなソースコードが出力されます。
|
1 2 3 4 |
<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つのタグ。
- ファビコン32×32px
- ファビコン192×192px
- アップルタッチアイコン180×180px
- MicroSoftアプリケーションタイルイメージ270×270px
以下では、このサイトアイコン出力タグのカスタマイズ方法の紹介です。
スポンサーリンク
サイトアイコン出力タグのカスタマイズ
サイトアイコンの出力をカスタマイズするには、functions.php等に以下のようにコピペして関数内を編集する必要があります。
|
1 2 3 4 5 |
//サイトアイコン出力の変更 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の中身は、以下のような配列になっています。
|
1 2 3 4 5 6 7 8 9 10 |
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です。
|
1 2 3 4 5 6 7 |
//サイトアイコン出力の変更 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; } |
すると、以下のように最後のタグが出力されません。
|
1 2 3 |
<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" /> |
サイトアイコンを全て出力させないカスタマイズ
全てのサイトアイコン出力させたくない場合は、以下のように返り値に空の配列を渡します。
|
1 2 3 4 5 |
//サイトアイコン出力の変更 add_filter('site_icon_meta_tags', 'filter_site_icon_meta_tags'); function filter_site_icon_meta_tags($meta_tags) { return array(); } |
このように書くことで、全てのサイトアイコン出力を打ち消すことができます。
配列を返さないとPHP警告が出ます。
まとめ
今回のカスタマイズは、主に「サイトアイコン機能を自前で実装する」といった用途向けです。
例えば、「サイトアイコンが設定されていなかったら、あらかじめ用意してあるデフォルト画像を指定して出力する」みたいなカスタマイズとか。
普通にWordPressを利用してサイトアイコンを設定している分には、デフォルトの機能で十分すぎるので、カスタマイズの必要はないかと思います。
