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

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

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

แนวคิดพื้นฐานในการพัฒนา WordPress Theme

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

ไฟล์เทมเพลตเป็นโครงสร้างของธีม ซึ่งควบคุมโครงสร้างการแสดงผลเนื้อหาของหน้าเว็บที่แตกต่างกัน ตัวอย่างเช่นindex.phpเป็นเทมเพลตหน้าแรกเริ่มต้นsingle.phpควบคุมการแสดงผลของบทความเดี่ยวpage.phpควบคุมการแสดงผลของหน้าเดียว ในขณะที่header.php、footer.php和sidebar.phpมักใช้สำหรับสร้างพื้นที่ส่วนกลางของเว็บไซต์ WordPress จะทำตามลำดับชั้นของเทมเพลตที่เฉพาะเจาะจงเพื่อเลือกไฟล์เทมเพลตที่เหมาะสมสำหรับคำขอที่แตกต่างกัน ซึ่งให้ความยืดหยุ่นอย่างมากแก่ผู้พัฒนา

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

แนะนำให้อ่าน วิธีสร้างธีม WordPress เอง: คู่มือเริ่มต้นตั้งแต่ศูนย์จนถึงหนึ่งอย่างสมบูรณ์。

นอกจากนี้ ไฟล์ฟังก์ชันธีมfunctions.phpยังมีบทบาทสำคัญ มันไม่ใช่ไฟล์เทมเพลต แต่เป็นไฟล์ PHP ที่โหลดโดยอัตโนมัติเมื่อเริ่มต้นธีม นักพัฒนาสามารถเพิ่มฟังก์ชันที่กำหนดเอง, จดทะเบียนเมนูและแถบด้านข้าง, นำเข้าไฟล์สคริปต์และสไตล์ชีต, และขยายหรือปรับเปลี่ยนพฤติกรรมหลักของ WordPress ผ่านadd_action和add_filterฮุคต่างๆ การทำความเข้าใจบทบาทและวิธีการทำงานร่วมกันของไฟล์พื้นฐานเหล่านี้เป็นขั้นตอนแรกในการสร้างธีมที่กำหนดเองใดๆ

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

การสร้างโครงสร้างธีมและไฟล์เทมเพลต

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

style.cssส่วนหัวของไฟล์ต้องมีข้อมูลเฉพาะของสไตล์ชีต ต่อไปนี้เป็นตัวอย่างพื้นฐานที่สุด:

/*
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
*/

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

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 默认输出文章内容
            the_content();
        endwhile;
    else :
        echo &#039;<p>暂无内容。</p>';
    endif;
    ?&gt;
</main>

โค้ดนี้แสดงลูปธีมของ WordPress (The Loop) อย่างชัดเจน – ผ่านhave_posts()和the_post()ฟังก์ชันเพื่อวนซ้ำและแสดงผลโพสต์ และget_header()、get_sidebar()和get_footer()ฟังก์ชันนี้ใช้สำหรับนำเข้าส่วนเทมเพลตที่เกี่ยวข้อง หลังจากนั้น คุณควรสร้างไฟล์ชิ้นส่วนเทมเพลตที่ถูกนำเข้าเหล่านี้:header.php、sidebar.php和footer.php。

แนะนำให้อ่าน เริ่มต้นจากศูนย์: คู่มือฉบับสมบูรณ์และเทคโนโลยีหลักในการพัฒนา WordPress Theme。

สร้างไฟล์เทมเพลตส่วนหัว

在header.phpในนั้น คุณต้องวางข้อมูลส่วนหัวของเอกสาร HTML และเรียกใช้ฟังก์ชัน WordPress ที่สำคัญ

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1002>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <nav>'primary' ) ); ?&gt;</nav>
</header>

wp_head()ฟังก์ชันนี้ช่วยให้ WordPress หลัก, ปลั๊กอิน, และธีมของคุณสามารถเพิ่มโค้ดที่จำเป็น (เช่น ลิงก์สไตล์ชีต) ไปยังส่วนต่างๆ ของหน้าได้body_class()ฟังก์ชันสำหรับการแสดงผลชุดชื่อคลาส CSS ตามเงื่อนไข เพื่อให้สามารถควบคุมสไตล์ได้อย่างแม่นยำ ในทำนองเดียวกันfooter.phpไฟล์ต้องประกอบด้วยwp_footer()การเรียกใช้ฟังก์ชัน โดยปกติจะวางไว้ก่อนปิดแท็ก

