ワードプレス(WP)でカテゴリーの記事一覧リスト作成ショートコード

833224_58449933ブログに数回に渡る連載を始めると、記事の最後に連載の一覧を紹介したくなります。

しかし新しい記事をポストする度に更新するのは面倒です。

連載記事を同じカテゴリーに指定して、ショートコードを挿入することで自動で更新されるようにしたいと思います。

 

サンプル

当サイトの「Mac初心者のiPhoneアプリ開発記」という連載のサンプルです。記事一覧リストはアイキャッチ画像付きで表示しています。

  1. Mac初心者のiPhoneアプリ開発記

    この記事は先日購入したMacBook Air(略してMBA)でiPhoneアプリ...

  2. Mac初心者のiPhoneアプリ開発記2 Xcodeの闇の中で

    iPhoneアプリ開発するぞ!と意気込んでMBAを購入したのは1年前。でもAnd...

  3. Mac初心者のiPhoneアプリ開発記3 Objective-Cの壁

    手探りで進めているiPhoneアプリ開発記。前回は@ITの記事を参考に、Xcod...

  4. Mac初心者のiPhoneアプリ開発記4 Objective-Cの復讐

    前回から10日もたってしまい、ほとんど忘れてる状態からの再開です。今回も引き続き...

  5. Mac初心者のiPhoneアプリ開発記5 因縁のTwitterビューア

    今回は難しくて挫折していた「iOS 4のSDKで、Twitterを使ったiPho...

  6. Mac初心者のiPhoneアプリ開発記6 画像処理はじめました

    前回から随分時間が経ってしまいました。iPhoneアプリ市場は激戦なので、果たし...

  7. Mac初心者のiPhoneアプリ開発記7 設定画面を作る

    今回はツール系アプリなら装備しておきたい、いわゆる設定画面を作ります。今後アプリ...

  8. iOSの進化とフラットデザイン

    iKuracさんが作成したiOSの比較画像。先日発表されたiOS7のデザインの路...

  9. Mac初心者のiPhoneアプリ開発記8 設定画面を動的に作る

    前回は設定画面を作るためにストーリーボードやTableViewの仕組みを勉強しま...

  10. Mac初心者のiPhoneアプリ開発記9 アプリ申請までの道

    ようやく!初のiPhoneアプリ申請までたどり着きました。名前は『Screens...

  11. Mac初心者のiPhoneアプリ開発記 リリース後の反応

    実は先日8/9に『Screenshot Maker Pro』がリリースしました。...

  12. 大人センスなiPhone壁紙『A new world』

    NYで活躍中のドイツ人デザイナーTobias van Schneiderさんの作...

  13. ReynoldsさんのiPhone壁紙

    渋い色調のポリゴン地形がお洒落。Timothy J. Reynoldsさんの作品...

  14. シンプルの美学アンソニーさんのiPhone壁紙

    Anthony Zinonosさんの壁紙。青と黒、シンプルに色分けされた海上にオ...

  15. iPhoneアプリ開発記 iOS7対応で必要だったこと

    公開中のiPhoneアプリ『Screenshot Maker Pro』をiOS7...

  16. Cocos2d-xでiPhone&Androidアプリ開発記1

    そろそろ次のアプリ開発と日々考えていたんですが、私は個人開発なので今後は小粒なゲ...

  17. Cocos2d-xでiPhone&Androidアプリ開発記2 バージョン3.x系挫折

    『ドラゴンクエストモンスターズ スーパーライト』がCocos2d-xで開発とのこ...

  18. Cocos2d-xでiPhone&Androidアプリ開発記3 初心者TIPS

    今回で3回目のCocos2d-x連載。自作アプリを製作中ですが7割ほど完成してき...

  19. Cocos2d-xでiPhone&Androidアプリ開発記4 AdMobメディエーションでAdMob+iAd iOS編

    Cocos2dxで広告を表示するにはiOSとAndroid別々に設定が必要です。...

  20. Cocos2d-xでiPhone&Androidアプリ開発記5 AdMob Android編

    iOSに続きAndroidにAdmodを導入します。とりあえずAdModだけ表示...

  21. Cocos2d-xでiPhone&Androidアプリ開発記6 Android対応

    Androidアプリ開発経験は全くない状態で始めたCocos2dx。ここまでの開...

  22. Cocos2d-xでiPhone&Androidアプリ開発記7 ローカライズとアイコン組み込み

    ようやく初めてのcocos2dxアプリが完成しました! アルファベットを組み合わ...

  23. Cocos2d-xでiPhone&Androidアプリ開発記8 開発の流れとアプリ申請

    Cocos2d-xで初めてのアプリを公開しました。AndroidとiPhone両...

  24. Cocos2d-xでiPhone&Androidアプリ開発記9 SQLiteの注意点

    Cocos2d-xからSQLiteを使うには、iOSとAndroidそれぞれにラ...

  25. Cocos2d-xでiPhone&Androidアプリ開発記10 アプリ高速化

    Cocos2d-xで2本目をリリースしました。前回の英語パズルの続編『英単語ギズ...

  26. Cocos2d-xでiPhone&Androidアプリ開発記11 Androidのデバッグ

    Cocos2d-xによるアプリの新作をほぼ作り終えました。開発はXCode主体で...

  27. iOS/Androidアプリ『英単語RPG ワード・オブ・ザ・リング』

    iPhone/Androidアプリ『英単語RPG ワード・オブ・ザ・リング』を公...

  28. 人にも読めるQRコード

    人にも読めるQRコード『Human Readable Quick Respons...

  29. Xcode7にiOS 8 Simulatorがインストールできない

    Xcode 7.0.1に、iOS 8.1 Simulatorをインストールしよう...

 

