คู่มือเริ่มต้นการพัฒนา WordPress Theme: สร้างธีมแรกของคุณตั้งแต่เริ่มต้น

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

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

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

สร้างโครงสร้างพื้นฐานของธีม WordPress

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

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

เขียนส่วนหัวข้อมูลธีม

在 style.css ที่ด้านบนของไฟล์ คุณต้องเพิ่มบล็อกความคิดเห็นเฉพาะเพื่อกำหนดข้อมูลธีม นี่คือตัวอย่าง:

UltaHost WordPress โฮสติ้ง

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

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

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个简洁、轻量级的入门级 WordPress 主题，用于学习主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

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

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

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

แนะนำให้อ่าน WordPress Theme Development สำหรับผู้เริ่มต้น: สร้างธีมที่กำหนดเองชิ้นแรกของคุณตั้งแต่เริ่มต้น。

ไฟล์เทมเพลตทั่วไปและการใช้งาน

• header.php: ส่วนหัวของเว็บไซต์ โดยทั่วไปจะรวมพื้นที่ ``, โลโก้เว็บไซต์ และเมนูนำหลัก
• footer.php: ส่วนท้ายของเว็บไซต์ โดยทั่วไปจะรวมข้อมูลลิขสิทธิ์ ลิงก์เสริม เป็นต้น
• sidebar.php: พื้นที่ด้านข้าง
• index.php： เทมเพลตหลัก เป็นทางเลือกสุดท้ายสำหรับทุกหน้า
• single.php: ใช้สำหรับแสดงบทความบล็อกเดี่ยว
• page.php: ใช้สำหรับแสดงหน้าเดียว (เช่น “เกี่ยวกับเรา”, “ติดต่อ”)
• archive.php: ใช้สำหรับแสดงรายการเก็บถาวรบทความ (เช่น หมวดหมู่, แท็ก, ผู้เขียน, วันที่เก็บถาวร)
• front-page.php: ใช้สำหรับกำหนดหน้าแรกของเว็บไซต์ (หากตั้งค่าหน้าคงที่เป็นหน้าแรก)
• home.php: ใช้สำหรับแสดงหน้าดัชนีโพสต์บล็อก (หากตั้งค่าหน้าแรกเป็นแบบคงที่ เทมเพลตนี้จะแสดงรายการโพสต์ล่าสุด)
• 404.php: ใช้สำหรับแสดงหน้าแสดงข้อผิดพลาด “404 ไม่พบ”
• search.php: ใช้สำหรับแสดงผลการค้นหา
• functions.php: นี่ไม่ใช่ไฟล์เทมเพลต แต่เป็นไฟล์ฟังก์ชันของธีม ใช้สำหรับเพิ่มฟังก์ชัน การลงทะเบียนเมนู แถบด้านข้าง เป็นต้น

แท็กเทมเพลตและลูป

ในไฟล์เทมเพลต คุณจะใช้ “แท็กเทมเพลต” อย่างสม่ำเสมอ นี่คือฟังก์ชัน PHP ที่ WordPress จัดเตรียมไว้สำหรับแสดงผลเนื้อหาแบบไดนามิก เช่น bloginfo('name') แสดงผลชื่อเว็บไซต์the_title() แสดงผลชื่อเรื่องบทความ

แนวคิดหลักที่สำคัญที่สุดคือ “WordPress Loop” มันคือโครงสร้างโค้ด PHP ที่ใช้ตรวจสอบว่าหน้าปัจจุบันมีบทความ (หรือรายการบทความ) ที่ต้องแสดงหรือไม่ และวนซ้ำเพื่อแสดงผลเหล่านั้น ลูปพื้นฐานที่สุดมีดังนี้:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
<?php endwhile; else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

这段代码的意思是：如果有文章，就循环（while）每一篇，在循环中显示文章标题和内容；如果没有文章，则显示一条错误信息。`_e()` 是一个用于国际化的翻译函数。

การผสานฟังก์ชันและสไตล์ของธีม

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

ลงทะเบียนฟังก์ชันธีม

在 functions.php ในนั้น คุณสามารถขยายฟังก์ชันการทำงานผ่าน “ฮุค” (Hooks) ต่างๆ ที่ WordPress จัดให้ เช่น action hooks และ filter hooks ก่อนอื่น โดยทั่วไปจำเป็นต้องประกาศการสนับสนุนฟังก์ชันบางอย่างของธีม ตัวอย่างเช่น เพิ่มรูปขนาดย่อของบทความ (ภาพเด่น) และการสนับสนุนเมนู:

