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でフロントページにランダム表示
関連記事
-
-
便利で何かと使いやすいかな?って思いますので、とりあえずやってみました。 固定ページを書いているときに、別のテンプレートファイル(phpファイル)を読み込みたいときに、直接書くのはやめた方が良いので、 …
-
-
WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた③
9.メンバー登録 上図のような画面になって、投稿ができるようになります。 では、さっそく1人目を登録します。 ①「ここにタイトルを入力」のところに「日本 太郎」としてみます。 ②アイキャッチ画像のとこ …
-
-
WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた⑤
1.選手一覧、メンバー一覧表示 選手登録を、とりあえず5名登録したら、今度は一覧表示で見てみたいです。 そこで、前回説明した「archive-member.php」を使って …
- PREV
- CSSのcolumnでフロントページにランダム表示
- NEXT
- スマホで予約システムが無料で作れる