คู่มือเริ่มต้นการพัฒนา WordPress Theme: สร้างธีมแบบกำหนดเองตั้งแต่เริ่มต้น

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

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

การเตรียมสภาพแวดล้อมการพัฒนาเป็นขั้นตอนแรก แนะนำให้ตั้งค่าสภาพแวดล้อมทดสอบในเครื่องท้องถิ่น โดยสามารถใช้เครื่องมือเช่น Local by Flywheel, XAMPP หรือ MAMP ได้ วิธีนี้จะช่วยให้สามารถพัฒนาและดีบักได้โดยไม่ส่งผลกระทบต่อเว็บไซต์ออนไลน์ ในเวลาเดียวกัน ให้เตรียมตัวแก้ไขโค้ด เช่น VS Code หรือ PhpStorm เครื่องมือเหล่านี้รองรับการเน้นไวยากรณ์และคำแนะนำโค้ดสำหรับ PHP, HTML, CSS และ JavaScript เป็นอย่างดี

โครงสร้างพื้นฐานของธีม นอกจากไฟล์ที่จำเป็นสองไฟล์ข้างต้นแล้ว เมื่อเพิ่มฟังก์ชันการทำงาน ก็จะมีการนำเข้าไฟล์เทมเพลตเพิ่มเติม ตัวอย่างเช่น สำหรับการจัดการหน้าบทความเดี่ยวsingle.phpสำหรับการจัดเก็บหน้าเว็บarchive.phpและสำหรับหน้าpage.phpการปฏิบัติตามโครงสร้างไฟล์ที่เป็นโมดูลาร์นี้เป็นหลักการสำคัญในการพัฒนาเทมเพลต WordPress ซึ่งช่วยให้นักพัฒนาสามารถสร้างเลย์เอาต์และสไตล์เฉพาะสำหรับประเภทเนื้อหาและหน้าต่างๆ ได้

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

โครงสร้างไฟล์หลักและลำดับชั้นของเทมเพลต

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

UltaHost WordPress โฮสติ้ง

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

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

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

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

<article>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    </article>

โค้ดนี้สาธิตการวนรอบหลัก (The Loop) ของ WordPress ซึ่งใช้ตรวจสอบว่ามีบทความหรือไม่ และวนลูปเพื่อแสดงชื่อเรื่องและเนื้อหาของแต่ละบทความget_header()和get_footer()ฟังก์ชันจะนำเข้าไฟล์header.php和footer.phpตามลำดับ ซึ่งเป็นหัวใจสำคัญของการนำโค้ดกลับมาใช้ซ้ำ

ฟังก์ชันหลักและ WordPress Loop

WordPress Loop เป็นกลไกหลักที่ขับเคลื่อนการแสดงผลเนื้อหา มันคือบล็อกโค้ด PHP ที่ใช้ในการดึงโพสต์จากฐานข้อมูลและแสดงผลบนหน้าเว็บ ในการพัฒนาจริง เรามักจะต้องปรับแต่งพฤติกรรมของลูป เช่น แสดงเฉพาะโพสต์จากหมวดหมู่เฉพาะหรือเปลี่ยนการเรียงลำดับโพสต์

แนะนำให้อ่าน คู่มือขั้นสุดท้ายในการพัฒนา WordPress Theme: กระบวนการครบวงจรตั้งแต่แนวคิดจนถึงการเผยแพร่。

การปรับแต่งการสืบค้นโพสต์สามารถใช้คลาสWP_Queryได้ มันให้พารามิเตอร์ที่ทรงพลังสำหรับการสร้างลูปการสืบค้นที่กำหนดเอง ตัวอย่างเช่น โค้ดด้านล่างนี้สร้างลูปที่สืบค้นเฉพาะ 3 โพสต์จากหมวดหมู่ “news”:

<?php
$custom_query = new WP_Query( array(
    'category_name' => 'news',
    'posts_per_page' => 3
) );
if ( $custom_query->have_posts() ) {
    while ( $custom_query->have_posts() ) {
        $custom_query->the_post();
        // 输出文章内容
    }
}
wp_reset_postdata();
?>

หลังจากใช้งานเสร็จแล้วต้องเรียกใช้wp_reset_postdata()เพื่อรีเซ็ตตัวแปรระดับโลก$postหลีกเลี่ยงผลกระทบต่อลูปหลักหรือการสอบถามอื่น ๆ

การรวมฟังก์ชันการปรับแต่งธีมจะขึ้นอยู่กับ API ตัวปรับแต่งธีมของ WordPress ผ่านทางนี้ คุณสามารถให้อินเทอร์เฟซที่มองเห็นได้แก่ผู้ใช้เพื่อปรับการตั้งค่าสี โลโก้ เค้าโครง และอื่น ๆ ของธีม สิ่งนี้ส่วนใหญ่ทำผ่านfunctions.phpในไฟล์add_action(‘customize_register’, $callback)ใช้ hook เพื่อดำเนินการ ในฟังก์ชัน callback คุณสามารถใช้WP_Customize_Managerclass เพื่อเพิ่มการตั้งค่า, คอนโทรล, และส่วนต่างๆ

hosting.com 共享主机

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

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

เพิ่มการสนับสนุนสไตล์, สคริปต์ และเมนู

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

การดำเนินการหลักสำหรับการลงทะเบียนและโหลดทรัพยากรคือผ่านฟังก์ชันwp_enqueue_style()和wp_enqueue_script()การดำเนินการเหล่านี้ควรติดตั้งบนฮุคwp_enqueue_scriptsตัวอย่างเช่น การลงทะเบียนสไตล์ชีตหลักสำหรับธีมของคุณ:

