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

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

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

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

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

ถัดไป คุณต้องกำหนดโครงสร้างไดเรกทอรีของธีม ธีม WordPress มาตรฐานมักประกอบด้วยไฟล์หลักดังต่อไปนี้:style.cssstyle.css (สไตล์ชีตของธีมและส่วนหัวข้อมูล)index.phpindex.php (ไฟล์เทมเพลตหลัก)functions.php(ไฟล์ฟังก์ชันธีม) และheader.php、footer.php、sidebar.phpไฟล์บางส่วนของเทมเพลต เช่น คุณสามารถสร้างโฟลเดอร์ใหม่ในไดเร็กทอรีการติดตั้ง WordPresswp-content/themes/ตัวอย่างเช่น “my-custom-theme” และเริ่มสร้างไฟล์เหล่านี้ในโฟลเดอร์นี้

สร้างไฟล์ส่วนหัวข้อมูลธีม

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

แนะนำให้อ่าน วิธีการเลือกและปรับแต่ง WordPress Theme ให้เหมาะกับคุณ。

/*
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.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

โดยเฉพาะอย่างยิ่งText Domainสำหรับการทำให้เป็นสากล (i18n) ต้องตรงกับชื่อโฟลเดอร์ธีม ซึ่งเป็นตัวระบุสำคัญสำหรับการโหลดไฟล์แปล หลังจากเขียนไฟล์นี้แล้ว ธีมของคุณจะปรากฏในรายการ “รูปลักษณ์” -> “ธีม” ใน WordPress แม้ว่าตอนนี้มันยังไม่มีฟังก์ชันการทำงานจริงใดๆ

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

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

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

เริ่มแรกคือindex.phpซึ่งเป็นเทมเพลตสำรองสุดท้ายสำหรับทุกหน้า ที่ง่ายที่สุด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(); ?>

สร้างเทมเพลตส่วนหัวและส่วนท้าย

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

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1002>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <!-- 你的导航菜单、Logo等代码在这里 -->
</header>

ตามนั้นfooter.phpควรปิดแท็กที่เปิดอยู่ในheader.phpและต้องเรียกใช้wp_footer()ซึ่งจำเป็นสำหรับปลั๊กอินจำนวนมาก (เช่น รหัสวิเคราะห์) และฟังก์ชันหลักของ WordPress

แนะนำให้อ่าน คู่มือการพัฒนา WordPress Theme ระดับสูงสุด: สร้างและปรับแต่งตั้งแต่เริ่มต้นจนเชี่ยวชาญ。

เพิ่มฟังก์ชันธีมและการปรับแต่ง

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

เพิ่มการสนับสนุนพื้นฐานของธีม

ผ่านadd_theme_support()ฟังก์ชัน add_theme_support() ช่วยให้คุณประกาศการสนับสนุนฟังก์ชันต่าง ๆ ของ WordPress สำหรับธีมของคุณ ตัวอย่างเช่น การเปิดใช้งานรูปภาพย่อของโพสต์ (รูปภาพเด่น) และโลโก้ที่ปรับแต่งได้เป็นมาตรฐานของธีมสมัยใหม่

function my_custom_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 启用自定义Logo功能
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 让WordPress生成和管理文档<title>标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

ลงทะเบียนเมนูและแถบด้านข้าง

เมนู WordPress ทำงานผ่านregister_nav_menus()การลงทะเบียนฟังก์ชัน คุณสามารถกำหนดตำแหน่งเมนูได้หลายตำแหน่ง เช่น “เมนูนำหลัก” และ “เมนูท้ายหน้า”

hosting.com 共享主机
高性能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候24小时、全天候的专家内部支持，高级安全措施，包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 73%
โลโก้ Hosting.com เข้าถึงหน้าเว็บ 
function my_custom_theme_menus() {
    register_nav_menus(
        array(
            'menu-1' => esc_html__( 'Primary Menu', 'my-custom-theme' ),
            'menu-2' => esc_html__( 'Footer Menu', 'my-custom-theme' ),
        )
    );
}
add_action( 'init', 'my_custom_theme_menus' );

แถบด้านข้าง (หรือที่เรียกว่า “พื้นที่วิดเจ็ต”) ผ่านregister_sidebar()การลงทะเบียนฟังก์ชัน แต่ละแถบด้านข้างต้องมี ID และคำอธิบายที่ไม่ซ้ำกัน

function my_custom_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          =&gt; esc_html__( 'Sidebar', 'my-custom-theme' ),
            'id'            =&gt; 'sidebar-1',
            'description'   =&gt; esc_html__( 'Add widgets here.', 'my-custom-theme' ),
            'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
            'after_widget'  =&gt; '</section>',
            'before_title'  =&gt; '<h2 class="widget-title">',
            'after_title'   =&gt; '</h2>',
        )
    );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );

สไตล์ สคริปต์ และลำดับชั้นของเทมเพลต

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

การเข้าคิวสไตล์และสคริปต์อย่างถูกต้อง

永远不要直接在模板文件中使用或标签引入资源。相反，应使用wp_enqueue_style()和wp_enqueue_script()ฟังก์ชัน

แนะนำให้อ่าน WordPress Theme Development Complete Guide: Practical Tutorial from Zero to Launch。

function my_custom_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 排入自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 如果评论功能开启且是单篇文章/页面，排入评论回复脚本
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

ทำความเข้าใจและใช้ลำดับชั้นของเทมเพลต

ลำดับชั้นของเทมเพลตของ WordPress เป็นระบบที่มีประสิทธิภาพ ตัวอย่างเช่น เมื่อเข้าถึงบทความบล็อก WordPress จะค้นหาเทมเพลตตามลำดับต่อไปนี้:single-post-{slug}.php -> single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.php。

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

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

สรุป

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

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

### ฉันจะเพิ่มเทมเพลตหน้าประจำหน้าที่กำหนดเองให้กับธีมของฉันได้อย่างไร
ในการสร้างเทมเพลตหน้าประจำหน้าที่กำหนดเอง ก่อนอื่นคุณต้องสร้างไฟล์ PHP ใหม่ในไดเรกทอรีธีมของคุณ เช่นtemplate-fullwidth.phpที่ด้านบนสุดของไฟล์ คุณต้องเพิ่มความคิดเห็นชื่อเทมเพลตเฉพาะ

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽页面模板。
 */

