考え方・ポイント
- 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 は時間がかかりましたけれども、今回はずっと短くできました。
テーマづくりがわかってきた、もしくは思い出してきたように感じます。
以上です。
「WordPress Twenty Nineteen 子テーマ作成。カスタマイザーで設定されていなければテーマデフォルトのロゴを表示する」への1件の返信
[…] WordPress Twenty Nineteen 子テーマ作成。カスタマイザーで設定されていなければテーマデフォルトのロゴを表示する – oki2a24 […]