やまでら くみこ のレシピ

短時間で簡単に作れる人気家庭料理を紹介。

【WordPress】カテゴリを判別して、最新記事をサムネイル付きで一覧表示する方法

投稿日:2013年6月23日 更新日:

WordPress
今回は、表示している記事のカテゴリを判別して、そのカテゴリの最新記事一覧をサイドバーに表示する方法をご紹介します。
しかもサムネイル画像と一緒に表示されるので、読者の目に止まりやすくなりますよ。

最新記事一覧の動作イメージ

動作のイメージとしては、こういう感じです。

  1. 個別記事を表示している時
    その記事が属しているカテゴリの最新記事を一覧表示
  2. カテゴリ別アーカイブを表示している時
    そのカテゴリの最新記事を一覧表示
  3. それ以外(トップページなど)
    カテゴリを問わず、最新記事を一覧表示

記事のサムネイル画像とタイトルが並んで表示されます。

やり方はカンタン。下記のコードをWordPressのfunctions.phpに貼り付けるだけ。
そうすると、「RecentPost」という名前のウィジェットが新たに登録されるので、そのウィジェットをサイドバーに配置すれば完了です。
デフォルトでは、10件の記事が表示される設定になっています。
画像サイズやレイアウトなど、ご自身の環境に合わせて、カスタマイズしてお使いください。

<?php
/***************************************
サイドバーに最新記事を表示するWordPressウィジェット
***************************************/

class MyWidgetRecentPost extends WP_Widget {
function MyWidgetRecentPost() {
    parent::WP_Widget(false, $name = 'RecentPost');
}
function widget($args, $instance) {
    /* 一度に表示する記事数 */
    $num = 10;
    extract( $args );
    $title = apply_filters( 'widget_title', $instance['title'] );
    $body = apply_filters( 'widget_body', $instance['body'] );
    /* 個別記事の時は、カテゴリ別の最新記事を表示する */
    if (is_single()){
        $cat = get_the_category();
        $cat = $cat[0];
        query_posts($query_string . '&category_name='.$cat->slug.'&posts_per_page='.$num.'&offset=0');
        echo '<h3 class="widget-title">「'.$cat->name.'」の最新記事</h3>';
    /* カテゴリ別アーカイブの時は、カテゴリ別の最新記事を表示する */
    }else if(is_category()){
        $cat = get_query_var('cat');
        $cat = get_category($cat);
        query_posts($query_string . '&category_name='.$cat->slug.'&posts_per_page='.$num.'&offset=0');
        echo '<h3 class="widget-title">「'.$cat->name.'」の最新記事</h3>';
    /* それ以外の時は、全カテゴリの最新記事を表示する */
    }else{
        query_posts('posts_per_page='.$num.'&offset=0');
        echo '<h3 class="widget-title">最新記事</h3>';
    }
    if(have_posts()):while(have_posts()):the_post();?>
<div style="float:left;width:135px;margin:0 10px 5px 0;text-align:center;">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(array(135,135)); ?></a></div>
<div style="float:left;width:135px;margin-bottom:5px;"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></div><div style="clear:both;"></div>
<?php
    endwhile; endif; wp_reset_query();
}
function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = strip_tags($new_instance['title']);
    $instance['body'] = trim($new_instance['body']);
    return $instance;
}
function form($instance) {
    $title = esc_attr($instance['title']);
    $body = esc_attr($instance['body']);
}
}
add_action('widgets_init', create_function('', 'return register_widget("MyWidgetRecentPost");'));
?>

参考サイト

画像引用元

おすすめ記事

【文字数カウント】いちどに複数の文章をチェックできるWebアプリ。

文字数カウンター/文字数チェッカーを作りましたので、サイト運営に役立て…

「ヘロンの公式」計算機。三角形の面積と高さを、3辺の長さから計算します。

「ヘロンの公式」計算機は、三角形の面積と高さをWeb上でカンタンに計算…

台形の面積 計算機。基本公式と高さが分からないときの求め方。

「台形の面積」計算機は、台形の面積をWeb上でカンタンに計算できる電卓…

写真の位置情報を確認するツール「Exif-GPS」。iPhone、Android、PC対応。

「Exif-GPS」は、iPhoneやAndroidなどのスマホで撮っ…

Macでデスクトップを表示する2つの方法。キーボードショートカットとトラックパッドで簡単操作。

マックでデスクトップ画面を表示する方法をご紹介します。ウィンドウズなら…

wordpress

WordPressをブルートフォースアタックから守るために、最低限やっておきたい.htaccessの設定

世界中で頻発する、WordPressを狙った不正なアタック。その手口の…