สำหรับเว็บสาย Magazine ข้อมูลประกันภัย การแสดงผลแบบ Grid (ตาราง) มีข้อดีมหาศาลครับ:

1. ดูเป็นมืออาชีพ: มันทำให้หน้าเว็บดูสะอาด เป็นสัดส่วน เหมือนอ่านนิตยสารจริงๆ
2. เพิ่มยอดวิว (CTR): คนอ่านสามารถกวาดสายตาเห็นหลายบทความพร้อมกันในหน้าเดียว แทนที่จะต้องไถหน้าจอลงไปลึกๆ เพื่อดูบทความถัดไป
3. รองรับหลายอุปกรณ์: Grid จะปรับตัวอัตโนมัติ (Responsive) เช่น ในคอมโชว์ 3 คอลัมน์ ในมือถือโชว์ 1 คอลัมน์ ทำให้ดูง่ายทุกหน้าจอ

แนะนำ Layout Grid แบบ Magazine ที่ดีที่สุด

เพื่อให้หน้าแรกดูน่าเชื่อถือ ผมแนะนำโครงสร้างแบบ “1 Featured + Grid List” ครับ

• Featured (ตัวเด่น): 1 บทความล่าสุดขนาดใหญ่ เพื่อดึงความสนใจ
• Grid: บทความถัดไปเรียงกัน 2 หรือ 3 คอลัมน์

วิธีอัปเดตไฟล์ index.php ให้เป็น Grid สวยๆ

รบกวนคุณเปลี่ยนโค้ดในไฟล์ index.php เป็นชุดนี้ครับ (ผมปรับ CSS ในตัวให้เลย):

PHP

<?php get_header(); ?>
<main class="container" style="margin-top: 30px;">
    <?php if ( have_posts() ) : ?>
        <div class="magazine-grid">
            <?php 
            $count = 0;
            while ( have_posts() ) : the_post(); 
                $count++;
                $img = get_insurance_image(get_the_ID());
                
                // 1. บทความแรกโชว์แบบตัวใหญ่เต็มความกว้าง (Featured)
                if ( $count == 1 ) : ?>
                    <article class="featured-card" style="margin-bottom: 40px;">
                        <a href="<?php the_permalink(); ?>" style="text-decoration: none;">
                            <div style="position: relative; height: 450px; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15);">
                                <img src="<?php echo esc_url($img); ?>" style="width: 100%; height: 100%; object-fit: cover;">
                                <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.9)); padding: 40px; color: #fff;">
                                    <span style="background: var(--primary-color); padding: 5px 12px; border-radius: 4px; font-size: 0.8rem;">บทความล่าสุด</span>
                                    <h2 style="font-size: 2.2rem; margin: 10px 0;"><?php the_title(); ?></h2>
                                    <p style="opacity: 0.8; font-weight: normal;"><?php echo wp_trim_words(get_the_excerpt(), 25); ?></p>
                                </div>
                            </div>
                        </a>
                    </article>
                    
                    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px;">
                <?php else : ?>
                    
                    <article class="grid-card" style="background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: 0.3s;">
                        <a href="<?php the_permalink(); ?>" style="text-decoration: none; color: inherit;">
                            <div style="height: 200px; overflow: hidden;">
                                <img src="<?php echo esc_url($img); ?>" style="width: 100%; height: 100%; object-fit: cover; transition: 0.5s;">
                            </div>
                            <div style="padding: 20px;">
                                <h3 style="font-size: 1.2rem; margin: 0 0 12px; line-height: 1.4; height: 3.4em; overflow: hidden;"><?php the_title(); ?></h3>
                                <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: #888;">
                                    <span><?php echo get_the_date(); ?></span>
                                    <span><i class="fa fa-eye"></i> <?php echo get_post_views(get_the_ID()); ?></span>
                                </div>
                            </div>
                        </a>
                    </article>

                <?php endif; ?>
            <?php endwhile; ?>
            </div> </div>

        <div class="pagination" style="margin: 50px 0; text-align: center;">
            <?php 
            echo paginate_links(array(
                'prev_text' => '&laquo; ย้อนกลับ',
                'next_text' => 'หน้าถัดไป &raquo;',
            )); 
            ?>
        </div>

    <?php endif; ?>
</main>

<style>
    /* เพิ่มลูกเล่นเวลาเอาเมาส์ชี้ */
    .grid-card:hover { transform: translateY(-8px); box-shadow: 0 12px 25px rgba(0,0,0,0.1); }
    .grid-card:hover img { transform: scale(1.1); }
    .pagination a, .pagination span { padding: 10px 20px; border: 1px solid #ddd; margin: 0 5px; text-decoration: none; color: #333; border-radius: 5px; }
    .pagination .current { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
</style>

<?php get_footer(); ?>

สรุปความเปลี่ยนแปลง:

1. สัดส่วน 1:3: บทความแรกจะกว้างเต็มตา ดูเป็น “ข่าวเด่นประจำวัน”
2. Card Design: บทความที่เหลือจะอยู่ในกล่องสีขาว (Card) พร้อมเงาจางๆ ทำให้ดูพรีเมียม
3. Hover Effect: เมื่อเอาเมาส์ชี้ รูปจะขยายเล็กน้อยและกล่องจะลอยขึ้น ทำให้เว็บดู “มีชีวิตชีวา” ไม่แข็งทื่อ
4. Pagination: ปรับดีไซน์ปุ่มเปลี่ยนหน้าให้ดูง่ายขึ้น

ลองอัปเดตไฟล์ index.php ดูครับ แล้วคุณจะเห็นว่าเว็บ Insurancethai.net ดูเป็นมืออาชีพขึ้นทันตาเห็นเลย!