WordPress のカテゴリーごとの新着記事を表示させる方法【プラグイン無しで】

WordPress

ワードプレスでカテゴリごとの新着記事を表示

WordPress でカテゴリーを指定して、そのカテゴリーの新着記事を表示させる方法です。

実行するとこうなります。

 

アイキャッチ画像がほしい時は[echo get_the_post_thumbnail]の行のコメントアウト ‘//’ を削ればOK。

後述の div のスタイルをいじれば、(手間はかかりますが)わりと何でもできるはず。

 

php コード

global $post;
$target_cat=ID;//リストに表示させるカテゴリーIDを入れる
$max_posts=4;//表示させる新着記事数
$newitems = array( 
'posts_per_page' => $max_posts, 
'offset'=> 0, 
'category' =>$target_cat, 
'orderby' => 'date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
);
$itemlist = get_posts( $newitems );
/*ここから表示開始*/
echo '<ul>';
foreach ( $itemlist as $post ) : 
setup_postdata( $post );
echo '<li>';
//echo get_the_post_thumbnail($post_id,'thumbnail'); サムネイルを表示させたい時
the_time('y/m/d');
echo ' &nbsp;<a href="';
the_permalink();
echo '">';
the_title();
echo '</a></li>';
endforeach; 
echo '</ul>';
echo '<p><a href="'.get_category_link($target_cat).'">もっと見る</a></p>';//一覧だけがあればいいなら消します
/*ここまで表示*/

wp_reset_postdata();

カテゴリーや表示数は変数にすれば、投稿ページから好きなカテゴリーにできます。

カテゴリーIDは、カテゴリー編集画面の上のURLに表示される category&tag_ID=数字 の数字部分に表示されている値を入れます。

アイキャッチ画像を表示させたい時は、[//echo get_the_post_thumbnail]から//を外します。画像をリンクに含めたい時は、the_title();の前に移動させてください。

サムネイルサイズは  ‘thumbnail’ の他、 ‘medium’, ‘large’, ‘full’ が使えます。

そのままだと整形されておらず↓になるので、divでくくって整形します。

 

スタイルシートで整形、デザインを整える

デザインは上のコードで表示させる部分を div で括って、中の要素をデザインしていきます。

<div class="new-items">PHP出力部分</div>

こうしておいて、

<style>
.new-items {border:1px solid #ccc;padding: 10px 0 3px 10px;}
.new-items a{text-decoration:none;}
.new-items ul{margin:0;padding: 0;}
.new-items ul li{ list-style-type: none;}
.new-items a::before {
font-family: 'FontAwesome';
content: "\f105";
margin-right:.22em;
color:#333;
}
.new-items p{text-align: right; margin:0 5px 0 0;}
</style>

スタイルで中のULやLIを整形します。「もっと見る」部分は p で配置を右にしています。

画像を表示させる場合は li にボーダーを入れて、画像位置とテキストの配置を調整します。

 

解説とカスタマイズのポイント

配列 $newitems にセットしたパラメーターから get_posts を使って投稿記事のリストを取得しています。

$newitems = array(
'posts_per_page' => $max_posts,
'offset'=> 0,
'category' =>$target_cat,
'orderby' => 'date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
);

get_posts で利用できるパラメーターは WordPress Codex に記載されています。

テンプレートタグ/get posts – WordPress Codex 日本語版

アイキャッチ画像を使ってクリックでページに飛ばせたい時は、サムネイルの出力部分を a href=~>の後ろ、タイトルの前に移動させます。年月が不要なら the_time(‘y/m/d’); を削ります。