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

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

関連記事

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた④

  11.メンバー一覧表示のカスタマイズ   メンバー個人個人の登録が終わったら、今度は一覧表示を作ってみます。 あまりごちゃごちゃ触りたくないので、以下のファイルだけ中身を少し変 …

ショートコード

ショートコードでPHPファイルを読み込む

便利で何かと使いやすいかな?って思いますので、とりあえずやってみました。 固定ページを書いているときに、別のテンプレートファイル(phpファイル)を読み込みたいときに、直接書くのはやめた方が良いので、 …

スマートスライダー

Smart Sliderのプラグインで画像に網掛け

  スライダー画像に網掛けをする   簡単にフェードアウトやスライダーができるWordPressのプラグインで有名な【Smart Slider】を使って、画像に網掛けをしたいと思い …

svg div 変形

SVG div で変形を作る

  簡単に変形してダウンロード   おもしろいサイトを見つけましたので、紹介します。   説明をするより、サイトを開いて実用化するのはあなた次第(笑) トップページのヘッ …

slick

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

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