WordPress のトップページで特定のタグやカテゴリの記事を指定件数表示させる方法
WordPress で運営するサイトのトップ画面に、最新の記事一覧とは別に、カテゴリやタグで分類した記事のリストを表示させるにはどうしたらいいのか。
このサイトと別に管理しているブログ NJ-CLUCKER のトップページの改修において、実際にカテゴリ別・タグ別のリストを数件表示させるようにしたので、その時に実装した方法を解説していきます。
カテゴリ別の記事一覧を取得する方法
ソースコード
<?php global $post; $cat_slug = 'cat-test'; // カテゴリーのスラッグ $cat_posts = get_posts(array( 'post_type' => 'post', // 投稿タイプ //'category' => 1, カテゴリIDを番号で指定する場合 'category_name' => $cat_slug, // カテゴリをスラッグで指定する場合 'posts_per_page' => 6, // 表示件数 'orderby' => 'date', // 基準になる表示順 'order' => 'DESC' // 昇順・降順 )); if($cat_posts): foreach($cat_posts as $post): setup_postdata($post); ?> <!-- ここから先は各々のフォーマットで利用 --> <div> <?php // サムネイルを持っている場合 if ( has_post_thumbnail() ): $title = get_the_title(); the_post_thumbnail('thumbnail', array( 'alt' =>$title) ); // サムネイルを持っていない場合 else: echo 'サムネイルなし'; endif; ?> <?php the_permalink(); ?><!-- リンク --><br> <?php the_title(); ?><!-- タイトル --><br> <?php the_title_attribute(); ?><!-- タグ内で使うタイトル --><br> <?php the_time('Y/m/d'); ?><!-- 投稿日 --><br> </div> <?php endforeach; endif; // ループ後のリセット処理 wp_reset_postdata(); ?>
プログラム解説
取得するデータは get_posts 関数にセットする値で全て決まります。array 内の決められた変数値を設定してデータを取得します。上記サンプルの例では、カテゴリーのスラッグ cat-test を条件にデータを取得しています。
もしスラッグではなくカテゴリー ID を条件にしたい場合、category_name ではなく category の値を設定してデータを取得します。
データ取得時に設定している値 (get_posts の引数)
変数 | 設定する値 |
---|---|
post_type | 投稿タイプは post を設定 |
category | カテゴリ ID を番号で指定(スラッグと併用しない) |
category_name | カテゴリのスラッグを指定(カテゴリ ID と併用しない) |
posts_per_page | 表示件数を数字で指定 |
orderby | 表示順の条件 (date: 投稿日、modified: 更新日) |
order | ASC: 昇順、降順: DESC |
サムネイル取得関数 the_post_thumbnail について
この関数の第一引数に設定する値に応じて、取得する画像のサイズを選択できます。それぞれの環境によってメディア設定が異なるので、自身の設定にあったものを利用してください。
引数の値 | 取得するサムネイル |
---|---|
thumbnail | メディア設定「サムネイル」に指定したサイズの画像 |
medium | メディア設定「中サイズ」に指定したサイズの画像 |
large | メディア設定「大サイズ」に指定したサイズの画像 |
full | アップロードした元サイズの画像 |
array( 100, 100 ) | functions.php で指定した任意サイズの画像 |
タグ別の記事一覧を取得する方法
原理はカテゴリーと同じです。get_posts 関数を使って、タグのスラッグもしくはタグの ID を指定してデータを取得します。取得したデータの出力方法は、カテゴリーの場合と全く同じです。
<?php global $post; $tag_slug = 'tag-test'; // タグのスラッグ $tag_posts = get_posts(array( 'post_type' => 'post', // 投稿タイプ //'tag_id' => 1, タグIDを番号で指定する場合 'tag' => $cat_slug, // タグをスラッグで指定する場合 'posts_per_page' => 6, // 表示件数 'orderby' => 'date', // 基準になる表示順 'order' => 'DESC' // 昇順・降順 )); if($tag_posts): foreach($tag_posts as $post): setup_postdata($post); ?> <!-- ここから先は各々のフォーマットで利用 --> <div> <?php // サムネイルを持っている場合 if ( has_post_thumbnail() ): $title = get_the_title(); the_post_thumbnail('thumbnail', array( 'alt' =>$title) ); // サムネイルを持っていない場合 else: echo 'サムネイルなし'; endif; ?> <?php the_permalink(); ?><!-- リンク --><br> <?php the_title(); ?><!-- タイトル --><br> <?php the_title_attribute(); ?><!-- タグ内で使うタイトル --><br> <?php the_time('Y/m/d'); ?><!-- 投稿日 --><br> </div> <?php endforeach; endif; // ループ後のリセット処理 wp_reset_postdata(); ?>
プログラム解説
上記サンプルの例では、タグのスラッグ tag-test を条件にデータを取得しています。タグ ID を条件にする場合、tag ではなく tag_id の値を設定します。
なおカテゴリーの場合と変数の命名ルールが異なっています。ここは間違えやすいポイントなので、変数名は必ず確認しましょう。
データ取得時に設定している値 (get_posts の引数)
変数 | 設定する値 |
---|---|
post_type | 投稿タイプは post を設定 |
tag_id | タグ ID を番号で指定(スラッグと併用しない) |
tag | タグのスラッグを指定(タグ ID と併用しない) |
posts_per_page | 表示件数を数字で指定 |
orderby | 表示順の条件 (date: 投稿日、modified: 更新日) |
order | ASC: 昇順、降順: DESC |
サムネイルの取得方法はカテゴリーデータ取得時と同じなので、割愛します。
プログラムはどこに書けばいい?
これはテーマによって様々なので、一概にどこか伝えることはできません。一般的には home.php もしくは index.php のどちらかです。
あまりプログラムに詳しくなければ、自身のパソコン環境で WordPress を動かせるテスト環境を作って試すと良いです。僕も大規模なテーマ改修時は、テスト環境で試してからネット環境に反映しています。10分程度で簡単に構築できるので、こちらの記事を参考に試してみてください。