wordpress

CSSのcolumnでカテゴリー一覧ページにランダム表示

投稿日:

CSSのcolumnでカテゴリー一覧ページにランダム表示

 

アーカイブの一覧表示をランダムにする

 

前回の記事に関連して、今回はアーカイブのページで試してみたいと思います。

カテゴリーなどの一覧表示に使用する『archive.php』では、

投稿記事に日付順に表示されるのが一般的かなと思いますが、

前回同様、ランダムにしてみます。

 

1.カテゴリー登録

 

WordoPress管理画面のメニュー → 投稿 → カテゴリー にて、

投稿に関するカテゴリー分けを作成するのですが、この部分は簡単ですね。

(投稿するときにも可能)

カテゴリー登録

 

2.一覧表示用のarchive.phpを設定

 

今回は、別の場所でも利用できるように、個別にphpファイルを作成しました。

作ったファイルは、『list.php』です。

サーバーもしくは、ソフトを使って、ファイルをアップロードしてください。

 

list.phpファイルの中身

 

<?php
/**
 * リスト一覧
 */
?>
<div class="grid"><!-- 前回同様のクラス名 -->
	<?php
	$kanrenpost_no = 50; //表示したい記事数
	$categories = get_the_category( $post->ID );
	$category_ID = array();
	foreach ( $categories as $category ):
		array_push( $category_ID, $category->cat_ID );
	endforeach;
	$args = array(
		'posts_per_page' => $kanrenpost_no,
		'category__in' => $category_ID,
		'orderby' => 'rand', //ランダム表示
	);
	$st_query = new WP_Query( $args ); ?>
	<?php
	if ( $st_query->have_posts() ): ?>
		<?php
		while ( $st_query->have_posts() ) : $st_query->the_post(); ?>
	
	<div class="grid-item"><!-- 前回同様のクラス名 -->
		<a href="<?php the_permalink() ?>">
			<?php the_content(); //本文 ?>
		</a>
			</div>
	
	<?php endwhile;
	else: ?>
		<p>記事がありません</p>
	<?php endif; ?>
</div>

 

 

3.archive.phpにlist.phpを入れる

 

archive.phpの中身ですが、
テーマによっては、多少違いますが、
以下のように、記述してみました。

<article>
	<!--ループ開始-->
	<h1 class="list-title">
	<?php if ( is_category() ) { ?>
	  <?php single_cat_title(); ?>
	<?php } elseif ( is_tag() ) { ?>
	  <?php single_tag_title(); ?>
	//省略しています
        ・
        ・
        ・
        ・
	<?php } ?>
	</h1>

    <?php get_template_part( 'list' ); //投稿一覧読み込み ?>

</article>

 

以上、ランダムに表示してみました。

クラス名についてのcssなどは、前回の記事を参考にしてください。
MasonryをやめてCSSのcolumnにした
CSSのcolumnでフロントページにランダム表示
 


-wordpress
-,


comment

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

関連記事

ワードプレス

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

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

画像の下に隙間

背景画像の下に隙間ができる【WordPress】

HOME PAGE1 PAGE2 PAGE3     何が原因なのか?   HTMLでは、下記の様にしています。 <div class="haikei&q …

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

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

  トップページに投稿記事をランダムに表示   通常トップページに表示するのは、 ・固定ページ ・投稿記事 のどちらかが多いと思いますが、 今回は投稿記事の新着順ではなく、ランダム …

ヘッダー固定

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

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

sliderコピー

ヘッダーのスライドショーをページ毎に変える方法

前回の記事で、「ヘッダー画像やスライダーをページ毎に変える方法」を紹介しましたが、 今回は引き続き、スライドショーができるプラグインを使った方法をやってみましたので紹介します。   Smar …