部長ナビのページはApple製品のレビューを中心としたブログです。ドラマ仕立ての長期連載も見てね!

【WordPress】カテゴリページ内に最新記事を一覧表示させる方法

https://farm6.static.flickr.com/5762/20919637280_707214c8c3.jpg

こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております!

ページ内に「カテゴリ別で最新記事」を表示させたい

固定ページ(グローバルメニューをクリックしたときに表示される)に、「カテゴリ別で最新記事」を表示させたいと思いました。

例えば、iPhoneの固定ページを表示させた場合に、「iPhoneレビュー」「iPhoneアクセサリ」と言ったたくさんのカテゴリがあるわけですが、そのページにアクセスしただけで、だいたいの最新記事がどんな感じかパパッと見れれば良いなと思っていたので、調べてみたらありました

http://jikitourai.net/thumbnail-category-list-wordpress

このページを元に、色々とカスタマイズして、今の私の状態となっておりますので、紹介します

まずは、iPhoneページの「iPhoneレビュー」のPHPコード

<?php
    $cat = 'iphonereview';
    $num = '5';
    global $post;
 
    $term_id = get_category_by_slug($cat)->term_id;
    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
    if ($myposts) {
       echo '<strong><span style="color: rgb(255, 0, 0); font-size: 22px;">Category: ' .get_the_category_by_ID($term_id). '</span></strong>';
        foreach($myposts as $post):
            setup_postdata($post);
            echo '<div class="postlist-category"><a href='.get_permalink().'>';
            if ( has_post_thumbnail() ) {
                echo ''.get_the_post_thumbnail($page->ID, 'thumbnail'). '';
            } else {
                echo '<i class="ico-camera-alt"></i>';
            }
            echo '</a></div><div class="postlist-category-inner">';
            echo '<span class="postlist-datetime">' .get_the_time('Y/n/j').'</span>';
            echo '<p><a href='.get_permalink().'><strong>'. the_title("","",false).'</strong></a></p>';
            echo '<p>' .mb_substr( strip_tags( $post -> post_content ), 0, 0 ). '</p></div>';
        endforeach;
    } else {
    echo '<p>記事がありません。</p>';
    }
 
?>

コレを表示させたい固定ページに直接記載します。

「Exec-PHP」をインストールすることで、直接PHPコードを書いても動かせるようになります

こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております! Exec-PHPのおかげで、PHPの紹介ができなくなっていた ht

「Exec-PHP」を入れて、かつ、コードを紹介したい場合はこちらの記事の通りプラグインを入れてみてください

次に、CSSコードをstyle.cssに追記することで、見た目を整える

/* -----------------------------------------------------------------------
    カテゴリ別新着記事一覧(部長バージョン)
----------------------------------------------------------------------- */
.postlist-category {
    margin: 15px 0 10px 0;
    padding: 5px;
}
.postlist-category img {
    float: left;
    margin: 10px 6px 10px 0;
    width: 70px;
    height: 70px;
}
.postlist-category a {
    display: block;
}
.postlist-category-inner {
    margin: 0;
    padding: 1px;
}
.postlist-category-inner p {
    font-size: 16px;
    margin: 1px 0 5px 3px;
}
.postlist-datetime span {
    font-size: 10px;
 
}

コレがかなりいじったコードです。コレでウチと同じ見た目になります

コピペすると、いくらでも表示できる

なんぼでもイケます。ガンガン行っちゃってください

5〜10で一覧表示できると、ただ、カテゴリへのリンクを貼るよりも、クリックしてもらえる可能性が上がると思うので、オススメです!ぜひお試しあれ!

フォロー購読方法について >

関連記事もっと記事を読む >

  1. Home >
  2. ブログ管理 >
  3. WordPress >