ผมจะรวบรวมไฟล์พื้นฐานที่จำเป็นทั้งหมดให้ครับ โดยดีไซน์จะเน้นไปที่ความคลีนแบบ Magazine และโค้ดทุกส่วนถูกปรับแต่งมาเพื่อ SEO โดยเฉพาะครับ
นี่คือโครงสร้างไฟล์ที่คุณต้องสร้างในโฟลเดอร์ /wp-content/themes/insurance-minimal/ ครับ:
1. header.php (ส่วนหัวและเมนู)
ไฟล์นี้สำคัญมากสำหรับ SEO เพราะรวมการเรียกใช้ Font และ Meta ต่างๆ
PHP
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
<style>
/* CSS พื้นฐานเพื่อความเร็ว ไม่ต้องรอโหลดไฟล์แยก */
:root { --primary-color: #0056b3; --text-color: #333; }
body { font-family: 'Tahoma', sans-serif; line-height: 1.6; color: var(--text-color); margin: 0; padding: 0; background: #f4f7f9; }
.container { max-width: 1200px; margin: auto; padding: 0 20px; }
header { background: #fff; border-bottom: 2px solid var(--primary-color); padding: 15px 0; position: sticky; top: 0; z-index: 1000; }
.site-title a { font-size: 24px; font-weight: bold; text-decoration: none; color: var(--primary-color); }
</style>
</head>
<body <?php body_class(); ?>>
<header>
<div class="container" style="display: flex; justify-content: space-between; align-items: center;">
<div class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>">InsuranceThai</a></div>
<nav><?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?></nav>
</div>
</header>
2. single.php (หน้าอ่านบทความ + ระบบนับวิว + สารบัญ)
หัวใจของเว็บข้อมูลประกันภัย คือหน้าบทความที่อ่านง่ายและดูน่าเชื่อถือ
PHP
<?php get_header(); ?>
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
set_post_views(get_the_ID()); // นับยอดวิว
?>
<main class="container" style="margin-top: 30px; background: #fff; padding: 40px; border-radius: 10px; box-shadow: 0 2px 15px rgba(0,0,0,0.05);">
<article>
<header class="post-header">
<h1 style="font-size: 2.5rem; margin-bottom: 15px; color: #000;"><?php the_title(); ?></h1>
<div style="color: #888; margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 15px;">
<span><i class="fa fa-calendar"></i> <?php echo get_the_date(); ?></span> |
<span><i class="fa fa-eye"></i> <?php echo get_post_views(get_the_ID()); ?></span>
</div>
</header>
<div id="toc-container" style="background: #f9f9f9; padding: 20px; border: 1px solid #ddd; display: inline-block; margin-bottom: 30px;">
<strong style="display: block; margin-bottom: 10px;">สารบัญบทความ</strong>
<ul id="toc-list" style="margin: 0; padding-left: 20px;"></ul>
</div>
<div class="post-content" style="font-size: 1.15rem; line-height: 1.8;">
<?php the_content(); ?>
</div>
</article>
</main>
<script>
// Script สร้างสารบัญจากหัวข้อ h2 ในเนื้อหาอัตโนมัติ
document.addEventListener('DOMContentLoaded', function() {
const headings = document.querySelectorAll('.post-content h2');
const tocList = document.getElementById('toc-list');
headings.forEach((h, i) => {
h.id = 'heading-' + i;
let li = document.createElement('li');
li.innerHTML = `<a href="#heading-${i}" style="color: #0056b3; text-decoration: none;">${h.innerText}</a>`;
tocList.appendChild(li);
});
if(headings.length === 0) document.getElementById('toc-container').style.display = 'none';
});
</script>
<?php endwhile; endif; ?>
<?php get_footer(); ?>
3. footer.php (ส่วนท้ายไฟล์)
PHP
<footer style="background: #333; color: #fff; padding: 40px 0; margin-top: 50px; text-align: center;">
<div class="container">
<p>© <?php echo date('Y'); ?> InsuranceThai - ข้อมูลประกันภัยที่ลึกซึ้งและจริงใจ</p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
4. archive.php (หน้าหมวดหมู่/แท็ก)
ใช้โครงสร้างเดียวกับ index.php แต่มีการแสดงชื่อหมวดหมู่ด้านบน
PHP
<?php get_header(); ?>
<div class="container">
<h1 style="margin: 30px 0; border-left: 5px solid #0056b3; padding-left: 15px;">
<?php the_archive_title(); ?>
</h1>
<div class="post-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 25px;">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article style="background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
<a href="<?php the_permalink(); ?>">
<img src="<?php echo esc_url(get_insurance_image(get_the_ID())); ?>" style="width: 100%; height: 220px; object-fit: cover;">
</a>
<div style="padding: 20px;">
<h2 style="margin: 0 0 10px; font-size: 1.3rem;"><a href="<?php the_permalink(); ?>" style="text-decoration: none; color: #333;"><?php the_title(); ?></a></h2>
<p style="color: #666; font-size: 0.9rem;"><?php echo wp_trim_words(get_the_excerpt(), 20); ?></p>
<span style="font-size: 0.8rem; color: #aaa;"><?php echo get_post_views(get_the_ID()); ?></span>
</div>
</article>
<?php endwhile; endif; ?>
</div>
</div>
<?php get_footer(); ?>
สรุปไฟล์ที่ต้องมีในโฟลเดอร์ธีม:
style.css(ที่ผมให้ในครั้งก่อน)functions.php(ที่ผมให้ในครั้งก่อน + ระบบนับยอดวิว)header.phpfooter.phpindex.php(หน้าแรก)single.php(หน้าโพสต์)archive.php(หน้าหมวดหมู่)
จุดเด่นของธีมนี้:
- โค้ดน้อยที่สุด: ไม่มีปลั๊กอินหนักๆ เว็บจะโหลดเร็วมาก (Core Web Vitals ผ่านฉลุย)
- SEO Native: ใช้โครงสร้าง HTML5 ที่ Google ชอบ พร้อมระบบสารบัญอัตโนมัติ
- ระบบอัตโนมัติ: ไม่ต้องกังวลเรื่องรูปหน้าปก เพราะมันจะไปขุดรูปจากเนื้อหามาให้เอง