固定ページ一覧と投稿一覧を自動生成（HTML版）する方法

このコードでは、固定ページと投稿を自動取得して一覧表示（HTML版）を生成します。投稿が多い場合はページネーションで分割表示し、見やすくカッコよくデザインしています。

1 実装のポイント

• 固定ページはすべて表示、投稿はページネーション対応。
• ショートコードで任意ページに簡単に設置可能。
• 掲載したくないページもページIDで非表示が可能。
• CSSでリストやページネーションの見た目をスタイリッシュに調整。

2 functions.php にコードを追加

//-------------------------------------------
// ページネーション対応サイトマップショートコード
//-------------------------------------------
function generate_sitemap_with_pagination($atts) {
    $atts = shortcode_atts(array(
        'posts_per_page' => 10,
        'paged' => get_query_var('paged') ? get_query_var('paged') : 1,
		'exclude' => '', // 除外ページ・投稿IDをカンマ区切りで指定
    ), $atts);

// 除外IDを配列に変換
	$exclude_ids = array_filter(array_map('intval', explode(',', $atts['exclude'])));

    $output = '<div class="sitemap-list">';

    // 固定ページ
    $pages = get_pages(array(
        'sort_column' => 'menu_order',
        'sort_order' => 'ASC',
        'post_status' => 'publish',
        'exclude'     => $exclude_ids, // 除外
    ));
    if ($pages) {
        $output .= '<h3>固定ページ</h3><ul>';
        foreach ($pages as $page) {
            $output .= '<li><a href="' . get_permalink($page->ID) . '">' . esc_html($page->post_title) . '</a></li>';
        }
        $output .= '</ul>';
    }

    // 投稿（ページネーション）
    $args = array(
        'posts_per_page' => intval($atts['posts_per_page']),
        'paged' => intval($atts['paged']),
        'post_status' => 'publish',
        'orderby' => 'date',
        'order' => 'DESC',
        'post__not_in'   => $exclude_ids, // 除外
    );
    $post_query = new WP_Query($args);

    if ($post_query->have_posts()) {
        $output .= '<h3>投稿</h3><ul>';
        while ($post_query->have_posts()) : $post_query->the_post();
            $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        endwhile;
        $output .= '</ul>';

        // ページネーション
        $big = 999999999;
        $output .= '<div class="sitemap-pagination">';
        $output .= paginate_links(array(
            'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
            'format' => '?paged=%#%',
            'current' => max(1, intval($atts['paged'])),
            'total' => $post_query->max_num_pages,
            'prev_text' => '< 前へ',
            'next_text' => '次へ >'
        ));
        $output .= '</div>';
    }

    wp_reset_postdata();
    $output .= '</div>';
    return $output;
}
add_shortcode('auto_sitemap_paginated', 'generate_sitemap_with_pagination');
    

記事内で表示する場合：全てのページを表示

[auto_sitemap_paginated posts_per_page="10"]
  

記事内で表示する場合：掲載したくないページあり

[auto_sitemap_paginated posts_per_page="10" exclude="123,456"]
  

3 汎用CSS

/* -----------------------------
 * サイトマップ自動生成用スタイル
 * ----------------------------- */

/* サイトマップリスト全体 */
.sitemap-list ul {
    list-style-type: disc;      /* 箇条書きを通常の黒丸に設定 */
    padding-left: 20px;         /* 左側の余白 */
    margin-bottom: 20px;        /* 下に余白を追加 */
}

/* 各リストアイテム */
.sitemap-list li {
    margin-bottom: 8px;         /* 各項目の下の間隔 */
}

/* リンクスタイル */
.sitemap-list li a {
    color: #6c5ce7;             /* リンク色を紫系に */
    text-decoration: none;      /* 下線を消す */
    font-weight: 500;           /* 中程度の太さ */
}

/* リンクホバー時 */
.sitemap-list li a:hover {
    text-decoration: underline; /* ホバーで下線を表示 */
}

/* -----------------------------
 * サイトマップページネーション
 * ----------------------------- */

/* ページ番号全体の配置 */
.sitemap-pagination {
    display: flex;              /* 横並びにする */
    justify-content: center;    /* 中央揃え */
    gap: 8px;                   /* 各ページ番号の間隔 */
    margin-top: 20px;           /* 上に余白 */
}

/* ページリンクや現在ページ番号のスタイル */
.sitemap-pagination a,
.sitemap-pagination span {
    padding: 6px 12px;          /* 内側の余白 */
    background-color: #f0f0f0;  /* 背景色 */
    border-radius: 4px;         /* 角丸 */
    color: #6c5ce7;             /* 文字色 */
    text-decoration: none;      /* 下線なし */
}

/* ページリンクホバー時 */
.sitemap-pagination a:hover {
    background-color: #6c5ce7;  /* 背景を濃い紫に */
    color: #fff;                /* 文字を白に */
}

/* 現在のページ番号 */
.sitemap-pagination .current {
    background-color: #6c5ce7;  /* 背景を濃い紫に */
    color: #fff;                /* 文字を白に */
    font-weight: bold;          /* 太字 */
}
    

4 完成イメージ

▶ 固定ページ一覧と投稿一覧

5 代用プラグイン

「PS Auto Sitemap」や「Simple Sitemap」などのプラグインでもページネーション付きサイトマップを生成可能です。

6 まとめ

• ショートコードでページネーション付きサイトマップを簡単に設置可能。
• 固定ページはすべて、投稿は指定件数ずつ表示。
• CSSでページネーションやリストをスタイリッシュにカスタマイズ可能。