CSSのcolumnでフロントページにランダム表示
投稿日:
トップページに投稿記事をランダムに表示
通常トップページに表示するのは、
・固定ページ
・投稿記事
のどちらかが多いと思いますが、
今回は投稿記事の新着順ではなく、ランダムにしてみました。
利用方法は様々ですが、写真表示やデザイン表示などに使えるかな?
1.表示設定と投稿数を設定確認
WordPress管理メニュー→『設定』→『表示設定』から
ホームページの表示とページに表示する最大投稿数を設定します。
ホームページの表示は、『最新の投稿』を選択
1ページに表示する最大投稿数は、『自分で好きな表示数』を設定(10だと少ないかな?)
2.トップページ用のphpファイルを設定
トップページで使うphpファイルですが、
front-page.php
home.php
index.php
などがありますが、
front-page.phpがあれば優先されますので、そちらで変更していきます。
もしなければ、home.phpまたは、index.phpでもかまいません。
以下で表示しているクラス名は、前回の記事と合わせていますので、そちらも参考にしてください。
<?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にしたを参考にしてください。
関連記事
-
-
今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …
-
-
WordPressのプレビューで変更されていない時にチェックすること
WordPressで固定ページや投稿ページまたは、カスタム投稿タイプでテキストの色を変更したり、大きさを変更するなどしてプレビュー画面で確認したが、変わってない!ってことはないですか? また、cssや …