การสร้าง Theme WordPress
Sirichai Teerapattarasakul / June 02, 2025
4 min read
บันทึกการสร้างธีม WordPress ด้วยตัวเอง สิ่งที่ต้องรู้พื้นฐานมีความเข้าใจพื้นฐานเกี่ยวกับ HTML, CSS, และและ PHP ต่อไปนี้คือขั้นตอนเริ่มต้นสร้างธีม WordPress ตั้งแต่เริ่มต้น:
ขั้นตอนที่ 1: ติดตั้ง WordPress ในเครื่อง (Localhost)
ตรงนี้ผมใช้ Local by Flywheel เพื่อทำเป็น Local Server เพราะใช้งานง่ายดีคลิกไม่กี่คลิกก็ได้เว็บไซต์ Worpress แล้ว หรือใครจะใช้ตัวอื่น เช่น XAMPP, MAMP หรือ Docker ก็ได้ แล้วแต่สะดวกครับ เมื่อได้เว็บไซต์โปรเจ็คมาแล้ว ให้ทำความเข้าใจโครงสร้างโฟลเดอร์ของ WordPress อีกครั้ง ตามนี้
- ธีม WordPress จะอยู่ในโฟลเดอร์
wp-content/themes/
- จะสร้างโฟลเดอร์ธีมใหม่ในนี้ เช่น
wp-content/themes/mytheme
ผมมีเขียนบันทึก โครงสร้างไฟล์ของเว็บไซต์ WordPress สามารถอ่านทำความเข้าใจอีกครั้ง
ขั้นตอนที่ 2: สร้างโฟลเดอร์และไฟล์พื้นฐานของธีม
สร้างโฟลเดอร์ธีม
- ไปที่
wp-content/themes/
และสร้างโฟลเดอร์ใหม่ เช่นmytheme
- ชื่อโฟลเดอร์ควรเป็นชื่อที่ไม่ซ้ำและสื่อถึงธีม (เช่น
my-first-theme
)
- ไปที่
สร้างไฟล์หลักของธีม ธีม WordPress ต้องการไฟล์พื้นฐานอย่างน้อย 2 ไฟล์:
style.css
: ไฟล์สไตล์และข้อมูลเมตาของธีมindex.php
: ไฟล์หลักที่แสดงหน้าแรกของเว็บ
ตัวอย่างไฟล์
style.css
:/* Theme Name: My First Theme Author: ชื่อของผู้สร้างธีม Description: ธีม WordPress แรกของฉัน Version: 1.0 Text Domain: mytheme */ /* CSS สำหรับสไตล์ของธีม */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
ตัวอย่างไฟล์
index.php
:<!DOCTYPE html> <html> <head> <title><?php bloginfo('name'); ?></title> <?php wp_head(); ?> </head> <body> <h1>ยินดีต้อนรับสู่ธีมของฉัน!</h1> <?php wp_footer(); ?> </body> </html>
เปิดใช้งานธีม
- เข้าไปที่ WordPress Admin Dashboard (
http://localhost/ชื่อโฟลเดอร์/wp-admin
) - ไปที่ Appearance > Themes แล้วเลือกธีม
My First Theme
เพื่อเปิดใช้งาน (ชื่อมากจากที่ตั้ง Theme Name ในstyle.css
)
- เข้าไปที่ WordPress Admin Dashboard (
ขั้นตอนที่ 3: เพิ่มโครงสร้างพื้นฐานของธีม
สร้างไฟล์ที่สำคัญเพิ่มเติม ธีม WordPress มักมีไฟล์อื่นๆ เพื่อจัดการหน้าเว็บประเภทต่างๆ:
header.php
: ส่วนหัวของเว็บ (โลโก้, เมนู)footer.php
: ส่วนท้ายของเว็บ (ลิขสิทธิ์, ลิงก์)functions.php
: ไฟล์สำหรับเพิ่มฟังก์ชันพิเศษให้ธีม เช่น ตั้งค่าและโหลด CSS/JSsingle.php
: เทมเพลตสำหรับแสดงโพสต์เดี่ยวpage.php
: เทมเพลตสำหรับแสดงหน้าเพจarchive.php
: เทมเพลตสำหรับแสดงหมวดหมู่หรือแท็ก
ตัวอย่าง
header.php
:<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <title><?php wp_title(); ?> - <?php bloginfo('name'); ?></title> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1> <nav> <?php wp_nav_menu(array('theme_location' => 'main-menu')); ?> </nav> </header>
ตัวอย่าง
footer.php
:<footer> <p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p> </footer> <?php wp_footer(); ?> </body> </html>
ตัวอย่าง
functions.php
:<?php // เพิ่มการสนับสนุนเมนู function mytheme_setup() { register_nav_menus(array( 'main-menu' => __('Main Menu', 'mytheme'), )); } add_action('after_setup_theme', 'mytheme_setup'); // เพิ่มการสนับสนุนรูปภาพเด่น add_theme_support('post-thumbnails'); ?>
ปรับปรุง
index.php
เพื่อเรียกใช้header.php
และfooter.php
<?php get_header(); ?> <main> <h2>โพสต์ล่าสุด</h2> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <?php the_content(); ?> <?php endwhile; else : ?> <p>ไม่มีเนื้อหา</p> <?php endif; ?> </main> <?php get_footer(); ?>
ขั้นตอนที่ 4: ออกแบบและปรับแต่งสไตล์
เพิ่ม CSS ใน
style.css
- ออกแบบหน้าเว็บด้วย CSS เช่น การจัด layout, สี, ฟอนต์
- ตัวอย่าง:
header { background: #333; color: #fff; padding: 20px; text-align: center; } nav ul { list-style: none; padding: 0; } nav ul li { display: inline; margin-right: 10px; } main { max-width: 800px; margin: 0 auto; padding: 20px; }
ใช้ CSS Framework (หากไม่อยากเขียน CSS เองทั้งหมด)
- ส่วนตัวใช้ framework หลักๆ คือ Bootstrap และ Tailwind CSS
- ให้ดาวน์โหลดและรวมไฟล์ CSS/JS ใน
functions.php
:function mytheme_enqueue_styles() { wp_enqueue_style('bootstrap', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'); } add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');
ขั้นตอนที่ 5: เพิ่มฟีเจอร์พิเศษ
เพิ่มการสนับสนุนฟีเจอร์ใน
functions.php
- รูปภาพเด่น:
add_theme_support('post-thumbnails');
- โลโก้ที่กำหนดเอง:
add_theme_support('custom-logo');
- วิดเจ็ต:
function mytheme_widgets_init() { register_sidebar(array( 'name' => 'Sidebar', 'id' => 'sidebar-1', 'before_widget' => '<div class="widget">', 'after_widget' => '</div>', )); } add_action('widgets_init', 'mytheme_widgets_init');
- รูปภาพเด่น:
สร้าง Sidebar
- สร้างไฟล์
sidebar.php
:<aside> <?php dynamic_sidebar('sidebar-1'); ?> </aside>
- เรียกใช้ใน
index.php
หรือไฟล์อื่น:<?php get_sidebar(); ?>
- สร้างไฟล์
สร้างเทมเพลตหน้าเพจแบบกำหนดเอง (Custom Page Template)
- สร้างไฟล์เช่น
page-custom.php
:<?php /* Template Name: Custom Page */ get_header(); ?> <main> <h2>นี่คือหน้าแบบกำหนดเอง</h2> <?php the_content(); ?> </main> <?php get_footer(); ?>
- เลือกเทมเพลตนี้ในหน้า WordPress Admin
- สร้างไฟล์เช่น
ขั้นตอนที่ 6: ทดสอบและแก้ไข
ดูหน้าเว็บในเบราว์เซอร์ ตรวจสอบว่าแสดงผลถูกต้องหรือไม่ เช่น หน้าโพสต์, หน้าเพจ, หมวดหมู่, และ sidebar หรือ ใช้ Developer Tools (F12) เพื่อตรวจสอบข้อผิดพลาด CSS หรือ JavaScript
แนะนำติดตั้งปลั๊กอินช่วยทดสอบ
- Theme Check: ตรวจสอบว่าธีมเป็นไปตามมาตรฐาน WordPress ไหม?
- WP Debug: เปิดโหมด debug ใน
wp-config.php
โดยเพิ่ม:define('WP_DEBUG', true);
ขั้นตอนที่ 7: เพิ่มความซับซ้อน (ถ้าต้องการ)
เพิ่ม Custom Post Types
- ใช้
functions.php
เพื่อสร้างประเภทโพสต์ใหม่ เช่น Portfolio:function create_portfolio_post_type() { register_post_type('portfolio', array( 'labels' => array( 'name' => 'Portfolios', 'singular_name' => 'Portfolio' ), 'public' => true, 'has_archive' => true, )); } add_action('init', 'create_portfolio_post_type');
- ใช้
เพิ่มการสนับสนุน WooCommerce (ถ้าต้องการร้านค้าออนไลน์)
- เพิ่มใน
functions.php
:add_theme_support('woocommerce');
- เพิ่มใน
ปรับแต่ง Loop
- ปรับแต่งการแสดงผลโพสต์ใน
index.php
หรือarchive.php
เช่น แสดงเฉพาะสรุปโพสต์:<?php the_excerpt(); ?>
- ปรับแต่งการแสดงผลโพสต์ใน
ขั้นตอนสุดท้าย: อัปโหลดและใช้งานจริง
รวมไฟล์ทั้งหมดในโฟลเดอร์ธีม (mytheme
) และบีบอัดเป็นไฟล์ .zip
อัปโหลดไปยัง WordPress
- เข้า WordPress Admin > Appearance > Themes > Add New > Upload Theme
- อัปโหลดไฟล์ .zip และเปิดใช้งาน
มีเครื่องมือ Opensource ที่ช่วยสร้างธีมเพื่อประหยัดเวลา
ชื่อว่า Underscore จะสร้าง Starter Theme เริ่มต้นสำหรับให้เลย อาจจะลองใช้และเอาไปแกะโค้ดดูภายหลังก็ได้
แหล่งเรียนรู้เพิ่มเติม
- WordPress Codex: codex.wordpress.org
- WPBeginner: wpbeginner.com
- Theme Handbook: developer.wordpress.org/themes
หวังว่าคงมีประโยชน์ครับ!