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でスクロールボタンを設置   php部分 <div class="scroll" href="#first- …

ダウンロード

簡単にファイルをダウンロードできるWordPressプラグイン

  WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう!ってことで、「WordPress Download M …

お問い合わせ

WordPressにお問い合わせフォームを入れるならこの2つのどちらか

  お問い合わせフォームのプラグイン WordPressでWebサイトを作成していて、お問い合わせフォームを設置することがあると思いますが、そんな時はプラグインを使うと簡単に設置・導入が可能 …

ヘッダー固定

【簡単】wordpress スクロールするとヘッダーが固定される

  ①一番最初に見えるヘッダーをカスタマイズ header.phpファイルに使っているテーマにより若干違いはありますが、下記のようなコードが記述されていると思います。 <div id= …

seo対策

WordPressのSEO対策は簡単にプラグインで出来る

SEOとは、Search Engine Optimizationの略で、検索エンジン最適化のことです。 検索することによって表示される順位をより高い順位にすることを目的としています。 まず始めに、Go …