カテゴリ、アイキャッチ付きの投稿の一覧を表示する

TOPページにニュースの一覧を表示しているサイトをよく見かけます、というかほとんどです。

そこでここでは、

・ニュース（投稿）へのリンクとタイトル
・カテゴリごとに背景色を設定したカテゴリタグ
・アイキャッチ画像

を1セットとして、最新順に一覧として表示する方法をご紹介します。

テーマのfunctions.phpに下記を記述します。

if ( ! function_exists( 'display_news' ) ){
function display_news() {
global $post, $posts;

$posts_news = get_posts( array(
'post_status' => 'publish',
'category' => '1', //カテゴリID
'numberposts' => 4, //件数
'orderby'=> 'desc'
));

$html='';

if($posts_news){
$html =  '<div class="row">'; //　※ bootstrapを使ってます

foreach( $posts_news as $p ){
setup_postdata($p);

$time = get_post_time('Y年m月d日',false,$p->ID);
$news_cat = get_the_category( $p->ID );
$news_cat_link = get_category_link( $news_cat[0]->term_id);
$news_cat_name = $news_cat[0]->cat_name;
$news_cat_slug = $news_cat[0]->slug;
$news_image = get_the_post_thumbnail($p->ID,"large");

$html .= '<div class="col-sm-6 mb-20">
<div class="row">
<div class="col-xs-7">
<a href="'.get_the_permalink($p->ID).'">'.$news_image.'</a>
</div>
<div class="col-xs-5">
<a href="'.$news_cat_link.'" class="news-tag bg-'.$news_cat_slug.'">'.$news_cat_name.'</a>
<span class="small">'.$time.'</span><br>
<a href="'.get_the_permalink($p->ID).'">'.get_the_title($p->ID).'</a>
</div>
</div>
</div>';

}

$html .= '</div>';

wp_reset_query();
}
return $html;
}
add_shortcode('display_news', 'display_news');
}

あとはWordPressの投稿欄（投稿や固定ページ）でショートコード

display_news

を呼び出せば完成。（[　]で囲うこと）