WordPressの固定ページに指定カテゴリーの記事一覧を表示する

WordPressで固定ページにカテゴリーの一覧を表示したいときがあります。そんな場合はショートコードを記述して表示することができます。
ショートコードはプログラムを記述しますので、バグなどの原因でWordpress真っ白になってしまい、何も表示されなくなることがあります。そうならないようにショートコードを追加するためのプラグインを導入します。

固定ページ内でこんな感じで表示します。

Code Snippets pluginの導入
記述した内容
使い方

Code Snippets pluginの導入

今回は「Code Snippets」プラグインを導入しましたが、ほかにも同じような機能のプラグインがありますのでお好みでどうぞ。

プラグインの導入が完了したらメニューに「スニペット」のメニューが現れます。

すべてのスニペットを選びスニペットの新規追加ボタンを押します。

記述した内容

タイトルは「カテゴリーリスト表示」としました。お好みでどうぞ

コード部分に以下のコードを貼り付けます

// 特定のカテゴリ記事を指定した記事数表示
function Category_List ( $arg = array ()) {
  extract ( shortcode_atts ( array ( 'category' => '1', 'posts_per_page' => '5' ), $arg ));
  $posts = get_posts ( array ( 'posts_per_page' => $posts_per_page, 'category' => $category ));
  $category_name = get_the_category_by_ID( $category );
  $html = Category_List_html($posts, $category_name);
  return $html;
}

function Category_List_html ( $posts, $category_name ) {
  $html = '<h3>'.$category_name.'の関連記事</h3>';
  foreach ( $posts as $post ) {
    $html .= '<div style="padding: 0; margin: 0 0 20px 0;">';
	$html .= '<a href="' . get_permalink($post->ID) . '" class="entry-card-wrap a-wrap border-element cf">';
    $html .= '  <article id="post-' . $post->ID . '" class="post-' . $post->ID . ' entry-card e-card cf post type-post status-publish format-standard has-post-thumbnail hentry">';
    $html .= '    <figure class="entry-card-thumb card-thumb e-card-thumb">';
    $html .= '      '. get_the_post_thumbnail($post->ID, 'medium') ;
	$html .= '	    <span class="cat-label">'. $category_name. '</span>';
	$html .= '    </figure>';
    $html .= '    <div class="entry-card-content card-content e-card-content">';
    $html .= '      <div class="entry-card-title card-title e-card-title" itemprop="headline">' . $post->post_title . '</div>';
    $html .= '        <div class="entry-card-snippet card-snippet e-card-snippet">'. mb_substr(strip_tags($post->post_content), 0, mb_strpos(strip_tags($post->post_content), '。')+1).'...</div>'; // 文章中に最初に「。」が現れるまで表示
    $html .= '        <div class="entry-card-meta card-meta e-card-meta">';
    $html .= '          <div class="entry-card-info e-card-info">';
    $html .= '            <span class="post-date"><span class="far fa-clock" aria-hidden="true"></span><span class="entry-date">' . date ( 'Y.m.d', strtotime ( $post->post_date ) ) . '</span></span>';
    $html .= '          </div>';
    $html .= '        <div class="entry-card-categorys e-card-categorys"><span class="entry-category">'. $category_name. '</span></div>';
    $html .= '      </div>';
    $html .= '    </div>';
    $html .= '  </article>';
    $html .= '</a>';
	$html .= '</div>';
  }
  return $html;
}

add_shortcode('category_list', 'Category_List');

コードを保存します。

スニペット一覧で有効になっていることを確認します。
有効になっていなかったら有効にしてください。

使い方

固定ページ内にショートコードを貼り付けます。
カテゴリーのIDは[投稿 > カテゴリー]を表示しIDを確認します。
表示する件数は10件程度で設定してください。

[categoly_list category='カテゴリーのID' posts_par_page='表示する件数']

ショートコードを挿入すると以下のような表示がされます。

実際に表示するとこのようなイメージで表示されると思います。
テーマによってレイアウトが変わる場合はコードを修正してみてください。