cssコピペで簡単!固定ページでサムネイル付きカテゴリ一覧を表示させる

css_固定

cssコピペで、固定ページで
サムネイル付きカテゴリ一覧をつくる

システムエンジニア(SE)かっきーです。

記事内や固定ページの中に、カテゴリーごとの記事一覧を表示させたいと思ったことはありませんか。

あまり詳しくない人は、どこのにどんなコードを書いていいのかわからないと思います。
そこで今回はCSSコピペで簡単に、カテゴリごとの記事一覧を表示させるコードを紹介しちゃいます。

固定ページや投稿記事で使いたい場合には、以前紹介した
Exec-PHP」
などの
プラグインを使って利用して頂ければと思います。

表示サンプル

こんな感じに、カテゴリごとの記事一覧を表示させれます。

またお好みに合わせて記事数や記事概要の文字数も簡単に変更が出来ちゃいます。

実際のphpコード

<?php
    $cat = 'wordpress'; //カテゴリ名
    $num = '4'; //表示させる記事数
    global $post;
 
    $term_id = get_category_by_slug($cat)->term_id;
    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
    if ($myposts) {
        echo '<strong>Category: ' .get_the_category_by_ID($term_id). '</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 H:i: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, 16 ). '...</p></div>';//概要の文字数を制御
        endforeach;
    echo '<p><a href=' .get_category_link($term_id). '>カテゴリの一覧 ≫</a></p>';
    } else {
    echo '<p>記事がありません。</p>';
    }
 
?>

設定項目

上記phpコード内にも記載しておりますが、

$cat = 'wordpress'; //カテゴリ名

でカテゴリ名を指定します。
カテゴリのスラッグの値を入れてください。

$num = '4'; //表示させる記事数

では表示させる記事数を自由に変更することが出来ます。

echo '<p>' .mb_substr( strip_tags( $post -> post_content ), 0, 16 ). '...</p></div>';//概要の文字数を制御

またここでは、記事本文を何文字目まで表示させるか制御できます。

cssコード

お使いのテーマによってもcssは変わってくるかと思うため、
載せておきますが、適時、ご自身の環境に合わせてください。

.postlist-category {
    margin: 10px 0 5px 0;
    padding: 2px;
    border-top: 1px dashed #999;
}
.postlist-category img {
    float: left;
    margin: 10px 6px 0 0;
    width: 80px;
    height: 80px;
}
.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;
 
}

注意点

wordpressでphpコードを動かすには、そのままの状態では動きません。
そのため『Exec-PHP』等のプラグインをいれお試しください。

( icon-star 前回の記事も見る

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です