wordpress

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

投稿日:

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

 

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

 

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

・固定ページ

・投稿記事

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

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

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

 

1.表示設定と投稿数を設定確認

 

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

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

表示設定

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

1ページに表示する最大投稿数は、『自分で好きな表示数』を設定(10だと少ないかな?)

 

2.トップページ用の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にしたを参考にしてください。
 
 


-wordpress
-, , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

スライドショー条件分岐

スライドショーのショートコードをPCとスマホで変える

今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …

vegasスマホとPC

スマホとPCの条件分岐でVEGASを切り替える方法

  スマホとPCの条件分岐でVEGASを切り替える方法   表示したいところに以下を記述します。 <div class="img-movie"> & …

slick

IEでスライダーslickのフェードはチカチカする

  fade:trueはやめたほうがいい WordPressに導入するのに、とても使い勝手がいいjQueryの【slick】なんですが、オプションでフェードを選択するとIEでは、隠れていた部 …

オンマウス以外

オンマウス(マウスオーバー)以外を透かす

オンマウスで透過したり、色が変わったりするのは一般的にも良くあるパターンだと思います。 でも今回は オンマウス以外に変化をつけていきたいと思います。 個人的には、少なめのメニューやカテゴリーリストされ …

きれいに拡大したい

小さい画像をきれいに拡大する

  小さい画像(写真)をホームページのデザインに合わせて、きれいに大きくしたい時に役立つwebサービスが『waifu2x-multi』   普通に拡大してしまうと、どうしても画像が …