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

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

コードを教えて欲しい。

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

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

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

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

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

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

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

【関連記事はこちら】
【WordPress】カスタム投稿の一覧と個別ページをnoindexにする方法 をあわせて読む >>

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

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

add_theme_support( 'post-thumbnails' );

【関連記事はこちら】
【2021年】WordPressのカスタム投稿をプラグインなしで実装する方法 をあわせて読む >>

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

要件は以下でした。

・アーカイブページ(記事一覧ページ)のファーストビューに、投稿記事のアイキャッチ画像をデバイス縦横幅いっぱいで表示させたい
・表示するアイキャッチ画像は、過去の投稿記事からランダムで1枚表示させたい(ページをリロードしたら毎回画像が変わる)
・もし投稿記事にアイキャッチが登録されていない場合は、決まった画像を表示させたい

【関連記事はこちら】
wp-membersでカスタム投稿とアーカイブページにもロックをかける方法 をあわせて読む >>

実際のコードはこちら

実際のコードはこちらです。

<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」については以下の公式リファレンスをご覧ください。

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

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

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

【関連記事はこちら】
【2021年】カスタム投稿のアーカイブページにメタディスクリプションを出力する【All in one SEO Pack】 を合わせて読む >>

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

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

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

  • オンラインスクールで学ぶ

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

  • 本で学ぶ

WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版]」はおすすめです。WordPressの最新バージョンに対応しており、静的ページをWordPress化していく手順を丁寧に解説しています。

私も実際にこの本でWordPressを勉強しました。案件でよく使うカスタマイズ方法や、セキュリティ対策、有名プラグインの紹介もされており、痒い所に手が届きます。

  • 動画学ぶ

Udemyの「WordPress開発マスター講座 」がオススメです!。WordPressで既存テーマのカスタマイズではない、オリジナルのウェブサイトを作る手順を解説しています。

プラグインによるカスタマイズ方法、フックの知識やテンプレート階層の知識、ショートコードやカスタム投稿タイプ・カスタム分類・カスタムフィールドといった、高度な機能についても紹介されてり、内容的には実案件のレベルです。

【Udemyがセール中(2021年7月30日(金)まで)】
対象コースが ¥1,730から。
セール中のWordPressの講座一覧を見る

まとめ

この記事のポイントをまとめます。

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

・テンプレートタグ「get posts」を使う
・投稿記事をランダムで取得して、サムネイルが登録されていればサムネイルを表示させ、登録させていなければ決まった画像を表示させる記述を書く

今回の記事はここまでです。

この記事を書いた人

hiro

美味しいご飯とお酒と一人旅が好き。EC企業に5年▶︎web制作フリーランスへ。ECサイト制作、デザイン、コーディング、サイト分析、CVR改善、ブログ書いたりして生活しています。

旅行ブログ「アジアをひとりで旅してみたら」も運営中。