[WordPress]テーマカスタマイザー(背景画像やヘッダー画像など簡易なモノ)の設定値を取得・判定し条件分岐させる方法

  • 更新日:
  • 公開日:

WordPress3.4から追加されたテーマカスタマイザー機能(テーマカスタマイズAPI)は直感的にテーマを弄ることができて便利ですし楽しいです。

しかし機能追加する側としては大変な面があり、対応するならばテーマのテンプレートファイルに記述するコード量は増えます。

この実装する機能の中で特に多いのは「カスタム背景画像・色」、「カスタムヘッダー」「カスタムロゴ」でしょうか。これらが設定されているかどうかを判定し、条件分岐する方法をメモします。

(テーマカスタマイザー実装の参考としてCodexのページを張っておきます:「テーマカスタマイズ API – WordPress Codex 日本語版」「関数リファレンス/add theme support – WordPress Codex 日本語版」)

テーマカスタマイザーの設定値を取得し判定、条件分岐させる

カスタム背景・色やカスタムヘッダーはadd_theme_support()で機能追加しますが、これで追加したテーマカスタマイザーの設定値はget_theme_mod()で統一して取得できます。が、もっと新しい専用の取得関数が各々で用意されているので、こちらを使ってみます。

カスタム背景画像・背景色

背景画像と色はget_background_image()get_background_color()で取得できます。これらの設定は埋め込みCSSの出力なので、特に条件分岐をしたくなる状況が多いのではないでしょうか。以下のようにして条件分岐してみましょう。

<?php if ( get_background_image() ) : ?>
    <!-- 背景画像が設定されている場合の処理 -->
<?php else : ?>
    <!-- 背景画像が設定されていない場合の処理 -->
<?php endif; ?>

<?php if ( get_background_color() ) : ?>
    <!-- 背景色が設定されている場合の処理 -->
<?php else : ?>
    <!-- 背景色が設定されていない場合の処理 -->
<?php endif; ?>

これで背景画像や背景色が設定されている場合でも、コンテンツ部分だけは背景色を白にして見やすくする、といったことができるようになります。

カスタムヘッダー

カスタムヘッダーはWordPress 4.7から動画にも対応するようになりました。画像と動画を両方設定できるようになっているせいか、関数の作りや名前が背景画像(背景色)と若干違っています。画像はhas_header_image()で、動画はhas_header_video()で設定されているかチェックできます。が、これら両方の設定をまとめてチェックしてくれるhas_custom_header()を使う方が良いでしょう。以下のようにして条件分岐してみます。

<?php if ( has_custom_header() ) : ?>
    <!-- カスタムヘッダーが設定されている場合の処理 -->
 <?php the_custom_header_markup(); ?>

<?php else : ?>
    <!-- カスタムヘッダーが設定されていない場合の処理 -->
<?php endif; ?>

カスタムヘッダーの画像だけを出力する関数などもありますが、設定された動画の表示には必要なスクリプトがあります。なのでカスタムヘッダーの出力にはthe_custom_header_markup()を使います。この関数ならカスタムヘッダーが動画の場合、必要なスクリプトを自動的に読み込んでHTMLタグを出力してくれます

※記事内容とは違いますが、カスタムヘッダーに動画も設定した場合は「画像表示 > 読み込み完了後動画表示」という順になるようです。必要なCSSもあるようで、「WordPress テーマカスタマイザーで動画を追加して出力(ver 4.7以降の場合) – Qiita」が参考になります。

カスタムロゴ

カスタムロゴは単純にhas_custom_logo()で設定されているかを判定できます。以下のように条件分岐をします。

<?php if ( has_custom_logo() ) : ?>
    <!-- カスタロゴが設定されている場合の処理 -->
 <?php the_custom_logo(); ?>

<?php else : ?>
    <!-- カスタロゴが設定されていない場合の処理 -->
<?php endif; ?>

以上です。

おまけ:機能がサポートされているかを判定

サポートした機能を一時的に(コメントアウトなどで)解除したとしても、一度設定した値は消えません。なので、特に開発中などであれば以下のように追加の条件を入れる方が得策でしょう。

<?php
// get_theme_support()も追加条件として加える
if ( has_custom_header() && get_theme_support( 'custom-header' ) ) {
 the_custom_header_markup();
} ?>

コメントでも書いていますが、get_theme_support()にサポート機能の文字列を引数で指定して条件分岐に追加しておきます。こうすると完全な判定になりますね。


余談ですが、WordPress 4.7になってからadd_theme_support()で新たに「starter-content」が使えるようになりましたね(公式ブログ参照)。ひな形を用意すればテーマ開発の効率がまた上がるのではないでしょうか。

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone