【WordPress】投稿記事のアイキャッチをランダムで表示する方法

WordPressの投稿記事のアイキャッチをランダムで取得して表示させたい。

コードを教えて欲しい。

こんなことを考えている方へ。

この記事のポイントは以下です。

・WordPressの投稿記事のアイキャッチをランダムで取得して表示させる方法

この記事を書いている私は大阪在住のweb制作フリーランスです。

東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトやECサイトを作ったり、サイト分析をしたり、PMOとして開発案件に参画したり、ブログを書いたりして生活しています。

【WordPress】投稿記事のアイキャッチをランダムで表示する方法
おすすめのWordPress勉強法はこちら
まとめ

【WordPress】投稿記事のアイキャッチをランダムで表示する方法

WordPressにての投稿記事のアイキャッチをランダムで表示する方法を解説します。実際にWordPressのコーディング案件で使いました。コード付きで解説します。

アイキャッチ表示を有効にする方法

構築しているテーマでアイキャッチを有効にするためには、functions.phpに以下のコードを書きます。

add_theme_support( 'post-thumbnails' );

参考：WordPress.ORG – Enabling Support for Featured Image >>

どんな案件で使ったのか？

要件は以下でした。

・アーカイブページ（記事一覧ページ）のファーストビューに、投稿記事のアイキャッチ画像をデバイス縦横幅いっぱいで表示させたい
・表示するアイキャッチ画像は、過去の投稿記事からランダムで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(); ?>/assets/images/代替画像のファイル名.jpg">
        <?php endif; ?>
    </div>
    <?php endforeach; 
    wp_reset_postdata(); ?>
</figure>

テンプレートタグ「get posts」を使っています。

「get posts」については以下の公式リファレンスをご覧ください。

参考：WordPress Codex – テンプレートタグ/get posts >>

コードの内容としては、投稿記事1件をランダムで取得して、サムネイルが登録されていればサムネイルを表示させ、登録させていなければ決まった画像を表示させる記述です。

これでサムネイルだけ出力できます。

あとはcssで好き勝手にスタイリングします。

おすすめのWordPress勉強法はこちら

WordPressの勉強はネットの情報だけでもできますが、サイトによって情報や解説の粒度にバラつきがあり体系的に学ぶのが難しいです。また、最新の情報が反映されていないこともあります。

不安を抱えながら自己学習で時間を浪費するより、世の中の優良な教材を活用する方が良いです。

デイトラで学ぶ

デイトラは質の高いカリキュラムと圧倒的なコスパの良さで、開校1年で受講生7000人突破したオンラインスクールです。「デイトラのWeb制作コース」では、スイーツ店のオンラインストアを作るという設定で、ゼロからストア構築を進めていきます。営業トークから広告運用の始め方までカバーしており、ストア構築を仕事にしたい方のための講座です。また、サポート体制も充実しています。Slackでプロのエンジニアによるアドバイスやフィードバックを受けることができます。

TechAcademyで学ぶ

TechAcademy（テックアカデミー）の「WordPressコース」は、現役のエンジニアが講師です。パーソナルメンターとして、毎日15〜23時のチャット・レビューサポートで初学者の”分からない”をサポートしてくれます。
安い買い物ではないので、まずはTechAcdemyの講座を無料体験で試してみるのがおすすめです。