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

スポンサードリンク


考え方・ポイント

  • Theme Logo « WordPress Codex
  • 公式ページの使い方を読み、親テーマの中でどのように使われているかを、公式ページで紹介されているメソッドや単語でグレップして調べる。
  • テーマロゴ、カスタムロゴ、という名前で検索するとよい。

実際に書いたコード

子テーマの functions.php に次を追加しました。

/**
 * デフォルトのテーマロゴを出力します。
 */
function the_theme_logo() {
  $url = home_url();
  $theme_url = get_stylesheet_directory_uri();
  echo <<<EOT
<a href="{$url}/" class="custom-logo-link" rel="home" itemprop="url"><img width="190" height="190" src="{$theme_url}/images/theme_logo.jpg" class="custom-logo" alt="test" itemprop="logo" srcset="{$theme_url}/images/theme_logo.jpg 190w, {$theme_url}/theme_logo-150x150.jpg 150w" sizes="(max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw / 12)), (min-width: 53rem) calc(6 * (100vw / 12)), 100vw" /></a>
EOT;
}

the_theme_logo() はヘッダー部分で使います。親テーマ Twenty Nineteen では、テーマロゴがあればそれを出力していますから、ない場合にデフォルトのテーマロゴを出力する the_theme_logo() を使用すればよさそうです。

そこで、親のそのテンプレートをコピーして、一部分のみ修正しました。差分は次のようになりました。

# diff -up /var/www/html/wp-content/themes/twentynineteen/template-parts/header/site-branding.php /var/www/html/wp-content/themes/oki2a24com-twentynineteen-child/template-parts/header/site-branding.php 
--- /var/www/html/wp-content/themes/twentynineteen/template-parts/header/site-branding.php	2019-03-02 06:32:40.335470000 +0000
+++ /var/www/html/wp-content/themes/oki2a24com-twentynineteen-child/template-parts/header/site-branding.php	2019-03-03 23:21:52.000000000 +0000
@@ -11,6 +11,8 @@
 
 	<?php if ( has_custom_logo() ) : ?>
 		<div class="site-logo"><?php the_custom_logo(); ?></div>
+	<?php else : ?>
+		<div class="site-logo"><?php the_theme_logo(); ?></div>
 	<?php endif; ?>
 	<?php $blog_info = get_bloginfo( 'name' ); ?>
 	<?php if ( ! empty( $blog_info ) ) : ?>
#

デフォルトロゴの準備は、 WordPress Twenty Nineteen 子テーマ作成。カスタマイザーで設定されていなければテーマデフォルトのサイトアイコンを表示する – oki2a24 でも行った方法を採りました。

つまり、実際にデフォルトロゴにしたい画像を WordPress にアップロードし、ロゴに設定し、そうするとロゴ用に加工された画像ファイルも生成されますので、一式を子テーマにコピーして使う、という方法です。

結果、次のファイルを子テーマに追加しました。

  • images/theme_logo-150×150.jpg
  • images/theme_logo.jpg

おわりに

前回の WordPress Twenty Nineteen 子テーマ作成。カスタマイザーで設定されていなければテーマデフォルトのサイトアイコンを表示する – oki2a24 は時間がかかりましたけれども、今回はずっと短くできました。

テーマづくりがわかってきた、もしくは思い出してきたように感じます。

以上です。

コメントを残す

コメントを残す