WordPress Theme Development from Beginner to Pro: A Complete Guide to Building Custom Themes

พื้นฐานการพัฒนา WordPress Theme และการเตรียมสภาพแวดล้อม

ก่อนเริ่มสร้าง WordPress Theme ที่กำหนดเอง คุณต้องตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่นที่มั่นคงก่อน สิ่งนี้ไม่เพียงช่วยให้คุณพัฒนาและทดสอบได้โดยไม่ส่งผลกระทบต่อเว็บไซต์ออนไลน์ แต่ยังช่วยเพิ่มประสิทธิภาพการทำงานได้อย่างมาก ชุดเซิร์ฟเวอร์ท้องถิ่นที่ใช้กันทั่วไป ได้แก่ Local by Flywheel, XAMPP, MAMP หรือ Laragon เลือกเครื่องมือที่คุณคุ้นเคยและถนัดมือได้เลย

นอกจากสภาพแวดล้อมเซิร์ฟเวอร์แล้ว ตัวแก้ไขโค้ดที่มีประสิทธิภาพสูงก็เป็นสิ่งจำเป็น เราแนะนำให้ใช้ Visual Studio Code ซึ่งมีระบบปลั๊กอินที่หลากหลาย เช่น ปลั๊กอินที่เกี่ยวข้องกับ WordPress สำหรับการเน้นสีโค้ด ปลั๊กอิน Live Server สำหรับการแสดงตัวอย่างแบบเรียลไทม์ และฟังก์ชันการแนะนำโค้ดที่ทรงพลัง เครื่องมือเหล่านี้จะอยู่กับคุณตลอดวงจรการพัฒนา

ต่อไป คุณต้องเข้าใจโครงสร้างพื้นฐานของ WordPress Theme ให้ชัดเจน Theme พื้นฐานที่สุดอย่างน้อยต้องมีไฟล์สองไฟล์:index.php 和 style.cssโดยที่style.css ไฟล์ไม่เพียงแต่เป็นสไตล์ชีต แต่ยังเป็น “บัตรประจำตัว” ของธีมด้วย บล็อกความคิดเห็นที่ด้านบนประกอบด้วยข้อมูลเมตาของธีม ซึ่งจะถูกอ่านและแสดงโดยแอดมิน WordPress

แนะนำให้อ่าน สร้างเว็บไซต์ที่สมบูรณ์แบบ: คู่มือฉบับสมบูรณ์ในการสร้างธีม WordPress ที่กำหนดเองตั้งแต่เริ่มต้น。

ต่อไปนี้คือ style.css ตัวอย่างมาตรฐานของส่วนหัวความคิดเห็นของไฟล์:

UltaHost WordPress โฮสติ้ง

การรับประกันคืนเงินภายใน 30 วัน, แบนด์วิธและฐานข้อมูลไม่จำกัด, การป้องกัน DDoS ฟรี, ซื้อ 3 ปีลดราคา 50%

เข้าถึงหน้าเว็บ

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习而创建的WordPress自定义主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Text Domain สำหรับการทำให้เป็นสากล เป็นตัวระบุที่ใช้ในการแปลหลายภาษาต่อไปนี้ wp-content/themes/ ในโฟลเดอร์ ธีมของคุณจะปรากฏในรายการธีมภายใต้ “รูปลักษณ์” -> “ธีม” ในแผงควบคุม จากนั้นคุณก็สามารถเปิดใช้งานได้

สร้างไฟล์เทมเพลตหลักของธีม

ธีมที่ทำงานได้อย่างสมบูรณ์ประกอบด้วยชุดไฟล์เทมเพลตที่ปฏิบัติตามระบบลำดับชั้นเทมเพลตของ WordPress ระบบจะเลือกไฟล์เทมเพลตที่เหมาะสมที่สุดโดยอัตโนมัติเพื่อแสดงเนื้อหาตามประเภทหน้าที่ผู้ใช้เข้าชม (เช่น หน้าหลัก, หน้ารายการบทความ, หน้าประเภท)

ทำความเข้าใจลำดับชั้นของเทมเพลตและการสร้างเทมเพลตพื้นฐาน

