カテゴリー
WordPress

WordPress Twenty Nineteen 子テーマ作成。カスタマイザーで設定されていなければテーマデフォルトのサイトアイコンを表示する

はじめに

  • サイトアイコンというのは、ファビコンのことです。
  • カスタマイズ > サイト基本情報 > サイトアイコン、でファビコンを設定できますけれども、これが設定されていなければテーマデフォルトのサイトアイコンを表示する。

コード

サイトアイコン用の画像を次のように用意しました。

images/cropped-site_icon-150x150.jpg
images/cropped-site_icon-180x180.jpg
images/cropped-site_icon-192x192.jpg
images/cropped-site_icon-270x270.jpg
images/cropped-site_icon-300x300.jpg
images/cropped-site_icon-32x32.jpg
images/cropped-site_icon.jpg

子テーマの functions.php に次のように記述して、実現できました。

/**
 * デフォルトのサイトアイコンを設定します。
 * カスタマイザーで設定された場合はそちらを使用します。
 */
function filter_site_icon_meta_tags() {
  if (has_site_icon()) {
    return;
  }

  $url = get_stylesheet_directory_uri();
  // 出力される HTML ソースコードを見やすくするめに、最後に空白行を設置
  echo <<<EOT
<link rel="icon" href="{$url}/images/cropped-site_icon-32x32.jpg" sizes="32x32" />
<link rel="icon" href="{$url}/images/cropped-site_icon-192x192.jpg" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="{$url}/images/cropped-site_icon-180x180.jpg" />
<meta name="msapplication-TileImage" content="{$url}/images/cropped-site_icon-270x270.jpg" />

EOT;
}
add_filter('wp_head', 'filter_site_icon_meta_tags');

補足。どうやってサイトアイコンの HTML レンダリングに介入すればよいか

ネットで調べても全然判りませんでしたけれども、親テーマである Twenty Nineteen を見ますとあっさり判りました。

twentynineteen/functions.php

/**
 * Display custom color CSS in customizer and on frontend.
 */
function twentynineteen_colors_css_wrap() {

	// Only bother if we haven't customized the color.
	if ( 'default' === get_theme_mod( 'primary_color', 'default' ) && ! twentynineteen_has_custom_default_hue() ) {
		return;
	}

	require_once get_parent_theme_file_path( '/inc/color-patterns.php' );

	$primary_color = twentynineteen_get_default_hue();
	if ( 'default' !== get_theme_mod( 'primary_color', 'default' ) ) {
		$primary_color = get_theme_mod( 'primary_color_hue', $primary_color );
	}
	?>

	<style type="text/css" id="custom-theme-colors" <?php echo is_customize_preview() ? 'data-hue="' . absint( $primary_color ) . '"' : ''; ?>>
		<?php echo twentynineteen_custom_colors_css(); ?>
	</style>
	<?php
}
add_action( 'wp_head', 'twentynineteen_colors_css_wrap' );

なるほど。

  • wp_head に add_action フックすればよい。
  • echo などで出力すれば、 <head> に出力される。

補足。サイトアイコンが設定されているかどうかの判断

これも検索に結構時間がかかりました＞＜。たどり着いた個人サイトと、公式ページも載せておきます。

出力するサイトアイコン HTML を調べる

サイトアイコンがカスタマイザーで設定されていなければ、サイトアイコンの HTML を出力するわけですが、できるだけ元々の出力に合わせようと思い、調べました。

確認してみますと、ただ単に最後に改行コードを加えてから echo しているだけです。

よって、私もただ単に echo するようにしました。ただ、 4 行分ありますので、それを毎回改行コードをつけて echo するのは面倒でした。

そこで、ヒアドキュメント構文を使って出力するようにしました。

補足。 URL の取得

子テーマの URL が欲しいので、 get_stylesheet_directory_uri() を使います。 WordPress はいくつか URL の取得方法があり、落ち着いて整理しないと欲しいものが取れません。

補足。サイトアイコンの作成方法

デフォルトのサイトアイコンを用意しなければなりません。画像は用意しました。

これを元に、様々なサイズのアイコン画像を用意するのでしょうか？。。。面倒ですね＞＜。嫌ですね＞＜。

を見ると、次のようにあります。

WordPress Version 4.3 では Web サイトでの favicon の使用をサポートするサイトアイコン機能が実装されました。favicon を使用する場合は以下のセクションでの説明ではなく、サイトアイコン機能を使用してください。favicon.ico ファイルを自分で作成したり、テンプレートを変更する必要はなく、カスタマイザー画面から縦横512ピクセル以上の正方形の画像を指定すれば済みます。

これを利用しました♪

  1. カスタマイズ > サイト基本情報 > サイトアイコン、から 512 px x 512 px の画像をアップロード
  2. アップロードされ、加工されたサイトアイコン画像をコピーして取得

できあがったサイトアイコンは複数あります。子テーマのディレクトリにそのまま置きたくありません。どのようなディレクトリを作り、置くのがふさわしいでしょうか？

Twenty Nineteen テーマ、そして過去の Twenty Seventeen 、 Twenty Sixteen 、 を見てみました。

  • Twenty Nineteen: ルートディレクトリに、 js/ 、 sass/ ディレクトリ
  • Twenty Seventeen: assets/ dhirekutorini、 css/ 、 images/ 、 js/
  • Twenty Sixteen: ルートディレクトリに、 css/ 、 js/ ディレクトリ

これを見て、ルートディレクトリに images/ ディレクトリを用意し、ここに入れることにしました。

おわりに

デフォルトのサイトアイコンがなければ子テーマで用意したデフォルトのサイトアイコンを設定する、というあまり難しくなさそうな話なのですが、苦労しました＞＜。

わかってしまえば、短く、他とは分離した形で書けましたので、やっぱり WordPress 忘れているな、、、という印象です。

年に 1 回、子テーマづくりでいじる程度だと、やっぱり勘所は忘れ去られ、思い出すまでに時間が掛かってきますね。いじるペースをあげていこうとも思いませんので、仕方ないと割り切っています。

以上です。

「WordPress Twenty Nineteen 子テーマ作成。カスタマイザーで設定されていなければテーマデフォルトのサイトアイコンを表示する」への1件の返信

コメントを残す