ใช้ functions.php เพื่อเพิ่มประสิทธิภาพฟังก์ชันของธีม

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

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

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

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

function my_custom_theme_setup() {
    // 让主题支持特色图像
    add_theme_support( 'post-thumbnails' );

// 为评论表单、搜索表单等添加HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

// 添加标题标签支持，允许WordPress管理文档标题
    add_theme_support( 'title-tag' );

// 注册一个主菜单位置
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

ที่นี่after_setup_themeเป็นฮุคที่ทำงานหลังจากเริ่มต้นธีม เป็นตำแหน่งมาตรฐานสำหรับการตั้งค่าธีม โดยใช้add_theme_support(‘title-tag’)คุณไม่จำเป็นต้องเขียนด้วยตนเองในheader.phpอีกต่อไป<title>ป้ายกำกับแล้ว

การนำเข้าไฟล์สคริปต์และสไตล์ชีตอย่างถูกต้อง

สำหรับประสิทธิภาพ การจัดเก็บแคช และการจัดการความสัมพันธ์ จำเป็นต้องใช้วิธีที่ WordPress จัดเตรียมไว้ในการโหลดไฟล์ CSS และ JavaScript แทนที่จะเขียนโดยตรงใน HTML<link>或<script>แท็ก นี่ทำผ่านwp_enqueue_style()和wp_enqueue_script()ฟังก์ชันเสร็จสิ้น

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

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 );

// 如果需要，为脚本局部化数据（传递PHP变量到JS）
    wp_localize_script( 'my-custom-theme-navigation', 'myThemeData', array(
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        'homeUrl' => home_url( '/' ),
    ));
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

wp_enqueue_scriptsเป็นฮุคที่ถูกต้องสำหรับการโหลดทรัพยากรที่ด้านหน้า ใช้get_stylesheet_uri()เพื่อรับธีมของstyle.cssเส้นทาง, ใช้get_template_directory_uri()เพื่อรับ URL ของไดเรกทอรีธีม การส่งหมายเลขเวอร์ชันเป็นพารามิเตอร์จะช่วยทำลายแคชเบราว์เซอร์หลังจากไฟล์ได้รับการอัปเดต

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

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

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

สร้างเทมเพลตหน้าคุณสมบัติพิเศษ

นอกจากเทมเพลตเริ่มต้น คุณสามารถสร้างเทมเพลตแบบกำหนดเองสำหรับหน้าเฉพาะได้ ซึ่งทำได้โดยเพิ่มคำอธิบายชื่อเทมเพลตพิเศษที่ด้านบนของไฟล์เทมเพลตใหม่ ตัวอย่างเช่น สร้างเทมเพลตชื่อ “หน้าแบบเต็มความกว้าง”:

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

