WordPressテーマSANGOの質問

記事によっては、異なったCTAを表示させたい

アバター
ルネサス

CTAなんですが、基本はどの記事にも同じCTAでいいのですが、あるカテゴリだけ別のCTAを表示させたり、ある記事だけ個別のCTAを表示させたりしたいのですが、そのような事はできないものでしょうか?
カスタマイズのヒントだけでも教えて頂けますと嬉しいです。

カスタマイザーでデザイン設定
カスタマイザーでデザインや細かな設定をしよう
コメントへの回答
サルワカくん
サルワカくん
2019/04/06

CTAを増やすと、データベースが肥大化しちゃいやすいので標準では1つのみとしています。
カテゴリーごとに出し分けるためには、子テーマでのカスタマイズが必要です。

CTAを出力するのはinsert_ctaという関数なので子テーマのfunctions.phpにてこれを書き換えます。
WordPressのin_category()という条件分岐の関数を使えば「特定のカテゴリーに該当する記事のみ」という条件分岐が可能です。
参考:便利なWordPressの条件分岐16パターン

具体的には、以下のようにCTA1とCTA2を作成し、if(in_category(表示させたいカテゴリーIDをarrayで指定))で、カテゴリー別に表示を切り分けるようにします。
コードの中のカテゴリーIDやテキストや画像URLなど(★の部分)は手書きで修正する必要があります。
テーマ本体の機能を上書きすることになるので、カスタマイザーで入力したテキストや選択画像は無視され、★の部分に入力したテキストが出力されるようになります。

function insert_cta()
  {
    if (!get_option('enable_cta')) return;
    $exclude_cat = explode(',', get_option('no_cta_cat'));
    if (!in_category($exclude_cat)) return;
?>
<!--CTA1-->
<?php if(in_category( array('★カテゴリーID(半角数字)★', '★カテゴリーID(半角数字)★') )) : ?>
  <div class="cta" style="background: <?php echo get_theme_mod('cta_background_color', '#c8e4ff'); ?>;">
    <h3 style="color: <?php echo get_theme_mod('cta_bigtxt_color', '#333'); ?>;">
      ★見出し★
    </h3>
    <p class="cta-img">
      <img src="★画像URL★" />
    </p>
    <p class="cta-descr" style="color: <?php echo get_theme_mod('cta_smltxt_color', '#333'); ?>;">
      ★文章★
    </p>
    <p class="cta-btn">
      <a class="raised" href="★ボタンのリンク先URL★" style="background: <?php echo get_theme_mod('cta_btn_color', '#ffb36b'); ?>;">★ボタンテキスト★</a>
    </p>
  </div>
<?php endif; ?>
<!--END CTA1-->

<!--CTA2-->
<?php if(in_category( array('★カテゴリーID(半角数字)★', '★カテゴリーID(半角数字)★') )) : ?>
  <div class="cta" style="background: <?php echo get_theme_mod('cta_background_color', '#c8e4ff'); ?>;">
    <h3 style="color: <?php echo get_theme_mod('cta_bigtxt_color', '#333'); ?>;">
      ★見出し★
    </h3>
    <p class="cta-img">
      <img src="★画像URL★" />
    </p>
    <p class="cta-descr" style="color: <?php echo get_theme_mod('cta_smltxt_color', '#333'); ?>;">
      ★文章★
    </p>
    <p class="cta-btn">
      <a class="raised" href="★ボタンのリンク先URL★" style="background: <?php echo get_theme_mod('cta_btn_color', '#ffb36b'); ?>;">★ボタンテキスト★</a>
    </p>
  </div>
<?php endif; ?>
<!--END CTA2-->

<?php
  }

よろしくおねがいします。