เพื่อให้ธีม InsuranceThai Minimal ของคุณดูเป็นมืออาชีพและครบถ้วนตามแบบฉบับเว็บ Magazine ชั้นนำ ผมได้อัปเกรดโค้ดในส่วนที่คุณต้องการเพิ่มเข้ามาดังนี้ครับ

1. หน้าแรก Layout Magazine (index.php)

ปรับให้มี “บทความเด่น (Featured Post)” ขนาดใหญ่ 1 อันด้านบน แล้วตามด้วย List บทความในรูปแบบ Grid เพื่อให้ดูมีมิติแบบนิตยสาร

PHP

<?php get_header(); ?>
<main class="container" style="margin-top: 30px;">
    <?php if ( have_posts() ) : ?>
        <div class="magazine-layout">
            <?php 
            $count = 0;
            while ( have_posts() ) : the_post(); 
                $count++;
                $img = get_insurance_image(get_the_ID());
                
                // โพสต์แรกให้แสดงแบบตัวใหญ่ (Featured)
                if ( $count == 1 ) : ?>
                    <section class="featured-post" style="margin-bottom: 40px; position: relative; border-radius: 12px; overflow: hidden;">
                        <a href="<?php the_permalink(); ?>">
                            <img src="<?php echo esc_url($img); ?>" style="width: 100%; height: 450px; object-fit: cover;">
                            <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: 40px; color: #fff;">
                                <h2 style="font-size: 2.5rem; margin: 0;"><?php the_title(); ?></h2>
                                <p><?php echo wp_trim_words(get_the_excerpt(), 25); ?></p>
                            </div>
                        </a>
                    </section>
                    <div class="post-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px;">
                <?php else : ?>
                    <article class="card" style="background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
                        <a href="<?php the_permalink(); ?>">
                            <img src="<?php echo esc_url($img); ?>" style="width: 100%; height: 200px; object-fit: cover;">
                        </a>
                        <div style="padding: 20px;">
                            <h3 style="font-size: 1.2rem; margin: 0 0 10px;"><a href="<?php the_permalink(); ?>" style="text-decoration: none; color: #333;"><?php the_title(); ?></a></h3>
                            <div style="font-size: 0.8rem; color: #888;"><?php echo get_post_views(get_the_ID()); ?></div>
                        </div>
                    </article>
                <?php endif; ?>
            <?php endwhile; ?>
            </div> </div>
        
        <div class="pagination" style="margin: 40px 0; text-align: center;">
            <?php the_posts_pagination(); ?>
        </div>

    <?php endif; ?>
</main>
<?php get_footer(); ?>

2. หน้าบทความพร้อม Breadcrumb และ Page Break (single.php)

เพิ่ม Breadcrumb (เมนูชั้น link) และรองรับ Page Break (เวลาคุณใส่ “ ใน WordPress)

PHP

<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); set_post_views(get_the_ID()); ?>

<div class="container" style="margin-top: 20px;">
    <nav class="breadcrumb" style="font-size: 0.9rem; margin-bottom: 20px; color: #666;">
        <a href="<?php echo esc_url(home_url('/')); ?>">Home</a> &raquo; 
        <?php 
        $categories = get_the_category();
        if ( ! empty( $categories ) ) {
            echo '<a href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_attr( $categories[0]->name ) . '</a> &raquo; ';
        }
        ?>
        <span style="color: #333;"><?php the_title(); ?></span>
    </nav>

    <main style="background: #fff; padding: 40px; border-radius: 10px; box-shadow: 0 2px 15px rgba(0,0,0,0.05);">
        <h1><?php the_title(); ?></h1>
        
        <div id="toc-container">... (สารบัญคงเดิม) ...</div>

        <div class="post-content">
            <?php 
            the_content(); 
            
            // 2. ระบบ Page Break (ตัวเลขหน้าบทความ)
            wp_link_pages( array(
                'before'      => '<div class="page-links" style="margin: 30px 0; padding: 10px; border-top: 1px solid #eee;"><strong>หน้าที่: </strong>',
                'after'       => '</div>',
                'link_before' => '<span style="padding: 5px 12px; background: #eee; margin: 0 5px; border-radius: 4px;">',
                'link_after'  => '</span>',
            ) );
            ?>
        </div>
    </main>
</div>

<?php endwhile; endif; ?>
<?php get_footer(); ?>

3. ระบบเมนูออโต้และจัดการ Header (functions.php)

เพิ่มคำสั่งให้เมนูถูกลงทะเบียนและดึงข้อมูลอัตโนมัติจากหน้า WordPress หลังบ้าน

PHP

// ลงทะเบียนตำแหน่งเมนู
register_nav_menus( array(
    'main-menu' => 'Main Menu (Top)',
) );

// ฟังก์ชันดึงเมนูอัตโนมัติ (ถ้ายังไม่ได้สร้างเมนูให้แสดงหน้าทั้งหมดแทน)
function insurance_auto_menu() {
    if ( has_nav_menu( 'main-menu' ) ) {
        wp_nav_menu( array( 'theme_location' => 'main-menu', 'container' => false ) );
    } else {
        echo '<ul class="auto-menu">';
        wp_list_pages( array( 'title_li' => '', 'depth' => 1 ) );
        echo '</ul>';
    }
}

4. แก้ไข header.php เพื่อเรียกใช้เมนูออโต้

เปลี่ยนส่วน <nav> ในไฟล์ header.php ให้เป็นแบบนี้:

PHP

<nav class="main-navigation">
    <?php insurance_auto_menu(); ?>
</nav>

และเพิ่ม CSS ใน <style> ของ header.php เพื่อให้เมนูดูดีขึ้น:

CSS

.main-navigation ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.main-navigation a { text-decoration: none; color: #333; font-weight: bold; }
.main-navigation a:hover { color: var(--primary-color); }
.breadcrumb a { text-decoration: none; color: var(--primary-color); }
.page-links a { text-decoration: none; color: #333; }

สรุปสิ่งที่คุณได้เพิ่ม:

1. Magazine Layout: หน้าแรกดูแพงขึ้นด้วยบทความเด่นขนาดใหญ่และ Grid ที่เป็นระเบียบ
2. Breadcrumb: ช่วยให้ผู้ใช้งาน (และ Google) เข้าใจโครงสร้างเว็บว่าบทความนี้อยู่ในหมวดไหน
3. Page Break: หากบทความประกันภัยยาวมากๆ คุณสามารถตัดเป็นหน้าๆ ได้ ช่วยเรื่องการโหลดและยอดวิว
4. Auto Menu: ไม่ต้องไปไล่แก้โค้ดเมนูเอง แค่ไปที่ Appearance > Menus ในหลังบ้าน หรือถ้าไม่ตั้งค่าอะไรเลย มันจะดึง “หน้า (Pages)” มาแสดงให้เองอัตโนมัติครับ