WordPressの固定ページにショートコードで特定のカテゴリーの投稿記事（サムネイル、タイトル、投稿日、記事概要のみ抜粋）の一覧を表示する方法

前回の投稿から二十日以上空いて二度目の投稿になります、網干と申します。
今回は、WordPressの固定ページにショートコードでカテゴリー記事の一覧を表示する方法を掲載します。
本記事を参考にすることで、下記のようなページを表示することができます。

[2016/09/27 追記] 本記事のプログラムを使用して、新着記事に「NEW」の文字を追加する記事を追加しました！

incloop.com

WordPressの固定ページにショートコードでカテゴリー記事の一覧を表示して指定期間内の記事タイトルに文字列を追加する方法

プログラムの初歩的なミスで一時間ほど唸っていました、網干です。PHPで変数に代入した数値を使って計算を行った際に、正常に計算されないバグに1時間ほど悩んでいまし...

[2018/02/26 追記] カスタム投稿の記事一覧を表示する方法も記事にしました！

incloop.com

カスタム投稿の指定タクソノミー（カテゴリ）の投稿記事のカスタムフィールドのラベルと値を取得する

ネット上で見かける言葉を誤解したまま使うことが稀にあります、網干です。数年前は'lol'（笑いを意味する英語スラング）を知り合い同士でよく使っていました...

今回のブログの見出しはコチラです！

1 なぜ固定ページに記事の一覧を表示するためにショートコードを記述するのか？
2 ショートコードはどうやって使うのか？
3 functions.phpに記事一覧表示のプログラムを仕込む
4 サムネイル画像はどのように取得しているのか？
5 ショートコードを使用して固定ページに特定のカテゴリーの記事一覧を表示する
6 効率的なコードを探して、より使いやすいプログラムを作りましょう

なぜ固定ページに記事の一覧を表示するためにショートコードを記述するのか？

通常、WordPressの固定ページにphpスクリプトを記述しても機能しません。
そのため「phpスクリプトを使用して固定ページにカテゴリー記事の一覧情報を載せたい！」と考えても実現できません。
別途プラグインをインストールすれば、固定ページでphpスクリプトを機能させることも可能ですが、
今回はプラグインをインストールせずに、ショートコードを使って固定ページにカテゴリー記事の一覧を表示する方法を掲載します。

ショートコードはどうやって使うのか？

ショートコードとは、複雑なプログラムを短いコードで動作させることができる機能です。
functions.phpにプログラムを登録することで、投稿記事に短いコードを記述するだけで登録したプログラムを動作させることができます。
一般的には”[xxx]”のように定義した名前をブラケット（大括弧）で囲って使用します。

functions.phpに記事一覧表示のプログラムを仕込む

functions.phpに下記のコードを記述します。

<?php
//　一覧記事取得関数 --------------------------------------------------------------------------------
// "num" = 表示記事数, "cat" = カテゴリ番号
// 呼び出し元での指定も可能 -> [getCategoryArticle num="x" cat="y"]
function getCatItems($atts, $content = null) {
	extract(shortcode_atts(array(
	  "num" => '2',
	  "cat" => '12'
	), $atts));
	
	// 処理中のpost変数をoldpost変数に退避
	global $post;
	$oldpost = $post;
	
	// カテゴリーの記事データ取得
	$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
	
	if($myposts) {
		// 記事がある場合↓
		$retHtml = '<div class="getPostDispArea">';
		// 取得した記事の個数分繰り返す
		foreach($myposts as $post) :
			// 投稿ごとの区切りのdiv
			$retHtml .= '<div class="getPost">';

			// 記事オブジェクトの整形
			setup_postdata($post);

			// サムネイルの有無チェック
			if ( has_post_thumbnail() ) {
				// サムネイルがある場合↓
				$retHtml .= '<div class="getPostImgArea">' . get_the_post_thumbnail($page->ID, 'thumbnail') . '</div>';
			} else {
				// サムネイルがない場合↓※何も表示しない
				$retHtml .= '';
			}
			
			// 文章のみのエリアをdivで囲う
			$retHtml .= '<div class="getPostStringArea">';
			
			// 投稿年月日を取得
			$year = get_the_time('Y');	// 年
			$month = get_the_time('n');	// 月
			$day = get_the_time('j');	// 日
			
			$retHtml .= '<span>この記事は' . $year . '年' . $month . '月' . $day . '日に投稿されました</span>';
			
			// タイトル設定(リンクも設定する)
			$retHtml.= '<h4 class="getPostTitle">';
			$retHtml.= '<a href="' . get_permalink() . '">' . the_title("","",false) . '</a>';
			$retHtml.= '</h4>';
			
			// 本文を抜粋して取得
			$getString = get_the_excerpt();
			$retHtml.= '<div class="getPostContent">' . $getString . '</div>';
			
			$retHtml.= '</div></div>';
			
		endforeach;
		
		$retHtml.= '</div>';
	} else {
		// 記事がない場合↓
		$retHtml='<p>記事がありません。</p>';
	}
	
	// oldpost変数をpost変数に戻す
	$post = $oldpost;
	
	return $retHtml;
}
// 呼び出しの指定
add_shortcode("getCategoryArticle", "getCatItems");
?>

<?php

//　一覧記事取得関数 --------------------------------------------------------------------------------

// "num" = 表示記事数, "cat" = カテゴリ番号

// 呼び出し元での指定も可能 -> [getCategoryArticle num="x" cat="y"]

function getCatItems($atts, $content = null) {

extract(shortcode_atts(array(

"num" => '2',

"cat" => '12'

), $atts));

// 処理中のpost変数をoldpost変数に退避

global $post;

$oldpost = $post;

// カテゴリーの記事データ取得

$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);

