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

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

関連記事

vegas動画と画像

画像と動画を混合させて表示VEGAS

動画も一緒に表示させる方法   動かしてみた方法は以下の通りです。   1.先に動画を表示して、次に画像を表示する方法   jQuery(document).ready( …

ブログとは

ブログとは

ブログ (blog) は、ウェブサイトの一種で、「WebをLogする」という意味でウェブログ (weblog) と名付けられ、それが略されてブログ(Blog)と呼ばれるようになった。 作者の個人的な日 …

メニュー横並びいっぱい

メニューを横並びで中央に配置して、両端を伸ばす

メニューを横並びで中央に配置して、両端を伸ばす 基本 HTML <div class="menu"> <div class="menu-inner&qu …

スクロールボタン

スクロールボタン コピペでできる

    WordPressでスクロールボタンを設置   php部分 <div class="scroll" href="#first- …

予約システムを編集者

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

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