ランダム記事リストを固定ページにショートコードで表示する方法

ランダム記事リストをショートコード（件数・列数・抜粋・画像サイズ変更可能）で表示します。

//-------------------------------------------
// ランダム記事ショートコード
//-------------------------------------------
function random_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count'         => 4,        // 表示件数
        'cols'          => 2,        // 列数
        'excerpt_words' => 20,       // 抜粋文字数
        'image_size'    => 'thumbnail' // アイキャッチ画像サイズ
    ), $atts, 'random_posts');

    $args = array(
        'posts_per_page' => intval($atts['count']),
        'orderby'        => 'rand',
        'post_status'    => 'publish'
    );

    $query = new WP_Query($args);
    if (!$query->have_posts()) return '<p>記事はありません。</p>';

    $output = '<div class="random-posts" style="display:grid; grid-template-columns: repeat(' . intval($atts['cols']) . ', 1fr); gap:1em;">';
    while($query->have_posts()) {
        $query->the_post();
        $thumb = has_post_thumbnail() ? get_the_post_thumbnail(get_the_ID(), $atts['image_size']) : '';

        // 抜粋の処理（0文字なら出力しない）
        $excerpt = '';
        if (intval($atts['excerpt_words']) > 0) {
            $excerpt = wp_trim_words(get_the_excerpt(), intval($atts['excerpt_words']), '...');
            $excerpt = '<div class="post-excerpt">' . $excerpt . '</div>';
        }

        $output .= '<div class="random-post-item">';
        $output .= $thumb;
        $output .= '<div class="post-title"><a href="' . get_permalink() . '">' . get_the_title() . '</a></div>';
        $output .= $excerpt;

        $output .= '<a href="' . get_permalink() . '" class="read-more-button" style="display:inline-block; margin-top:5px; padding:5px 10px; background:#1a73e8; color:#fff; text-decoration:none; border-radius:4px;">続きを読む</a>';

        $output .= '</div>';
    }
    $output .= '</div>';

    wp_reset_postdata();
    return $output;
}
add_shortcode('random_posts', 'random_posts_shortcode');
    

記事内で表示する場合：

[random_posts count="6" cols="3" excerpt_words="50" image_size="medium"]
  

1 汎用CSS（必要に応じてテーマに合わせ調整）

/* -----------------------------
 * ランダム記事リスト用のスタイル
 * 固定ページにショートコードで表示する際に使用
 * ----------------------------- */

/* ulタグ自体のリセット */
.random-posts {
    list-style: none;  /* デフォルトのリストマーカーを消す */
    margin: 0;         /* 外側余白をリセット */
    padding: 0;        /* 内側余白をリセット */
}

/* 各記事アイテムのスタイル */
.random-post-item {
    border: 1px solid #ddd;       /* 薄い枠線 */
    padding: 10px;                /* 内側余白 */
    display: flex;                /* Flexboxで配置 */
    flex-direction: column;       /* 上下方向に並べる */
    align-items: flex-start;      /* 左揃え */
}

/* 記事のサムネイル画像 */
.random-post-item img {
    width: 100%;                  /* 横幅100%でレスポンシブ対応 */
    height: auto;                 /* アスペクト比を維持 */
    object-fit: cover;            /* 枠内に画像を収める */
    margin-bottom: 10px;          /* 画像と本文の間隔 */
}

/* 記事タイトル */
.random-post-item .post-title {
    font-weight: bold;            /* 太字 */
    margin-bottom: 5px;           /* タイトルと抜粋の間隔 */
}

/* 記事抜粋 */
.random-post-item .post-excerpt {
    font-size: 0.9em;             /* 少し小さめの文字サイズ */
    color: #555;                  /* 薄いグレー */
}

/* スマホ用のレスポンシブ調整 */
@media screen and (max-width: 768px) {
    .random-posts {
        grid-template-columns: 1fr !important; /* 1列表示に強制 */
    }
}
    

2 使い方例

• 件数6、列3、抜粋60文字、アイキャッチサイズ「medium」:
  [random_posts count="6" cols="3" excerpt_words="50" image_size="medium"]

3 完成イメージ

3.1 Lightning

• 件数4、列2、抜粋50文字、アイキャッチサイズ「large」:
  [random_posts count="4" cols="2" excerpt_words="60" image_size="large"]

3.2 Cocoon

4 代用プラグイン

もしPHPを編集できない場合は、ランダム記事表示用のプラグイン（例: WP Random Post Widget）を使うことで同様の機能を実装可能です。

ランダム記事表示ではなく、新着順表示用のプラグイン（例：Content Views）も同じような機能を実装可能です。

5 まとめ

このショートコードを使うと、ホームページや固定ページでランダム記事を自由に列数・件数を指定して表示できます。
アイキャッチ、タイトル、抜粋、そして「続きを読む」ボタンもセットで表示されます。