WordPressのショートコードで最新記事一覧を表示する方法

2015.07.01 Column 2 Comments boff 2,428 views
news_list

 

WordPressでプラグインを使わず、固定ページや記事内に最新記事のリストを表示するショートコードを調べてみました。

カテゴリーごとにラベルの背景色と文字色を変えたかったので、いろいろ参考にしながら自分なりにアレンジしたコードを晒してみます。

 

実際の表示状態

まずは実際の表示は下のような感じです。

 

 

ショートコード用プラグラムの記述

function.phpに次のコードを追記します。

 

/* 最新記事リスト */
function getNewItems($atts) {
	extract(shortcode_atts(array(
		"num" => '',	//最新記事リストの取得数
		"cat" => ''	//表示する記事のカテゴリー指定
	), $atts));
	global $post;
	$oldpost = $post;
	$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
	$retHtml='<ul class="news_list">';
	foreach($myposts as $post) :
	$cat = get_the_category();
	$catname = $cat[0]->cat_name;
	$catslug = $cat[0]->slug;
		setup_postdata($post);
		$retHtml.='<li>';
		$retHtml.='<span class="news_date">'.get_post_time( get_option( 'date_format' )).'</span>';
		$retHtml.='<span class="cat '.$catslug.'">'.$catname.'</span>';
		$retHtml.='<span class="news_title"><a href="'.get_permalink().'">'.the_title("","",false).'</a></span>';
		$retHtml.='</li>';
	endforeach;
	$retHtml.='</ul>';
	$post = $oldpost;
	wp_reset_postdata();
	return $retHtml;
}
add_shortcode("news", "getNewItems");

 

加えたアレンジは、カテゴリーの”slug”を参照しSPANクラス名に指定したことです。

 

ショートコードの記述

固定ページ内や個別記事内の表示させたい場所に、以下のショートコードを記述します。

 

[news cat="2,3,5" num="5"]

 

上記のショートコードの意味は、「カテゴリーIDが2と3と5(cat=”2,3,5”)の最新記事を5件(num=”5″)表示する」ということです。

すべてのカテゴリーを対象にする場合は、「news cat=””」にすればOKです。

 

HTMLの出力結果

ショートコードを記述した場所に出力されるHTMLの結果は次の通りです。

 

<ul class="news_list">
	<li>
		<span class="news_date">日付</span>
		<span class="cat catslug">カテゴリー名</span>
		<span class="news_title"><a href="URL">記事タイトル</a></span>
	</li>
</ul>

 

つまり、カテゴリーごとにカテゴリー名のSPANクラスの”catslug”が変わりますので、それぞれCSSで背景色と文字色をあてることができるようになります。

 

WordPressユーザーのためのPHP入門 はじめから、ていねいに。
水野史土
エムディエヌコーポレーション
売り上げランキング: 75,279

Reaction

  1. 黒バビット より:

    最近、Wordpressを勉強しているWeb初心者です。
    まさしく私が求めていたショートコードなのですが、今いちCSSの作り方がわかりません。

    筆者様のように綺麗な記事一覧を作りたいのですが、どのようなCSSなのか教えていただけないでしょうか?
    よろしくお願い致します。

    1. boff より:

      コメントありがとうございます。

      CSSの初歩的なことはご自身で調べていただくとして、当記事で紹介したショートコードのCSSについてお答えします。
      とくに、リスト中のカテゴリー表記に関するCSSは次のような感じです。

      ul.news_list li .cat {
      	padding: 2px 6px;
      	margin:0 5px;
      	font-size:11px;
      	border-radius: 5px;
      	-webkit-border-radius: 5px;
      	-moz-border-radius: 5px;
      }
      ul.news_list li .スラッグ {
      	background:#0DAD67;
      	color:#fff;
      }
      

      まず、前者の”.cat”でカテゴリーラベルのサイズやポジションなどを設定しています(数値は適当に変更して調整してください)。
      そして後者の”.スラッグ”で、それぞれのカテゴリーの「スラッグ」に応じて、背景色や文字色を変えています。
      例えば、カテゴリーの「スラッグ」が”test”だった場合は、次のようになります。

      ul.news_list li .test {
      	background:#0DAD67;
      	color:#fff;
      }
      

      ですので、後者はカテゴリーごとにCSSに記述してやる必要があります。
      カテゴリーの「スラッグ」については、管理画面から「投稿」→「カテゴリー」でご確認ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Only Japanese comments permit.

TrackBack URL