สาเหตุที่เมนูไม่แสดงในหน้าแรก มักเกิดจาก 2 กรณีหลักครับ คือ ยังไม่ได้ตั้งค่าตำแหน่งเมนูในระบบหลังบ้าน หรือ ตัวโค้ดใน header.php ยังไม่ได้เรียกใช้ฟังก์ชันที่เราสร้างไว้

เพื่อให้เมนูแสดงผลทั้งแบบ “ออโต้” และแบบที่เราตั้งค่าเอง ให้เช็คและแก้ไขตามนี้ครับ:

1. ตรวจสอบไฟล์ header.php

ตรวจสอบว่าส่วนของเมนูในไฟล์ header.php มีการเรียกใช้ฟังก์ชัน insurance_auto_menu() หรือยัง ถ้ายังให้เปลี่ยนเป็นแบบนี้ครับ:

PHP

<nav class="main-navigation">
    <div class="container">
        <?php 
        if ( function_exists('insurance_auto_menu') ) {
            insurance_auto_menu(); 
        }
        ?>
    </div>
</nav>

2. ตรวจสอบไฟล์ functions.php

ตรวจสอบว่ามีโค้ด Register Menu และ ฟังก์ชัน Auto Menu ครบถ้วนไหม (ถ้าไม่มีหน้าแรกจะไม่โชว์อะไรเลย):

PHP

// 1. ลงทะเบียนตำแหน่งเมนูให้ WordPress รู้จัก
function insurance_register_menus() {
    register_nav_menus( array(
        'main-menu' => 'Main Menu (Top)',
    ) );
}
add_action( 'init', 'insurance_register_menus' );

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

3. ตรวจสอบ CSS (เพื่อให้เมนูมองเห็นได้)

บางครั้งเมนูมาแล้วแต่เป็นสีขาวหรือไม่มีการจัดระยะ ทำให้มองไม่เห็น ให้เพิ่ม CSS นี้ลงในส่วน <style> ของ header.php หรือใน style.css ครับ:

CSS

.main-navigation {
    background: #fff;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px; /* ระยะห่างระหว่างเมนู */
}
.nav-list li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 16px;
}
.nav-list li a:hover {
    color: #0056b3; /* สีเวลาเอาเมาส์ชี้ */
}

4. วิธีตั้งค่าที่หลังบ้าน WordPress (สำคัญมาก)

ถ้าคุณอยากกำหนดเมนูเอง (ไม่ใช่ให้มันดึงหน้า Page ทั้งหมดมาโชว์):

1. ไปที่ Appearance (รูปแบบเว็บ) > Menus (เมนู)
2. สร้างเมนูใหม่ และเพิ่มลิงก์ตามต้องการ
3. ที่ด้านล่าง (Menu Settings) ให้ติ๊กถูกที่ช่อง “Main Menu (Top)”
4. กด Save Menu

ลองตรวจสอบไฟล์ header.php อีกครั้งครับว่ามีคำสั่งเรียก insurance_auto_menu() หรือไม่