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でフロントページにランダム表示
関連記事
-
-
ブログ (blog) は、ウェブサイトの一種で、「WebをLogする」という意味でウェブログ (weblog) と名付けられ、それが略されてブログ(Blog)と呼ばれるようになった。 作者の個人的な日 …
-
-
MTS Simple Booking-C編集者ができるようにする
予約システムをスタッフがする WordPressの予約システムで有名なプラグイン『MTS Simple Booking-C』ですが、 作成者側ではなく、編集者(スタッフ)が …
- PREV
- CSSのcolumnでフロントページにランダム表示
- NEXT
- スマホで予約システムが無料で作れる