หน้าแรก/ความรู้/วูร์ดเพรส/รายละเอียดเนื้อหา

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

อ่าน 3 นาที
2026-03-19
2026-06-04
2,760
I earn commissions when you shop through the links below, at no additional cost to you.

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

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

ไฟล์เทมเพลตที่จำเป็นสำหรับธีม

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

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

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

แนะนำให้อ่าน สร้างเว็บไซต์คุณภาพสูง: คู่มือปฏิบัติการเจาะลึกการปรับแต่งและเพิ่มประสิทธิภาพธีม WordPress。

ไฟล์เทมเพลตอื่น ๆ ที่ใช้บ่อย

เพื่อควบคุมการแสดงผลของหน้าเว็บที่แตกต่างกันได้อย่างละเอียดยิ่งขึ้น คุณจำเป็นต้องสร้างไฟล์เทมเพลตเพิ่มเติม ตัวอย่างเช่นheader.phpปกติจะรวมถึงการประกาศประเภทเอกสาร<head>ส่วนหัวของหน้าเว็บสำหรับภูมิภาคและเว็บไซต์footer.phpซึ่งประกอบด้วยเนื้อหาฟุตเตอร์และแท็กปิดsidebar.phpสำหรับแถบด้านข้าง โดยใช้ฟังก์ชันในตัวของ WordPress เช่นget_header()、get_footer()和get_sidebar()คุณสามารถนำส่วนเหล่านี้เข้าไปในเทมเพลตอื่นได้อย่างง่ายดาย

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

นอกจากนี้ คุณยังสามารถสร้างsingle.phpสำหรับบทความเดี่ยวpage.phpสำหรับหน้าอิสระarchive.phpสำหรับรายการเก็บถาวร และfunctions.phpไฟล์พิเศษนี้เพื่อเพิ่มฟังก์ชันและคุณสมบัติของธีม

สร้างเทมเพลตหน้าหลักสำหรับธีม

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

รวมส่วนหัวและส่วนท้าย

การปฏิบัติที่ดีคือการทำให้ส่วนที่ใช้ร่วมกันเป็นโมดูล ก่อนอื่น ในโฟลเดอร์ธีมของคุณให้สร้างheader.php和footer.phpในheader.phpคุณต้องรวม<!DOCTYPE html>การประกาศ<html>จุดเริ่มต้นของแท็ก<head>ภูมิภาค (ใช้wp_head()hooks เพื่อให้ปลั๊กอินและธีมสามารถฉีดโค้ดได้ที่นี่) รวมถึงเนื้อหาเริ่มต้น เช่น โลโก้เว็บไซต์และเมนูนำทางหลัก

จากนั้น ในindex.phpเริ่มต้น ใช้<?php get_header(); ?>เพื่อนำส่วนหัวหน้านี้เข้ามา ในindex.phpท้ายสุด, ใช้<?php get_footer(); ?>เพื่อนำเข้าfooter.phpซึ่งควรมีwp_footer()การเรียกใช้งานฮุคและการปิด</body></html>แท็ก

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

การใช้ลูปเพื่อแสดงผลโพสต์

หัวใจหลักของ WordPress คือ “ลูป” (The Loop) ซึ่งเป็นโค้ด PHP ที่ใช้ตรวจสอบว่ามีโพสต์อยู่หรือไม่ และแสดงผลโพสต์เหล่านั้นตามลำดับหากมีอยู่index.php的get_header()หลังจากนั้น คุณสามารถแทรกโค้ดลูปพื้นฐานต่อไปนี้:

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/th/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    
    <p>ขออภัย ไม่พบบทความใดๆ</p>
<?php endif; ?>

ในโค้ดนี้have_posts()和the_post()ฟังก์ชันขับเคลื่อนลูปthe_title()、the_permalink()和the_excerpt()แท็กเทมเพลตเช่น ใช้สำหรับแสดงเนื้อหาของบทความโดยละเอียด ด้วยวิธีนี้ หน้าแสดงรายการบทความพื้นฐานก็เสร็จสมบูรณ์

เพิ่มสไตล์และสคริปต์ให้กับธีม

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

hosting.com 共享主机
高性能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候24小时、全天候的专家内部支持，高级安全措施，包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 73%
โลโก้ Hosting.com เข้าถึงหน้าเว็บ

การนำเข้า stylesheet อย่างถูกต้อง

แม้ว่าstyle.cssเป็นสิ่งจำเป็น แต่คุณไม่ควรลิงก์มันโดยตรงใน HTML วิธีที่ถูกต้องคือในfunctions.phpในไฟล์wp_enqueue_style()ฟังก์ชัน ขั้นแรกให้สร้างในไดเรกทอรีรูทของธีมfunctions.phpไฟล์ แล้วเพิ่มรหัสต่อไปนี้:

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

รหัสนี้กำหนดฟังก์ชันที่จะบอกให้ WordPress เพิ่มสไตล์ชีทหลักของธีม (get_stylesheet_uri()พาธที่ดึงมา) เข้าคิวด้วยแฮนเดิล “my-theme-style”add_action()ฮุคเพื่อเชื่อมต่อฟังก์ชันนี้เข้ากับwp_enqueue_scriptsการดำเนินการนี้ ตรวจสอบให้แน่ใจว่าทำงานเมื่อโหลดหน้าเว็บ

