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テーマ

WordPress無料有料【LIQUID PRESS】子テーマを作ろう

  プロが選ぶWordPressテーマテンプレート【LIQUID PRESS】   レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対 …

ダウンロード

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

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

sliderコピー

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

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

ワードプレス

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

  4.まずは、function.phpに追加 テーマによっては、変更しなくてもきれいに表示されることもあります。 ※function.phpに追加する前に、念のためfunction.php …