【WordPress】ショートコードで記事一覧を表示させる方法とは？

TOP > WordPress > 【WordPress】ショートコードで記事一覧を表示させる方法とは？

2020.02.05

　時と場合によっては、WordPressの記事編集ページのある部分に【投稿】の記事一覧を表示させたい…というケースが出てきたりします。

例えば、固定ページのうちの1つをTOPページとして設定している場合など。

PHPファイルに記事一覧のPHPコードを記述して記事一覧を表示させる…というのが普通だとは思いますが、上記のように固定ページでなおかつ記事編集ページで記事一覧を表示させるようなPHPコードを記述したい…という時には、ショートコードを使って記事一覧を表示させることが可能です！

1 ①functions.phpにショートコードの設定を記述する
2 見本コード
3 ショートコードで設定したものをPHPファイルで出力する方法
4 まとめ

①functions.phpにショートコードの設定を記述する

　ショートコードをWordPressで使うには、使いたいショートコードの設定を使用中のテーマのfunctions.phpに記述する必要があります。

今回は

投稿タイプ：post
表示件数：5件

を条件として、下記のPHPコードをfunctions.phpに記述します。

見本コード

function itiran() {
	global $post;
	$args = array(
		'post_type' => 'post',
		'posts_per_page' => 5
	);
	$posts_array = get_posts($args);
	$html = '<ul class="itiran-list">';
	foreach($posts_array as $post):
		setup_postdata($post);
		$date = get_the_time('Y年m月d日');
		$link = get_the_permalink();
		$title = get_the_title();
		$html.='<li>';
		$html.='<div class="itiran-list-date">' . $date . '</div>';
		$html.='<div class="itiran-list-title"><a href="' . $link . '">' . $title . '</a></div>';
		$html.='</li>';
	endforeach;
	$html.='</ul>';
	wp_reset_postdata();
	return $html;
}
add_shortcode('itiran','itiran');

上記を設定したうえで、固定ページの記事編集ページで[itiran]を記述することで、下記のようなHTMLを出力してくれます。
（※日付部分は、2020年1月1日に投稿したと仮定してのものです）

<ul class="itiran-list">
	<li><div class="itiran-list-date">2020年01月01日</div><div class="itiran-list-title"><a href="記事のURL">記事タイトル</a></div></li>
	<li><div class="itiran-list-date">2020年01月01日</div><div class="itiran-list-title"><a href="記事のURL">記事タイトル</a></div></li>
	<li><div class="itiran-list-date">2020年01月01日</div><div class="itiran-list-title"><a href="記事のURL">記事タイトル</a></div></li>
	<li><div class="itiran-list-date">2020年01月01日</div><div class="itiran-list-title"><a href="記事のURL">記事タイトル</a></div></li>
	<li><div class="itiran-list-date">2020年01月01日</div><div class="itiran-list-title"><a href="記事のURL">記事タイトル</a></div></li>
</ul>

フックと関数名を設定

　ではPHPの解説に移っていきたいと思います。

まず、ショートコードを追加する場合にはフックと関数を決める必要があります。

上記の見本コードでいうと23行目にある

add_shortcode('itiran','itiran');

がフックと関数の設定部分になります。

1つ目のitiranがフックで、2つ目のitiranが関数になります。

フックとはショートコード名でもあり、記事編集ページで
[itiran]
を記述することで今回設定したPHPコードを出力してくれるようになります。

また関数とは、上記見本コード1行目にある

function itiran() {

のitiranと対応する形ですね。

自分はわかりやすいようにフックと関数は同じものを設定することが大半ですが、例えば

ショートコード：itiran
関数：itiran_list

といった感じで別々のものを設定したい場合は、PHPコードも以下のように変わります。

function itiran_list() {
	global $post;
	$args = array(
		'post_type' => 'post',
		'posts_per_page' => 5
	);
	$posts_array = get_posts($args);
	$html = '<ul class="itiran-list">';
	foreach($posts_array as $post):
		setup_postdata($post);
		$date = get_the_time('Y年n月j日');
		$link = get_the_permalink();
		$title = get_the_title();
		$html.='<li>';
		$html.='<div class="itiran-list-date">' . $date . '</div>';
		$html.='<div class="itiran-list-title"><a href="' . $link . '">' . $title . '</a></div>';
		$html.='</li>';
	endforeach;
	$html.='</ul>';
	wp_reset_postdata();
	return $html;
}
add_shortcode('itiran','itiran_list');

これに関しては好みによる部分もあるので、お好きなものを設定いただけたら…と思います。。。！

※ちなみに関数に“-（ハイフン）”は使えないですが、“_（アンダーバー）”は使える感じです！

一覧で表示させたい設定を記述

　続いて上記の見本コードのうち3〜6行目にある

$args = array(
	'post_type' => 'post',
	'posts_per_page' => 5
);

ここで表示させたい内容を設定しています。

今回は
投稿タイプ：post
表示件数：5件
を設定したいため、上のような記述をしています。

リストの最初の<ul>の設定

　見本コードの8行目にある

$html = '<ul class="itiran-list">';

ここで出力される<ul>の設定をしています。

今回は
<ul class=”itiran-list”>
と出力したかったので、上記のような設定にしていますが、もし
<ul>
だけにしたい場合は、

$html = '<ul>';

と記述することで設定可能になります。

ループしたい内容の設定

　そして見本コードの9〜18行目がループしたい内容の設定部分になります。

それぞれの設定については以下にまとめてみました。

記事のURLや投稿日付といった付加情報の設定を記述

　11〜13行目の

$date = get_the_time('Y年n月j日');
$link = get_the_permalink();
$title = get_the_title();

で記事のURLや投稿日付といった付加情報の設定を記述しています。

今回は

投稿日付
記事のURL
記事タイトル

を出力したかったので上記に関する設定を記述していますが、大半の場合は見本コードの設定をそのまま使用いただければOKかと思います！

ちなみに投稿日付に関しては、「【WordPress】投稿日付を表示する際の表示形式の違いについてまとめてみた」でお好きな表示形式を選んでいただけたら…と思います。

<li>〜</li>の設定

　続いて見本コードの14〜17行目で<li>〜</li>内の出力内容を設定しています。

詳しい説明は割愛させていただきますが、ご自身が表示させたいHTMLに合わせて、それぞれ設定いただけたら…と思います。

ショートコードで設定したものをPHPファイルで出力する方法

　ショートコードで設定したものはWordPressの記事編集ページで出力するには

[itiran]

（ショートコードをitiranと設定した場合）

と記述することで出力されますが、もしpage.phpなどといったPHPファイルでショートコードを記述する際には、上の書き方では出力されません。。。

そのため、もしPHPファイルにショートコードを記述する際には

<?php echo do_shortcode('[itiran]'); ?>

といった感じでショートコードのタグを

<?php echo do_shortcode(‘ 〜 ‘); ?>

で挟むことで出力されます！

まとめ

　以上が記事編集ページで記事一覧を表示させたい時に活用できるショートコードの設定方法でした。

所々説明を割愛してしまったところもありますが、とりあえずは上の見本コードを元にしていただければ記事一覧を出力・表示させることができますので、ぜひご参考になれたら幸いですo(_ _*)o

TOP > WordPress > 【WordPress】ショートコードで記事一覧を表示させる方法とは？