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にしたを参考にしてください。
関連記事
-
-
レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対応レスポンシブWordPressテーマ スマホ/PC表示切替OK! Bootstrap対応! こんな方に …
-
-
WordPressで画面が真っ白になってしまった時の対処方法
突然画面が真っ白になって、何度試してもページが表示されなくて気分がブルーになってしまった時に試した方法 今回は、テーマの中にあるfunction.phpを編集 …
-
-
サイトを作り始めの頃、作ってしまったカスタムフィールドだけど、いらなくなったものを消したいのにどうやれば消すことができるんだろうって思っていました。 カスタムフィールドが多くなって訳がわからなくなった …
-
-
簡単にファイルをダウンロードできるWordPressプラグイン
WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう!ってことで、「WordPress Download M …
-
-
WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた②
4.まずは、function.phpに追加 テーマによっては、変更しなくてもきれいに表示されることもあります。 ※function.phpに追加する前に、念のためfunction.php …