この記事をシェアする

サイトのトップページなどで良くある新着情報などをカテゴリ毎に表示させる方法。

jQuery UIと連動してタブ表示、なんてこともできますよ。

元ネタはフォーラムにありますのでそちらを参照に

「カテゴリごとの記事の一覧をトップページに羅列したい」
http://ja.forums.wordpress.org/topic/3160?replies=5

<?php
// まずはカテゴリーを取得(カスタムタクソノミーでもOK)
$catargs = array(
    'taxonomy' => 'category'
);
$catlists = get_categories( $catargs );
foreach($catlists as $cat) : // 取得したカテゴリの配列でループを回す
    $args = array(
        'cat' => $cat->term_id
    );
    $my_posts = get_posts( $args );
    global $post; // テンプレートファイル内なら書かなくても良い
    if ( $my_posts ) { // 該当する投稿があったら
        foreach ( $my_posts as $post ) :
            setup_postdata( $post );
            /* the_title(), the_permalink() 等使用可
            マークアップはお好みで
            */
        endforeach; // 投稿のループ終わり
    } else {
        // 投稿がなかった場合
    }
    wp_reset_postdata();
endforeach; // カテゴリのループ終わり
?>

カスタムタクソノミーで行うのならば4行目を

'taxonomy' => 'タクソノミー名'

とし、9行目を

'タクソノミー名' => $cat->slug

とします。
その他の引数はCodexを見てどうぞ。

ちょっと応用

jQueryUI のTabsと連動してみます。
事前に関連の.jsや.cssファイルは読み込んでおいてください。

<?php
echo '<div id="tabs">';
$catargs = array(
    'taxonomy' => 'category'
);
$catlists = get_categories( $catargs );

// タブ部分
echo "<ul>";
foreach( $catlists as $category ) {
    echo '<li><a href="#cat-' . $category->slug . '" class="cat-' . $category->slug . '">' . $category->name . '</a></li>';
}
echo "</ul>";
// カテゴリーごとの投稿を表示
foreach( $catlists as $cat ) :
    echo '<div id="cat-' . $cat->slug . '">';
    $my_posts = get_posts( 'cat=' . $cat->term_id );
    if ( $my_posts ) { // 該当する投稿があったら
        echo "<ul>";
        foreach ( $my_posts as $post ) :
            setup_postdata( $post );
            echo "<li>";
            the_title();
            echo "</li>";
        endforeach; // 投稿のループ終わり
    echo "</ul>";
    }
    wp_reset_postdata();
    echo '<div><a href="/" . get_category_link( $cat->term_id ) . '">' . $cat->name . '一覧 >></a></div>';
    echo '</div>';
endforeach;

echo "</div>"
?>

要はタブになっている部分の a のアンカー(#tabs-1)と、タブの内容を囲んでいるdivのid(tabs-1)が一致すればいいので、当該部分を $cat->term_id とかにしてもOKです。

この記事をシェアする