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

2015.07.01 Column 7 Comments boff 5,266 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")表示する」ということです。

すべてのカテゴリーを対象にする場合は、「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で背景色と文字色をあてることができるようになります。

 

改造版

指定した日にち以内の新着記事に「New」などをつけるバージョンも書きました。

最新記事一覧を改造:何日以内かには”New”を表示

 

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

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に記述してやる必要があります。
      カテゴリーの「スラッグ」については、管理画面から「投稿」→「カテゴリー」でご確認ください。

  2. gencha より:

    はじめまして。時期外れ(2016年の投稿)に質問をさせていただき恐縮ですが、一点ご質問させてください。
    筆者様がここに書いてくださっていますコードに何かを足して、新着表示である「NEW!」を表示させたいのですが、私のうででは無理でした。叶うのでしたら、ご教示いただけないでしょうか? お手数をおかけしますが、よろしくお願いいたします。

    1. boff より:

      コメントありがとうございます。
      今ちょっと多忙でゆっくり考える時間がありません。
      大雑把な情報で申し訳ないのですが、以下の解説などは参考になるかもです。

      https://webdesignday.jp/inspiration/wordpress/3687/
      http://wp3.jp/2011/12/25/wordpress-new/

      時間ができればこちらでも調べて、あらためてコード書いてみたと思います。

      1. gencha より:

        早々にご返信いただきましてありがとうございます!
        お教えいただいたリンク先を参考に、こちらのサイトのコードにたしましたが、私がPHPに明るくないのも手伝い、うまくいきませんでした。
        引き続きトライしてみます!

        図々しいお願いで恐縮ですが、お時間があるようでしたら、こちらのコードに足された版を掲載していただければ幸いです。
        ご返答ありがとうございました。

  3. gencha より:

    作者様。
    改造版の作成、ありがとうございます!
    感激です! おかげさまで実装できました。
    お礼を新しいページに書くか迷いましたが、こちらでのご挨拶とさせてください。

    重ねてお礼申し上げます。

    1. boff より:

      よかったです。

コメントを残す

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

Only Japanese comments permit.

TrackBack URL

Top