function my_theme_enqueue_assets() {
    // 加载主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    // 加载自定义JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

ในโค้ดนี้get_stylesheet_uri()ได้รับคือไดเรกทอรีรากของธีมstyle.cssในขณะที่get_template_directory_uri()ใช้สำหรับรับ URI ของไดเรกทอรีธี พารามิเตอร์สุดท้ายของสคริปต์ “true” หมายถึงวางสคริปต์ที่ด้านล่างของหน้าเพื่อโหลด

แนะนำให้อ่าน การพัฒนา WordPress ธีมเริ่มต้น: สร้างธีมที่กำหนดเองแรกของคุณตั้งแต่เริ่มต้น。

การเพิ่มการสนับสนุนเมนูนำทางเป็นหนึ่งในฟังก์ชันพื้นฐานของธีม ต้องการสองขั้นตอน: ก่อนอื่นในfunctions.phpใช้ฟังก์ชันregister_nav_menus()ฟังก์ชันประกาศว่าธีมสนับสนุนตำแหน่งเมนูใด เช่น “เมนูหลัก” และ “เมนูฟุตเตอร์” จากนั้นในไฟล์เทมเพลต (เช่นheader.php）จำเป็นต้องใช้wp_nav_menu()ฟังก์ชันเพื่อเรียกใช้และแสดงเมนูในตำแหน่งเฉพาะ ตัวเลือกที่สอดคล้องกันจะปรากฏขึ้นโดยอัตโนมัติในส่วน “รูปลักษณ์” -> “เมนู” ของ WordPress แดชบอร์ด

การออกแบบที่ตอบสนองและการปรับให้เหมาะกับอุปกรณ์เคลื่อนที่เป็นมาตรฐานของการออกแบบเว็บสมัยใหม่ ซึ่งหมายความว่าstyle.cssของคุณต้องรวม Media Queries เพื่อให้แน่ใจว่าเทมเพลตแสดงผลได้ดีในทุกขนาดหน้าจอ วิธีปฏิบัติทั่วไปคือการใช้หลักการออกแบบแบบ Mobile First โดยเขียนสไตล์สำหรับอุปกรณ์เคลื่อนที่ก่อน แล้วค่อยเพิ่มการเขียนทับสไตล์สำหรับหน้าจอขนาดใหญ่ผ่าน Media Queries

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

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

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

สรุป

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

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

จำเป็นต้องเชี่ยวชาญ PHP เพื่อพัฒนา WordPress Theme หรือไม่?
ใช่ การมีความชำนาญใน PHP เป็นเงื่อนไขที่จำเป็นสำหรับการพัฒนา WordPress Theme อย่างลึกซึ้ง เพราะไฟล์เทมเพลตและฟังก์ชันการทำงานทั้งหมดถูกขับเคลื่อนโดย PHP คุณอย่างน้อยต้องเข้าใจไวยากรณ์พื้นฐานของ PHP, ฟังก์ชัน, ลูปและการตรวจสอบเงื่อนไข รวมถึงความรู้พื้นฐานเกี่ยวกับการโต้ตอบกับฐานข้อมูล MySQL

ไฟล์สไตล์ของธีมจะต้องเป็น style.css เท่านั้นหรือไม่?

แม้ว่าข้อมูลสไตล์หลักจะต้องประกาศในส่วนหัวความคิดเห็นของstyle.cssแต่โค้ด CSS จริงสามารถแยกออกเป็นหลายไฟล์ได้ แนวทางปฏิบัติที่ดีที่สุดคือการเก็บเฉพาะข้อมูลความคิดเห็นของธีมและสไตล์พื้นฐานที่เรียบง่ายในstyle.cssแล้วเขียนโค้ดสไตล์หลักลงในไฟล์ CSS อื่นๆ (เช่นassets/css/main.css) และผ่านทางwp_enqueue_style()ทำการโหลดฟังก์ชัน ซึ่งช่วยในการจัดระเบียบและการบำรุงรักษาโค้ด

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

เพื่อให้ธีมรองรับการแปลภาษา (i18n) คุณจำเป็นต้องใช้ฟังก์ชันแปลภาษาที่ WordPress จัดเตรียมไว้ ในไฟล์เทมเพลต PHP ให้ห่อข้อความทั้งหมดที่ต้องการแปลด้วยฟังก์ชันเช่น()、_e()或esc_html()จากนั้นใช้เครื่องมือเช่น Poedit เพื่อสแกนข้อความเหล่านี้ สร้างไฟล์เทมเพลต.potและจากนั้นสร้างไฟล์สำหรับภาษาต่างๆ.po和.moไฟล์แปล สุดท้ายในfunctions.phpใช้ฟังก์ชันload_theme_textdomain()ฟังก์ชันโหลดการแปล

ทำไมคิวรีที่กำหนดเองของฉันจึงรบกวนส่วนอื่น ๆ ของหน้าเว็บ

โดยทั่วไปแล้วนี่เป็นเพราะการไม่รีเซ็ตข้อมูลคิวรีอย่างถูกต้อง เมื่อคุณใช้new WP_Query()或get_posts()สำหรับคิวรีที่กำหนดเอง ตัวแปร$postทั่วโลกจะถูกเปลี่ยนแปลง เพื่อป้องกันการรบกวนลูปหลักหรือคิวรีที่ตามมา คุณต้องเรียกใช้ทันทีหลังจากสิ้นสุดลูปที่กำหนดเองwp_reset_postdata()ฟังก์ชัน ฟังก์ชันนี้จะคืนค่าวัตถุ$postเป็นโพสต์ในแบบสอบถามหลักปัจจุบัน