WordPress 4.3からテーマカスタマイザーにファビコンの設定ができる「サイトアイコン」という項目が追加されました。
管理画面から簡単にファビコンを変えられるようになった上、一緒にapple touch iconも出力してくれて便利極まりないのですが…
実は背景透過した画像を設定するとapple touch iconにちょっとした問題が起きることに気づきました。
今回は「ファビコンはテーマカスタマイザーの『サイトアイコン』で設定しつつ、apple touch iconは出力しない」というカスタマイズ方法を考えてみたお話です。
「サイトアイコン」で出力されるHTMLからapple touch iconを削除
よっひー(@yosiakatsuki)です。
WordPress 4.3からテーマカスタマイザーに追加された「サイトアイコン」
管理画面で設定するだけで次の4つのようなHTMLタグを出力してくれます。
<link rel="icon" href="[画像保存先までのURL]/cropped-testsitelogo-1-32x32.png" sizes="32x32" />
<link rel="icon" href="[画像保存先までのURL]/cropped-testsitelogo-1-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="[画像保存先までのURL]/cropped-testsitelogo-1-180x180.png" />
<meta name="msapplication-TileImage" content="[画像保存先までのURL]/cropped-testsitelogo-1-270x270.png" />一見、便利そうな機能ですが、実は背景透過の画像を使うとちょっとした問題が起きます…
試しに背景を透過した512pxの簡単なPNG画像を作って、サイトアイコンに設定してみます。
すると…
ファビコンはものすごいいい感じなのに…apple touch iconは透明部分が黒くなってしまい、なんか恐ろしいアイコンに…！
…ということで、サイトアイコンの設定で出力されるHTMLタグからapple touch icon部分を消してみます。
サイトアイコンを設定すると出力されるHTMLタグからapple touch iconを削除する
出力されるファビコンとapple touch iconのHTMLタグを変えるためにsite_icon_meta_tagsフィルターフックを追加し、内容を上書きします。
下記のコードをfunctions.phpに追記します。
function my_site_icon_meta_tags($meta_tags) {
$meta_tags = array(
sprintf( '<link rel="icon" href="%s" sizes="32x32" />', esc_url( get_site_icon_url( 32 ) ) ),
sprintf( '<link rel="icon" href="%s" sizes="192x192" />', esc_url( get_site_icon_url( 192 ) ) )
);
return $meta_tags;
}
add_filter( 'site_icon_meta_tags', 'my_site_icon_meta_tags' );wp_site_icon関数の中身をコピーしてきてapple touch iconの部分を削除しただけという簡単なものですが、ひとまずコレでやりたいことは出来ました。
あとはapple touch icon用の設定項目をテーマカスタマイザーに追加して出力するなり、テンプレートにHTMLタグを直接書いたりしてapple touch iconのHTMLタグを出力してあげればOKでしょうか。
テーマカスタマイザー側にapple touch icon用の項目を追加する方法については後日お話します。
ではまた。