ลำดับชั้นของเทมเพลตเป็นแนวคิดหลักในการพัฒนาเทม WordPress ตัวอย่างเช่น เมื่อเข้าถึงบทความในบล็อก WordPress จะค้นหาตามลำดับดังนี้:single-post.php -> single.php -> singular.php -> index.phpนักพัฒนาต้องสร้างไฟล์เทมเพลตที่จำเป็นเท่านั้น

ก่อนอื่น เรามาสร้างไฟล์เทมเพลตพื้นฐานที่สุดสองสามไฟล์กัน นอกเหนือจากที่จำเป็นต้องมี index.php 和 style.cssคุณอย่างน้อยต้องสร้าง header.php(ส่วนหัวของเว็บไซต์)footer.php(ส่วนท้ายของเว็บไซต์) และ functions.php(ไฟล์ฟังก์ชันธีม) ผ่านฟังก์ชันในตัวของ WordPress เราสามารถนำเข้าส่วนเหล่านี้ในเทมเพลตหลักได้

แนะนำให้อ่าน WordPress Theme Development จากเริ่มต้นสู่ขั้นสูง: คู่มือแบบครบวงจรสำหรับการสร้างเว็บไซต์ที่กำหนดเอง。

在 index.php โครงสร้างโค้ดทั่วไปมีดังนี้:

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 显示每篇文章的内容
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>暂无内容。</p>';
    endif;
    ?&gt;
</main>

ดำเนินการวนลูปบทความและแสดงผลเนื้อหา

ในโค้ดด้านบนhave_posts() 和 the_post() ฟังก์ชันสร้าง “ลูปหลัก” ซึ่งเป็นกลไกหลักที่ WordPress ใช้ในการแสดงรายการบทความของหน้าปัจจุบัน ภายในลูป คุณสามารถใช้ชุดแท็กเทมเพลตเพื่อแสดงข้อมูลบทความ เช่น the_title() แสดงหัวข้อthe_content() แสดงเนื้อหาทั้งหมดthe_excerpt() แสดงบทสรุปthe_permalink() รับลิงก์บทความ

เพื่อเพิ่มความสามารถในการบำรุงรักษาและการนำกลับมาใช้ใหม่ของโค้ด WordPress แนะนำให้แยกโค้ดที่ใช้แสดงบทความเดี่ยวในลูปออกเป็นส่วนเทมเพลตแยกต่างหาก คุณสามารถสร้างไฟล์ชื่อ content.php 或 template-parts/content.php จากนั้นใช้ในลูปหลักด้วย get_template_part( ‘template-parts/content’, get_post_format() ) เรียกใช้มัน วิธีนี้ทำให้การสร้างสไตล์การแสดงผลที่แตกต่างกันสำหรับประเภทบทความต่าง ๆ (เช่น แกลเลอรี่, คำพูด) เป็นเรื่องง่ายมาก

hosting.com 共享主机

高性能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候24小时、全天候的专家内部支持，高级安全措施，包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 73%

เข้าถึงหน้าเว็บ

เพิ่มฟังก์ชันการทำงานของธีมผ่าน Functions.php

functions.php ไฟล์นี้คือ “ศูนย์ควบคุม” ของธีมของคุณ มันไม่ใช่ไฟล์เทมเพลต แต่เป็นไฟล์ PHP ที่โหลดโดยอัตโนมัติเมื่อธีมเริ่มต้นทำงาน การปรับปรุงฟังก์ชันของธีมทั้งหมด การแก้ไขฟังก์ชันหลักของ WordPress รวมถึงการลงทะเบียนและจัดคิวสไตล์และสคริปต์ จะดำเนินการที่นี่

ลงทะเบียนเมนูนำทางและแถบด้านข้าง

ธีมสมัยใหม่มักต้องการรองรับเมนูนำทางที่ผู้ใช้กำหนดเอง คุณจำเป็นต้องมี functions.php ใช้ฟังก์ชัน register_nav_menus() ฟังก์ชันเพื่อประกาศตำแหน่งเมนูที่ธีมรองรับ

