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

การเตรียมการและการตั้งค่าสภาพแวดล้อม

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

ธีม WordPress โดยพื้นฐานแล้วคือโฟลเดอร์ที่อยู่ใน/wp-content/themes/โฟลเดอร์ในไดเรกทอรี ชื่อโฟลเดอร์นี้คือตัวระบุธีมของคุณ คุณต้องสร้างโฟลเดอร์ใหม่ เช่นmy-custom-themeภายในโฟลเดอร์นี้ อย่างน้อยต้องมีไฟล์หลักสองไฟล์:style.css和index.phpไฟล์แรกใช้สำหรับเก็บข้อมูลสไตล์และเมตาดาต้าของธีม ส่วนไฟล์หลังคือไฟล์เทมเพลตเริ่มต้น

เข้าใจไฟล์ข้อมูลหลักของธีม

style.cssไฟล์ไม่เพียงใช้สำหรับสไตล์ CSS เท่านั้น แต่บล็อกความคิดเห็นที่ด้านบนยังเป็น “บัตรประจำตัว” ของธีมด้วย คุณต้องประกาศข้อมูลสำคัญ เช่น ชื่อธีม, ผู้เขียน, คำอธิบาย, เวอร์ชัน ฯลฯ ที่นี่ ข้อมูลนี้จะปรากฏในหน้า “รูปลักษณ์” -> “ธีม” ในแอดมินของ WordPress

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

พื้นฐานของstyle.cssตัวอย่างส่วนหัวของไฟล์มีดังนี้:

UltaHost WordPress โฮสติ้ง

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

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

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个为学习目的而创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

โดยเฉพาะอย่างยิ่งText Domainสำหรับการทำให้เป็นสากล (การแปลหลายภาษา) ต้องให้ตรงกับชื่อโฟลเดอร์ธีมของคุณเสมอ

สร้างโครงสร้างไฟล์เทมเพลตพื้นฐาน

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

สร้างไฟล์เทมเพลตที่จำเป็น

นอกจากindex.phpคุณควรสร้างไฟล์เทมเพลตที่เฉพาะเจาะจงมากขึ้นทีละขั้นตอน ตัวอย่างเช่นheader.phpสำหรับเก็บส่วนหัวของทุกหน้า (HTML head, การนำทางเว็บไซต์ ฯลฯ)footer.phpสำหรับเก็บส่วนท้ายsidebar.phpสำหรับแถบด้านข้าง โดยใช้ฟังก์ชันที่มีอยู่ใน WordPressget_header()、get_footer()和get_sidebar()คุณสามารถนำส่วนเหล่านี้เข้าไปในเทมเพลตอื่นได้อย่างง่ายดาย

index.phpเป็นเทมเพลตสำรองสุดท้าย คุณควรสร้างเทมเพลตที่มีความเฉพาะเจาะจงมากขึ้นเพื่อเพิ่มการควบคุม เช่น:
- front-page.php: ใช้เป็นหน้าแรกแบบคงที่
- home.php: แสดงดัชนีบทความบล็อก
- single.php: แสดงบทความบล็อกเดี่ยวหรือประเภทเนื้อหาที่กำหนดเอง
- page.php: แสดงหน้าเดี่ยว
- archive.php: แสดงหน้าอาร์ไคฟ์ เช่น หมวดหมู่, แท็ก, ผู้เขียน, วันที่
- 404.php: แสดงหน้า “ไม่พบ”
- search.php: แสดงผลลัพธ์การค้นหา

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

เข้าใจกลไกการวนลูป

หัวใจของ WordPress คือ “ลูป” (The Loop) นี่คือโค้ด PHP ที่ใช้ตรวจสอบว่ามีบทความหรือไม่ และหากมีเงื่อนไขก็จะวนลูปเพื่อแสดงเนื้อหาของแต่ละบทความ โครงสร้างลูปพื้นฐานที่สุดมีดังต่อไปนี้ มักจะอยู่ในsingle.php或home.phpth：

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <div><?php the_content(); ?></div>
<?php endwhile; else : ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
<?php endif; ?>

โดยเฉพาะอย่างยิ่งthe_title()和the_content()แท็กเทมเพลตใช้สำหรับแสดงข้อมูลเฉพาะของบทความ

รวมฟังก์ชันหลักของ WordPress

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

hosting.com 共享主机

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

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

ลงทะเบียนเมนูนำทางและพื้นที่วิดเจ็ต

คุณต้องใช้register_nav_menus()ฟังก์ชันในธีมfunctions.phpตำแหน่งการลงทะเบียนเมนูในไฟล์ ตัวอย่างเช่น การลงทะเบียนเมนู “เมนูนำหลัก”:

