【WP テーマカスタマイザーvol.5】登録した内容をテーマに反映(出力)する

カスタマイザー

ここでは、カスタマイザーで登録した内容を
テーマに呼び出したり、反映させる方法をご紹介します。

ワードプレスのテーマカスタマイズにオリジナル項目を追加した~
カスタマイザーから設定も出来た~\(^o^)/

でも、ページには、まだ何も反映されていない。。。

あと一息、表示させたいテンプレートに「呼び出し用のコード」を書いて、実際のページに反映 (出力) させて完成です!!

コードはコピペでOK^^ 自己責任でご利用下さいませm(__)m

テーマカスタマイズの登録内容を出力する

単純に呼び出すだけならとっても簡単!!
内容を反映させたいテンプレートの、呼び出したい部分 にコードを一行追加するだけ

[ setting ] 'type' ごとの出力コード

[ setting ] 'type'  に合わせて、呼び出し方を変えます

  • [ setting ] 'type' => 'option' にした場合
    <?php echo get_option( 'settingName' ); ?>
  • [ setting ] 'type' => 'theme_mod' にした場合
    <?php echo get_theme_mod( 'settingName' ); ?>

oprionなら get_option(); 、theme_modなら get_theme_mod();
「まんまじゃん」、、、ですが、結構ど忘れしやすい所、、かとw

シンプルな出力例

このように使います。。全部同じ~(笑

  • リンク先URL を登録 ( type => text )
    例:<a href="<?php echo get_theme_mod( 'settingName' ); ?>">どこかのリンク</a>

    結果 → <a href="登録したリンク先url">どこかのリンク</a>

  • 画像 を登録 ( メディアコントロール )
    例:<img src="<?php echo get_option( 'settingName' ); ?>" alt="何かの画像" />

    結果 → <img src="登録した画像のurl" alt="何かの画像" />
    ※メディアで画像を登録する際「画像サイズ指定」しておくと、そのサイズで出力されます。

  • カラー を登録 ( カラーピッカー )
    例:body {background-color: <?php echo get_theme_mod( 'settingName' ); ?>;}

    結果 → body {background-color: #選んだ色;}
    ※カラーピッカーで選んだ場合 " # " は自動的に付与されます。

  • description を登録 ( type => textarea )
    例:<meta name="description" content="<?php echo get_option( 'settingName' ); ?>" />

    結果 → <imeta name="description" content="登録したdescription" />

※Wordpressビルトインの「custom_logo」など、theme_modで保存されている一部の画像は「画像url」ではなく「ID」で保存されています。
この為 <?php echo get_option( 'settingName' ); ?> で呼び出すだけでは画像が表示されません。
このような場合は、カスタムロゴ(custom logo)を使ってサイトロゴを設置で呼び出し方法をご覧くださいm(__)m

テーマカスタマイズの出力を分岐する

「使わない時は出力させたくない!!」とか

cssを考えるとラッパーで囲っておきたいけど。。
「未利用時はラッパーごと消えてほしい!!」って思いますよね。

これも結構単純です^^

分岐用のコード

登録されていないと false が返ってきますので、それを利用して「checkbox」 や 「登録の有無」で分岐します。

登録があったら表示

これが一番簡単^^
その項目だけで完結する場合(画像、textareaなど)は、記入された時だけ表示するようにします。

<?php if ( get_option('表示したい項目 の settingName') ) { ?>
<div class="my-option">
    <?php echo get_option( '表示したい項目 の settingName' ); ?>
</div>
<?php } ?>

1行目 - 「この項目に中身が入っている」 と true になり、2行目以降が表示される。

checkboxにチェックが入っていたら表示

1行目の settingName を checkbox のものにするだけ。

<?php if ( get_option('checkbox の settingName') ) { ?>

1行目 - チェックされていると true になり、2行目以降が表示される。


checkboxでの分岐にすると、出力を明示的に切り替えらます。

複数の要素をまとめて、とか、何かの部品を用意した時など
「表示する? しない? 」を明確に指定したい時に便利な方法です^^

注: テーマカスタマイズは変更すると更新(refresh)されますが、checkboxでの分岐はプレビューに反映されないことがあります。(ブラウザを更新すると反映される)
descriptionに注意書きを入れておくなど、対策が必要かも、です。

コメント

ご意見ご感想お待ちしてます。

CAPTCHA


ありがとうございます。
コメントは承認後に掲載されます