CSSのcolumnでフロントページにランダム表示

投稿日：2020年7月27日

cssのcolumnでフロントページにランダム表示

トップページに投稿記事をランダムに表示

通常トップページに表示するのは、

・固定ページ

・投稿記事

のどちらかが多いと思いますが、

今回は投稿記事の新着順ではなく、ランダムにしてみました。

利用方法は様々ですが、写真表示やデザイン表示などに使えるかな？

１．表示設定と投稿数を設定確認

WordPress管理メニュー→『設定』→『表示設定』から

ホームページの表示とページに表示する最大投稿数を設定します。

表示設定

ホームページの表示は、『最新の投稿』を選択

１ページに表示する最大投稿数は、『自分で好きな表示数』を設定（１０だと少ないかな？）

２．トップページ用のphpファイルを設定

トップページで使うphpファイルですが、

front-page.php

home.php

index.php

などがありますが、

front-page.phpがあれば優先されますので、そちらで変更していきます。

もしなければ、home.phpまたは、index.phpでもかまいません。

以下で表示しているクラス名は、前回の記事と合わせていますので、そちらも参考にしてください。

前回記事→MasonryをやめてCSSのcolumnにした

<?php get_header(); ?>
・
・
・
・
・
<div class="grid">
<article>
<!--ループ開始 -->
<?php $query = new WP_Query(array('orderby' => 'rand')); ?>
<?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>
・
・
・
    <div class="grid-item">
	<a href="<?php the_permalink() ?>">
	<?php the_content(); //本文 ?>
	</a>
    </div>
・
・
・
</article>
</div>

以上については、多少ファイルの中身が違うかもしれませんが、
大事なところは、

<div class="grid"><!-- ここから親要素で囲みます -->

orderbyのところをrandにします。

<?php $query = new WP_Query(array('orderby' => 'rand')); ?>
<?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>

本文を取得する前に子要素で囲みます。

<div class="grid-item">

できましたでしょうか？

cssの設定については、前回記事→MasonryをやめてCSSのcolumnにしたを参考にしてください。

執筆者：web