デイトラweb制作上級編 DAY16

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

ピックアップ記事の表示パターン

投稿IDを指定して表示
→ 常に特定の投稿を表示したい場合

タグを指定して表示
→ ピックアップする記事を選びたい場合

クライアントの要望で決定!

①投稿IDを指定して表示

tf30 > template-parts > pickup.php

(template-partsフォルダは作成済み)

ID は投稿 > 編集画面のURL で確認できる
post = ID」

↑画像のIDの場合

① = 89

② = 93

③ = 92

左から順番にIDを当てはめていく

<?php $pickup_ids = array(89, 93, 92); ?>

キーワード

・get_the_post_thumbnail( )

・get_the_title( )

②タグを指定して表示

tf30 > template-parts > pickup_by_tag.php

ほとんど 上級編 DAY13~14 のsingle.phpで「関連記事一覧」を作成したときと同じ

<?php
$myposts = get_posts(array(
'post_type' => 'post', // 投稿タイプ
'posts_per_page' => '3', // 取得記事数
'tag' => 'pickup', // タグpickupに属する投稿の中から
'orderby' => 'DESK' // 新しい順に
));

記事を新しい順ではなくランダムに表示したい場合は

'orderby' => 'rand'

<?php
if (has_post_thumbnail()) {
    // アイキャッチ画像が設定されてればlargeサイズで表示
    the_post_thumbnail('large');
} else {
    // なければnoimage画像をデフォルトで表示
    echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">';
}
?>

the_post_thumbnail('medium'); だと少し小さいため

the_post_thumbnail('large'); にする

まとめ

今回はピックアップ記事を動的にしてトップページに表示しました。

案件によってピックアップ記事の表示方法が違うみたいですね。

Day16ではIDとタグを使用して表示しましたが、それら以外を使った実装方法ももう少し調べてみたくなりました!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です