【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 } ?>

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

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

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

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

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

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

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

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