7. トップページにピックアップ記事を表示する

こんにちは！フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。

この記事は、Web制作初心者のかた向けに『実務で使えるWordPressを使ったサイト制作手法』ついて解説していく連載です。

前回の記事はこちら↓

6. 固定ページを作る+サイトの保守性を高める

5thステップであるこの記事では、トップページにピックアップ記事を表示する手順を解説していきます。

0. 目標物の確認

index.phpを作ったとき、記事一覧パートの上部にある3記事表示のパートはそのままHTMLを残していましたよね。

今回の記事では、ここにピックアップ記事を表示するための手順を解説していきます。

実際の案件でも、トップページに特定の投稿を表示するケースは珍しくないので、しっかり覚えておきましょう！

それでは、一つずつ解説していきます。

1. template-partsフォルダ内に『pickup.php』を作る

前回『サイトの保守性を高めるために、パーツ化できる部分はテンプレートにして管理すべし』と書きました。

このピックアップ記事のパーツもテンプレート化できそうですよね。

ですので、こちらも最初からテンプレートとして分割管理していきます。

index.phpの<!– pickup –>〜<!– /pickup –>までをコピーし、template-partsフォルダ内に作ったpickup.phpに貼り付けてください。

そして、index.phpでは、pickup.phpを読み込むように記述してください。

ここは復習なので、特にコードは載せません。

分からない方は前回の記事を復習してください👍

2. 投稿IDを指定して、ピックアップ記事を表示する

まずは最もオーソドックスな投稿IDを指定する方法でピックアップ記事を表示してみましょう。

pickup.php

コピー
<!-- pickup -->
<div id="pickup">
<div class="inner">

<div class="pickup-items">

<?php $pickup_ids = array( 59, 61, 62 ); // ピックアップする記事の投稿idを指定する ?>
<?php foreach ( $pickup_ids as $id ) : ?>

<a href="<?php echo esc_url( get_permalink( $id ) ); ?>" class="pickup-item">
<div class="pickup-item-img">
<?php
if ( has_post_thumbnail( $id ) ) {
echo get_the_post_thumbnail( $id, 'large' );
} else {
echo '<img src="' . esc_url( get_template_directory_uri() ) . '/img/noimg.png" alt="">';
}
?>
<div class="pickup-item-tag"><?php my_the_post_category( false, $id ); ?></div><!-- /pickup-item-tag -->
</div><!-- /pickup-item-img -->
<div class="pickup-item-body">
<h2 class="pickup-item-title"><?php echo esc_html( get_the_title( $id ) ); ?></h2><!-- /pickup-item-title -->
</div><!-- /pickup-item-body -->
</a><!-- /pickup-item -->

<?php endforeach; ?>

</div><!-- /pickup-items -->

</div><!-- /inner -->
</div><!-- /pickup -->

大事なのは $pickup_ids = array( 59, 61, 62 ); の部分。これ以外は特に新しいことはやってません。

ピックアップしたい記事の投稿IDを指定し、それらの記事の情報を表示しています。

記事の投稿IDは、各記事の投稿編集画面のURLで確認できます。

これです。この「post=」直後にある数字が投稿IDです。

表示したい投稿のIDを3つ取得して、好きに表示してみてください。

なお、IDは投稿も固定ページも共通なので、固定ページを投稿IDで指定して表示することもできます。

これが最もオーソドックスなやり方です。

3. 『pickup』のタグがついた投稿をピックアップ記事として表示する

最初に解説した『投稿IDで指定する方法』では、テンプレートをカスタマイズしない限り、表示する投稿は固定されてしまいます。

「常にこの投稿を表示しておきたい！」と決まっていればいいんですが、案件の場合、プログラミングの知識がないクライアントが、ピックアップ記事を選べるようにしたいという要望も普通に出てきます。

そんな時のために、投稿編集画面から『pickup』というタグをつけるとピックアップ記事として表示するパターンも練習しておきましょう！

表示確認用として、先に4〜5記事ほどpickupタグをつけた投稿を用意してください。

この時、タグ付けした記事のタイトルは『ピックアップ1』のように変えておくと後で分かりやすいです。

投稿の準備ができたら、template-partsフォルダ内に『pickup_by_tag.php』を作って実装していきます。

やることはsingle.phpで『関連記事一覧』を表示させた時とほぼ同じなので、ぜひ参考コードをみる前に自分で調べながら書いてみてください❗️

5. single.phpを編集して投稿ページを作る

pickup_by_tag.php

コピー

<!-- pickup -->
<div id="pickup">
<div class="inner">

<div class="pickup-items">

<?php
$pickup_posts = get_posts( array(
'post_type' => 'post', // 投稿タイプ
'posts_per_page' => '3', // 3件取得
'tag' => 'pickup', // pickupタグがついたものを
'orderby' => 'DESC', // 新しい順に
) );
?>
<?php foreach ( $pickup_posts as $post ) : setup_postdata($post); ?>

<a href="<?php echo esc_url( get_permalink() ); ?>" class="pickup-item">
<div class="pickup-item-img">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('large');
} else {
echo '<img src="' . esc_url( get_template_directory_uri() ) . '/img/noimg.png" alt="">';
}
?>
<div class="pickup-item-tag"><?php my_the_post_category( false ); ?></div><!-- /pickup-item-tag -->
</div><!-- /pickup-item-img -->
<div class="pickup-item-body">
<h2 class="pickup-item-title"><?php the_title(); ?></h2><!-- /pickup-item-title -->
</div><!-- /pickup-item-body -->
</a><!-- /pickup-item -->

<?php endforeach; wp_reset_postdata(); ?>

</div><!-- /pickup-items -->

</div><!-- /inner -->
</div><!-- /pickup -->

実装できたら、index.phpの読み込み箇所も書き換えて表示を確認してみます。

ピックアップタグがついた記事のみを、想定通りの並び順で表示できていれば完成です❗️

案件では、固定表示でよければ投稿IDを指定する、クライアントが更新できるようにしたければタグというふうに使い分けましょう。

それでは、お疲れ様でした☺️