นำเข้า JavaScript ที่กำหนดเอง

วิธีการนำเข้าไฟล์ JavaScript คล้ายกัน แต่ใช้wp_enqueue_script()ฟังก์ชัน สมมติว่าคุณมีไฟล์อยู่ที่js/script.jsไฟล์ คุณสามารถเพิ่มได้ดังนี้:

แนะนำให้อ่าน จากพื้นฐานสู่ขั้นสูง: คู่มือการพัฒนา WordPress Theme ฉบับสมบูรณ์พร้อมแบบฝึกหัด。

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

พารามิเตอร์ที่นี่หมายถึง: ตัวจัดการสคริปต์, URL ของสคริปต์, อาร์เรย์การพึ่งพา (เช่นarray('jquery')), หมายเลขเวอร์ชัน, และการโหลดในส่วนท้าย (trueหมายถึงใน</body>ก่อนโหลด

ขยายฟังก์ชันธีม

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

โฮสติ้งแบบแชร์ของ InterServer
共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本，一键安装。
โลโก้ InterServer เข้าถึงหน้าเว็บ

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

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

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    add_theme_support( 'title-tag' ); // 让WordPress管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_action( 'after_setup_theme', 'my_theme_setup' )ตรวจสอบให้แน่ใจว่าการตั้งค่าเหล่านี้ทำงานในขั้นตอนเริ่มต้นของธีม

ลงทะเบียนเมนูนำทาง

เพื่อให้ผู้ใช้สามารถตั้งค่าการนำทางในส่วน “รูปลักษณ์-เมนู” ในแถบหลังบ้าน, คุณจำเป็นต้องลงทะเบียนตำแหน่งเมนูล่วงหน้า ใช้register_nav_menus()ฟังก์ชัน:

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

หลังจากลงทะเบียนแล้ว คุณก็สามารถใช้งานในไฟล์เทมเพลต (เช่นheader.php) ใช้ฟังก์ชันwp_nav_menu( array( 'theme_location' => 'primary' ) )เพื่อแสดงเมนูนี้

สรุป

เริ่มจากสร้างโฟลเดอร์พื้นฐานที่มีstyle.css和index.phpคุณได้ค่อยๆ สร้างธีม WordPress ที่สมบูรณ์ ด้วยความเข้าใจโครงสร้างลำดับชั้นของเทมเพลต คุณได้เรียนรู้การสร้างไฟล์เทมเพลตเฉพาะเพื่อควบคุมประเภทต่างๆ ของหน้าอย่างแม่นยำ การนำwp_enqueue_style()和wp_enqueue_script()การจัดการทรัพยากรเป็นแนวปฏิบัติที่ดีที่สุดเพื่อรับรองความเข้ากันได้ของธีมและประสิทธิภาพ สุดท้าย การใช้functions.phpไฟล์ คุณสามารถเพิ่มฟังก์ชันที่ทรงพลังให้กับธีมได้อย่างปลอดภัยผ่านฟังก์ชันเช่นadd_theme_support()和register_nav_menus()การเรียนรู้ขั้นตอนหลักเหล่านี้ คุณจะได้พื้นฐานที่มั่นคงสำหรับการพัฒนา WordPress ธีมส่วนบุคคลอย่างอิสระ

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

การพัฒนา WordPress Theme ต้องมีความรู้พื้นฐานใดบ้าง?

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

ทำไมต้องใช้ wp_enqueue_style ในการโหลดสไตล์ชีต แทนที่จะใช้ link โดยตรง?

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

functions.php และปลั๊กอินแตกต่างกันอย่างไร?

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

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

การทำให้ธีมสนับสนุนความเป็นสากลเป็นกุญแจสำคัญสู่ตลาดโลก ขั้นแรก ในทุกตำแหน่งที่ธีมของคุณแสดงข้อความ ให้ใช้ฟังก์ชันการแปลของ WordPress เช่น__('文本', 'my-custom-theme')或_e('文本', 'my-custom-theme')โดยที่my-custom-themeถูกกำหนดไว้ในstyle.cssจากนั้นใช้เครื่องมือเช่น Poedit เพื่อสแกนไฟล์ธีมและสร้างไฟล์.potไฟล์เทมเพลต ซึ่งนักแปลสามารถใช้สร้าง.po和.moสุดท้าย ใช้ฟังก์ชันfunctions.phpผ่านทางload_theme_textdomain()เพื่อโหลดไฟล์แปล

ขั้นต่อไป ฉันควรทำอย่างไรต่อไป

如果你正在搭建或优化 WordPress 网站，下一步建议继续阅读性能优化、插件配置和主题定制相关内容。

อ่านเพิ่มเติมและรับความรู้ที่มีประโยชน์

下面这些内容与本文主题相关，适合继续深入阅读。优先从与你当前问题最接近的文章开始看，再逐步扩展到周边主题，效果通常会更好。

แท็ก: