サイトマップを自動生成（コード版）する方法

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

実装のポイント

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

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
    ), $atts);

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

    // 固定ページ
    $pages = get_pages(array(
        'sort_column' => 'menu_order',
        'sort_order' => 'ASC'
    ));
    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_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');
    

汎用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;
}
    

テーマ別サンプルCSS

Lightning用

/*Lightning用 サイトマップを自動生成（コード版）*/
.sitemap-list h3 {
    font-size: 16px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 6px;
    margin-top: 24px;
}
    

Cocoon用

/*Cocoon用 サイトマップを自動生成（コード版）*/
.sitemap-list h3 {
    font-size: 15px;
    color: #1e73be;
    margin-top: 20px;
}
.sitemap-list li a {
    font-size: 14px;
    color: #1e73be;
}
.sitemap-list li a:hover {
    color: #005fa3;
}
    

代用プラグイン

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

まとめ

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