wordpressの固定ページに特定カテゴリ一覧を表示する方法

記事公開日:
最終更新日:

Sponsored Links

This post is also available in: 英語

wordpressの固定ページに特定カテゴリの投稿一覧を表示する際、方法は2通りほどあります。

1.ショートコードを使って特定カテゴリ一覧を表示する
2.プラグインとPHPコードで特定カテゴリ一覧を表示する

「1.ショートコードを使って特定カテゴリの投稿一覧を表示する」方法のほうが、おそらく使い勝手が良くて簡単に導入できると思います。

1.ショートコードを使って特定カテゴリ一覧を表示する

wordpressには「ショートコード」という便利な機能が備わっています。

簡単に言うとショートコードとはプラグインやfunction.phpにPHPを記述して、記事投稿の時にショートコードを入力すると、記述したPHPコードが動く仕組みのことです。

独自の簡易的な自作プラグインって感じでしょうか。
文章で書くと意味不明なので、とりあえず以下を試してみてください。

手順は簡単で、「A.function.phpに下記のPHPコード追加」して、「B.特定カテゴリを表示したい固定ページ・記事にショートコードを挿入」してください。

A.function.phpに追加するPHPコード

参考にしたサイト:http://wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/のページ中の「5. Get posts from WordPress Database with a Shortcode」

/*** 固定ページに特定カテゴリを表示するためのショートコード ***/
function sc_liste($atts, $content = null) {
        extract(shortcode_atts(array(
                "num" => '5',
                "cat" => ''
        ), $atts));
        global $post;
        $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
        $retour='<ul>';
        foreach($myposts as $post) :
                setup_postdata($post);
             $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';
        endforeach;
        $retour.='</ul> ';
        return $retour;
}
add_shortcode("list", "sc_liste");

追記:記事公開日・更新日を表示したい場合の例

日付を表示する場合の例についてお問い合わせいただいたので追記します。

リストの中に公開日時を挿入する場合は、上記のコード例の12行目を以下のように書き換えます。

$retour.= '<li>'.get_the_date('Y年m月d日').'<a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';

もし、公開日や更新日をリストのそとに表示したい場合には、以下のように行います。
「’」(シングルクォーテーション)で囲んだ部分はHTMLとしてそのまま出力したい部分。「.」(ピリオド)は連結の意味。「.=」も変数を連結する演算子です。

/*** 固定ページに特定カテゴリを表示するためのショートコード ***/
/*** 記事公開日・更新日を表示したい場合の例 ***/
function sc_liste($atts, $content = null) {
        extract(shortcode_atts(array(
                "num" => '5',
                "cat" => ''
        ), $atts));
        global $post;
        $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
        $retour='<ul>';
        foreach($myposts as $post) :
                setup_postdata($post);
//ここから 記事公開日・更新日を表示したい場合の例
             $retour.= '公開日:'.get_the_date('Y年m月d日'); //公開日を追加
             $retour.= ' 更新日:'.get_the_modified_time('Y年m月d日'); //更新日を追加
//ここまで 記事公開日・更新日を表示したい場合の例
             $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';
        endforeach;
        $retour.='</ul> ';
        return $retour;
}
add_shortcode("list", "sc_liste");

追記:記事の抜粋を表示したい場合の例

記事の抜粋を表示する場合の例についてお問い合わせいただいたので追記します。

記事の抜粋を表示する場合は何通りか方法がありますが、例えば上記のコード例の17行目(記事公開日・更新日を表示したい場合の例)を以下のように書き換えます。

        $retour.= '<li><a href="'.get_permalink().'">'.the_title("","",false).'</a>';
        $retour.= '<br />'; //抜粋表示のため改行
        $retour.= mb_substr(get_the_excerpt(), 0, 100); //抜粋表示、最後の数字100は表示文字数の指定
        $retour.= '</li>';

