投稿画面でチェックを入れた記事だけ一覧表示させる

未分類

今回紹介するのは、こんなときに便利なカスタマイズです。

  • おすすめ記事を数件、上部に表示させたい
  • 選んだ記事だけ表示したい

したいこと

カスタムフィールドでチェックボックスを作成し、チェックの入った記事のみ表示(または非表示)させます。

必要なプラグイン「ACF(Advanced Custom Fields)」をインストール

プラグインの新規追加で、「Advanced Custom Fields」と検索、インストール後有効化します。

左のメニューに「カスタムフィールド」という項目が入ったら、プラグイン使用の準備は完了です。

ACFで真偽フィールドを作成

フィールドグループを新規追加し、任意のタイトルをつけます。
フィールドグループのタイトルは、投稿画面にこんな感じに表示される部分です。

今回使用するフィールドタイプは「選択肢」の「真/偽」というフィールドです。

表示させる投稿タイプを選択します。
今回はカスタム投稿タイプ「custom」に表示させるので、「投稿タイプ 等しい custom」にします。
固定ページや通常投稿の場合は、適宜選択してください。
頻繁に更新するような優先度の高いフィールドグループは、表示位置をタイトル下にしておくと、投稿者にも分かりやすいですね。

設定できたら、更新ボタンで保存します。
先程設定したとおり表示されていれば、これで準備は完了です。

実際に表示させてみる

index.phpに、カスタム投稿タイプ「custom」のチェックの入った記事のみ一覧表示させていきます。今回はページネーションは表示させず、1ページに全件表示させます。

<?php
  $paged = (int) get_query_var('paged');
  $args = array(
    'posts_per_page' => -1,
    'paged' => $paged,
    'post_type' => 'custom', // カスタム投稿タイプ名
    'post_status' => 'publish',
    'orderby' => 'date'
  );
  $the_query = new WP_Query($args);
?>
<?php if ( $the_query->have_posts() ): ?>
  <ul>
    <?php while ( $the_query->have_posts() ): $the_query->the_post(); ?>
      <?php
        $check = get_field('check'); // カスタムフィールド名
        if($check == 1): // チェックボックスが真(チェック有)の場合、以下を表示させる
      ?>
        <li>
          <article>
            <a href="<?php the_permalink() ?>">
              <div><?php the_title(); ?></div>
              <div>
                <?php the_post_thumbnail(); ?>
              </div>
            </a>
          </article>
        </li>
      <?php endif; ?>
    <?php endwhile; ?>
  </ul>
<?php else : ?>
  <p>記事はありません</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

でも上記コードだと、TOPページに3件表示させたい場合に、チェックの入っていないものがその3件から除外されます。例えば、3件中2件にチェックが入っていなかったら、1件しか表示されません。
そんなときは下記のコードを使用します。

<?php
  $args = array(
    'posts_per_page' => 3,
    'post_type' => 'custom', // カスタム投稿タイプ名
    'orderby' => 'date',
    'meta_query' => array(
      array(
         'key' => 'check', // カスタムフィールド名
         'value' => true,
      )
    )
  );
  $my_posts = get_posts($args);
  if( $my_posts):
?>
  <ul>
    <?php foreach ($my_posts as $post) : setup_postdata($post); ?>

      <li>
        <article>
          <a href="<?php the_permalink() ?>">
            <div><?php the_title(); ?></div>
            <div>
              <?php the_post_thumbnail(); ?>
            </div>
          </a>
        </article>
      </li>
    <?php endforeach; ?>
    <?php wp_reset_postdata(); ?>
  <?php else : ?>
    <p>記事はありません</p>
  <?php endif; ?>
タイトルとURLをコピーしました