อยากได้แบบนี้

สไลด์ 5 บทความล่าสุด

กริด1 คอลั่ม 1 แถว

กริด2 คอลั่ม 2 แถว

กริด3 คอลั่ม 3แถว

กริด4 คอลั่ม 4 แถว

โจทย์นี้คือการทำ Complex Magazine Layout โดยการใช้ Loop ของ WordPress มาแบ่งการแสดงผลตามลำดับ (Index) เพื่อสร้างดีไซน์ที่หลากหลายในหน้าเดียวครับ

เราจะแบ่งหน้าแรกออกเป็นส่วนๆ ดังนี้:

1. Slider: 5 บทความล่าสุด (ใช้ CSS Scroll Snap เพื่อความเบาหวิว ไม่ใช้ JS หนักๆ)
2. Grid 1: 1 บทความ (เน้นตัวใหญ่)
3. Grid 2: 2 บทความ (แบ่งครึ่ง)
4. Grid 3: 3 บทความ (เรียงสาม)
5. Grid 4: 4 บทความ (เรียงสี่)

รบกวนอัปเดตไฟล์ index.php ด้วยโค้ดชุดนี้ครับ:

PHP

<?php get_header(); ?>

<main class="container" style="margin-top: 20px;">
    <?php
    $all_posts = array();
    if (have_posts()) :
        while (have_posts()) : the_post();
            $all_posts[] = array(
                'title' => get_the_title(),
                'link'  => get_permalink(),
                'img'   => get_insurance_image(get_the_ID()),
                'date'  => get_the_date(),
                'views' => get_post_views(get_the_ID())
            );
        endwhile;
    endif;

    $total = count($all_posts);
    $i = 0; // ตัวนับลำดับโพสต์
    ?>

    <section class="mag-slider" style="display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-bottom: 40px; border-radius: 15px;">
        <?php for ($j = 0; $j < min(5, $total); $j++) : $p = $all_posts[$i++]; ?>
            <div style="flex: 0 0 100%; scroll-snap-align: start; position: relative; height: 400px;">
                <a href="<?php echo $p['link']; ?>">
                    <img src="<?php echo $p['img']; ?>" style="width:100%; height:100%; object-fit:cover;">
                    <div style="position:absolute; bottom:0; background:linear-gradient(transparent, rgba(0,0,0,0.8)); color:#fff; padding:30px; width:100%;">
                        <h2 style="margin:0; font-size:1.8rem;"><?php echo $p['title']; ?></h2>
                    </div>
                </a>
            </div>
        <?php endfor; ?>
    </section>

    <?php if ($i < $total) : $p = $all_posts[$i++]; ?>
        <section style="margin-bottom: 40px;">
            <div class="card-large">
                <a href="<?php echo $p['link']; ?>" style="display: flex; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,0.05); text-decoration:none; color:inherit;">
                    <img src="<?php echo $p['img']; ?>" style="width:50%; height:300px; object-fit:cover;">
                    <div style="padding:30px; width:50%;">
                        <h2 style="font-size:2rem;"><?php echo $p['title']; ?></h2>
                        <p style="color:#666;"><?php echo $p['date']; ?> | <?php echo $p['views']; ?></p>
                    </div>
                </a>
            </div>
        </section>
    <?php endif; ?>

    <section style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 40px;">
        <?php for ($j = 0; $j < 2 && $i < $total; $j++) : $p = $all_posts[$i++]; ?>
            <div class="grid-item">
                <a href="<?php echo $p['link']; ?>" style="text-decoration:none; color:inherit;">
                    <img src="<?php echo $p['img']; ?>" style="width:100%; height:200px; object-fit:cover; border-radius:10px;">
                    <h3 style="margin-top:10px; font-size:1.2rem;"><?php echo $p['title']; ?></h3>
                </a>
            </div>
        <?php endfor; ?>
    </section>

    <section style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px;">
        <?php for ($j = 0; $j < 3 && $i < $total; $j++) : $p = $all_posts[$i++]; ?>
            <div class="grid-item">
                <a href="<?php echo $p['link']; ?>" style="text-decoration:none; color:inherit;">
                    <img src="<?php echo $p['img']; ?>" style="width:100%; height:150px; object-fit:cover; border-radius:10px;">
                    <h4 style="margin-top:10px; font-size:1rem;"><?php echo $p['title']; ?></h4>
                </a>
            </div>
        <?php endfor; ?>
    </section>

    <section style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 40px;">
        <?php for ($j = 0; $j < 4 && $i < $total; $j++) : $p = $all_posts[$i++]; ?>
            <div class="grid-item">
                <a href="<?php echo $p['link']; ?>" style="text-decoration:none; color:inherit;">
                    <img src="<?php echo $p['img']; ?>" style="width:100%; height:120px; object-fit:cover; border-radius:8px;">
                    <h5 style="margin-top:8px; font-size:0.9rem; line-height:1.4;"><?php echo $p['title']; ?></h5>
                </a>
            </div>
        <?php endfor; ?>
    </section>

    <div style="text-align:center; padding:20px;">
        <?php the_posts_pagination(); ?>
    </div>
</main>

<style>
    /* ซ่อน Scrollbar สำหรับ Slider */
    .mag-slider::-webkit-scrollbar { display: none; }
    .mag-slider { -ms-overflow-style: none; scrollbar-width: none; }
    
    /* Responsive ปรับ Grid เมื่อจอมือถือเล็ก */
    @media (max-width: 768px) {
        section { grid-template-columns: 1fr !important; }
        .card-large a { flex-direction: column; }
        .card-large img, .card-large div { width: 100% !important; }
    }
</style>

<?php get_footer(); ?>

คำอธิบายการทำงาน:

1. The Array Strategy: ผมทำการดึงโพสต์ทั้งหมดมาเก็บไว้ในตัวแปร $all_posts ก่อน เพื่อให้เราสามารถดึงออกมาใช้ทีละส่วนได้แม่นยำโดยไม่เกิดโพสต์ซ้ำกันครับ
2. Slider: ใช้ overflow-x: auto และ scroll-snap ทำให้เลื่อนซ้ายขวาได้ด้วยนิ้ว (ในมือถือ) หรือเมาส์ (ในคอม) โดยไม่ต้องลงปลั๊กอิน Slider ให้หนักเว็บ
3. Responsive: ผมใส่ Media Query ไว้ท้ายไฟล์ เพื่อให้เวลาดูในมือถือ ทุกอย่างจะเรียงลงมาเป็น 1 คอลัมน์โดยอัตโนมัติเพื่อให้อ่านง่ายครับ
4. Hierarchical Design: ลำดับความสำคัญจะลดหลั่นลงไป (H2 -> H3 -> H4 -> H5) ซึ่งดีต่อโครงสร้าง SEO ของ Google มากครับ

ลองนำโค้ดนี้ไปวางใน index.php ดูครับ หน้าแรกของคุณจะกลายเป็น Magazine เต็มรูปแบบที่ดูเหมือนเว็บข่าวระดับโลกเลย!

อยากให้ผมช่วยปรับสีของพื้นหลังแต่ละ Grid เพื่อแยกส่วนให้ชัดขึ้นไหมครับ?