จากนั้นคุณสามารถเขียนโค้ดเค้าโครงหน้าขนาดเต็มของคุณในไฟล์นี้ได้ โดยปกติจะเริ่มต้นด้วยget_header();หลังจากบันทึกแล้ว เมื่อแก้ไขหรือสร้างหน้าในแอดมินของ WordPress คุณจะเห็นและสามารถใช้ “เทมเพลตหน้าขนาดเต็ม” ได้ในกล่องดรอปดาวน์ “แอตทริบิวต์หน้า” -> “เทมเพลต”

ทำไมเมนูที่กำหนดเองของฉันไม่ปรากฏขึ้น

菜单未显示通常有几个原因。首先，请确保你已经在主题的functions.phpผ่านทางregister_nav_menus()函数注册了菜单位置。

其次，你需要到 WordPress 后台的“外观”->“菜单”页面，创建一个新菜单，为其添加菜单项（如页面、文章、自定义链接），并在“菜单设置”区域下方，将你创建的这个菜单分配给你在主题中注册的菜单位置（例如“主导航”）。

สุดท้าย คุณต้องเรียกใช้เมนูในไฟล์เทมเพลต (โดยทั่วไปคือheader.php）ในการเรียกใช้เมนู ใช้wp_nav_menu()ฟังก์ชันและระบุพารามิเตอร์ “theme_location” ที่ถูกต้อง เช่น:wp_nav_menu( array( ‘theme_location’ => ‘menu-1’ ) );เฉพาะเมื่อทำทั้งสามขั้นตอนนี้เสร็จสิ้น เมนูจึงจะแสดงผลอย่างถูกต้อง

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

ทำให้ธีมของคุณรองรับการแปล หรือที่เรียกว่าการทำให้เป็นสากล (i18n) โดยหลักแล้วแบ่งออกเป็นสามขั้นตอน ขั้นตอนแรกคือ “การเตรียมการ”: ในตำแหน่งข้อความทั้งหมดในธีมที่ต้องการแปล ให้ใช้ฟังก์ชันการแปลที่ WordPress จัดเตรียมไว้มาห่อหุ้ม ฟังก์ชันที่ใช้บ่อยที่สุดคือesc_html__( ‘文本’, ‘my-custom-theme’ )(แสดงผล HTML ที่ถูกหนี) และ_e( ‘文本’, ‘my-custom-theme’ )(แสดงผลและหนี) อย่าลืมตรวจสอบให้แน่ใจว่าพารามิเตอร์ที่สอง (โดเมนข้อความ) ตรงกับที่คุณระบุในstyle.cssที่กำหนดไว้ในText Domainอย่างสมบูรณ์

ขั้นตอนที่สองคือ “การสร้าง”: ใช้เครื่องมือเช่น Poedit เพื่อสแกนไฟล์ PHP ของธีมของคุณ แล้วสร้าง.potไฟล์เทมเพลต (Portable Object Template) ผู้แปลสามารถสร้างไฟล์ภาษาที่สอดคล้องกันได้จากไฟล์นี้.poและไฟล์ที่คอมไพล์แล้ว.moไฟล์สำหรับภาษาต่างๆ ได้

ขั้นตอนที่สามคือ “การโหลด”: ในfunctions.phpไฟล์ในafter_setup_themeฟังก์ชันฮุคของคุณ ใช้load_theme_textdomain( ‘my-custom-theme’, get_template_directory() . ‘/languages’ )เพื่อโหลดไฟล์แปล ด้วยวิธีนี้ เมื่อผู้ใช้เปลี่ยนภาษาของเว็บไซต์ ข้อความในธีมของคุณจะเปลี่ยนไปตามนั้น

ไฟล์ functions.php ผิดพลาดจะส่งผลอะไรบ้าง?

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

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

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

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

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

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

แท็ก: