WordPress ショートコードを使った投稿一覧の表示方法

WordPress で本文中にショートコードを使って投稿一覧を表示する方法を紹介します。
例えば、本文中に記事の紹介などを行いたいときに便利な方法です。

1. ショートコードで投稿一覧を表示する方法
2. ショートコードに値を指定して表示結果をコントロールする方法

ショートコードで投稿一覧を表示する方法

まずはショートコードタグ用のフックを追加します。
例えば、最新の投稿を3件表示するショートコードを作りたいときは、
次のコードを function.php に追加します。

/*【出力カスタマイズ】ショートコードで投稿一覧を表示 */

function shortcode_post_list() { // 変数の定義

  global $post; // グローバル宣言

  $args = array( // クエリの準備

  	'posts_per_page' => 3, // 表示件数の指定

  	'post_type'      => 'post', // 投稿タイプの指定

  	'post_status'    => 'publish' // 投稿ステータスの指定

  );

  $posts_array = get_posts($args); // クエリを基にした投稿情報を取得

  $html = '<ul>';

  foreach($posts_array as $post): // ループの開始

    setup_postdata($post); // 投稿のセットアップ

    $html .= '<li>';

    $html .= '<a href="'.get_permalink().'">'.get_the_title().'</a>'; // リンク付きタイトルを表示

    $html .= '</li>';

  endforeach; // ループの終了

  $html.='</ul>';

  wp_reset_postdata(); // 投稿のリセット

  return $html;

}

add_shortcode('post_list', 'shortcode_post_list');

続いて、次のショートコードを本文中に貼り付けます。

[post_list]

Gutenberg エディターの場合は「カスタムHTMLブロック」内にショートコードを貼り付けてください。
内容に問題がなければ、投稿内に最新の投稿が3件表示されているはずです。

ショートコードに値を指定して表示結果をコントロールする方法

ショートコードを使う場所によっては、記事の表示件数を変えたい場合もあると思います。
そんなときはショートコードに引数を指定して、表示結果をコントロールします。
例えば、最新の投稿を5件表示、投稿タイプを任意に指定するショートコードを作りたいときは、
次のコードを function.php に追加します。

/*【出力カスタマイズ】ショートコードに値を指定して表示結果をコントロール */

function shortcode_post_list($atts) { // 変数の定義

  extract(shortcode_atts(array( // 引数の値を取得

    'num' => '3', // 表示件数の値、引数の指定がなければ指定の値を格納

    'post_type' => 'post' // 投稿タイプの値、引数の指定がなければ指定の値を格納

  ), $atts));

  global $post; // グローバル宣言

  $args = array( // クエリの準備

  	'posts_per_page' => $num, // 表示件数の指定

  	'post_type'      => $post_type, // 投稿タイプの指定

  	'post_status'    => 'publish' // 投稿ステータスの指定

  );

  $posts_array = get_posts($args); // クエリを基にした投稿情報を取得

  $html = '<ul>';

  foreach($posts_array as $post): // ループの開始

    setup_postdata($post); // 投稿のセットアップ

    $html .= '<li>';

    $html .= '<a href="'.get_permalink().'">'.get_the_title().'</a>'; // リンク付きタイトルを表示

    $html .= '</li>';

  endforeach; // ループの終了

  $html.='</ul>';

  wp_reset_postdata(); // 投稿のリセット

  return $html;

}

add_shortcode('post_list', 'shortcode_post_list');

続いて、次のショートコードを本文中に貼り付けます。
先ほどと違って、こちらを値の指定をできるように変更しています。

[post_list num="5" post_type="page"]

仮に値の指定がなければ function.php で指定しているデフォルトの値を基に内容が表示されます。

まとめ

WordPress で本文中にショートコードを使って投稿一覧を表示する方法を紹介しました。