【WordPress】テーマカスタマイザーでファビコンとapple touch iconを別々に設定できるようにするカスタマイズ

【WordPress】テーマカスタマイザーでファビコンとapple touch iconを別々に設定できるようにするカスタマイズ

先日「テーマカスタマイザーのサイトアイコンの設定で透過画像を指定すると、apple touch iconが大変なことになった」という話をしました。

正直、「そんなものテーマカスタマイザーではなく、テーマの中に画像含めてテンプレートで指定すればいい話でしょ」…と思うのですが、

まぁまぁ、そう言わずに。

なんとかテーマカスタマイザー側でファビコンもapple touch iconも設定できるようにするカスタマイズ方法を考えてみました。

テーマカスタマイザーでファビコンとapple touch iconを別々に指定できるようにしてみる

よっひー(@yosiakatsuki)です。

前回、サイトアイコンを設定すると出力されるHTMLタグからapple touch iconを削除する方法を紹介しました。

今回はこの続きになります!

apple touch iconの出力を削除しっぱなしにするのはどうかと思うので、設定項目追加してみました。

apple touch icon用の設定項目を追加する

いきなりコードから

//-----------------------------------------------
//  apple touch icon設定追加
//-----------------------------------------------
function ys_sie_add_apple_touch_icon($wp_customize) {

  // サイトアイコンの説明を変更
  $wp_customize->get_control('site_icon')->description = sprintf(
    'ファビコン用の画像を設定して下さい。縦横%spx以上である必要があります。',
    '<strong>512</strong>'
  );

  // apple touch icon用設定追加
  $wp_customize->add_setting( 'ys_apple_touch_icon', array(
    'type'       => 'option',
    'capability' => 'manage_options',
    'transport'  => 'postMessage',
  ) );

  // apple touch icon用コントロール
  $wp_customize->add_control( new WP_Customize_Site_Icon_Control( $wp_customize, 'ys_apple_touch_icon', array(
    'label'       => 'apple touch icon',
    'description' => sprintf(
      'apple touch icon用の画像を設定して下さい。縦横%spx以上である必要があります。',
      '<strong>512</strong>'
    ),
    'section'     => 'title_tagline',
    'priority'    => 61,
    'height'      => 512,
    'width'       => 512,
  ) ) );
}
add_action('customize_register', 'ys_sie_add_apple_touch_icon');

上記コードでテーマカスタマイザーにapple touch icon用の設定を追加と元々あったサイトアイコンの説明を変更します。

WP_Customize_Site_Icon_Controlを使うと、選択したが画像からいい感じのサイズの画像を自動で作ってくれるし、ファビコンとapple touch iconのプレビューが見れるようになるのでサイトアイコンの真似して使ってみました。

wp_headでapple touch iconのHTMLタグを出力する

//------------------------------------------------------------------------------
//  apple touch iconを取得
//------------------------------------------------------------------------------
function ys_sie_get_site_icon_url( $size = 512, $url = '', $blog_id = 0 ) {
  if ( is_multisite() && (int) $blog_id !== get_current_blog_id() ) {
    switch_to_blog( $blog_id );
  }

  $site_icon_id = get_option( 'ys_apple_touch_icon' );

  if ( $site_icon_id ) {
    if ( $size >= 512 ) {
      $size_data = 'full';
    } else {
      $size_data = array( $size, $size );
    }
    $url = wp_get_attachment_image_url( $site_icon_id, $size_data );
  }

  if ( is_multisite() && ms_is_switched() ) {
    restore_current_blog();
  }

  return $url;
}

//-----------------------------------------------
//  apple touch icon設定を出力
//-----------------------------------------------
function ys_sie_apple_touch_icon() {
  if ( ! (bool)ys_sie_get_site_icon_url(512, '') && ! is_customize_preview() ) {
    return;
  }

  echo '<link rel="apple-touch-icon-precomposed" href="'.esc_url( ys_sie_get_site_icon_url( 180 )).'" />'.PHP_EOL;
  echo '<meta name="msapplication-TileImage" content="'.esc_url( ys_sie_get_site_icon_url( 270 ) ).'" />'.PHP_EOL;
}
add_action('wp_head', 'ys_sie_apple_touch_icon',100);

テーマカスタマイザーに設定した画像URLを取得する関数と、そのURLを使ってhead内にapple touch iconのHTMLタグを出力する関数を作ります。

wp_headへの出力順は100にしました。これは、サイトアイコンの出力順が99になっていたからです。(テーマに書くなら99でもいいかも)

<link rel="icon" href="[画像保存先までのURL]/cropped-toumei-32x32.png" sizes="32x32" />
<link rel="icon" href="[画像保存先までのURL]/cropped-toumei-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="[画像保存先までのURL]/cropped-haikei-180x180.png" />
<meta name="msapplication-TileImage" content="[画像保存先までのURL]/cropped-haikei-270x270.png" />

これでファビコンとapple touch iconの画像を別々に指定できるようになりました!

テーマカスタマイザーのプレビューも変更

細かい点になりますが、サイトアイコンの設定項目のところにはファビコンとapple touch iconの両方がプレビュー表示されています。

それぞれ該当する画像プレビューだけ表示するようにしていきます。

//------------------------------------------------------------------------------
//  管理画面-テーマカスタマイザーページでのスタイルシートの読み込み
//------------------------------------------------------------------------------
function ys_sie_customizer_styles($hook_suffix){
  wp_enqueue_style( 'ys_customizer_style',  get_template_directory_uri().'/css/ys-site-icon-extension.css' );
}
add_action('customize_controls_print_styles', 'ys_sie_customizer_styles');

上のコードでテーマカスタマイザーの表示中に自分で作ったCSSを読み込まれるようにします。

#customize-control-site_icon .app-icon-preview {
  display: none;
}

#customize-control-ys_apple_touch_icon .favicon-preview {
  display: none;
}

あとはCSSでファビコン設定側のapple touch iconのプレビューを非表示にして、apple touch icon設定側のファビコンのプレビューを非表示にして完了!

ファビコンの設定とapple touch iconの設定が別々になりました!

テーマカスタマイザーはこんな感じになりました!

これまでの機能をプラグイン化してみた

で、今回のカスタマイズ内容をWordPressプラグインの作り方のお勉強も兼ねてプラグイン化してみました。

WordPress公式ディレクトリに入れるつもりはなかったので、「動けばいいや」って感じで作ってますが、もしよろしかったら参考にしてみて下さい。

もし使う場合は右上の「Clone or Download」から「Download Zip」でZIPをダウンロードして、WordPress管理画面のプラグイン新規追加から「ファイルをアップロード」をクリックしてダウンロードしたzipファイルをアップロードすればインストールできます。

よっしーのひとこと

よっひー

実用性があるかについては考えないとして、色々勉強になりました!

ではまた。