今回紹介するのは、こんなときに便利なカスタマイズです。
- おすすめ記事を数件、上部に表示させたい
- 選んだ記事だけ表示したい
目次
したいこと
カスタムフィールドでチェックボックスを作成し、チェックの入った記事のみ表示(または非表示)させます。
必要なプラグイン「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; ?>
コメント