สร้าง “Theme Framework” พื้นฐานที่เบาที่สุด (เรียกได้ว่าเป็นธีมลูกครึ่ง Minimal + Magazine) ให้คุณได้ โดยใช้โครงสร้างที่สะอาดที่สุด และใส่ระบบที่คุณต้องการ (ดึงรูปอัตโนมัติ + นับยอดวิว) ลงไปในตัวเลย
เนื่องจากผมเป็น AI ผมไม่สามารถส่งไฟล์ .zip ให้ดาวน์โหลดโดยตรงได้ แต่ผมจะ “วางโครงสร้างโค้ด” ที่สำคัญที่สุด 3 ไฟล์ที่คุณต้องใช้ในการสร้างธีมนี้ครับ
1. ไฟล์ functions.php (หัวใจของธีม)
ไฟล์นี้จะรวมระบบ Auto Image ที่เราทำสำเร็จแล้ว และ ระบบนับยอดวิว แบบไม่ใช้ปลั๊กอินครับ
PHP
<?php
// 1. รองรับฟีเจอร์พื้นฐาน
function insurance_minimal_setup() {
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'insurance_minimal_setup' );
// 2. ระบบดึงภาพอัตโนมัติ + Default Image (ตัวที่คุณชอบ)
function get_insurance_image($post_id) {
global $wpdb;
$content = $wpdb->get_var( $wpdb->prepare( "SELECT post_content FROM $wpdb->posts WHERE ID = %d", $post_id ) );
if ( preg_match('/<img.+?src=[\'"]([^\'"]+)[\'"].*?>/i', $content, $matches) ) {
return $matches[1];
}
return 'https://insurancethai.net/defualt.png';
}
// 3. ระบบนับยอดวิว (Post Views) แบบเบาหวิว
function set_post_views($postID) {
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count==''){
$count = 0;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '0');
}else{
$count++;
update_post_meta($postID, $count_key, $count);
}
}
function get_post_views($postID){
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count==''){
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '0');
return "0 Views";
}
return $count.' Views';
}
2. ไฟล์ index.php (โครงสร้างหน้าแรกแบบ Magazine)
ไฟล์นี้จะเน้นความเร็ว โหลดเฉพาะสิ่งที่จำเป็น
PHP
<?php get_header(); ?>
<main class="site-main">
<div class="container">
<div class="post-grid">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="card">
<div class="card-image">
<a href="<?php the_permalink(); ?>">
<?php
$img = get_insurance_image(get_the_ID());
echo '<img src="'.esc_url($img).'" alt="'.get_the_title().'">';
?>
</a>
</div>
<div class="card-content">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<span class="views-count"><i class="fa fa-eye"></i> <?php echo get_post_views(get_the_ID()); ?></span>
</div>
</article>
<?php endwhile; endif; ?>
</div>
</div>
</main>
<?php get_footer(); ?>
3. ไฟล์ style.css (ดีไซน์เบาหวิว)
เน้นใช้ CSS Grid เพื่อความทันสมัยและไม่ต้องโหลด Library ภายนอก
CSS
/*
Theme Name: InsuranceThai Minimal
Author: Gemini AI
Version: 1.0
*/
body { font-family: 'Tahoma', sans-serif; line-height: 1.6; color: #333; margin: 0; }
.container { max-width: 1100px; margin: auto; padding: 20px; }
/* Magazine Grid */
.post-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.card { border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: 0.3s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.card-image img { width: 100%; height: 200px; object-fit: cover; }
.card-content { padding: 15px; }
.card-content h2 { font-size: 1.2rem; margin: 0 0 10px; }
.views-count { font-size: 0.8rem; color: #888; }
ขั้นตอนการใช้งาน:
- เข้าไปที่โฟลเดอร์
wp-content/themes/ - สร้างโฟลเดอร์ใหม่ชื่อ
insurance-minimal - สร้างไฟล์ตามชื่อข้างบนแล้วเอา Code ไปวาง
- ที่สำคัญที่สุด: ในหน้า
single.phpอย่าลืมใส่คำสั่งset_post_views(get_the_ID());ไว้ที่บรรทัดบนสุด เพื่อให้มันนับยอดวิวทุกครั้งที่มีคนอ่านครับ