WordPress 記事サムネイルとタイトル日付一覧表示方法

記事サムネイルとタイトル日付一覧表示方法

下記のコードをfunction.phpに追記してショートコードを任意のページに貼り付けるだけ。
するとこんな感じになります。

Feature

上の表示はCSSで整形してあり、「Feature」というヘッダーを追加しています。

  • カテゴリNo.はブラウザのデベロッパーツールで、任意のカテゴリを選択すると、htmlに表示されます。
  • フューチャー部分は、「新着情報」などに書き換えると上部に表示されます。
  • アイキャッチ画像がない場合の指定画像の保管場所は子テーマディレクトリのimageフォルダの中にno-image-sl.pngというファイルを指定しています。/images/no-image-sl.png ←書き換えてください。
  • ‘-‘ デフォルトはハイフン表示の年月日表示を変えることができます。例:’ねん’ ’ガツ’ ’にち’
  • ショートコードは[getCategoryArticle]←半角のカッコに変えてください。[getCategoryArticle num=”8″ cat=”448″]←ショートコード側で表示数とカテゴリNo.も変えることができます。
function getCatItems($atts, $content = null) {
	extract(shortcode_atts(array(
		"num" => '4', //表示数
		"cat" => '448' //カテゴリNo.
	), $atts));

	global $post;
	$oldpost = $post;

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

	if($myposts) {
		$retHtml = '<div class="getPostDispArea"><h2 class="getPostHeader">Feature</h2>'; //フューチャー
		foreach($myposts as $post) :
			$retHtml .= '<div class="getPost">';
			setup_postdata($post);

			if ( has_post_thumbnail() ) { // Has Thumbnail
				$retHtml .= '<div class="getPostImgArea">';
				$retHtml .= '<a href="' . get_permalink() . '">' . get_the_post_thumbnail($page->ID, 'thumbnail') . '</a>';
				$retHtml .= '</div>';
			} 
			else { // No Thumbnail
				$retHtml .= '<div class="getPostImgArea">';
				$retHtml .= '<a href="' . get_permalink() . '">' . '<img src="' . get_theme_file_uri( '/images/no-image-sl.png') . '" alt-"no-image" class="no-image">' . '</a>'; //アイキャッチ画像がない場合の指定画像
				$retHtml .= '</div>';
			}

			$retHtml .= '<div class="getPostStringArea">';
			$year = get_the_time('Y'); // Year
			$month = get_the_time('n');	// Month
			$day = get_the_time('j'); // Day
			$retHtml .= '<span>' . $year . '年' . $month . '月' . $day . '日' . '</span>'; //年月日
			$retHtml.= '<h4 class="getPostTitle">';
			$retHtml.= '<a href="' . get_permalink() . '">' . the_title("","",false) . '</a>';
			$retHtml.= '</h4>';
			$retHtml.= '</div></div>';
		endforeach;
		$retHtml.= '</div>';} 
	else {
		$retHtml='<p>No Post</p>';}
		$post = $oldpost;
	return $retHtml;
}

add_shortcode("getCategoryArticle", "getCatItems");

function.phpへの追記の仕方・・・

まずは子テーマの作成から

テーマをアップデートすると、function.phpに書いた内容が更新されて消えてしましますので、子テーマを作ってから追記しましょう。

function.phpは、WordPress管理画面 > 外観 > テーマエディター > テーマの為の関数(function.php)

子テーマには、<? php から始まるphpコードで書かれています。
phpは締めのタグを省略できるので、htmlのように > で閉じなくても良いのです。

上のコードをよく見てみましょう。functionから始まり、{ で改行されていて、必ず } で閉じられていると、エラーになりません。関数ですので、(((())))が多くて見辛いですが、よく見てみると、必ずカッコは閉じられています。