Marble-Lab

WordPressでプラグインを使わず、固定ページや記事内に最新記事のリストを表示するショートコードを調べてみました。

カテゴリーごとにラベルの背景色と文字色を変えたかったので、いろいろ参考にしながら自分なりにアレンジしたコードを晒してみます。

実際の表示状態

まずは実際の表示は下のような感じです。

• 2024.01.07GadgetM.2 SSDに換装後にオトナブルー
• 2024.01.01Information2024年 明けましておめでとうございます
• 2023.10.24GadgetDiscordはじめてみた
• 2023.07.07GadgetThreadsはじめました
• 2023.02.22Column2023年2月22日はネコの日です(ΦωΦ) #猫の日

ショートコード用プログラムの記述

functions.phpに次のコードを追記します。

/* 最新記事リスト */
function getNewItems($atts) {
    extract(shortcode_atts(array(
        "num" => '', //最新記事リストの取得数
        "cat" => '' //表示する記事のカテゴリー指定
    ), $atts));
    global $post;
    $oldpost = $post;
    $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
    $retHtml='<ul class="news_list">';
        foreach($myposts as $post) :
            $cat = get_the_category();
            $catname = $cat[0]->cat_name;
            $catslug = $cat[0]->slug;
            setup_postdata($post);
            $retHtml.='<li>';
            $retHtml.='<span class="news_date">'.get_post_time( get_option( 'date_format' )).'</span>';
            $retHtml.='<span class="cat '.$catslug.'">'.$catname.'</span>';
            $retHtml.='<a href="'.get_permalink().'" class="news_title">'.the_title("","",false).'</a>';
            $retHtml.='</li>';
        endforeach;
    $retHtml.='</ul>';
    $post = $oldpost;
    wp_reset_postdata();
    return $retHtml;
}
add_shortcode("news", "getNewItems");

加えたアレンジは、カテゴリーの”slug”（スラッグ）を参照しSPANクラス名に指定したことです。
カテゴリーのスラッグについては、「WordPress カテゴリー スラッグ」で検索して調べてください。

ショートコードの記述

固定ページ内や個別記事内の表示させたい場所に、以下のショートコードを記述します。

[news cat=”2,3,5″ num=”5″]

上記のショートコードの意味は、「カテゴリーIDが2と3と5（cat=”2,3,5″）の最新記事を5件（num=”5″）表示する」ということです。

すべてのカテゴリーを対象にする場合は、「cat=””」にすればOKです。

HTMLの出力結果

ショートコードを記述した場所に出力されるHTMLの結果は次の通りです。

<ul class="news_list">
    <li>
        <span class="news_date">日付</span>
        <span class="cat catslug">カテゴリー名</span>
        <a href="URL" class="news_title">記事タイトル</a>
    </li>
</ul>

つまり、カテゴリーごとにカテゴリー名のSPANクラスの”catslug”が変わりますので、それぞれCSSで背景色と文字色をあてることができるようになります。

改造版

1. 指定した日にち以内の新着記事に「New」などをつけるバージョンも書きました。
   「最新記事一覧を改造：何日以内かには”New”を表示」
2. カテゴリーにリンクを張ってカテゴリー一覧ページを表示させるバージョンも書きました。
   「最新記事一覧を改造：カテゴリーのリンクを追加」

WordPressユーザーのためのPHP入門 はじめから、ていねいに。

posted with amazlet at 18.09.21

水野史土
エムディエヌコーポレーション
売り上げランキング: 349,750

Amazon.co.jpで詳細を見る