function my_custom_theme_setup() {
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-custom-theme' ),
        'footer'  => esc_html__( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

หลังจากนั้น คุณสามารถใช้ header.php 或 footer.php ในตำแหน่งที่เกี่ยวข้องของ wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ) เพื่อเรียกใช้เมนูนี้

แนะนำให้อ่าน สำรวจการพัฒนา WordPress Theme: คู่มือฉบับสมบูรณ์ตั้งแต่เริ่มต้นจนถึงระดับเชี่ยวชาญ。

ในทำนองเดียวกัน หากคุณต้องการให้วิดเจ็ต (Widgets) มีพื้นที่แถบด้านข้างหรือส่วนท้ายของหน้า คุณจำเป็นต้องใช้ register_sidebar() ฟังก์ชันสำหรับการลงทะเบียน ซึ่งช่วยให้ผู้ใช้สามารถเพิ่มเนื้อหาลงในพื้นที่เหล่านี้ผ่านทางอินเทอร์เฟซ “วิดเจ็ต” ในแอดมิน WordPress โดยการลากและวาง

เพิ่มการสนับสนุนธีมและการจัดการสคริปต์สไตล์

ฟังก์ชันหลักหลายอย่างของ WordPress จำเป็นต้องให้ธีมประกาศสนับสนุนอย่างชัดเจนก่อนจึงจะเปิดใช้งานได้ ซึ่งทำได้ผ่าน add_theme_support() ฟังก์ชัน ตัวอย่างเช่น การสนับสนุนภาพเด่นของบทความ, โลโก้ที่กำหนดเอง, บทสรุปของบทความ เป็นต้น

โฮสติ้งแบบแชร์ของ InterServer

共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本，一键安装。

เข้าถึงหน้าเว็บ

add_theme_support( 'post-thumbnails' ); // 支持特色图像
add_theme_support( 'custom-logo' ); // 支持自定义Logo
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 支持HTML5标记

การจัดการและโหลดไฟล์ CSS และ JavaScript ต้องปฏิบัติตามกลไก “การเข้าคิว” ของ WordPress ซึ่งใช้ wp_enqueue_style() 和 wp_enqueue_script() ฟังก์ชัน ซึ่งช่วยให้มั่นใจว่าการพึ่งพาจะได้รับการจัดการอย่างถูกต้องและหลีกเลี่ยงความขัดแย้งของสคริปต์ วิธีที่ถูกต้องคือการเพิ่มการดำเนินการเหล่านี้ลงในคิวไปยัง wp_enqueue_scripts ฮุกนี้

function my_custom_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-script', get_template_directory_uri() . '/js/main.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

การจัดรูปแบบธีมและการปรับแต่งขั้นสูง

เมื่อฟังก์ชันหลักถูกสร้างขึ้นแล้ว การนำเสนอภาพของธีมก็กลายเป็นจุดสนใจ การพัฒนา WordPress ธีมสมัยใหม่แนะนำอย่างยิ่งให้ใช้การออกแบบที่ตอบสนอง เพื่อให้แน่ใจว่าเว็บไซต์จะแสดงผลได้อย่างสมบูรณ์แบบบนอุปกรณ์ทุกชนิดตั้งแต่โทรศัพท์มือถือไปจนถึงเดสก์ท็อป

การออกแบบ Responsive และโครงสร้าง CSS

คุณสามารถเริ่มเขียน CSS ตั้งแต่เริ่มต้น หรือใช้เฟรมเวิร์ก CSS เช่น Bootstrap, Tailwind CSS เพื่อเร่งการพัฒนา ประเด็นสำคัญคือการใช้ Media Queries เพื่อใช้กฎสไตล์ที่แตกต่างกันสำหรับขนาดหน้าจอที่ต่างกัน ในขณะเดียวกัน โครงสร้าง CSS ที่เหมาะสม (เช่น การตั้งชื่อแบบ BEM) จะทำให้โค้ดสไตล์ของคุณชัดเจนและบำรุงรักษาได้ง่ายขึ้น

เมื่อแปลงแบบออกแบบเป็นโค้ด ควรใช้ประโยชน์จากคลาส body และบทความที่สร้างโดย WordPress อย่างเต็มที่ WordPress จะเพิ่มคลาส CSS จำนวนมากให้กับแท็กและคอนเทนเนอร์ของแต่ละบทความเป็นอัตโนมัติ โดยอิงตามประเภทหน้า, ID บทความ เป็นต้น ตัวอย่างเช่น .home、.single-post、.post-id-123คลาสเหล่านี้ให้ตัวเลือกสไตล์ที่แม่นยำอย่างยิ่งแก่คุณ

การรวมตัวปรับแต่งเองกับตัวเลือกธีม

เพื่อให้ผู้ใช้สามารถปรับเปลี่ยนรูปลักษณ์ของธีมได้โดยไม่ต้องแก้ไขโค้ด (เช่น การเปลี่ยนสี, อัปโหลดโลโก้) WordPress ได้จัดเตรียม API “ตัวปรับแต่ง” (Customizer) ไว้ โดยผ่านทาง API นี้ คุณสามารถเพิ่มตัวเลือกการตั้งค่า (settings) และแผงควบคุม (controls) ลงในอินเทอร์เฟซการปรับแต่งที่แสดงตัวอย่างแบบเรียลไทม์ได้

ตัวอย่างง่ายๆ ของการเพิ่มสีหัวข้อเว็บไซต์มีดังต่อไปนี้ รหัสนี้ควรเพิ่มลงใน functions.php th：

function my_custom_theme_customize_register( $wp_customize ) {
    // 添加一个设置项（Setting），用于保存值到数据库
    $wp_customize->add_setting( 'header_title_color', array(
        'default'           => '#333333',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

// 添加一个颜色选择器控件（Control）
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_title_color', array(
        'label'    => __( '标题颜色', 'my-custom-theme' ),
        'section'  => 'colors', // 放入现有的“颜色”板块
        'settings' => 'header_title_color',
    ) ) );
}
add_action( 'customize_register', 'my_custom_theme_customize_register' );