function my_custom_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
        'footer'  => __( 'Footer Menu', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

จากนั้น ในheader.phpใน, ใช้wp_nav_menu()ฟังก์ชันสำหรับเรียกใช้เมนูนี้

ในทำนองเดียวกัน การใช้register_sidebar()ฟังก์ชันสามารถสร้างพื้นที่วิดเจ็ต (แถบด้านข้าง) หลังจากลงทะเบียนในfunctions.phpแล้ว คุณสามารถจัดการโดยการลากและวางในส่วนหลัง “รูปลักษณ์” -> “วิดเจ็ต” และใช้ในเทมเพลตได้dynamic_sidebar()ฟังก์ชันเพื่อแสดงมัน

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

เพิ่มฟังก์ชันการสนับสนุนธีม

ผ่านadd_theme_support()ฟังก์ชัน คุณสามารถเปิดใช้งานฟังก์ชันหลักต่าง ๆ สำหรับธีมของคุณได้ ฟังก์ชันที่ใช้บ่อยที่สุด ได้แก่:
- post-thumbnails: เปิดใช้งานฟังก์ชันรูปภาพเด่นของบทความ
- title-tag: ปล่อยให้ WordPress จัดการหัวข้อเอกสาร (<title>แท็ก) โดยอัตโนมัติ นี่คือแนวทางปฏิบัติที่ดีที่สุดสำหรับธีมสมัยใหม่
- html5: เปิดใช้งานการรองรับ HTML5 สำหรับมาร์กอัปหลักของธีม (เช่น ฟอร์มความคิดเห็น ฟอร์มค้นหา ฯลฯ)

โค้ดสำหรับเปิดใช้งานฟีเจอร์เหล่านี้ควรวางไว้ในfunctions.phpไฟล์after_setup_themeในฮุค

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

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

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

สไตล์ สคริปต์ และการปรับแต่งประสิทธิภาพ

ธีมสมัยใหม่ต้องจัดการการโหลด CSS และ JavaScript อย่างถูกต้อง และคำนึงถึงประสิทธิภาพและการออกแบบที่ตอบสนอง

การเพิ่ม CSS และ JavaScript อย่างถูกต้อง

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

在functions.phpตัวอย่างใน

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 加载自定义JavaScript文件
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

โปรดทราบว่าget_stylesheet_uri()ส่งคืนหัวข้อของstyle.cssสำหรับไฟล์ JS เราจะใช้trueเป็นพารามิเตอร์สุดท้าย ซึ่งหมายถึงการโหลดในส่วนท้ายของหน้า ช่วยเพิ่มประสิทธิภาพการโหลดหน้าเว็บ

การออกแบบที่ตอบสนองและสไตล์พื้นฐาน

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

สรุป

การสร้างธีม WordPress ที่กำหนดเองตั้งแต่เริ่มต้นเป็นกระบวนการเรียนรู้ที่ครอบคลุม ซึ่งต้องเข้าใจ PHP, HTML, CSS, JavaScript และ API หลักของ WordPress พร้อมกัน เราเริ่มจากการเตรียมสภาพแวดล้อมและไฟล์หลักstyle.cssเริ่มต้นด้วยการสร้างโครงสร้างระดับของเทมเพลตทีละขั้นตอน เข้าใจกลไก “ลูป” ต่อมา เรารวมฟังก์ชันหลักต่างๆ เช่น เมนูนำทาง, วิดเจ็ต, ภาพเด่น และเรียนรู้วิธีเพิ่มไฟล์สไตล์ชีตและสคริปต์อย่างถูกต้องและมีประสิทธิภาพ การปฏิบัติตามขั้นตอนและแนวทางปฏิบัติที่ดีที่สุดเหล่านี้ ไม่เพียงแต่ช่วยสร้างธีมต้นฉบับที่ทำงานได้ครบถ้วน แต่ยังรับประกันคุณภาพโค้ด, การบำรุงรักษา, และประสิทธิภาพด้วย จำไว้ว่าการพัฒนาธีมเป็นกระบวนการที่ต้องทำซ้ำอย่างต่อเนื่อง การทดสอบอย่างต่อเนื่องและการรับข้อเสนอแนะในสภาพแวดล้อมจริงเป็นสิ่งสำคัญ

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

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

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

สามารถปรับเปลี่ยนจากธีมที่มีอยู่เพื่อสร้างธีมใหม่ได้หรือไม่?

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

ไฟล์ functions.php ของธีมและปลั๊กอินแตกต่างกันอย่างไร?

functions.phpไฟล์เป็นส่วนหนึ่งของธีม โดยหน้าที่การทำงานของมันมีความสัมพันธ์อย่างใกล้ชิดกับรูปลักษณ์และการแสดงผลของธีม ส่วนปลั๊กอินนั้นใช้เพื่อเพิ่มฟังก์ชันการทำงานเฉพาะให้กับเว็บไซต์ โดยเป็นอิสระจากธีม กฎง่ายๆ คือ ถ้าฟังก์ชันนั้นเป็นการเปลี่ยนแปลงรูปลักษณ์หรือโครงร่างของเว็บไซต์ โดยทั่วไปจะวางไว้ในธีม แต่ถ้าเป็นการเพิ่มฟังก์ชันการทำงานที่เป็นอิสระ (เช่น ฟอร์มติดต่อ SEO optimization) จะเหมาะสมกว่าถ้าทำเป็นปลั๊กอิน ด้วยวิธีนี้ แม้จะเปลี่ยนธีม ฟังก์ชันหลักก็ยังคงอยู่

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

คุณต้องเตรียมพร้อมสำหรับการทำให้เป็นสากล (Internationalization, i18n) ซึ่งหมายความว่าสตริงทั้งหมดในธีมที่เผชิญหน้ากับผู้ใช้ควรถูกห่อหุ้มด้วยฟังก์ชันการแปลของ WordPress เช่น __() และ _e()esc_html_e(‘Read More’， ‘my-custom-theme’);คุณได้ทำแล้วstyle.cssประกาศในText Domainต้องตรงกับฟิลด์ข้อความที่ใช้ที่นี่ หลังจากนั้น นักแปลสามารถใช้ไฟล์ .po และ .mo เพื่อแปลสตริงเหล่านี้