if($myposts) {

// 記事がある場合↓

$retHtml = '<div class="getPostDispArea">';

// 取得した記事の個数分繰り返す

foreach($myposts as $post) :

// 投稿ごとの区切りのdiv

$retHtml .= '<div class="getPost">';

// 記事オブジェクトの整形

setup_postdata($post);

// サムネイルの有無チェック

if ( has_post_thumbnail() ) {

// サムネイルがある場合↓

$retHtml .= '<div class="getPostImgArea">' . get_the_post_thumbnail($page->ID, 'thumbnail') . '</div>';

} else {

// サムネイルがない場合↓※何も表示しない

$retHtml .= '';

}

// 文章のみのエリアをdivで囲う

$retHtml .= '<div class="getPostStringArea">';

// 投稿年月日を取得

$year = get_the_time('Y'); // 年

$month = get_the_time('n'); // 月

$day = get_the_time('j'); // 日

$retHtml .= '<span>この記事は' . $year . '年' . $month . '月' . $day . '日に投稿されました</span>';

// タイトル設定(リンクも設定する)

$retHtml.= '<h4 class="getPostTitle">';

$retHtml.= '<a href="' . get_permalink() . '">' . the_title("","",false) . '</a>';

$retHtml.= '</h4>';

// 本文を抜粋して取得

$getString = get_the_excerpt();

$retHtml.= '<div class="getPostContent">' . $getString . '</div>';

$retHtml.= '</div></div>';

endforeach;

$retHtml.= '</div>';

} else {

// 記事がない場合↓

$retHtml='<p>記事がありません。</p>';

}

// oldpost変数をpost変数に戻す

$post = $oldpost;

return $retHtml;

}

// 呼び出しの指定

add_shortcode("getCategoryArticle", "getCatItems");

コードの7行目で”num” => ‘2’と指定しているのは表示する記事数、
コードの8行目で”cat” => ’12’と指定しているのは表示するカテゴリーの番号になっています。
そのため、コードを実行するとカテゴリー番号12の最新記事を二つ表示することになります。

※カテゴリーの番号は下記の手順で確認できます。
1. [投稿]→[カテゴリー]のカテゴリー項目をクリックする

2. カテゴリーの編集画面のURLに記載された”tag_ID=xx”の”xx”部分がカテゴリー番号になります

functions.phpに記述する内容は以上になります。
上記のコードで下記の順にデータが取得できます。

1. サムネイル画像
2. 投稿年月日
3. タイトル
4. 本文（抜粋）

さらに、上記のプログラムにHTMLタグを加えて構造を整えることで、
自由なスタイルでカテゴリー記事の一覧を表示することができます。

なお、今回の記事一覧を表示するために設定したスタイルは下記になります。
※WordPressのテーマによってCSSの影響範囲が変わるので、下記コードを貼り付けても正しく表示されない場合があります。

.getPostDispArea .getPost {
    border: 2px solid #9a9a9a;
    padding: 15px;
    margin: 10px 0px;
    background-color: #e4f4ff;
}

.getPostDispArea .getPost:after {
    content: '';
    display: table;
    clear: both;
}

.getPostImgArea {
    width: 20%;
    float: left;
}

.getPostStringArea {
    width: 80%;
    padding-left: 15px;
    float: left;
}

h4.getPostTitle {
    font-weight: bold;
}

.getPostDispArea .getPost {

border: 2px solid #9a9a9a;

padding: 15px;

margin: 10px 0px;

background-color: #e4f4ff;

}

.getPostDispArea .getPost:after {

content: '';

display: table;

clear: both;

}

.getPostImgArea {

width: 20%;

float: left;

}

.getPostStringArea {

width: 80%;

padding-left: 15px;

float: left;

}

h4.getPostTitle {

font-weight: bold;

}

サムネイル画像はどのように取得しているのか？

サムネイル画像は下記のコードにて取得しています。

get_the_post_thumbnail($page->ID, 'thumbnail')

1	get_the_post_thumbnail($page->ID, 'thumbnail')

get_the_post_thumbnailタグの使い方に関しては下記の記事を参考にしてください。
http://wpdocs.osdn.jp/テンプレートタグ/get_the_post_thumbnail

ショートコードを使用して固定ページに特定のカテゴリーの記事一覧を表示する

プログラムの仕込みは完了しました、さっそく使ってみましょう。
使い方は非常に簡単で、固定ページに下記のコードを記述するだけでカテゴリー一覧を表示できます。

[getCategoryArticle]

1	[getCategoryArticle]

実際に使ってみると…
※下記の画像は別サイトで実行した際の表示例になります。

このように表示されます。
記事にサムネイル画像が設定されている場合は表示されて、設定されていない場合は何も表示しません。
スタイルが簡素ですが、カテゴリー記事の一覧がしっかりと表示されています。

更に、このコードは呼び出し側で「記事の表示数」と「カテゴリーの種類」を変更することができます。
例えば、記事の表示数を三つにして、カテゴリー番号の5を表示したい場合は下記のように指定します。

[getCategoryArticle num="3" cat="5"]

1	[getCategoryArticle num="3" cat="5"]

これで固定ページに自由なスタイルでカテゴリー記事の一覧を表示することが可能になります。

効率的なコードを探して、より使いやすいプログラムを作りましょう

いかがでしたか？
…と偉そうに終わらせようとしましたが、今回紹介したコードはもっと良い組み方があると思います。
というのも、私自身PHPやWordPressの経験が1か月もないため、かなり初歩的な内容になっていると思います。
間違いがございましたらコメントをお願い致します。

今回紹介したプログラムの参考にさせていただいたサイト様は下記になります。
http://labrid.jp/wp/snipet/wp-sc-list/

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。