カスタマイザーにおすすめ記事表示項目を追加する

カスタマイザーにおすすめ記事表示項目を追加する

カスタマイザーをそれぞれのサイトに合った仕様にカスタムできると、更新の難易度が下がりますし、クライアントが記事更新などを行うようなwordoress案件の場合は、カスタマイザーのカスタムは必須になってきます。

この記事ではカスタマイザーにおすすめ記事表示機能を追加する方法を紹介していきます。

仕様

主な仕様は以下の3つです。

  1. おすすめ記事を表示する、しないをチェックボックスで管理
  2. おすすめ記事は投稿、カスタム投稿の公開中のもの全記事から選択できる
  3. 「おすすめ記事を表示する」がチェック済みでも、おすすめ記事が選択されていなかったら、おすすめ記事を表示しない

当サイトのカスタマイザーの画面をキャプチャしてますので、大体のイメージをこれで持ってください。

カスタマイズ画面1
カスタマイズ画面1
カスタマイズ画面2

こんな感じのものができるんだな、ぐらいの感じで理解してもらえれば大丈夫です。

functions.phpのコード

説明はコードの中に書いてあるとおりです。
20行目の記事の設定値を色々知りたい場合は、WordPress Codex 日本語版を見てみてください。

コードをクリップボードにコピー
function theme_customize_register($wp_customize) {
  // おすすめ記事の項目をカスタマイズ画面に追加
  $wp_customize->add_section( 'recommend_posts', array(
      'title'    => 'おすすめ記事',
      'priority' => 100,
  ));
  // おすすめ記事を表示するチェックボックス
  $wp_customize->add_setting('recommend_posts_check', array(
    'default'   => '',
    'type' => 'option',
    'transport' => 'postMessage',
  ));
  $wp_customize->add_control( 'recommend_posts_check', array(
    'settings' => 'recommend_posts_check',
    'label' => 'おすすめ記事を表示する',
    'section' => 'recommend_posts',
    'type' => 'checkbox',
  ));  

  // おすすめ記事として選択できる記事の設定
  $args = array(
    'post_type' => array('post','custom_post_type'),  // 「custom_post_type」はそれぞれ制作したカスタム投稿のpost_type
    'post_status' => 'publish',                       // 公開中のものだけ
    'posts_per_page' => -1                            // 全記事から選択。例えば最新記事10件の中から選択の場合は「10」
  );
  // 記事の取得
  $my_posts = get_posts($args);
  // $selectmenuを生成。初期値nullの場合を最初に$selectmenuに入れておく。
  $selectmenu[''] = '記事を選んでください';
  // $selectmenu の中に $my_posts に入っている記事をforeachで追加していく。
  foreach( $my_posts as $my_post ){
    $selectmenu[$my_post->ID] = $my_post->post_title;
  }
  // 表示したいおすすめ記事の記事数を $display_posts_count に入れる
  $display_posts_count = 3;
  for($i = 1 ; $i < $display_posts_count + 1 ; $i++):
    $wp_customize->add_setting('recommend_posts_select'.$i, array(
      'default'   => '',
      'type' => 'option',
      'transport' => 'postMessage',
    ));  
    $wp_customize->add_control( 'recommend_posts_select'.$i, array(
      'settings' => 'recommend_posts_select'.$i,
      'label' => 'おすすめ記事'.$i.'を選択する',
      'section' => 'recommend_posts',
      'type' => 'select',
      'choices'    => $selectmenu,
    ));  
  endfor;
}
add_action( 'customize_register', 'theme_customize_register' );

フロント側のコード

こちらは出力側のコードです。
気をつけるところは3行目の $recommend_posts_count は functions.phpの $display_posts_count と同じ数字するところです。
実際に出力している箇所は13~30行目ですが、それぞれの記事を出力をしているのは21~28行目のforeach文内です。

コードをクリップボードにコピー
<?php 
  $recommend_bollean = get_option( 'recommend_posts_check');
  $recommend_posts_count = 3;  //functions.php の $display_posts_count と同じ数字にする
  $recommend_posts = array();
  echo '<!--'.count($recommend_posts).'-->';
  for( $i = 1; $i < $recommend_posts_count + 1; $i++ ):
    array_push($recommend_posts,get_option( 'recommend_posts_select'.$i));
  endfor;
  $recommend_posts = array_filter( $recommend_posts, "strlen" );

  if( $recommend_bollean && ( count($recommend_posts) > 0 )):
?>
  <h4>おすすめ記事</h4>
  <ul>
    <?php
      foreach( $recommend_posts as $recommend_post ):
      if( $recommend_post ):
      $my_post = get_post($recommend_post);
      if( $my_post->post_status == 'publish'):
    ?>
      <li>
        <a href="<?php the_permalink( $my_post->ID ) ?>">
          <?php if( has_post_thumbnail( $my_post->ID ) ): ?>
            <img src="<?php echo get_the_post_thumbnail_url( $my_post->ID, 'full');  ?>" alt="<?php echo $my_post->post_title?>" />
          <?php endif; ?>
          <span><?php echo $my_post->post_title?></span>
        </a>
      </li>
    <?php endif;endif;endforeach; ?>
  </ul>
<?php endif; ?>

ちなみに

functions.php、フロント側コードで$my_postという変数を用いている箇所があります。
通常は$postで書く人が多いと思いますが、グローバル変数の$postが書き換えられる場合があるため、私は$postを使っていないです。
これで何度か痛い目に遭ったので、気をつけてください。

arrow_circle_up