hosting.com 共享主机

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

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

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面使用“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );

// 让 WordPress 管理文档标题标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

`add_action()` 将你的函数 my_first_theme_setup จะถูกผูกเข้ากับระบบของ after_setup_theme บน action hook นี้ ตรวจสอบให้แน่ใจว่ามันทำงานในเวลาที่เหมาะสม

การนำเข้า Stylesheet และสคริปต์

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

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

`get_stylesheet_uri()` ชี้ไปที่ไฟล์ style.css ของคุณ `get_template_directory_uri()` ส่งคืน URL ของไดเรกทอรีธีมปัจจุบัน

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

การสร้างโครงร่างหน้าและชิ้นส่วนเทมเพลต

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

แยกส่วนประกอบของเทมเพลต

สร้าง header.php、footer.php 和 sidebar.phpใน header.php ใน คุณต้องรวมส่วน `` อย่างสมบูรณ์ และจบด้วยคอนเทนเนอร์ส่วนหัวที่ชัดเจน (เช่น แท็ก ``) ใน footer.php มักจะจบด้วยแท็ก `` และ ``

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

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

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

ประกอบหน้าเว็บให้สมบูรณ์

ในเทมเพลตเพจ (เช่น index.php、single.php) คุณสามารถใช้ฟังก์ชันต่อไปนี้เพื่อนำส่วนประกอบเหล่านี้มาใช้:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    // 这里放置 WordPress 循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 内容输出
        endwhile;
    endif;
    ?>
</main>

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

`get_header()`、`get_sidebar()` 和 `get_footer()` 会分别加载对应的模板文件。你还可以使用 `get_template_part()` 函数来加载更细粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 会尝试加载 template-parts/content-page.php ไฟล์ หากไม่มีอยู่จะโหลด template-parts/content.phpซึ่งช่วยเพิ่มการนำโค้ดกลับมาใช้ใหม่และความสามารถในการบำรุงรักษาได้อย่างมาก

สรุป

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

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

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

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

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

ในระหว่างการพัฒนา Theme, `page.php` และ `front-page.php` ต่างกันอย่างไร?

page.php ใช้สำหรับแสดงผลหน้า “เพจ” (Page) เดี่ยวที่สร้างใน WordPress เช่น “เกี่ยวกับเรา”, “ติดต่อเรา” เป็นต้น ในขณะที่ front-page.php เป็นเทมเพลตที่ออกแบบมาเฉพาะสำหรับการแสดงผล “หน้าแรก” ของเว็บไซต์ ในส่วน “การตั้งค่า” -> “การอ่าน” ใน WordPress backend หากคุณเลือก “หน้าแบบคงที่” และตั้งค่า “หน้าแรก” เป็นหน้าใดหน้าหนึ่ง WordPress จะให้ความสำคัญกับการใช้ front-page.php เพื่อแสดงหน้านี้ หาก front-page.php ไม่มีอยู่ ระบบจะใช้ page.php。

为什么推荐使用 `wp_enqueue_style()` 来加载 CSS，而不是直接在 HTML 中写 `` 标签？

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

ฉันจะทำให้ธีมของฉันรองรับหลายภาษา (สากล) ได้อย่างไร

การทำให้ธีมรองรับหลายภาษาประกอบด้วยสองขั้นตอนหลัก ขั้นแรก ในสตริงข้อความทั้งหมดของธีม ใช้ฟังก์ชันการแปลของ WordPress เช่น ()、_e() 或 esc_html()และกำหนดให้พวกเขาอยู่ใน style.css ที่กำหนดไว้ใน Text Domainตัวอย่างเช่น:_e( 'Hello World', 'my-first-theme' ). ประการที่สอง ใช้เครื่องมือเช่น Poedit เพื่อสแกนโค้ดธีมของคุณ สร้างไฟล์ .pot ไฟล์เทมเพลต ซึ่งนักแปลสามารถใช้สร้าง .po และไฟล์ที่คอมไพล์แล้ว .mo . นำไฟล์ภาษาวางไว้ในไดเรกทอรี /languages/ ของธีม WordPress จะโหลดการแปลที่เกี่ยวข้องโดยอัตโนมัติตามการตั้งค่าภาษาของเว็บไซต์