【WordPress】カスタマイザーで設定したサイトアイコンからapple touch iconのタグを削除する方法

【WordPress】カスタマイザーで設定したサイトアイコンからapple touch iconのタグを削除する方法

2016.10.27

WordPress 4.3からテーマカスタマイザーにファビコンの設定ができる「サイトアイコン」という項目が追加されました。

管理画面から簡単にファビコンを変えられるようになった上、一緒にapple touch iconも出力してくれて便利極まりないのですが…

実は背景透過した画像を設定するとapple touch iconにちょっとした問題が起きることに気づきました。

今回は「ファビコンはテーマカスタマイザーの『サイトアイコン』で設定しつつ、apple touch iconは出力しない」というカスタマイズ方法を考えてみたお話です。

「サイトアイコン」で出力されるHTMLからapple touch iconを削除

よっひー(@yosiakatsuki)です。

WordPress 4.3からテーマカスタマイザーに追加された「サイトアイコン」

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" />

一見、便利そうな機能ですが、実は背景透過の画像を使うとちょっとした問題が起きます…

簡単な透過PNGを作成して検証します

試しに背景を透過した512pxの簡単なPNG画像を作って、サイトアイコンに設定してみます。

すると…

ファビコンは透過のほうが良いですが、apple touch iconが残念なことに!!

ファビコンはものすごいいい感じなのに…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用の項目を追加する方法については後日お話します。

ではまた。