จากนั้น คุณต้องใช้ ในส่วนของธีม (หรือไฟล์ CSS แยกต่างหาก) get_theme_mod(‘header_title_color’) ฟังก์ชันเพื่อรับค่าที่ผู้ใช้ตั้งค่า และส่งออกเป็น CSS แบบอินไลน์

สรุป

การพัฒนา WordPress Theme เป็นกระบวนการที่ค่อยเป็นค่อยไปตั้งแต่การเข้าใจโครงสร้างพื้นฐานไปจนถึงการเชี่ยวชาญ API ขั้นสูง สาระสำคัญอยู่ที่การใช้ระบบลำดับชั้นของเทมเพลตอย่างยืดหยุ่นเพื่อจัดระเบียบไฟล์ผ่าน functions.php ไฟล์และชุดของ hooks เพื่อขยายฟังก์ชันการทำงาน และปฏิบัติตามมาตรฐานของ WordPress (เช่น การเข้าคิวสคริปต์, Customizer API) เพื่อสร้างผลิตภัณฑ์ที่เป็นมิตรกับผู้ใช้ เริ่มจากการสร้าง index.php 和 style.css ที่ง่ายที่สุด จากนั้นค่อยๆ เพิ่มเทมเพลต การสนับสนุนเมนู วิดเจ็ต และตัวเลือกที่กำหนดเอง คุณจะสามารถสร้างธีมระดับมืออาชีพที่มีประสิทธิภาพสูง ออกแบบสวยงาม และบำรุงรักษาได้ง่าย การปฏิบัติเป็นวิธีเรียนรู้ที่ดีที่สุด การลองผิดลองถูกและศึกษาคู่มือนักพัฒนาอย่างต่อเนื่องเป็นกุญแจสำคัญในการพัฒนาทักษะ

คำถามที่พบบ่อย (FAQ)

การพัฒนา WordPress ธีมจำเป็นต้องเรียน PHP ไหม

ใช่ PHP เป็นทักษะที่จำเป็นสำหรับการพัฒนา WordPress ธีม เนื่องจาก WordPress เองเขียนด้วย PHP ไฟล์เทมเพลตทั้งหมด (เช่น index.php, single.php) และไฟล์ฟังก์ชัน (functions.php) เป็นไฟล์ PHP คุณต้องเข้าใจไวยากรณ์พื้นฐานของ PHP การใช้ฟังก์ชัน และความสามารถในการเขียนร่วมกับ HTML เพื่อแสดงเนื้อหาบทความแบบไดนามิก จัดการลอจิก และเรียกใช้ฟังก์ชันหลักของ WordPress

