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

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

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

เข้าใจโครงสร้างหลักของธีม WordPress

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

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

/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

นอกจากไฟล์หลัก โครงสร้างธีมทั่วไปยังรวมถึงheader.php(ส่วนหัวของเว็บไซต์),footer.php(ส่วนท้ายของเว็บไซต์),sidebar.php(แถบด้านข้าง) และfunctions.php(ไฟล์ฟังก์ชันธีม) การเข้าใจวิธีการรวมไฟล์เหล่านี้เข้าด้วยกันอย่างเป็นโมดูลาร์ผ่านแท็กเทมเพลต (เช่นget_header(), get_footer()) เป็นกุญแจสำคัญในการพัฒนาอย่างมีประสิทธิภาพ

แนะนำให้อ่าน WordPress คู่มือเริ่มต้นการพัฒนาเทมเพลต: สร้างอินเทอร์เฟซเว็บไซต์เฉพาะของคุณตั้งแต่เริ่มต้น。

สร้างไฟล์และไดเรกทอรีของธีม

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

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

สร้างไฟล์สไตล์ชีตหลัก

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

/* 在 style.css 的头部注释块之后 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
}

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

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

<?php get_header(); ?>

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

แยกส่วนเทมเพลต: ส่วนหัว, ส่วนท้าย และแถบด้านข้าง

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

สร้างเทมเพลตส่วนหัวของเว็บไซต์

สร้างheader.php。这个文件包含HTML文档的头部（到标签的开启部分），以及网站顶部的导航区域。关键模板标签包括bloginfo()用于获取站点信息，以及wp_head()钩子，它允许插件和主题在部分注入代码。
พื้นฐานของheader.phpตัวอย่าง:

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

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>
<?php wp_body_open(); ?>
<header class="site-header">
    <div class="site-branding">
        <h1 class="site-title"><a href="/th/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p class="site-description"><?php bloginfo('description'); ?></p>
    </div>
    <nav class="main-navigation">
        'primary',
            'menu_id'        =&gt; 'primary-menu',
        ));
        ?&gt;
    </nav>
</header>

ดำเนินการเทมเพลตส่วนท้ายของเว็บไซต์

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

<footer class="site-footer">
    <p>©  . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

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

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

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

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

hosting.com 共享主机
高性能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候24小时、全天候的专家内部支持，高级安全措施，包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 73%
โลโก้ Hosting.com เข้าถึงหน้าเว็บ 
<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章特色图像
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主菜单', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?>

แทรกสไตล์ชีตและสคริปต์

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

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入主JavaScript文件
    wp_enqueue_script('my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

สรุป

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

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

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

แนะนำให้อ่าน จากศูนย์สู่หนึ่ง: คู่มือขั้นสูงสุดและการปฏิบัติจริงในการพัฒนา WordPress Theme。

จะเพิ่มพื้นที่วิดเจ็ตให้กับธีมของฉันได้อย่างไร?

คุณจำเป็นต้องผ่านfunctions.phpไฟล์เพื่อลงทะเบียนพื้นที่ของวิดเจ็ต (แถบด้านข้าง) ใช้register_sidebar()ฟังก์ชัน และระบุพารามิเตอร์ของมัน เช่น ชื่อ, ID และคำอธิบาย หลังจากนั้น คุณสามารถเรียกใช้มันในไฟล์เทมเพลตที่เกี่ยวข้อง (เช่นsidebar.php) ใช้ฟังก์ชันdynamic_sidebar()ฟังก์ชันเพื่อเรียกใช้มัน

ทำไมเมนูนำทางที่กำหนดเองของฉันไม่แสดง?

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

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

我应该在什么时候使用get_template_part()函数？

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

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

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

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

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

แท็ก: