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

途中で文字列を返す関数を挟んでいたので、戻り値を受け取った変数をキャストしてあげる必要があるのか？
または、そもそも関数の使い方を間違えているのか？？

等々、いろいろと考えつつテストプログラムを組んで確認をしましたが解決せず…。
万策尽きたと、プログラムを隅から隅まで眺めてようやく気付きました。

「あ、変数名が間違ってる…」

放心しました。

……さて、今回は以前紹介した「WordPressの固定ページにショートコードでカテゴリー記事の一覧を表示する方法」のちょっとしたアップデート版の紹介をします。
内容としては非常に単純です。
ある期間内に投稿された記事には「NEW」の文字を加える処理を追加して、カテゴリー記事の一覧を表示します。

カテゴリー記事の一覧で投稿から7日未満の新着記事には「NEW」の文字列を加える

前回の記事を参考にしてプログラムを組んでいきます。
参考記事は下記になります。

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);
	
	$newDispDays = 7 * 24 * 60 * 60;	// 「New」を表示する日数（公開日から7日間）
	$today = date_i18n('U');	// 本日の日付の秒数
	
	if($myposts) {
		// 記事がある場合↓
		$retHtml = '<div>';
		// 取得した記事の個数分繰り返す
		foreach($myposts as $post) :
			// 区切りの線を入れる
			$retHtml .= '<hr size="3" color="#000000">';

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

			// サムネイルの有無チェック
			if ( has_post_thumbnail() ) {
				// サムネイルがある場合↓
				$retHtml .= '<p>' . get_the_post_thumbnail($page->ID, 'thumbnail') . '</p>';
			} else {
				// サムネイルがない場合↓※何も表示しない
				$retHtml .= '';
			}

			// 投稿年月日を取得
			$year = get_the_time('Y');	// 年
			$month = get_the_time('n');	// 月
			$day = get_the_time('j');	// 日
			
			$retHtml .= '<span>この記事は' . $year . '年' . $month . '月' . $day . '日に投稿されました</span>';
			
			// 投稿日の秒数を取得
			$entryDay = get_the_time('U');
			// 経過日数を取得
			$elapsedDays = $today - $entryDay;
			
			// タイトル設定(リンクも設定する)
			$retHtml.= '<h4 class="title">';
			// 7日経過していない？
			if( $newDispDays > $elapsedDays ){
				$retHtml.= '<span style="color:red">NEW </span>';
			}
			$retHtml.= '<a href="' . get_permalink() . '">' . the_title("","",false) . '</a>';
			$retHtml.= '</h4>';
			
			// 本文を抜粋して取得
			$getString = get_the_excerpt();
			$retHtml.= '<div class="content">' . $getString . '</div>';
			
		endforeach;
		
		$retHtml.= '</div>';
	} else {
		// 記事がない場合↓
		$retHtml='<p>記事がありません。</p>';
	}
	
	// oldpost変数をpost変数に戻す
	$post = $oldpost;
	
	return $retHtml;
}
// 呼び出しの指定
add_shortcode("getCategoryArticle", "getCatItems");
?>

上記のコードを使用して一覧を表示すると、投稿してから7日間未満の記事のタイトルには赤文字の「NEW」が追加されます。

しかし、記事によってはなかなか更新されないカテゴリーの記事もあると思います。
その場合、もう少し新着情報の期間を長くしたいですね。
なので、もう少しカスタマイズして、パラメータを指定することで「NEW」をつける期間を変更できるようにしましょう。

カテゴリー記事の一覧で指定した期間未満の新着記事には「NEW」の文字列を加える

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

<?php
//　一覧記事取得関数 --------------------------------------------------------------------------------
// "num" = 表示記事数, "cat" = カテゴリ番号, "day" = NEWマークを付ける期間
// 呼び出し元での指定も可能 -> [getCategoryArticle num="x" cat="y" day="z"]
function getCatItems($atts, $content = null) {
	extract(shortcode_atts(array(
	  "num" => '2',
	  "cat" => '12',
	  "day" => '7'
	), $atts));
	
	// 処理中のpost変数をoldpost変数に退避
	global $post;
	$oldpost = $post;
	
	// カテゴリーの記事データ取得
	$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
	
	$newDispDays = $day * 24 * 60 * 60;	// 「New」を表示する日数の秒数
	$today = date_i18n('U');	// 本日の日付の秒数
	
	if($myposts) {
		// 記事がある場合↓
		$retHtml = '<div>';
		// 取得した記事の個数分繰り返す
		foreach($myposts as $post) :
			// 区切りの線を入れる
			$retHtml .= '<hr size="3" color="#000000">';

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

			// サムネイルの有無チェック
			if ( has_post_thumbnail() ) {
				// サムネイルがある場合↓
				$retHtml .= '<p>' . get_the_post_thumbnail($page->ID, 'thumbnail') . '</p>';
			} else {
				// サムネイルがない場合↓※何も表示しない
				$retHtml .= '';
			}

			// 投稿年月日を取得
			$year = get_the_time('Y');	// 年
			$month = get_the_time('n');	// 月
			$day = get_the_time('j');	// 日
			
			$retHtml .= '<span>この記事は' . $year . '年' . $month . '月' . $day . '日に投稿されました</span>';
			
			// 投稿日の秒数を取得
			$entryDay = get_the_time('U');
			// 経過日数を取得
			$elapsedDays = $today - $entryDay;
			
			// タイトル設定(リンクも設定する)
			$retHtml.= '<h4 class="title">';
			// 指定した日数を日経過していない？
			if( $newDispDays > $elapsedDays ){
				$retHtml.= '<span style="color:red">NEW </span>';
			}
			$retHtml.= '<a href="' . get_permalink() . '">' . the_title("","",false) . '</a>';
			$retHtml.= '</h4>';
			
			// 本文を抜粋して取得
			$getString = get_the_excerpt();
			$retHtml.= '<div class="content">' . $getString . '</div>';
			
		endforeach;
		
		$retHtml.= '</div>';
	} else {
		// 記事がない場合↓
		$retHtml='<p>記事がありません。</p>';
	}
	
	// oldpost変数をpost変数に戻す
	$post = $oldpost;
	
	return $retHtml;
}
// 呼び出しの指定
add_shortcode("getCategoryArticle", "getCatItems");
?>

呼び出しは下記のコードで行います。

[getCategoryArticle cat="2" num="12" day="365"]

これで、呼び出し元で指定した日数未満の期間に投稿された記事には「NEW」の文字がつくようになります。

最後に

いかがでしたか？

今回は非常に単純なプログラムの追加でしたが、プログラムの改良は小さい修正/追加を何度も何度も繰り返して行われることが多いです。
小さい改良を重ねることでプログラムの質は良くなり、同時にプログラマーも成長していきます。

プログラマーは頭を抱えることが多い職種ですが、毎日が勉強になっていて非常に楽しいです。
修正や改良や追加を行うたびにコードを見直すことで、自身の成長が実感できるのはこの職種の特徴だと思います。

この記事の最初の方でプログラムの愚痴を語りましたが、愚痴を語ることも楽しかったりします。
本当にプログラムは憎めないヤツです。

今回紹介したプログラムの参考にさせていただいたサイト様は下記になります。
http://agn.jp/blog/?p=1596

ではまた！

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

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

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

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

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

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

通常、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");
?>

コードの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;
}

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

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

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

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

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

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

[getCategoryArticle]

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

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

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

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

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

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

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

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

ではまた！

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

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