พื้นฐานการพัฒนา WordPress Theme
ในการเริ่มพัฒนา WordPress Theme ก่อนอื่นต้องเข้าใจโครงสร้างหลักของมัน Theme พื้นฐานที่สุดอย่างน้อยต้องมีสองไฟล์:index.php 和 style.cssโดยที่style.css ไม่ใช่แค่สไตล์ชีตเท่านั้น แต่ยังบรรจุข้อมูลเมตาของธีม ซึ่งประกาศผ่านบล็อกคอมเมนต์เฉพาะ เป็นกุญแจสำคัญที่ WordPress ใช้ระบุธีม
การเขียนไฟล์ส่วนหัวข้อมูลธีม
在style.cssที่ด้านบนของไฟล์ ต้องมีบล็อกคอมเมนต์ที่มีรูปแบบมาตรฐาน บล็อกนี้กำหนดข้อมูลเมตา เช่น ชื่อธีม ผู้เขียน คำอธิบาย เวอร์ชัน ตัวอย่างเช่น:
/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习的自定义主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/ในนั้นText Domainสำหรับการสากล (i18n) ซึ่งเป็นโดเมนข้อความที่ต้องระบุเมื่อใช้ฟังก์ชันแปล (เช่น__()或_e()) การกรอกข้อมูลนี้อย่างถูกต้องเป็นเงื่อนไขเบื้องต้นที่ธีมจะถูกระบุและเปิดใช้งานสำเร็จในแอดมิน WordPress
แนะนำให้อ่าน การพัฒนาเทมเพลต WordPress: คู่มือฉบับสมบูรณ์ในการสร้างเทมเพลตเว็บไซต์ระดับมืออาชีพตั้งแต่เริ่มต้น。
เข้าใจโครงสร้างลำดับชั้นของไฟล์ธีม
WordPress ใช้ระบบลำดับชั้นเทมเพลตเพื่อตัดสินใจว่าไฟล์เทมเพลตใดจะถูกเรียกสำหรับประเภทหน้าที่ต่างกัน ตัวอย่างเช่น เมื่อเข้าถึงโพสต์เดี่ยว WordPress จะค้นหาsingle.phpก่อน หากไม่มี จะย้อนกลับไปใช้singular.php；การย้อนกลับสุดท้ายไปยังindex.php。การเข้าใจระดับนี้（เช่นfront-page.php > home.php > index.php）มีความสำคัญอย่างยิ่งในการสร้างธีมที่สมบูรณ์แบบ ควรให้ความสำคัญกับการสร้างไฟล์เทมเพลตที่เฉพาะเจาะจงที่สุด และตรวจสอบให้แน่ใจว่ามีindex.phpเป็นตัวสำรองสุดท้าย
หน้าที่ของไฟล์เทมเพลตหลัก
นอกจากไฟล์ทางเข้าแล้ว ธีมที่ครอบคลุมการทำงานมักมีไฟล์เทมเพลตหลักดังต่อไปนี้:
* header.php: กำหนดส่วนหัวของเอกสาร โดยทั่วไปจะรวม<head>พื้นที่และส่วนหัวของเว็บไซต์
* footer.php: กำหนดส่วนท้ายของเอกสาร
* sidebar.php: กำหนดพื้นที่แถบด้านข้าง
* functions.php: นี่คือ “ศูนย์กลางฟังก์ชัน” ของธีม ใช้สำหรับเพิ่มฟังก์ชัน ลงทะเบียนเมนู รองรับรูปภาพเด่น เป็นต้น
ในไฟล์เทมเพลต ใช้ฟังก์ชันเช่นget_header()、get_footer()、get_sidebar()และฟังก์ชันอื่น ๆ เพื่อนำเข้าส่วนเหล่านี้ รักษาโมดูลาร์ของโค้ด
สร้างฟังก์ชันหลักของธีม
ของธีมfunctions.phpไฟล์เป็นหัวใจหลักในการเพิ่มประสิทธิภาพฟังก์ชันของธีม มันไม่ใช่ไฟล์เทมเพลต แต่เป็นไฟล์ PHP ที่โหลดอัตโนมัติเมื่อเริ่มต้นธีม ใช้สำหรับเชื่อมโยงกับ API หลักของ WordPress
การดำเนินการเริ่มต้นของไฟล์ฟังก์ชันหลัก
在functions.phpในการดำเนินการทั้งหมดควรดำเนินการผ่านadd_action()เชื่อมโยงกับการกระทำเฉพาะหรือผ่านadd_filter()เพื่อปรับเปลี่ยนข้อมูล จุดเริ่มต้นมาตรฐานอยู่ที่after_setup_themeการตั้งค่าธีมในแอคชัน ตัวอย่างเช่น:
function mytheme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );
// 注册导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );โค้ดนี้เปิดใช้งานแท็กหัวเรื่องอัตโนมัติ, รูปขนาดย่อของบทความ และลงทะเบียนตำแหน่งเมนูที่กำหนดเองสองตำแหน่ง โปรดทราบว่าสตริงทั้งหมดใช้ฟังก์ชันการแปล__()และระบุโดเมนข้อความที่สอดคล้องกับstyle.cssเหมือนกันmy-custom-theme。
แนะนำให้อ่าน คู่มือยอดนิยมสำหรับผู้เริ่มต้นในปี 2026: วิธีสร้างธีม WordPress แรกของคุณตั้งแต่เริ่มต้น。
การนำเข้าไฟล์สไตล์ชีตและสคริปต์อย่างถูกต้อง
ห้ามลิงก์ไฟล์ CSS หรือ JavaScript โดยตรงในไฟล์เทมเพลต ควรใช้wp_enqueue_style()和wp_enqueue_script()ฟังก์ชัน และเชื่อมโยงกับwp_enqueue_scriptsแอ็กชัน ซึ่งจะช่วยให้การจัดการการพึ่งพาถูกต้องและหลีกเลี่ยงการโหลดซ้ำซ้อน
function mytheme_scripts() {
// 引入主题主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
// 引入自定义JavaScript文件
wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );ใช้get_stylesheet_uri()和get_template_directory_uri()สามารถดึง URL ของไดเรกทอรีธีมแบบไดนามิกเพื่อให้แน่ใจว่าพาธถูกต้อง
การลงทะเบียนและการจัดการพื้นที่วิดเจ็ต
วิดเจ็ต (Widget) เป็นองค์ประกอบสำคัญในการทำให้เนื้อหาใน WordPress เป็นแบบไดนามิก หากต้องการเปิดใช้งานวิดเจ็ต ก่อนอื่นต้องลงทะเบียนพื้นที่วิดเจ็ต (Sidebar) ในfunctions.phpการลงทะเบียนและการจัดการพื้นที่วิดเจ็ต
function mytheme_widgets_init() {
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' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );หลังจากลงทะเบียนแล้ว ในส่วน “รูปลักษณ์” -> “วิดเจ็ต” ในแถบด้านหลัง คุณจะเห็นพื้นที่ “แถบด้านข้าง” จากนั้นในไฟล์เทมเพลต (เช่นsidebar.php) ใช้dynamic_sidebar( 'sidebar-1' )ฟังก์ชันเพื่อเรียกและแสดงเนื้อหาของพื้นที่นั้น
การใช้งานเทมเพลตธีมกับลูป
แกนหลักของการแสดงเนื้อหาใน WordPress คือ “ลูป” (The Loop) นี่คือโค้ด PHP ที่ใช้ตรวจสอบว่ามีบทความหรือไม่ และหากมี จะวนลูปเพื่อแสดงผลแต่ละบทความ
โครงสร้างมาตรฐานสำหรับการวนลูปบทความ
在index.php、single.php或archive.phpในเทมเพลต โครงสร้างพื้นฐานของการวนลูปมีดังนี้
แนะนำให้อ่าน คู่มือขั้นสูงสุดในการพัฒนา WordPress Theme: ตั้งแต่หลักการจนถึงการปฏิบัติจริง。
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<!-- 针对每一篇文章的HTML和模板标签 -->
<article>
<h2><?php the_title(); ?></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<p><?php _e( '抱歉，没有找到任何内容。', 'my-custom-theme' ); ?></p>
<?php endif; ?>ภายในลูป คุณสามารถใช้แท็กเทมเพลตที่เริ่มต้นด้วย “the_” หลายชุด เช่นthe_title()、the_content()、the_permalink()เพื่อแสดงข้อมูลต่าง ๆ ของบทความปัจจุบัน
การสืบค้นและวนลูปบทความแบบกำหนดเอง
บางครั้งจำเป็นต้องแสดงบทความตามเงื่อนไขเฉพาะ (เช่น 5 บทความล่าสุดในหมวดหมู่ใดหมวดหมู่หนึ่ง) ในกรณีนี้ไม่ควรแก้ไขลูปหลัก แต่ควรสร้างใหม่WP_Queryอินสแตนซ์
<?php
$custom_query = new WP_Query( array(
'category_name' => 'news',
'posts_per_page' => 5,
) );
if ( $custom_query->have_posts() ) :
while ( $custom_query->have_posts() ) : $custom_query->the_post();
// 输出文章内容...
endwhile;
wp_reset_postdata(); // 重置全局$post数据
endif;
?>สำคัญมาก: หลังจากใช้การสืบค้นแบบกำหนดเองแล้ว ต้องเรียกใช้wp_reset_postdata()เพื่อกู้คืนข้อมูลบทความระดับโลกของลูปหลัก เพื่อป้องกันโค้ดในภายหลังเกิดข้อผิดพลาด
การนำเข้าและการนำกลับมาใช้ใหม่ของส่วนเทมเพลต
เพื่อปฏิบัติตามหลักการ DRY (อย่าทำซ้ำตัวเอง) ควรแยกส่วนโค้ดที่ใช้ซ้ำ (เช่น บทสรุปบทความ รายการความคิดเห็น) ออกเป็นไฟล์ส่วน (Part) แยกต่างหาก และใช้get_template_part()แนะนำ
// 在循环中引入内容模板
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_type() );
endwhile;โค้ดนี้จะค้นหาตามลำดับtemplate-parts/content-{post-type}.php、template-parts/content.phpไฟล์และโหลด ตัวอย่างเช่น สำหรับบทความมาตรฐาน มันจะโหลดcontent-post.php。
เทคนิคการพัฒนาเทมเพลตขั้นสูง
เมื่อฟังก์ชันพื้นฐานครบถ้วนแล้ว สามารถสำรวจคุณสมบัติขั้นสูงเพื่อเพิ่มความเชี่ยวชาญและความยืดหยุ่นของธีม
การผสานรวม API ตัวปรับแต่ง
WordPress Customizer อนุญาตให้ผู้ใช้ดูตัวอย่างและแก้ไขการตั้งค่าแบบเรียลไทม์ ผ่าน Customizer API คุณสามารถเพิ่มการตั้งค่าเช่นการเลือกสี การอัปโหลดคอนโทรล การเลือกแบบดรอปดาวน์ให้กับธีมได้
function mytheme_customize_register( $wp_customize ) {
// 添加一个“主题选项”板块
$wp_customize->add_section( 'mytheme_options', array(
'title' => __( '主题选项', 'my-custom-theme' ),
) );
// 在板块中添加一个“页脚文本”设置
$wp_customize->add_setting( 'footer_text', array(
'default' => __( '版权所有', 'my-custom-theme' ),
'transport' => 'refresh', // 或 'postMessage' 用于实时JS预览
) );
// 为该设置添加一个文本输入控件
$wp_customize->add_control( 'footer_text', array(
'label' => __( '页脚文本', 'my-custom-theme' ),
'section' => 'mytheme_options',
'type' => 'text',
) );
}
add_action( 'customize_register', 'mytheme_customize_register' );在footer.phpคุณสามารถใช้get_theme_mod( 'footer_text', '默认文本' )เพื่อแสดงค่าที่ผู้ใช้ตั้งไว้
การสร้างและการใช้งานธีมย่อยตามมาตรฐาน
การสร้างธีมย่อยเป็นวิธีปฏิบัติที่ดีที่สุดในการปรับเปลี่ยนธีมพาเรนต์ที่มีอยู่อย่างปลอดภัย ธีมย่อยต้องการเพียงstyle.cssและfunctions.php。
ของ child themestyle.cssส่วนหัวต้องระบุTemplateฟิลด์ประกาศชื่อไดเรกทอรีธีมพาเรนต์:
/*
Theme Name: My Child Theme
Template: my-custom-theme // 父主题目录名
...
*/ของ child themefunctions.phpจะไม่เขียนทับธีมพาเรนต์ แต่จะโหลดพร้อมกัน แฟ้มเทมเพลตในธีมย่อยจะเขียนทับแฟ้มที่มีชื่อเดียวกันในธีมพาเรนต์ทั้งหมด สิ่งนี้ช่วยให้คุณสามารถปรับเปลี่ยนเฉพาะส่วนที่ต้องการและรักษาการปรับแต่งของคุณไว้เมื่อธีมพาเรนต์ได้รับการอัปเดต
การเตรียมความพร้อมสำหรับการทำให้ธีมเป็นสากลและท้องถิ่น
เพื่อให้ธีมสามารถใช้งานได้ทั่วโลก สตริงทั้งหมดที่เผชิญหน้ากับผู้ใช้จะต้องได้รับการประมวลผลเพื่อความเป็นสากล ซึ่งหมายความว่าในโค้ด ข้อความทั้งหมดควรถูกห่อหุ้มด้วยฟังก์ชันการแปล
* __('文本', 'text-domain')__(): ส่งคืนสตริงที่แปลแล้ว
* _e('文本', 'text-domain')_e(): แสดงผลสตริงที่แปลแล้วโดยตรง
* 对于带占位符的字符串，使用printf( __( '搜索 %s 的结果', 'my-custom-theme' ), $search_term )。
หลังจากเสร็จสิ้น ใช้เครื่องมือเช่น Poedit เพื่อดึงสตริงการแปลทั้งหมดเพื่อสร้างไฟล์.potผู้แปลสามารถใช้สิ่งนี้เพื่อสร้างไฟล์แพ็คเกจภาษาต่างๆ เช่นzh_CN.po和.moและวางไว้ในธีม/languages/ไดเรกทอรีอย่างถูกต้องหรือไม่
สรุป
การพัฒนา WordPress Theme เป็นกระบวนการเชิงระบบที่เริ่มจากการทำความเข้าใจโครงสร้างไฟล์พื้นฐาน แล้วค่อย ๆ ลึกลงไปสู่ฟังก์ชันหลัก ระบบเทมเพลต และลูป (Loop) จนในที่สุดสามารถเชี่ยวชาญกระบวนการปรับแต่งขั้นสูงและการทำให้เป็นสากลได้ ประเด็นสำคัญคือการยึดตามมาตรฐานการเขียนโค้ดและแนวปฏิบัติที่ดีของ WordPress เช่น การใช้ Action Hooks อย่างถูกต้อง การใช้ฟังก์ชันและ Template Tags การให้ตัวเลือกการตั้งค่าผ่าน Customizer API และการเตรียมข้อความทั้งหมดให้พร้อมสำหรับการทำให้เป็นสากล เริ่มต้นจากการสร้างstyle.css和index.phpที่ง่ายที่สุด จากนั้นค่อย ๆ เพิ่มไฟล์เทมเพลต เสริมfunctions.phpและใช้ประโยชน์จากกลไก Child Theme เพื่อทำการปรับแต่งอย่างปลอดภัย นักพัฒนาสามารถสร้างธีมระดับมืออาชีพที่ทั้งทรงพลังและยืดหยุ่นได้ การเรียนรู้และนำแนวคิดหลักเหล่านี้ไปใช้อย่างต่อเนื่องคือพื้นฐานในการสร้างเว็บไซต์ WordPress ส่วนบุคคลที่มีคุณภาพสูง บำรุงรักษาได้ง่าย และมีความเข้ากันได้ดี
คำถามที่พบบ่อย (FAQ)
### การพัฒนา WordPress Theme ต้องมีความรู้อะไรบ้างเป็นพื้นฐาน?
การพัฒนา WordPress Theme จำเป็นต้องมีความรู้พื้นฐานเกี่ยวกับ HTML และ CSS สำหรับการสร้างโครงสร้างและสไตล์ของหน้าเว็บ ในเวลาเดียวกัน ต้องมีความเข้าใจพื้นฐานเกี่ยวกับ PHP เนื่องจาก WordPress Core และเทมเพลตธีมต่างเขียนด้วย PHP นอกจากนี้ ความรู้เบื้องต้นเกี่ยวกับ JavaScript ก็มีประโยชน์สำหรับการเพิ่มฟังก์ชันการโต้ตอบ การทำความเข้าใจแนวคิดพื้นฐานของ WordPress เช่น โพสต์ หน้า หมวดหมู่ แท็ก และวิดเจ็ต ก็เป็นจุดเริ่มต้นที่จำเป็นเช่นกัน
ทำไม Theme ที่กำหนดเองของฉันจึงไม่แสดงในหน้าบริหาร?
โดยปกติแล้วนี่เกิดจากstyle.cssบล็อกความคิดเห็นข้อมูลธีมที่ด้านบนของไฟล์มีรูปแบบไม่ถูกต้องหรือข้อมูลขาดหายไป โปรดตรวจสอบให้แน่ใจว่าบล็อกความคิดเห็นเป็นไปตามรูปแบบที่ WordPress กำหนดอย่างสมบูรณ์ และTheme Name:ฟิลด์ได้ถูกกรอกอย่างถูกต้อง นอกจากนี้ ตรวจสอบว่าโฟลเดอร์ธีมถูกวางไว้ใน/wp-content/themes/ไดเรกทอรีหรือไม่ และชื่อโฟลเดอร์ไม่ได้ใช้ตัวอักษรพิเศษหรือภาษาจีน
จะทำให้ธีมของฉันรองรับภาษาจีนหรือภาษาอื่นได้อย่างไร
ก่อนอื่น ในระหว่างการพัฒนา ตรวจสอบให้แน่ใจว่าสตริงทั้งหมดที่เผยแพร่ต่อผู้ใช้ถูกห่อหุ้มด้วยฟังก์ชันการแปล (เช่น__()或_e()) และระบุโดเมนข้อความ (Text Domain) ที่ถูกต้อง ซึ่งโดเมนข้อความต้องสอดคล้องกับ Text Domain ที่ประกาศในstyle.cssจากนั้น ใช้เครื่องมือ (เช่น Poedit) สแกนไฟล์ธีมเพื่อสร้าง.potไฟล์เทมเพลตการแปล นักแปลสามารถสร้างไฟล์แปลสำหรับภาษาที่สอดคล้องกัน (เช่นzh_CN.poไฟล์แปลสำหรับ ) และคอมไพล์เป็น.moไฟล์ สุดท้าย วางไฟล์ภาษาทั้งหมดไว้ในธีม/languages/ไดเรกทอรี เมื่อผู้ใช้เปลี่ยนภาษาของไซต์ มันจะโหลดโดยอัตโนมัติ
หลังจากอัปเดตธีมหลัก การแก้ไขธีมลูกของฉันจะหายไปหรือไม่?
ไม่ใช่ การออกแบบชุดรูปแบบย่อยมีจุดประสงค์เพื่อให้สามารถปรับแต่งได้อย่างปลอดภัย เมื่อชุดรูปแบบหลักได้รับการอัปเดต มันจะเขียนทับเฉพาะไฟล์ของตัวเองเท่านั้น ไฟล์ชุดรูปแบบย่อยของคุณ (รวมถึงstyle.css、functions.phpและไฟล์เทมเพลตใดๆ ที่คุณคัดลอกไปยังชุดรูปแบบย่อยและทำการแก้ไข) จะถูกเก็บรักษาไว้อย่างครบถ้วน นี่คือเหตุผลที่แนะนำอย่างยิ่งให้แก้ไขชุดรูปแบบที่มีอยู่โดยการสร้างชุดรูปแบบย่อย แทนที่จะแก้ไขไฟล์ชุดรูปแบบหลักโดยตรง
ควรเลือกใช้ตัวสร้างหน้าเว็บหรือพัฒนาชุดรูปแบบเองดี?
ขึ้นอยู่กับเป้าหมาย ทักษะ และเวลาของคุณ การใช้ตัวสร้างหน้าเว็บ (เช่น Elementor, WPBakery) สามารถสร้างเว็บไซต์ได้อย่างรวดเร็วโดยไม่ต้องเขียนโค้ด เหมาะสำหรับผู้เริ่มต้น นักพัฒนาอิสระ หรือโครงการที่ต้องการส่งมอบอย่างรวดเร็ว อย่างไรก็ตาม มันอาจสร้างโค้ดส่วนเกินที่ส่งผลต่อประสิทธิภาพของเว็บไซต์ และมีความเสี่ยงจากการถูกผูกมัดกับผู้ให้บริการ การพัฒนาชุดรูปแบบเองจะทำให้คุณควบคุมได้อย่างเต็มที่ สร้างโค้ดที่สะอาดและมีประสิทธิภาพ ตอบสนองความต้องการเฉพาะได้ดีกว่า และช่วยพัฒนาทักษะการเขียนโค้ด แต่ต้องใช้เวลาเรียนรู้และมีวงจรการพัฒนาที่ยาวนาน สำหรับนักพัฒนาที่ต้องการประสิทธิภาพสูงสุด การออกแบบที่เป็นเอกลักษณ์ หรือต้องการเข้าใจ WordPress อย่างลึกซึ้ง การพัฒนาชุดรูปแบบเองเป็นทางเลือกที่ดีกว่า
ขั้นต่อไป ฉันควรทำอย่างไรต่อไป
อ่านเพิ่มเติมและรับความรู้ที่มีประโยชน์
下面这些内容与本文主题相关，适合继续深入阅读。优先从与你当前问题最接近的文章开始看，再逐步扩展到周边主题，效果通常会更好。
- คู่มือขั้นสูงสุดในการสร้างเว็บไซต์: ขั้นตอนและเทคโนโลยีหลักตั้งแต่การวางแผนจนถึงการเปิดตัว
- คำแนะนำโดยละเอียดเกี่ยวกับกระบวนการสร้างเว็บไซต์: คู่มือมืออาชีพตั้งแต่การวิเคราะห์ความต้องการไปจนถึงการปรับใช้
- คู่มือขั้นสูงสุดในการสร้างเว็บไซต์: การวิเคราะห์กระบวนการทั้งหมดตั้งแต่การเลือกเทคโนโลยีไปจนถึงการปรับใช้บนเซิร์ฟเวอร์
- เริ่มต้นการพัฒนา WordPress Theme ตั้งแต่ศูนย์: สร้างอินเทอร์เฟซเว็บไซต์ที่ไม่เหมือนใคร
- คู่มือขั้นสูงสุดในการสร้างเว็บไซต์ด้วย WordPress: สร้างจากศูนย์จนเชี่ยวชาญ เพื่อสร้างเว็บไซต์มืออาชีพ
ไทย