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

2015.07.01 Column 2 Comments boff 2,080 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='
    '; foreach($myposts as $post) : $cat = get_the_category(); $catname = $cat[0]->cat_name; $catslug = $cat[0]->slug; setup_postdata($post); $retHtml.='
  • '; $retHtml.=''.get_post_time( get_option( 'date_format' )).''; $retHtml.=''.$catname.''; $retHtml.=''.the_title("","",false).''; $retHtml.='
  • '; endforeach; $retHtml.='
'; $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の結果は次の通りです。

 


 

つまり、カテゴリーごとにカテゴリー名の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