WordPressでカテゴリー付き最新記事一覧をショートコードで表示する方法

2025年6月24日 2025年7月5日

この記事では、アイキャッチ画像のような最新記事一覧を、ショートコードを使って表示する方法を解説します。

この方法を使えば、投稿本文や固定ページ、ウィジェット、テンプレートなど、どこにでも簡単に最新記事一覧を表示できるようになります。

各記事のカテゴリ名には背景色が付き、色分け表示されます。また、カテゴリ名をクリックすると、そのカテゴリのアーカイブページに移動できます。

使用するコード

functions.phpに追記するコード

まずは以下のコードを、使用しているテーマのfunctions.phpに追加してください。

function show_latest_posts_list() {
    ob_start();
    ?>
    <ul class="latest-posts">
    <?php
    $latest_posts = new WP_Query(array(
        'post_type'      => 'post',
        'posts_per_page' => 5,
        'orderby'        => 'date',
        'order'          => 'DESC'
    ));

    if ($latest_posts->have_posts()) :
        while ($latest_posts->have_posts()) : $latest_posts->the_post(); ?>
            <li>
                <?php
                $category = get_the_category();
                if (!empty($category)) {
                    $cat_name = esc_html($category[0]->name);
                    $cat_slug = esc_attr($category[0]->slug);
                    $cat_link = esc_url(get_category_link($category[0]->term_id));
                    echo '<a href="' . $cat_link . '" class="cat ' . $cat_slug . '">' . $cat_name . '</a> ';
                }
                ?>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
        <?php endwhile;
        wp_reset_postdata();
    endif;
    ?>
    </ul>
    <?php
    return ob_get_clean();
}
add_shortcode('latest_posts_list', 'show_latest_posts_list');

function show_latest_posts_list() {

ob_start();

<?php

$latest_posts = new WP_Query(array(

'post_type' => 'post',

'posts_per_page' => 5,

'orderby' => 'date',

'order' => 'DESC'

));

if ($latest_posts->have_posts()) :

while ($latest_posts->have_posts()) : $latest_posts->the_post(); ?>

<li>

<?php

$category = get_the_category();

if (!empty($category)) {

$cat_name = esc_html($category[0]->name);

$cat_slug = esc_attr($category[0]->slug);

$cat_link = esc_url(get_category_link($category[0]->term_id));

echo '<a href="' . $cat_link . '" class="cat ' . $cat_slug . '">' . $cat_name . '</a> ';

}

</li>

<?php endwhile;

wp_reset_postdata();

endif;

</ul>

<?php

return ob_get_clean();

}

add_shortcode('latest_posts_list', 'show_latest_posts_list');

カテゴリースラッグが日本語の場合の対応

カテゴリースラッグは半角英数字である必要があります。
もし日本語スラッグで運用している場合は、以下のようにカテゴリ名ごとにスラッグを上書きしてください。

$category = get_the_category();
if (!empty($category)) {
    $cat_name = esc_html($category[0]->name);
    $cat_slug = esc_attr($category[0]->slug);
    $cat_link = esc_url(get_category_link($category[0]->term_id));

    // 例：日本語カテゴリ名を任意の英数字に置き換え
    if ($cat_name == 'お知らせ') {
        $cat_slug = 'cat-a';
    } elseif ($cat_name == 'ブログ') {
        $cat_slug = 'cat-b';
    }

    echo '<a href="' . $cat_link . '" class="cat ' . $cat_slug . '">' . $cat_name . '</a> ';
}

$category = get_the_category();

if (!empty($category)) {

$cat_name = esc_html($category[0]->name);

$cat_slug = esc_attr($category[0]->slug);

$cat_link = esc_url(get_category_link($category[0]->term_id));

// 例：日本語カテゴリ名を任意の英数字に置き換え

if ($cat_name == 'お知らせ') {

$cat_slug = 'cat-a';

} elseif ($cat_name == 'ブログ') {

$cat_slug = 'cat-b';

}

echo '<a href="' . $cat_link . '" class="cat ' . $cat_slug . '">' . $cat_name . '</a> ';

}

スタイルシート（CSS）の設定

次に、以下のCSSをテーマのスタイルシート（style.cssなど）に追加してください。

/* 最新記事リストの基本スタイル */
.latest-posts {
    list-style: none;
    padding-left: 0;
}

/* カテゴリ名の共通スタイル */
.latest-posts .cat {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 8px;
    font-size: 0.85em;
    border-radius: 4px;
    text-decoration: none;
    color: #fff; /* 白文字 */
    background-color: #888; /* デフォルトの背景色 */
}

/* カテゴリごとの色分け（cat-◯は任意のスラッグ） */
.latest-posts .cat-a {
    background-color: #e74c3c;  /* 赤 */
}
.latest-posts .cat-b {
    background-color: #3498db;  /* 青 */
}
.latest-posts .cat-c {
    background-color: #2ecc71;  /* 緑 */
}
.latest-posts .cat-d {
    background-color: #f39c12;  /* オレンジ */
}
.latest-posts .cat-e {
    background-color: #9b59b6;  /* 紫 */
}

/* 最新記事リストの基本スタイル */

.latest-posts {

list-style: none;

padding-left: 0;

}

/* カテゴリ名の共通スタイル */

.latest-posts .cat {

display: inline-block;

padding: 2px 8px;

margin-right: 8px;

font-size: 0.85em;

border-radius: 4px;

text-decoration: none;

color: #fff; /* 白文字 */

background-color: #888; /* デフォルトの背景色 */

}

/* カテゴリごとの色分け（cat-◯は任意のスラッグ） */

.latest-posts .cat-a {

background-color: #e74c3c; /* 赤 */

}

.latest-posts .cat-b {

background-color: #3498db; /* 青 */

}

.latest-posts .cat-c {

background-color: #2ecc71; /* 緑 */

}

.latest-posts .cat-d {

background-color: #f39c12; /* オレンジ */

}

.latest-posts .cat-e {

background-color: #9b59b6; /* 紫 */

}

色分けのcat-○は「カテゴリースラッグ」またはfunctions.phpのコードで変更した「任意の半角英数字の文字列」に変更して下さい。

表示方法

投稿・固定ページ・ウィジェットで表示する場合

表示したい場所に以下のショートコードを記述してください。

[latest_posts_list]

1	[latest_posts_list]

テンプレートファイルで表示する場合

single.phpやpage.phpなどのテンプレートファイル内に、以下のコードを追加します。

<?php echo do_shortcode('[latest_posts_list]'); ?>

1	<?php echo do_shortcode('[latest_posts_list]'); ?>

実際に表示してみる

以下にショートコードを設置しています。
このサイトの最新記事一覧が表示されていれば、正しく動作しています。

まとめ

このショートコードを使えば、投稿・固定ページ・テンプレート・ウィジェットなど、あらゆる場所に最新記事一覧を表示できます。

カテゴリも色分けされてわかりやすく、ユーザーの回遊率アップにもつながります。
シンプルに実装できて便利なので、ぜひ活用してみてください！