SWELLで「HTMLサイトマップ」を固定ページで作成する方法【プラグイン不要】

<?php
/*
Template Name: HTMLサイトマップ（自動生成）
*/
if ( ! defined( 'ABSPATH' ) ) exit;
get_header();
if ( is_front_page() ) :
SWELL_Theme::get_parts( 'tmp/front' );
else :
while ( have_posts() ) :
the_post();
$the_id = get_the_ID();
$show_pr_notation = SWELL_Theme::get_pr_notation_size( $the_id, 'show_pr_notation_page' );
?>
<main id="main_content" class="l-mainContent l-article">
<div class="l-mainContent__inner" data-clarity-region="article">
<?php SWELL_Theme::get_parts( 'parts/page_head' ); ?>
<?php if ( $show_pr_notation ) : ?>
<?php SWELL_Theme::pluggable_parts( 'pr_notation' ); ?>
<?php endif; ?>

<div class="<?= esc_attr( apply_filters( 'swell_post_content_class', 'post_content' ) ) ?>">
<!-- 管理画面の本文 -->
<?php the_content(); ?>

<h2 class="wp-block-heading">投稿ページ（カテゴリー）</h2>
<div class="swell-block-columns">
<div class="swell-block-columns__inner">
<?php
$categories = get_categories();
foreach ( $categories as $category ) {
$posts = get_posts([
'category' => $category->term_id,
'numberposts' => -1
]);
if ( $posts ) {
echo '<div class="swell-block-column swl-has-mb--s">';
echo '<h3 class="wp-block-heading">' . esc_html( $category->name ) . '</h3>';
echo '<ul class="swell-block-linkList is-style-default">';
foreach ( $posts as $post ) {
echo '<li class="custom-sitemap-link"><a href="' . get_permalink( $post ) . '">' . esc_html( get_the_title( $post ) ) . '</a></li>';
}
echo '</ul></div>';
}
}
?>
</div>
</div>

<h2 class="wp-block-heading">固定ページ</h2>
<div class="swell-block-columns">
<div class="swell-block-columns__inner">
<?php
$pages = get_pages(['sort_column' => 'menu_order']);
$grouped_pages = [];
foreach ( $pages as $page ) {
if ( $page->post_parent ) {
$grouped_pages[$page->post_parent][] = $page;
} else {
$grouped_pages[$page->ID] = isset($grouped_pages[$page->ID]) ? $grouped_pages[$page->ID] : [];
$grouped_pages[$page->ID]['parent'] = $page;
}
}
foreach ( $grouped_pages as $parent_id => $data ) {
if ( ! isset( $data['parent'] ) ) continue;
echo '<div class="swell-block-column swl-has-mb--s">';
echo '<h3 class="wp-block-heading">' . esc_html( $data['parent']->post_title ) . '</h3>';
echo '<ul class="swell-block-linkList is-style-default">';
if ( isset($data[0]) ) {
foreach ( $data as $key => $subpage ) {
if ( $key === 'parent' ) continue;
echo '<li class="custom-sitemap-link"><a href="' . get_permalink( $subpage ) . '">' . esc_html( $subpage->post_title ) . '</a></li>';
}
}
echo '</ul></div>';
}
?>
</div>
</div>
</div>

<?php
// 改ページやコメントなどSWELL既存機能
$defaults = [
'before' => '<div class="c-pagination -post">',
'after' => '</div>',
'next_or_number' => 'number',
];
wp_link_pages( $defaults );
SWELL_Theme::outuput_content_widget( 'page', 'bottom' );
?>
</div>
<?php if ( SWELL_Theme::is_show_comments( $the_id ) ) comments_template(); ?>
</main>
<?php
endwhile;
endif;
get_footer();

<!-- 管理画面の本文 -->
<?php the_content(); ?>

/home/（あなたが契約した名前）/（ドメイン名）/public_html/wp-content/themes/swell_child

.custom-sitemap-link a {
position: relative;
padding-left: 1.5em;
text-decoration: none;
color: #000d99;
display: inline-block;
line-height: 1.8;
transition: transform 0.3s ease;
}

.custom-sitemap-link a::before {
content: "\e921"; /* icomoonのアイコンコード */
font-family: 'icomoon' !important;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 1em;
color: inherit;
}

.custom-sitemap-link a:hover,
.custom-sitemap-link a:focus {
color: #1a40cc;
transform: translateX(3px);
}