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

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

関連記事

リストメニューを順番に表示

メニューリストを横から順番に表示させる jsとcss

  前回の記事では、『メニューリストを横から順番に表示させる cssのみ』ということで、 cssだけで動きのあるメニューを作成しました。   今回は、jsファイルに書き込んで同じよ …

アイキャッチ画像をPCとスマホ

アイキャッチ画像をPCとスマホで見え方を変える

  WordPressを使っていて、固定ページにもアイキャッチ画像を設定するところがあります。 そのアイキャッチ画像をページのヘッダーあたりに表示させたいと思いました。 PCでは、希望通りの …

予約1

簡単にワードプレスで予約システムを作る

  シンプル予約システム MTS Simple Bookingを使う   WordPressでお店のホームページを作って、しかも予約システムも導入できたらいいのにと思って探していた …

プレビュー

WordPressのプレビューで変更されていない時にチェックすること

WordPressで固定ページや投稿ページまたは、カスタム投稿タイプでテキストの色を変更したり、大きさを変更するなどしてプレビュー画面で確認したが、変わってない!ってことはないですか? また、cssや …

選手登録メンバー登録

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

  1.アイキャッチ画像をカスタマイズ   テーマによっては、変更しなくてもきれいに表示されることもあります。 メンバー紹介などの個人個人のページでは、300px×400pxの画像 …