ショートコード

以下のコードをテーマフォルダ内の functions.php に追加します。

functions.php
/*
カテゴリーIDから記事リストを作成
[get_category_posts id="1"]
[get_category_posts id="1" num="3"]
*/
function sc_get_category_posts($atts) {
    global $post;
 
    extract(shortcode_atts(array(
        'id' => '1',
        'num' => '99'
    ), $atts));
    $posts = get_posts( array('cat'=>$id,'posts_per_page'=>$num,'orderby'=>'post_date','order'=>'ASC') );
 
    if ( count($posts) ) {
        // カテゴリー名取得 get_the_category_by_ID($id)
        $o .= "<ol>\n";
        foreach ($posts as $post){
            setup_postdata($post);
            // サムネ画像取得 get_the_post_thumbnail($page->ID,array(110,110));
            $o .= '<li><a href="'.get_permalink().'">'.get_the_title()."</a></li>\n";
        }
        $o .= "</ol>\n";
    }
    wp_reset_postdata();

    return $o;
}
add_shortcode('get_category_posts', 'sc_get_category_posts');
使い方
[get_category_posts id="1"] // カテゴリー内の全ての記事を表示
[get_category_posts id="1" num="3"] // 表示数の上限あり

 

カスタマイズ

基本は ol と li を出力するだけのシンプルなコードです。

もしカテゴリー名を使ってタイトル等を表示したい場合は、コメントに記述してある get_the_category_by_ID が利用できます。 またサムネ(アイキャッチ)画像を表示したい場合は get_the_post_thumbnail が利用できます。

例えば上のサンプルではサムネ画像とはてブ数を表示していますが、 foreach ($posts as $post) 内をこのようにカスタマイズしています。

if ( has_post_thumbnail() ){
    $o .= '<li><a href="'.get_permalink().'" class="item"><div class="thumb"><img src="http://b.hatena.ne.jp/entry/image/'.get_permalink().'" border="0" class="hatena">'.get_the_post_thumbnail($page->ID,array(110,110)).'</div>'.get_the_title()."</a></li>\n";
}

関連記事プラグインのYARPPと同じCSSを使ったデザインです。このデザインは で解説しています。

表示順序は投稿日時順に並ぶように指定していますが、もし変更したい場合は get_posts内の orderby や order で変更できます。指定方法は”get_posts”で検索すると見つかります。

 

広告