วิธีทำให้ธีมของฉันรองรับการแปลหลายภาษา

เพื่อให้ธีมของคุณรองรับความเป็นสากล คุณต้องทำตามขั้นตอนดังนี้: ก่อนอื่น ใน style.css ส่วนหัวและ functions.php เมื่อโหลดโดเมนข้อความ ใช้โดเมนข้อความ (Text Domain) ที่สอดคล้องกัน เช่น “my-custom-theme” ประการที่สอง ในทุกตำแหน่งของธีมที่ต้องการแปลข้อความ ให้ใช้ฟังก์ชันการแปลของ WordPress เพื่อห่อหุ้ม เช่น ( ‘Hello World’, ‘my-custom-theme’ ) 或 esc_html( ‘Menu’, ‘my-custom-theme’ )สุดท้าย ใช้เครื่องมือเช่น Poedit เพื่อสแกนไฟล์ธีมของคุณและสร้างไฟล์แปล .pot ไฟล์เทมเพลต ซึ่งนักแปลสามารถใช้สร้าง .po 和 .mo ผ่าน load_theme_textdomain() ฟังก์ชันโหลดไฟล์แปลเหล่านี้ ธีมของคุณจะสามารถแสดงภาษาที่สอดคล้องกับการตั้งค่าภาษาของเว็บไซต์ได้

ในการพัฒนาธีม ความสัมพันธ์ระหว่างธีมลูกและธีมหลักคืออะไร

ธีมลูกคือธีมอิสระที่สร้างขึ้นบนพื้นฐานของธีมแม่ ช่วยให้คุณสามารถปรับเปลี่ยนและขยายฟังก์ชันและสไตล์ของธีมแม่ได้ โดยไม่ต้องแก้ไขไฟล์ของธีมแม่โดยตรง ข้อดีของการทำเช่นนี้คือ เมื่อธีมแม่มีการอัปเดต การปรับแต่งของคุณ (ซึ่งอยู่ในธีมลูก) จะไม่สูญหาย โครงสร้างไดเรกทอรีของธีมลูกเป็นอิสระ โดยต้องการเพียงไฟล์ style.css และในส่วนหัวของคอมเมนต์ ต้องประกาศชื่อไดเรกทอรีของธีมแม่ผ่านบรรทัด Template: ไฟล์เทมเพลตของธีมลูกจะแทนที่ไฟล์เทมเพลตชื่อเดียวกันในธีมแม่ หากธีมลูกไม่มีเทมเพลตบางตัว ระบบจะใช้เทมเพลตของธีมแม่โดยอัตโนมัติ นี่เป็นกลยุทธ์การปรับแต่งและอัปเกรดที่ปลอดภัยและยั่งยืน

WordPress hooks คืออะไร และจะใช้งานอย่างไรในการพัฒนาธีม

ฮุคเป็นแนวคิดที่สำคัญอย่างยิ่งในโครงสร้างปลั๊กอินและการพัฒนาเทมเพลตของ WordPress แบ่งออกเป็นฮุคแอ็กชันและฮุคตัวกรอง ฮุคแอ็กชันอนุญาตให้คุณแทรกและรันโค้ดของคุณเองที่จุดดำเนินการเฉพาะ (เช่น ก่อนหน้าโหลดหน้าเว็บ หลังจากเผยแพร่บทความ) โดยใช้ add_action() ฟังก์ชันเพื่อติดตั้ง ฮุคตัวกรองอนุญาตให้คุณปรับเปลี่ยนข้อมูล โดยการดักจับและแก้ไขข้อมูลก่อนที่จะถูกใช้หรือบันทึก โดยใช้ add_filter() ฟังก์ชันเพื่อติดตั้ง ในการพัฒนาเทมเพลต คุณสามารถเพิ่มฟังก์ชันการทำงานเกือบทั้งหมด (เช่น โหลดสคริปต์บนฮุค wp_enqueue_scripts บนฮุค after_setup_theme การเพิ่มการสนับสนุนธีมบนฮุค) ทั้งหมดทำผ่านฮุค การเข้าใจและใช้ฮุคเป็นกุญแจสำคัญในการพัฒนา WordPress ที่มีประสิทธิภาพและเป็นมาตรฐาน