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

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

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

การเตรียมตัว: ทำความเข้าใจโครงสร้างหัวข้อและไฟล์พื้นฐาน

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

ไฟล์เทมเพลตหลักประกอบด้วย:
* index.php: ไฟล์เทมเพลตหลักของธีม เป็นเทมเพลตสำรองเริ่มต้นสำหรับทุกหน้าเว็บไซต์
* style.css: สไตล์ชีตหลักของธีม ไม่เพียงแต่ประกอบด้วยกฎ CSS เท่านั้น แต่ยังมีข้อมูลเมตาของธีมที่กำหนดไว้ในส่วนหัวของไฟล์ เช่น ชื่อธีม, ผู้เขียน, คำอธิบาย ฯลฯ ซึ่งเป็นสิ่งที่ WordPress ใช้ในการระบุธีม
* header.php: เทมเพลตส่วนหัวของเว็บไซต์ โดยทั่วไปประกอบด้วย<head>ส่วน, โลโก้เว็บไซต์ และเมนูนำหลัก
* footer.php: เทมเพลตส่วนท้ายของเว็บไซต์ โดยทั่วไปประกอบด้วยข้อมูลลิขสิทธิ์, พื้นที่วิดเจ็ต ฯลฯ
* functions.php: ไฟล์ฟังก์ชันของธีม ใช้สำหรับเพิ่มฟังก์ชันของธีม, จดทะเบียนเมนู, พื้นที่วิดเจ็ต และรวมไฟล์ PHP อื่น ๆ

นอกจากนี้ยังมีเทมเพลตสำหรับหน้าเฉพาะ เช่น single.php(โพสต์เดี่ยว)page.php(หน้าเดี่ยว)archive.php(หน้าเก็บถาวรบทความ) เป็นต้น การเข้าใจหน้าที่ของไฟล์เหล่านี้เป็นพื้นฐานในการสร้างธีม

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

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

การตั้งค่าสภาพแวดล้อมการพัฒนาก็มีความสำคัญเช่นกัน คุณต้องมีสภาพแวดล้อม PHP พัฒนาในเครื่อง (เช่น XAMPP, Local by Flywheel หรือ DevKinsta) ตัวแก้ไขโค้ด (เช่น VS Code, PhpStorm) และต้องแน่ใจว่า WordPress ที่ติดตั้งในเครื่องของคุณเป็นเวอร์ชันล่าสุด

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

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

ต่อไป เราจะสร้างไฟล์แรกและเป็นไฟล์ที่จำเป็น:style.cssที่ด้านบนของไฟล์นี้ คุณต้องเพิ่มคอมเมนต์เฉพาะเพื่อบอก WordPress ว่าเป็นธีมของคุณ

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个用于学习WordPress主题开发的入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

ตอนนี้ ให้สร้างไฟล์ที่จำเป็นที่สอง:index.phpในขั้นเริ่มต้น เราสามารถทำให้มันง่ายมาก เพียงแค่แสดงโครงสร้าง HTML พื้นฐาน

<!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>
    <header>
        <h1>ยินดีต้อนรับสู่ WordPress Theme แรกของฉัน!</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>© สงวนลิขสิทธิ์</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

ในตอนนี้ หากคุณเข้าไปที่ “รูปลักษณ์” -> “ธีม” ในแอดมิน WordPress คุณควรจะเห็น “ธีมแรกของฉัน” และสามารถเปิดใช้งานได้ เมื่อเปิดใช้งานแล้วและเข้าชมหน้าแรกของเว็บไซต์ คุณจะเห็นเนื้อหาบทความถูกห่อหุ้มในหน้า HTML พื้นฐานมาก

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

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

สร้างเทมเพลตหลักและฟังก์ชันการทำงาน

เพื่อให้โครงสร้างของธีมมีความชัดเจนมากขึ้น เราจำเป็นต้องแยกindex.phpออกเป็นส่วนที่สามารถนำกลับมาใช้ใหม่ได้ซึ่งมีขนาดเล็กกว่า เริ่มต้นด้วยการสร้าง header.php ที่อยู่ในไดเรกทอรีรูทของ WordPress เปลี่ยน<head>ส่วนและเนื้อหาหัวหน้าไปยัง

<!DOCTYPE html>
<html no numeric noise key 1012>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1009>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( is_front_page() && is_home() ) :
            ?>
            <h1 class="site-title"><a href="/th/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <?php
        else :
            ?>
            <p class="site-title"><a href="/th/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
            <?php
        endif;
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
                'menu_id'        =&gt; 'primary-menu',
            )
        );
        ?&gt;
    </nav>
</header>

จากนั้น สร้าง footer.php ไฟล์สำหรับภาษาต่างๆ ได้

<footer id="colophon" class="site-footer">
    <div class="site-info">
        <p><?php echo esc_html__( '由WordPress驱动', 'my-first-theme' ); ?></p>
    </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

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

