今回紹介するのは、こんなときに便利なカスタマイズです。
- おすすめ記事を数件、上部に固定表示させたい
- 選んだ記事だけ表示したい
目次
作成の流れ
- プラグイン「ACF（Advanced Custom Fields）」をインストール
- カスタムフィールドでチェックボックスを作成
- 投稿画面にフィールドを表示させる
- チェックボックスにチェックの入った記事のみ、指定位置に表示させる
カスタムフィールドのプラグイン「ACF（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', // カスタム投稿タイプ名
'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件表示させたい場合に、チェックの入っていないものは表示されません。
例えば、1件しかチェックが入っていなかったら、その1件しか表示されません。
チェックが入っている1件 + チェックの入っていない日付の新しいもの2件を表示させたい、
そんなときは下記のコードを使用します。
<?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(); ?>
</ul>
<?php else : ?>
<p>記事はありません</p>
<?php endif; ?>
コメント