wordpressのテンプレートタグ get_the_excerpt で記事の抜粋を取得して、mb_substr で取得文字数の制限を行っています。
mb_substrの最後の引数の数字(下記のコード例だと 100)を変更する事で、抜粋文字数を変更することができます。

/*** 固定ページに特定カテゴリを表示するためのショートコード ***/
/*** 記事の抜粋・記事の公開日・更新日を表示したい場合の例 ***/
function sc_liste($atts, $content = null) {
        extract(shortcode_atts(array(
                "num" => '5',
                "cat" => ''
        ), $atts));
        global $post;
        $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
        $retour='<ul>';
        foreach($myposts as $post) :
                setup_postdata($post);
	$retour.= '公開日:'.get_the_date('Y年m月d日'); //公開日を追加
	$retour.= ' 更新日:'.get_the_modified_time('Y年m月d日'); //更新日を追加
        $retour.= '<li><a href="'.get_permalink().'">'.the_title("","",false).'</a>';
        $retour.= '<br />'; //抜粋表示のため改行
        $retour.= mb_substr(get_the_excerpt(), 0, 100); //抜粋表示、最後の数字100は表示文字数の指定
        $retour.= '</li>';
        endforeach;
        $retour.='</ul> ';
        return $retour;
}
add_shortcode("list", "sc_liste");

B.固定ページ・記事挿入するショートコード例

固定ページの特定カテゴリを表示したい部分に、以下のショートコードを挿入してください。
出力されるHTMLは、<ul>と<li>でのリスト表示です。
下記の例は「表示する記事数が5」「表示する特定カテゴリIDが75」の場合です。

[list num=”5″ cat=”75″]

もし、表示したい記事数が「3」で表示したい特定カテゴリが36の場合には、下記のように記述してください。

[list num=”3″ cat=”36″]

ちなみに、wordpressのカテゴリIDの確認方法

管理画面から、カテゴリ>カテゴリー名にマウスオーバー(マウスを乗っけるだけ)すると、下記の画像のような表示が出ます。

wordpressカテゴリID確認方法

wordpressカテゴリID確認方法



画像だと「category&tag_ID=75」とありますが、この数字がカテゴリIDです。

もしこの方法でカテゴリIDが表示されない場合には、カテゴリー名の編集(画像の赤い丸で囲った部分)をクリックすると、ブラウザーのアドレスバーに同じ表記が出るはずです。

2.プラグインとPHPコードで特定カテゴリ一覧を表示する

Exec-PHP」などの固定ページにPHPが使えるプラグインを導入して、特定カテゴリ一覧を表示します。

個人的に、PHPコードで特定カテゴリ一覧を表示する方法は、wordpressの動作が重くなるのと問題が起こりやすい(セキュリティ的・ページ表示的にも)のでオススメしません。

余談ですが、PHPコードはコピペで持ってくると全角空白スペースとかが混じっていて、

【Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING, expecting ‘,’ or ‘;’ in エラーが起こったファイル.php on line エラーが起こったライン番号】

みたいなエラーが出ますので注意して下さい。
サイト全体がストップしてしまいます。

全角空白スペースが入っているのを調べるテキストエディタ

個人的に「EmEditor」というエディタ(フリーバージョン)を使っているのですが、使いやすくてオススメです。
HTML・CSS・javascript・PHPなどのコードを書いたりにも使えますが、普通のテキストエディタとしても軽くて良い感じです。
http://jp.emeditor.com/

下記の画像のように全角空白スペースが入っているのを□(四角)で表示するには、「ツール>全ての設定のプロパティ>全角空白表示」にチェックを入れるだけです。

全角空白スペースが入っているのを調べるテキストエディタ

全角空白スペースが入っているのを調べるテキストエディタ

About
Amelt.net,LLCの創業者で、費用対効果の高い統合webマーケティングによりビジネスパートナーとして継続的にサポート。詳しいより。ブログの更新情報facebookページGoogle+そしてTwitter、またRSSfeedlyLINE@にてお知らせしていますのでフォローよろしくお願い致します。


Sponsored Links