<?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(
            'menu-1' => esc_html__( '主导航', 'my-first-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册前端样式表
function my_first_theme_scripts() {
    // 主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 主JavaScript文件（如果存在）
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

สุดท้าย, ปรับโครงสร้าง index.phpของคุณ, ใช้แท็กเทมเพลต WordPress เพื่อนำเข้าเฮดเดอร์และฟุตเตอร์

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

เพิ่มสไตล์และฟังก์ชันการโต้ตอบ

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

โฮสติ้งแบบแชร์ของ InterServer
共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本，一键安装。
โลโก้ InterServer เข้าถึงหน้าเว็บ 
/* 基础样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
}
.site-header {
    background: #fff;
    padding: 1rem 2rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-navigation ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.main-navigation li {
    margin-left: 1.5rem;
}
.site-main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.site-footer {
    text-align: center;
    padding: 2rem;
    color: #666;
    border-top: 1px solid #eee;
}

เพื่อจัดการกับการนำทางบนมือถือ เราสามารถสร้างไฟล์ JavaScript อย่างง่าย สร้างในไดเรกทอรีรากของธีม /js/navigation.js。

แนะนำให้อ่าน คู่มือการพัฒนา WordPress Plugins ฉบับสมบูรณ์: บทเรียนปฏิบัติจริงตั้งแต่พื้นฐานจนถึงการเผยแพร่。

// 简单的移动端菜单切换示例
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.createElement('button');
    menuToggle.textContent = '菜单';
    menuToggle.classList.add('menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');
    if (primaryMenu) {
        primaryMenu.parentNode.insertBefore(menuToggle, primaryMenu);
        menuToggle.addEventListener('click', function() {
            primaryMenu.classList.toggle('show');
        });
    }
});

และเพิ่มสไตล์ที่เกี่ยวข้องใน CSS:

.menu-toggle {
    display: none;
    background: #007cba;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    .main-navigation ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .main-navigation ul.show {
        display: flex;
    }
}

สรุป

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

ธีมนี้มีคุณสมบัติพื้นฐานของธีม WordPress รุ่นใหม่: รองรับแท็กหัวเรื่อง ภาพเด่น เมนูนำทาง และมีโครงร่างการออกแบบที่ตอบสนองต่ออุปกรณ์ต่างๆ จากจุดเริ่มต้นนี้ คุณสามารถสำรวจการสร้างต่อไปได้single.php、page.phpและไฟล์เทมเพลตอื่น ๆ อีกมากมาย นำเฟรมเวิร์ก CSS ที่ซับซ้อนมากขึ้นมาใช้ (เช่น Bootstrap) หรือใช้ WordPress REST API เพื่อสร้างส่วนหน้าที่ไดนามิกมากขึ้น โลกของการพัฒนาเทมนั้นกว้างใหญ่และน่าสนใจ สิ่งสำคัญคือการลงมือปฏิบัติและปรับปรุงอย่างต่อเนื่อง

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

ทำไมธีมของฉันถึงไม่แสดงในรายการ “ธีม” ในแอดมิน?

กรุณาตรวจสอบโฟลเดอร์ธีมของคุณก่อนว่าวางไว้ในเส้นทางที่ถูกต้อง:wp-content/themes/ประการที่สอง ตรวจสอบให้แน่ใจว่าstyle.cssบล็อกความคิดเห็นข้อมูลธีมที่ด้านบนของไฟล์ต้องมีรูปแบบที่ถูกต้องสมบูรณ์ โดยเฉพาะบรรทัด “Theme Name:” เป็นสิ่งที่จำเป็น ข้อผิดพลาดในการสะกดหรือปัญหาการจัดรูปแบบใดๆ อาจทำให้ WordPress ไม่สามารถจดจำธีมนั้นได้

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

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

函数 get_template_part() 有什么用？

get_template_part()เป็นแท็กเทมเพลตที่มีประสิทธิภาพมาก ใช้สำหรับโหลดส่วนของโค้ดที่นำกลับมาใช้ใหม่ได้ในธีม ตัวอย่างเช่น การเรียกใช้ในลูปget_template_part( 'template-parts/content', get_post_type() );จะพยายามโหลดtemplate-parts/content-post.php(สมมติว่าประเภทบทความคือpost), หากล้มเหลวจะโหลดtemplate-parts/content.phpนี่ช่วยเพิ่มความสามารถในการปรับปรุงและบำรุงรักษาโค้ดได้อย่างมาก

เมื่อพัฒนาเทมเพลต จะแน่ใจได้อย่างไรว่ามันสอดคล้องกับมาตรฐานการเขียนโค้ดของ WordPress

WordPress กำหนดมาตรฐานการเขียนโค้ดอย่างละเอียดสำหรับ PHP, HTML, CSS และ JavaScript ขอแนะนำให้ติดตั้งเครื่องมือ linting ที่เกี่ยวข้องในโปรแกรมแก้ไขโค้ดของคุณ (เช่น PHP_CodeSniffer พร้อมกฎมาตรฐานการเขียนโค้ดของ WordPress, ESLint เป็นต้น) พร้อมทั้งอ้างอิงเอกสารมาตรฐานการเขียนโค้ดในคู่มือทางการของ WordPress เป็นประจำ และบังคับใช้มาตรฐานเหล่านี้ในการพัฒนาทีม เพื่อรับประกันคุณภาพและความสม่ำเสมอของโค้ด

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

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

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

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

แท็ก: