>> 運営者プロフィールはこちら
WEB全般

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

【WordPress】投稿記事のアイキャッチをランダムで表示する方法 WEB全般
記事内に広告が含まれています。

WordPressの投稿記事のアイキャッチをランダムで取得して表示させたい。
コピペできるコードを教えて欲しい。

こんなことを考えている方へ。
この記事のポイントは以下です。

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

Shopify飯店

Shopify飯店

>> 運営者の詳しいプロフィールはこちら

\当サイトのおすすめ記事はこちら👇/

■■WEB制作を学ぼう■■

人気記事 2万文字でデイトラ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で好き勝手にスタイリングします。

 

スポンサーリンク

まとめ

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

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

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

この記事を書いた人
Shopify飯店店主

自分の仕事の経験を記事にしています。東証一部のEC企業で5年→個人事業主→法人化。サイト構築実績80社以上、ECコンサル・分析実績40社以上。コンサルにおいては、EC売上3倍、キャンペーン応募者数1.7倍などの実績があります。

Shopify飯店店主をフォローする
スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました