การพัฒนา WordPress ธีมแบบกำหนดเองเป็นวิธีที่ดีที่สุดในการทำความเข้าใจกรอบงานของ WordPress อย่างลึกซึ้งและยกระดับทักษะการพัฒนา Front-end ต่างจากการใช้ธีมสำเร็จรูป การสร้างตั้งแต่เริ่มต้นทำให้คุณมีอำนาจควบคุมเต็มที่ สามารถสร้างเว็บไซต์ที่เป็นเอกลักษณ์และตรงตามความต้องการของโครงการได้อย่างสมบูรณ์ บทความนี้จะแนะนำคุณตลอดกระบวนการสร้าง WordPress ธีมพื้นฐานที่สมบูรณ์และมีฟังก์ชันการทำงานครบถ้วน
การตั้งค่าสภาพแวดล้อมการพัฒนาและโครงสร้างธีม
ก่อนเริ่มเขียนโค้ด คุณจำเป็นต้องมีสภาพแวดล้อมการพัฒนาภายในเครื่อง ซึ่งโดยทั่วไปประกอบด้วยชุดเซิร์ฟเวอร์ท้องถิ่น (เช่น XAMPP, MAMP หรือ Local by Flywheel) โปรแกรมแก้ไขโค้ด (เช่น VS Code) และ WordPress เวอร์ชันล่าสุด
ขั้นแรก ใน WordPress <code>wp-content/themes</code> ภายใต้ไดเรกทอรี ให้สร้างโฟลเดอร์สำหรับธีมใหม่ของคุณ เช่น <code>my-custom-theme</code>ธีม WordPress ที่พื้นฐานที่สุดอย่างน้อยต้องมีไฟล์หลักสองไฟล์
แนะนำให้อ่าน บทเรียนการพัฒนา WordPress ธีมแบบสมบูรณ์: สร้างธีมที่กำหนดเองตั้งแต่เริ่มต้น。
สร้างไฟล์สไตล์ชีต
ไฟล์แรกที่จำเป็นคือ style.cssไฟล์นี้ไม่เพียงกำหนดสไตล์ของธีมเท่านั้น ส่วนหัวของไฟล์ยังมีเมตาดาต้าที่อธิบายธีมให้กับ WordPress กรุณาเพิ่มความคิดเห็นต่อไปนี้ที่ด้านบนของไฟเล:
/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/“โดเมนข้อความ” ใช้สำหรับการทำให้เป็นสากล ต้องตรงกับชื่อโฟลเดอร์ธีมของคุณ หลังจากนั้น คุณสามารถเขียนกฎ CSS ทั้งหมดในไฟล์นี้
สร้างไฟล์ฟังก์ชันหลัก
ไฟล์ที่จำเป็นที่สองคือ functions.phpนี่คือ “สมอง” ของธีม ใช้สำหรับนำเข้า stylesheet, ไฟล์ JavaScript, ลงทะเบียนเมนู, ไซด์บาร์ และคุณสมบัติอื่น ๆ รวมถึงเพิ่มการสนับสนุนฟังก์ชันต่าง ๆ
พื้นฐาน functions.php ส่วนเริ่มต้นมักจะเป็นดังนี้ ใช้สำหรับเพิ่ม stylesheet เข้าคิว:
<?php
// 将主题样式表加入队列
function my_custom_theme_enqueue_styles() {
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );ในตอนนี้ แม้จะยังไม่มีไฟล์เทมเพลตใด ๆ แต่ธีมของคุณก็สามารถปรากฏในรายการ “ธีม” ภายใต้ “รูปลักษณ์” ใน WordPress แบ็กเอนด์และสามารถเปิดใช้งานได้ หลังจากเปิดใช้งานแล้ว หน้าเว็บไซต์ด้านหน้าจะแสดงเป็นหน้าว่าง เนื่องจากขาดไฟล์เทมเพลตในการกำหนดโครงสร้างหน้า
แนะนำให้อ่าน คู่มือเริ่มต้นการพัฒนา WordPress Theme แบบลงมือปฏิบัติ: สร้างโครงสร้างธีมแบบกำหนดเองและเทมเพลตตั้งแต่เริ่มต้น。
สร้างไฟล์เทมเพลตหลัก
ไฟล์เทมเพลตควบคุมวิธีการแสดงผลส่วนต่าง ๆ ของเว็บไซต์ WordPress ใช้ลำดับชั้นของเทมเพลตในการตัดสินใจว่าเทมเพลตใดจะถูกใช้สำหรับคำขอปัจจุบัน
สร้างส่วนหัวและส่วนท้ายของเว็บไซต์ทั้งหมด
วิธีปฏิบัติที่ดีที่สุดคือการแยกโค้ดส่วนหัวและส่วนท้ายที่ใช้ร่วมกันออกมา สร้าง header.php ไฟล์ ซึ่งโดยปกติจะประกอบด้วยการประกาศประเภทเอกสาร พื้นที่และเปิด ป้ายกำกับและเมนูนำทางหลัก
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1004>
<header>
<h1><a href="/th/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
<nav>
'primary' ) ); ?>
</nav>
</header>
<main>ตามนั้น สร้าง footer.php เพื่อปิดคอนเทนเนอร์หลักและป้ายกำกับที่เปิดอยู่ใน header.php เปิดคอนเทนเนอร์หลักและแท็บ
</main>
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>wp_head() 和 wp_footer() เป็นฮุคที่สำคัญซึ่งอนุญาตให้ WordPress core, ปลั๊กอิน และธีมเอง แทรกโค้ดที่จำเป็น (เช่น สไตล์, สคริปต์) ในตำแหน่งเหล่านี้
สร้างดัชนีและเทมเพลตบทความ
index.php เป็นไฟล์สำรองสุดท้ายของลำดับชั้นเทมเพลต และเป็นจุดเริ่มต้นของธีมของเรา ใช้ get_header() 和 get_footer() เพื่อนำเข้าโมดูลที่แยกออกมา
<article>
<h2><a href="/th/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_excerpt(); ?></div>
</article>
<p>ยังไม่มีบทความ</p>เพื่อแสดงบทความเดียวแยกกัน สร้าง single.phpโครงสร้างของมันคล้ายกับ index.php แต่ใช้ the_content() เพื่อแสดงข้อความเต็ม
แนะนำให้อ่าน การพัฒนา WordPress Theme เริ่มต้น — สร้างธีมที่กำหนดเองแรกของคุณตั้งแต่เริ่มต้น。
<article>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
</article>เพิ่มฟังก์ชันธีม
หลังจากมีโครงสร้างพื้นฐานแล้ว เราจะเพิ่ม functions.php เพื่อเพิ่มฟังก์ชันการทำงานที่เป็นประโยชน์มากขึ้น ทำให้ธีมดูมืออาชีพและใช้งานง่าย
การลงทะเบียนเมนูนำทางและแถบด้านข้าง
在 functions.php เพิ่มโค้ดต่อไปนี้เพื่อลงทะเบียนพื้นที่เมนูนำหลักและพื้นที่แถบด้านข้าง (พื้นที่วิดเจ็ต):
// 注册导航菜单
function my_custom_theme_register_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_register_menus' );
// 注册侧边栏小工具区域
function my_custom_theme_register_sidebar() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_custom_theme_register_sidebar' );หลังจากลงทะเบียนแล้ว คุณต้องเรียกใช้พวกเขาในเทมเพลต ตัวอย่างเช่น ใน header.php เราได้ใช้ wp_nav_menu เพื่อเรียกใช้เมนู “primary” แล้ว หากต้องการแสดงวิดเจ็ตในแถบด้านข้าง คุณสามารถสร้างเทมเพลตแถบด้านข้างใน sidebar.php และใน index.php 或 single.php ใช้ฟังก์ชัน get_sidebar() แนะนำ
เพิ่มการสนับสนุนฟีเจอร์ธีม
WordPress มีฟังก์ชันในตัวมากมายที่ต้องประกาศการรองรับอย่างชัดเจนก่อนจึงจะสามารถใช้ในธีมได้ ตัวอย่างเช่น การเพิ่มการรองรับรูปขนาดย่อของบทความ (รูปภาพเด่น) โลโก้ที่ปรับแต่งได้ และการรองรับแท็ก HTML5
// 添加主题功能支持
function my_custom_theme_setup() {
// 支持文章缩略图
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
// 对搜索表单、评论表单等使用HTML5标记
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 在管理后台提供<title>标签支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );หลังจากเพิ่มการรองรับ “post-thumbnails” แล้ว คุณก็สามารถใช้ the_post_thumbnail() ฟังก์ชันในลูปบทความเพื่อแสดงรูปภาพเด่นได้
การออกแบบสไตล์และการจัดวางแบบตอบสนอง
ธีมที่สวยงามและปรับตัวได้กับอุปกรณ์ต่าง ๆ เป็นสิ่งสำคัญ คุณสามารถเขียนสไตล์ทั้งหมดใน style.css ขอแนะนำให้ใช้กลยุทธ์มือถือเป็นอันดับแรก
สไตล์พื้นฐานและการจัดวางหน้า
เริ่มต้นด้วยการตั้งค่ารีเซ็ตสไตล์และการจัดวางพื้นฐาน เพื่อให้แน่ใจว่ามีการแสดงผลที่สอดคล้องกันในเบราว์เซอร์ต่างๆ
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background: #f8f9fa;
padding: 2rem 0;
border-bottom: 1px solid #dee2e6;
}
/* 导航菜单样式 */
.main-navigation ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
.main-navigation a {
text-decoration: none;
color: #007bff;
}การออกแบบที่ตอบสนอง (Responsive Design)
ใช้ Media Query เพื่อปรับเลย์เอาต์ตามขนาดหน้าจอที่แตกต่างกัน ตัวอย่างเช่น เมื่อหน้าจอเล็กลง ให้เปลี่ยนเมนูนำทางเป็นการจัดเรียงแนวตั้ง
/* 移动端样式 */
@media (max-width: 768px) {
.main-navigation ul {
flex-direction: column;
gap: 0.5rem;
}
.container {
padding: 0 15px;
}
article {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #eee;
}
}ตรวจสอบให้แน่ใจว่ารูปภาพก็ตอบสนองเช่นกัน:
img {
max-width: 100%;
height: auto;
}สรุป
ผ่านขั้นตอนข้างต้น คุณได้สร้างธีม WordPress ที่กำหนดเองที่มีฟังก์ชันสมบูรณ์แล้วสำเร็จ เราเริ่มจากการตั้งค่า environment การพัฒนาและสร้างไฟล์พื้นฐานที่สุด style.css 与 functions.php จากนั้นค่อยๆ สร้างไฟล์เทมเพลตหลัก (header.php, footer.php, index.php, single.php) และเพิ่มฟังก์ชันการใช้งานที่จำเป็นให้กับธีม เช่น การลงทะเบียนเมนู, แถบด้านข้าง และการสนับสนุนภาพเด่น สุดท้าย เราได้เพิ่มสไตล์พื้นฐานและการจัดวางแบบ responsive ให้กับธีม เพื่อให้สามารถแสดงผลได้ดีบนอุปกรณ์ทุกประเภท นี่เป็นเพียงจุดเริ่มต้น คุณสามารถต่อยอดจากตรงนี้เพื่อสร้างเทมเพลตหน้า (page.php) เทมเพลตจัดเก็บ (archive.php）、ค้นหาเทมเพลต（search.php），หรือแม้กระทั่งใช้ธีมย่อยเพื่อปรับแต่งให้ตรงกับความต้องการเฉพาะของคุณ ซึ่งจะช่วยสร้างเว็บไซต์ที่มีประสิทธิภาพและเป็นมืออาชีพมากขึ้น
คำถามที่พบบ่อย (FAQ)
ต้องเรียนรู้เทคโนโลยีใดบ้างในการพัฒนา WordPress Theme
ในการพัฒนา WordPress Theme พื้นฐาน คุณจำเป็นต้องเรียนรู้ HTML, CSS และ PHP โดยใช้ HTML ในการสร้างโครงสร้างหน้าเว็บ CSS สำหรับการออกแบบและจัดวางสไตล์ และ PHP เป็นหัวใจหลักที่ขับเคลื่อนเนื้อหาแบบไดนามิกใน WordPress นอกจากนี้ ความเข้าใจพื้นฐานเกี่ยวกับ JavaScript จะช่วยในการเพิ่มฟังก์ชันการโต้ตอบ การทำความเข้าใจแนวคิดหลักของ WordPress เช่น โครงสร้างลำดับชั้นของเทมเพลต, วงจร (The Loop), ฮุค (Hooks) และฟังก์ชันต่างๆ เป็นสิ่งสำคัญสำหรับการพัฒนา Theme ที่ประสบความสำเร็จ
ไฟล์ functions.php ของธีมมีหน้าที่อะไร
functions.php ไฟล์นี้เป็นศูนย์กลางการทำงานของธีม WordPress หน้าที่หลักรวมถึง: การเพิ่มไฟล์ CSS และ JavaScript เข้าคิว, การลงทะเบียนพื้นที่เมนูนำทางและวิดเจ็ตแถบด้านข้าง, การประกาศฟีเจอร์ที่ธีมรองรับ (เช่น รูปภาพประจำบทความ, โลโก้แบบกำหนดเอง), การกำหนดฟังก์ชันที่กำหนดเอง, และการปรับเปลี่ยนพฤติกรรมเริ่มต้นของ WordPress ผ่านฮุคแอ็กชันและฮุคตัวกรอง มันช่วยให้คุณสามารถขยายและปรับแต่งฟังก์ชันของธีมได้อย่างมาก โดยไม่ต้องแก้ไขไฟล์หลักของ WordPress
วิธีให้ธีมของฉันรองรับหลายภาษา
การทำให้ธีมรองรับหลายภาษา (สากล) เกี่ยวข้องกับสองขั้นตอนหลัก ขั้นแรก, ใน style.css ของ “Text Domain” และทุกที่ที่ใช้ฟังก์ชันแปลภาษา ให้ใช้โดเมนข้อความ (Text Domain) ที่สอดคล้องกัน ซึ่งโดยทั่วไปจะเหมือนกับชื่อโฟลเดอร์ธีม ขั้นที่สอง, เมื่อเตรียมสตริงที่ต้องการแปล ให้ใช้ฟังก์ชันแปลภาษาของ WordPress เช่น __()、_e() 或 _x()จากนั้น คุณสามารถใช้เครื่องมือเช่น Poedit เพื่อสร้าง .pot ไฟล์เทมเพลต และสร้าง .po 和 .mo ไฟล์แปลที่สอดคล้องกัน วางไฟล์แปลไว้ในธีม /languages ไดเรกทอรี WordPress จะโหลดไฟล์เหล่านั้นโดยอัตโนมัติตามการตั้งค่าภาษาของเว็บไซต์
การสร้างธีมลูกเมื่อเทียบกับการแก้ไขธีมแม่โดยตรงมีข้อดีอย่างไร
การสร้างธีมลูกเป็นแนวปฏิบัติที่ดีที่สุดสำหรับการแก้ไขหรือขยายฟังก์ชันของธีมแม่ที่มีอยู่ ข้อได้เปรียบหลักอยู่ที่ความปลอดภัยในการอัปเดต: เมื่อธีมแม่เผยแพร่การอัปเดต คุณสามารถอัปเดตธีมแม่ได้อย่างปลอดภัย โดยที่การแก้ไขที่กำหนดเองของคุณ (สไตล์, ฟังก์ชัน, เทมเพลต) ที่ทำในธีมลูกจะไม่สูญหาย ธีมลูกต้องการเพียงแค่ style.css และ functions.php ไฟล์ที่เลือกได้เพื่อทำงาน ในธีมลูก style.css ใน @import หรือการจัดคิวที่ดีกว่า นำสไตล์ของธีมแม่มาใช้ แล้วเพิ่มกฎ CSS ของคุณเองเพื่อเขียนทับ สไตล์ของธีมลูก functions.php จะโหลดพร้อมกับไฟล์ที่มีชื่อเดียวกันของธีมแม่ แทนที่จะเขียนทับ ซึ่งช่วยให้คุณสามารถเพิ่มฟังก์ชันใหม่ได้อย่างปลอดภัย
ขั้นต่อไป ฉันควรทำอย่างไรต่อไป
อ่านเพิ่มเติมและรับความรู้ที่มีประโยชน์
下面这些内容与本文主题相关，适合继续深入阅读。优先从与你当前问题最接近的文章开始看，再逐步扩展到周边主题，效果通常会更好。
- เชี่ยวชาญ Tailwind CSS หลัก: คู่มือการพัฒนาเว็บสมัยใหม่ตั้งแต่คลาสยูทิลิตี้ไปจนถึงการออกแบบ Responsive
- เรียนรู้ขั้นตอนทั้งหมดในการสร้างเว็บไซต์: คู่มือทางเทคนิคและแนวทางปฏิบัติที่ดีที่สุดตั้งแต่เริ่มต้นจนถึงการเปิดตัว
- การสร้างเว็บไซต์ที่ประสบความสำเร็จ: คู่มือการสร้างเว็บไซต์แบบครบวงจรตั้งแต่เริ่มต้นจนถึงขั้นสุดท้าย
- คู่มือการสร้างเว็บไซต์สมัยใหม่แบบครบวงจร: ตั้งแต่เริ่มต้นจนถึงการออนไลน์ - การเลือกใช้เทคโนโลยีและแนวปฏิบัติที่ดีที่สุด
- คู่มือที่ต้องอ่านสำหรับการพัฒนา WordPress แบบกำหนดเอง: การปฏิบัติจริงแบบครบถ้วนตั้งแต่การสร้างธีมไปจนถึงการเขียนปลั๊กอิน
ไทย