WordPress

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 で本文中にショートコードを使って投稿一覧を表示する方法を紹介しました。

この記事をシェアする

合わせて読みたい関連記事