คู่มือฉบับสมบูรณ์ในการพัฒนา WordPress Themes: หลักสูตรปฏิบัติจากระดับเริ่มต้นจนเชี่ยวชาญ

การตั้งค่าสภาพแวดล้อมการพัฒนาและโครงสร้างพื้นฐาน

ก่อนที่จะเริ่มเขียนโค้ดแม้แต่บรรทัดเดียว การมีสภาพแวดล้อมการพัฒนาท้องถิ่นที่เชื่อถือได้เป็นสิ่งสำคัญอย่างยิ่ง โดยทั่วไปหมายถึงการติดตั้งแพ็คเกจเซิร์ฟเวอร์แบบรวม เช่น XAMPP, MAMP หรือ Laragon ซึ่งรวม Apache, MySQL/MariaDB และ PHP ไว้ด้วยกัน สำหรับนักพัฒนาที่ต้องการความยืดหยุ่นมากขึ้นหรือสภาพแวดล้อมที่ใกล้เคียงกับสภาพแวดล้อมการผลิต สามารถใช้ Docker หรือ Vagrant ในการกำหนดค่าสภาพแวดล้อม ตรวจสอบให้แน่ใจว่าเวอร์ชัน PHP ของคุณตรงกับเวอร์ชันที่ WordPress แนะนำอย่างเป็นทางการ

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

ไฟล์ประกาศข้อมูลสำคัญ

style.css ความคิดเห็นที่ด้านบนของไฟล์คือ “บัตรประจำตัว” ของธีม นี่คือตัวอย่างโค้ดพื้นฐานที่แสดงวิธีการประกาศข้อมูลธีม:

แนะนำให้อ่าน แนวคิดหลักในการพัฒนา WordPress Theme。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 一个用于学习WordPress主题开发的入门级主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

หลังจากประกาศข้อมูลธีมแล้ว, index.php ไฟล์เทมเพลตพื้นฐานสามารถเรียบง่ายมาก โดยมีหน้าที่ควบคุมการแสดงรายการบทความบล็อก เมื่อการพัฒนาลึกซึ้งขึ้น คุณจะสร้างไฟล์เทมเพลตเพิ่มเติม เช่น header.php, footer.php, single.php รอ เพื่อปฏิบัติตามหลักการเขียนโปรแกรม “อย่าทำซ้ำตัวเอง”

UltaHost WordPress โฮสติ้ง

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

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

ไฟล์เทมเพลตหลักและลำดับชั้นเทมเพลต

WordPress ใช้ระบบอัจฉริยะที่เรียกว่า “ลำดับชั้นของเทมเพลต” เพื่อตัดสินใจว่าจะแสดงหน้าเว็บต่าง ๆ บนเว็บไซต์อย่างไร การเข้าใจลำดับชั้นนี้เป็นหัวใจสำคัญในการสร้างธีมที่สมบูรณ์แบบ เมื่อผู้ใช้เข้าชมหน้าเว็บ WordPress จะค้นหาไฟล์เทมเพลตที่เกี่ยวข้องตามชุดกฎลำดับความสำคัญที่กำหนดไว้

การวิเคราะห์ขั้นตอนการจับคู่ตามลำดับความสำคัญ

ตัวอย่างเช่น เมื่อเข้าชมบทความบล็อกเฉพาะเจาะจง WordPress จะค้นหาตามลำดับดังนี้:single-post-{post-id}.php > single-post-{post-type}.php > single.php > singular.phpและสุดท้ายคือ index.phpนี่หมายความว่าคุณสามารถสร้างเทมเพลตเฉพาะสำหรับบทความประเภทต่างๆ เพื่อควบคุมการจัดวางอย่างละเอียด การสร้างเทมเพลตเฉพาะสำหรับหน้า หมวดหมู่ แท็ก หรือแม้แต่หน้าผลลัพธ์การค้นหาและหน้า 404 ล้วนอาศัยหลักการนี้

เพื่อจัดระเบียบโค้ดให้ดีขึ้น การปฏิบัติแสดงให้เห็นว่าการแยกโค้ดส่วนหัวและส่วนท้ายที่ใช้ร่วมกันออกเป็นไฟล์แยกต่างหากเป็นสิ่งชาญฉลาด นี่คือ get_header(), get_footer(), get_sidebar() วัตถุประสงค์ของแท็กเทมเพลตเหล่านี้ ไฟล์ index.php ของคุณอาจพัฒนามาเป็นแบบนี้:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 显示每篇文章的内容
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

โดยการใช้ get_template_part()คุณสามารถเพิ่มการแยกส่วนของตรรกะการแสดงผลในลูปออกเป็นโมดูล โดยจัดเก็บไว้ใน template-parts ไดเรกทอรี ซึ่งจะช่วยเพิ่มความสามารถในการนำโค้ดกลับมาใช้ใหม่และการบำรุงรักษาได้อย่างมาก

แนะนำให้อ่าน WordPress Theme Development in Practice: Building a Professional Website Theme from Scratch。

การปฏิบัติเกี่ยวกับฟังก์ชันและกลไกฮุค

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

ฟังก์ชันหลักสำหรับการเริ่มต้นธีม

