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

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

関連記事

予約1

MTS Simple Booking-Cで指定した日の指定した時間だけ受け付けないようにする

  この日のこの時間だけ受け付けないようにしたい   無料版の予約システム【MTS Simple Booking-C】はすごく簡単に予約可能なプラグインですが、 ある程度決まったス …

予約システムを編集者

MTS Simple Booking-C編集者ができるようにする

  予約システムをスタッフがする   WordPressの予約システムで有名なプラグイン『MTS Simple Booking-C』ですが、 作成者側ではなく、編集者(スタッフ)が …

トグルメニュー

WordPressのメニューをおもしろくしてみた

    トグルメニュー(アコーディオンメニュー)の準備   WordPressのテーマに子テーマを作って、 そこで変更や追加をした方が安心安全なので以下の作業は子テーマを …

svg div 変形

SVG div で変形を作る

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

ワードプレスにアメブロ

ワードプレスにアメブロ

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