WordPressの投稿記事のアイキャッチをランダムで取得して表示させたい。
コピペできるコードを教えて欲しい。
こんなことを考えている方へ。
この記事のポイントは以下です。
＼当サイトのおすすめ記事はこちら👇／
■■WEB制作を学ぼう■■
【WordPress】投稿記事のアイキャッチをランダムで表示する方法
WordPressにての投稿記事のアイキャッチをランダムで表示する方法を解説します。実際にWordPressのコーディング案件で使いました。コード付きで解説します。
①アイキャッチ表示を有効にする方法
初めにアイキャッチを有効化します。
functions.phpに以下のコードを書けばOKです。
add_theme_support( 'post-thumbnails' );
②どんな案件で使ったのか？
要件は以下でした。
①アーカイブページのファーストビューに、投稿記事のアイキャッチ画像を表示させたい
②表示するアイキャッチ画像は、過去の投稿記事からランダムで1枚表示させたい（ページをリロードしたら毎回画像が変わるようにしたい）
③もし投稿記事にアイキャッチが登録されていない場合は、決まった画像を表示させたい
③実際のコードはこちら
実際のコードはこちらです。
<figure class="imageWrap">
<?php
//1件のみ取得、ランダムで取得
$args = array( 'posts_per_page' => 1, 'orderby' => 'rand' );
$rand_posts = get_posts( $args );
foreach ( $rand_posts as $post ) :
setup_postdata( $post );
?>
<div class="imageWrap__item">
<?php if ( has_post_thumbnail() ): ?> //アイキャッチが登録されていればアイキャッチを表示
<?php echo the_post_thumbnail(); ?> //アイキャッチ画像を呼び出し
<?php else: > //アイキャッチが登録されていなければ以下の画像を表示 ?
<img src="<?php echo get_template_directory_uri(); ?>/●●●/代替画像のファイル名.jpg">
<?php endif; ?>
</div>
<?php endforeach;
wp_reset_postdata(); ?>
</figure>テンプレートタグ「get posts」を使っています。
「get posts」については以下の公式リファレンスをご覧ください。
コードの内容としては、投稿記事1件をランダムで取得して、サムネイルが登録されていればサムネイルを表示させ、登録させていなければ決まった画像を表示させる記述です。
これでサムネイルだけ出力できます。
あとはcssで好き勝手にスタイリングします。
まとめ
この記事のポイントをまとめます。
投稿記事のアイキャッチをランダムで取得して表示させる方法は以下です。
今回の記事はここまでです。