เพิ่มฟังก์ชันพื้นฐานให้กับธีมของคุณ โดยปกติเริ่มจาก after_setup_theme ฮุกแอ็กชันนี้ ในฟังก์ชันที่ผูกกับฮุกนี้ คุณสามารถเปิดใช้งานฟังก์ชันต่าง ๆ ที่สำคัญสำหรับธีมสมัยใหม่ ตัวอย่างเช่น

function my_first_theme_setup() {
    // 让WordPress管理文档<title>标签
    add_theme_support( 'title-tag' );
    // 启用文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 添加HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 启用自定义Logo功能
    add_theme_support( 'custom-logo' );
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'menu-1' => esc_html__( '主导航', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

การโหลดและการจัดการสไตล์และสคริปต์

ขอเกี่ยวที่สำคัญอีกอย่างหนึ่งคือ wp_enqueue_scriptsซึ่งใช้สำหรับเพิ่มสไตล์ชีตและไฟล์ JavaScript ให้กับธีมอย่างปลอดภัยและถูกต้อง คุณควรใช้ฟังก์ชัน wp_enqueue_style() 和 wp_enqueue_script() เสมอ แทนที่จะนำเข้าโดยตรงในไฟล์เทมเพลตผ่านแท็ก <link> 或 <script> ซึ่งจะทำให้การจัดการการพึ่งพาดีและหลีกเลี่ยงการโหลดซ้ำซ้อน

hosting.com 共享主机

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

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

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 加载一个自定义JavaScript文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

การวนซ้ำและการใช้งานฟังก์ชันที่กำหนดเอง

“การวนซ้ำ” เป็นกลไกหลักใน WordPress ที่ใช้สำหรับดึงเนื้อหาบทความจากฐานข้อมูลและแสดงบนหน้าเว็บ มันคือโค้ด PHP ส่วนหนึ่งที่ใช้ฟังก์ชันเช่น have_posts() 和 the_post() เพื่อวนลูปผ่านชุดบทความที่ถูกค้นหาในปัจจุบัน

การวิเคราะห์โครงสร้างการวนซ้ำมาตรฐาน

ในไฟล์เทมเพลต โครงสร้างทั่วไปของลูปมีดังนี้ ภายในลูป คุณสามารถใช้แท็กเทมเพลตต่างๆ เพื่อแสดงข้อมูลบทความ เช่น the_title(), the_content(), the_permalink() เป็นต้น

นอกเหนือจากลูปบล็อกมาตรฐาน การสร้างคิวรีแบบกำหนดเองเพื่อแสดงเนื้อหาที่เฉพาะเจาะจงก็เป็นความต้องการทั่วไป ซึ่งสามารถทำได้โดยการสร้างอินสแตนซ์ใหม่ของ WP_Query ตัวอย่างเช่น เพื่อแสดงบทความล่าสุดสามบทความภายใต้หมวดหมู่เฉพาะ:

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

$custom_query = new WP_Query( array(
    'category_name'  => 'featured',
    'posts_per_page' => 3,
) );

if ( $custom_query->have_posts() ) :
    while ( $custom_query->have_posts() ) : $custom_query->the_post();
        // 输出每篇文章
    endwhile;
    wp_reset_postdata(); // 重置全局$post数据
endif;

การใช้งานฟังก์ชันขั้นสูงของธีม

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

สรุป

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

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

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

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

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

การพัฒนา WordPress Theme จำเป็นต้องเชี่ยวชาญ PHP หรือไม่?

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

ทำไมการแก้ไขธีมของฉันถึงไม่แสดงผลในแอดมิน?

โดยทั่วไปแล้วปัญหานี้เกิดจากแคชของเบราว์เซอร์หรือเซิร์ฟเวอร์ ก่อนอื่น ลองกด Ctrl+F5 ในเบราว์เซอร์เพื่อรีเฟรชแบบบังคับ หากปัญหายังคงอยู่ โปรดตรวจสอบว่าคุณใช้ปลั๊กอินแคชหรือแคชฝั่งเซิร์ฟเวอร์หรือไม่ ซึ่งจำเป็นต้องล้างแคชเหล่านั้น นอกจากนี้ โปรดตรวจสอบให้แน่ใจว่าคุณได้แก้ไขไฟล์เทมเพลตที่กำลังใช้งานอยู่ และไฟล์ได้ถูกบันทึกเรียบร้อยแล้ว

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

คุณจำเป็นต้องทำสองสิ่ง อย่างแรก ในตำแหน่งข้อความทั้งหมดในเทมเพลตที่ต้องการแปล ให้ใช้ฟังก์ชันการแปลของ WordPress ในการครอบ เช่น esc_html__(‘文本’, ‘text-domain’) 或 _e(‘文本’, ‘text-domain’)และให้แน่ใจว่า style.css ที่ประกาศใน Text Domain ต้องสอดคล้องกับ text-domain ในฟังก์ชัน อย่างที่สอง ใช้เครื่องมือเช่น Poedit เพื่อดึงและสร้างตามฟังก์ชันการแปลในโค้ด .pot ไฟล์เทมเพลตสำหรับผู้แปลใช้สร้างภาษาที่สอดคล้องกัน .po 和 .mo ไฟล์สำหรับภาษาต่างๆ ได้

ควรวางประเภทบทความที่กำหนดเองในธีมหรือปลั๊กอิน?

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