<main id="primary" class="site-main full-width">
    &lt;?php
    while ( have_posts() ) :
        the_post();
        the_title( &#039;<h1 class="entry-title">', '</h1>' );
        the_content();
    endwhile;
    ?&gt;
</main>

&lt;?php
get_footer();

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

เขียน CSS ที่ตอบสนองและเป็นโมดูลาร์

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

ในขณะเดียวกัน รักษาโมดูลาร์และความสามารถในการบำรุงรักษาของ CSS สร้างโครงสร้างชื่อคลาสที่ชัดเจนสำหรับส่วนต่างๆ ของธีม (เช่น ส่วนหัว, การนำทาง, บทความ, ส่วนท้าย) เช่น การใช้วิธีวิทยา BEM (Block Element Modifier) การใช้body_class()和post_class()ชื่อคลาสที่สร้างขึ้นโดยฟังก์ชันสามารถลดความซับซ้อนของตัวเลือก CSS ของคุณได้อย่างมาก ทำให้หลีกเลี่ยงการซ้อนกันมากเกินไปและปัญหาความจำเพาะที่สูงเกินไป

/* 移动端基础样式 */
.site-header {
    padding: 1rem;
}
.entry-title {
    font-size: 1.5rem;
}

/* 平板设备及以上 */
@media (min-width: 768px) {
    .site-header {
        padding: 2rem;
        display: flex;
        justify-content: space-between;
    }
    .entry-title {
        font-size: 2rem;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    .site-main.full-width {
        max-width: 1200px;
        margin: 0 auto;
    }
}

สรุป

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

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

ธีมและปลั๊กอินแตกต่างกันอย่างไร?

ธีม (Theme) รับผิดชอบหลักในการควบคุมการแสดงผลด้านหน้าของเว็บไซต์ ซึ่งก็คือการออกแบบทางภาพและโครงร่างที่ผู้ใช้เห็น มันกำหนดสี แบบอักษร การจัดวาง โครงสร้างหน้า และอื่นๆ ของเว็บไซต์

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

จำเป็นต้องติดตั้งสภาพแวดล้อมท้องถิ่นก่อนที่จะพัฒนาเทมเพลตหรือไม่?

ใช่ ขอแนะนำให้ทำการพัฒนา WordPress Theme ในสภาพแวดล้อมการพัฒนาในเครื่อง (เช่น Local, XAMPP, MAMP หรือ Docker)

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

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

การทำให้ธีมรองรับหลายภาษา (Internationalization และ Localization) เกี่ยวข้องกับสองขั้นตอนหลัก ขั้นแรก ให้ใช้ฟังก์ชันแปลภาษา (translation functions) ของ WordPress ครอบข้อความทั้งหมดที่ต้องการแปลในธีมของคุณ ตัวอย่างเช่น ใช้esc_html_e(‘Hello World’, ‘my-custom-theme’)或__('Hello World', 'my-custom-theme')ฟังก์ชันเหล่านี้ พารามิเตอร์ที่สอง “my-custom-theme” คือชื่อของคุณในstyle.cssข้อความโดเมน (Text Domain) ที่กำหนดใน style.css ต้องสอดคล้องกัน

ประการที่สอง คุณจำเป็นต้องใช้เครื่องมือเช่น Poedit เพื่อสแกนสตริงที่สามารถแปลได้ทั้งหมดในธีม และสร้างไฟล์ .po.potไฟล์เทมเพลต จากนั้นสร้างไฟล์ที่ตรงกันสำหรับแต่ละภาษา.poและไฟล์ที่คอมไพล์แล้ว.moไฟล์ และวางไว้ในธีม/languages/ไดเรกทอรี สุดท้าย ในfunctions.phpใช้ฟังก์ชันload_theme_textdomain()ฟังก์ชันเพื่อโหลดไฟล์การแปล

ทำไมฉันแก้ไข style.css แล้วเว็บไซต์ไม่มีการเปลี่ยนแปลง?

โดยปกติแล้วเกิดจากแคชของเบราว์เซอร์ เบราว์เซอร์จะเก็บแคชไฟล์ CSS เพื่อเพิ่มความเร็วในการโหลด ส่งผลให้คุณอาจไม่ได้เห็นสไตล์ล่าสุด

คุณสามารถลองวิธีต่อไปนี้เพื่อแก้ไขปัญหา: ประการแรก ในwp_enqueue_style()ฟังก์ชัน เพิ่มพารามิเตอร์หมายเลขเวอร์ชันไดนามิกให้กับไฟล์สไตล์ เช่นเดียวกับตัวอย่างด้านบน ซึ่งจะทำให้ URL เปลี่ยนไปทุกครั้งที่ไฟล์อัปเดต บังคับให้เบราว์เซอร์ดาวน์โหลดใหม่ ประการที่สอง ในเบราว์เซอร์ กด Ctrl+F5 (หรือ Cmd+Shift+R) เพื่อรีเฟรชแบบแข็ง นอกจากนี้ ตรวจสอบว่าธีมของคุณเปิดใช้งานอย่างถูกต้องหรือไม่ และให้แน่ใจว่าคุณได้แก้ไขไฟล์style.cssของธีมที่เปิดใช้งานอยู่ในปัจจุบัน สุดท้าย ยืนยันว่า CSS selector ของคุณมีความเฉพาะเจาะจงเพียงพอที่จะทับสไตล์อื่นๆ ที่อาจมีอยู่

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

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

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

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

แท็ก: