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

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

関連記事

divでtableを作ってみた

divでtableを作ってみた(レスポンシブ対応)

  display: flexでレスポンシブにも対応させた PCとスマホで見せ方を変えたかったので、cssで調整 PCでは横4列、スマホでは横2列で表示 通常の表が横に2つ並んでいるようなも …

記事一覧表示

固定ページにカスタム投稿記事一覧表示

    固定ページにアイキャッチ画像付きの記事一覧を表示させたい   そこで、やりたかった主なことは以下の部分です。   ・いろいろプラグインなどもあるが、プラ …

Google FontがEdgeで表示されない

Google FontsがEdgeで表示されない場合

  <link>で読み込んだのにEdgeで正しく表示されない   <link href=”https://fonts.googleapis.com/css2?fa …

ワードプレスにアメブロ

ワードプレスにアメブロ

  ワードプレスの固定ページにアメブロの記事を読み込む WordPressでホームページを作りたいけどアメブロを止めたくない ブログを作成するなら有名なアメブロが簡単で始めやすいので、今も更 …

google api

Google Maps APIキー取得方法

Google Maps APIキー取得方法 Google Maps APIを取得する前に、Googleのアカウントを取得してください。 こちらから取得します → https://developers. …