ワードプレス(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”で検索すると見つかります。

 

 

スポンサーリンク