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

WordPress Theme Development for Beginners: สร้างธีมแรกของคุณตั้งแต่ศูนย์จนสำเร็จ

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

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

ก่อนเริ่มเขียนโค้ดใด ๆ คุณต้องมีสภาพแวดล้อมการพัฒนาที่เหมาะสม ซึ่งรวมถึงสภาพแวดล้อมเซิร์ฟเวอร์ท้องถิ่น (เช่น XAMPP, Local by Flywheel หรือ MAMP) และโปรแกรมแก้ไขโค้ด (เช่น VS Code, Sublime Text หรือ PHPStorm) ตรวจสอบให้แน่ใจว่าสภาพแวดล้อมท้องถิ่นของคุณติดตั้ง PHP, MySQL และ Apache/Nginx แล้ว

ต่อไป คุณต้องสร้างโฟลเดอร์ใหม่ในไดเรกทอรีwp-content/themes/ของเซิร์ฟเวอร์ท้องถิ่นของคุณ ชื่อของโฟลเดอร์นี้คือชื่อธีมของคุณ เช่นmy-first-themeนี่คือ “บ้าน” ของไฟล์ธีมทั้งหมดของคุณ

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

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

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

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

UltaHost WordPress โฮสติ้ง
การรับประกันคืนเงินภายใน 30 วัน, แบนด์วิธและฐานข้อมูลไม่จำกัด, การป้องกัน DDoS ฟรี, ซื้อ 3 ปีลดราคา 50%
โลโก้ UltaHost เข้าถึงหน้าเว็บ 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个用于学习WordPress主题开发的简单入门主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

ข้อมูลเหล่านี้จะปรากฏในหน้า “รูปลักษณ์” -> “ธีม” ในแอดมิน WordPressText Domainสำหรับการทำให้เป็นสากล เป็นตัวระบุสำคัญสำหรับการโหลดไฟล์แปลในภายหลัง

สร้างเทมเพลตดัชนีพื้นฐาน

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

<?php get_header(); ?>
<h1>สวัสดีครับโลกของธีม WordPress!</h1>
<?php get_footer(); ?>

get_header()和get_footer()เป็นฟังก์ชันเทมเพลตของ WordPress ซึ่งจะพยายามโหลดไฟล์ชื่อheader.php和footer.phpแม้ว่าเรายังไม่ได้สร้างมัน แต่การเขียนแบบนี้เป็นวิธีปฏิบัติมาตรฐาน ตอนนี้คุณสามารถเข้าสู่ระบบหลังบ้านของ WordPress และไปที่ “รูปลักษณ์” -> “ธีม” เพื่อค้นหาและเปิดใช้งาน “ธีมแรกของฉัน” ได้แล้ว รีเฟรชหน้าแรกของเว็บไซต์ คุณจะเห็นข้อความ “Hello, WordPress Theme World!”

ทำความเข้าใจลำดับชั้นของเทมเพลตและการสร้างไฟล์หลัก

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

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

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

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

header.phpไฟล์มักประกอบด้วยส่วนหัวของเอกสาร HTML (<head>) และพื้นที่สาธารณะด้านบนของเว็บไซต์ เช่น โลโก้และเมนูนำทาง สร้างheader.phpไฟล์:

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

นี่คือฟังก์ชันหลักบางส่วน:wp_head()ฮุ๊กอนุญาตให้ WordPress core, ปลั๊กอิน และธีมสามารถแทรกโค้ดที่จำเป็น (เช่น ลิงก์สไตล์ชีต) เข้าไปใน<head>พื้นที่ได้ด้วยตนเองbody_class()จะแสดงชุดของชื่อคลาส CSS เพื่อให้คุณสามารถควบคุมสไตล์ตามหน้าเว็บที่แตกต่างกันได้wp_nav_menu()ใช้สำหรับแสดงเมนูนำทาง

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

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

footer.phpไฟล์นี้มักจะประกอบด้วยพื้นที่ส่วนท้ายสาธารณะของเว็บไซต์ เช่น ข้อมูลลิขสิทธิ์ และปิดในheader.phpแท็บที่เปิดอยู่ สร้างfooter.php：

    </main><!-- #main-content -->
    <footer id="site-footer">
        <div class="container">
            <p>©  . All rights reserved.</p>
        </div>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

wp_footer()与wp_head()คล้ายกัน เป็นฮุคสำคัญที่ใช้ในการแทรกสคริปต์หรือโค้ดก่อน</body>แท็บ

ตอนนี้ กลับไปที่คุณindex.phpอัปเดตเป็นใช้ไฟล์ส่วนหัวและส่วนท้ายที่เราสร้างใหม่:

แนะนำให้อ่าน วิธีเลือกและปรับแต่งธีม WordPress ที่เป็นมิตรกับ SEO。

<article>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    </article>
<?php endwhile; else : ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>

โค้ดนี้ประกอบด้วยลูปหลัก (The Loop) ของธีม WordPress ซึ่งจะตรวจสอบว่าหน้าปัจจุบันมีโพสต์หรือไม่ จากนั้นจะวนลูปแสดงหัวข้อและเนื้อหาของแต่ละโพสต์

เพิ่มฟังก์ชันของธีมผ่านไฟล์ฟังก์ชัน

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

โฮสติ้งแบบแชร์ของ InterServer
共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本，一键安装。
โลโก้ InterServer เข้าถึงหน้าเว็บ 
<?php
/**
 * My First Theme 的功能函数文件
 */

// 主题基础设置
if ( ! function_exists( 'my_first_theme_setup' ) ) :
    function my_first_theme_setup() {
        // 让WordPress管理文档标题
        add_theme_support( 'title-tag' );
        // 启用文章和页面的特色图片功能
        add_theme_support( 'post-thumbnails' );
        // 注册一个主导航菜单
        register_nav_menus( array(
            'primary' => esc_html__( 'Primary Menu', 'my-first-theme' ),
        ) );
        // 为文章摘录添加HTML支持
        add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
    }
endif;
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 修改摘录末尾的“更多”链接样式
function my_first_theme_excerpt_more( $more ) {
    return '...';
}

// 注册并加载样式表
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载一个自定义样式表
    wp_enqueue_style( 'my-first-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

ไฟล์ฟังก์ชันนี้ทำสิ่งสำคัญหลายอย่าง: 1) ผ่านadd_theme_support()เปิดใช้งานฟังก์ชันที่ใช้บ่อยในธีม WordPress รุ่นใหม่ 2) ผ่านregister_nav_menus()ลงทะเบียนตำแหน่งเมนู ซึ่งเมนูที่เราสร้างไว้ก่อนหน้าในheader.phpที่เรียกใช้primaryจะสามารถถูกกำหนดได้ในหลังบ้านภายใต้ “รูปลักษณ์” -> “เมนู” 3) ใช้ไฟล์wp_enqueue_style()ฟังก์ชันเพิ่มสไตล์ชีตลงในคิวอย่างถูกต้องและปลอดภัยตามการพึ่งพา

สร้างเทมเพลตโพสต์เดี่ยว

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

<?php get_header(); ?>

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
        <div class="entry-meta">
            <?php 
            printf( 
                esc_html__( '发布于 %s', 'my-first-theme' ), 
                get_the_date() 
            );
            ?>
        </div>
        <?php if ( has_post_thumbnail() ) : ?>
            <div class="post-thumbnail">
                <?php the_post_thumbnail( 'large' ); ?>
            </div>
        <?php endif; ?>
    </header>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
</article>

<?php get_footer(); ?>

แม่แบบนี้แสดงรายละเอียดข้อมูลบทความอย่างละเอียดยิ่งขึ้น เช่น วันที่เผยแพร่และภาพเด่น (หากตั้งค่าไว้)post_class()ฟังก์ชันจะแสดงคลาส CSS ที่ออกแบบมาสำหรับประเภทบทความ

เพิ่มการออกแบบพื้นฐานและการออกแบบที่ตอบสนองต่ออุปกรณ์

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

ในของคุณstyle.cssไฟล์ (ใต้ส่วนหัวข้อมูลธีม) เพิ่มสไตล์ต่อไปนี้:

/* 基础重置与排版 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
#site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}
#site-header h1 a {
    color: #333;
    text-decoration: none;
}

/* 导航菜单 */
#primary-menu {
    display: flex;
    list-style: none;
}
#primary-menu li {
    margin-right: 1rem;
}
#primary-menu a {
    text-decoration: none;
    color: #555;
}

/* 主内容区 */
#main-content {
    padding: 2rem 0;
}
article {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 底部样式 */
#site-footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    #primary-menu {
        flex-direction: column;
    }
    #primary-menu li {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    article {
        padding: 1rem;
    }
}

สไตล์เหล่านี้ให้เอฟเฟกต์ภาพที่ชัดเจน ทันสมัย และมีเค้าโครงพื้นฐานที่ตอบสนองต่ออุปกรณ์หน้าจอเล็ก คุณสามารถสร้าง/assets/css/custom.cssเพื่อเก็บสไตล์ที่ปรับแต่งเพิ่มเติม ซึ่งได้ถูกบรรจุไว้ในfunctions.phpกำลังถูกโหลดในคิว

สรุป

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

นี่เป็นเพียงจุดเริ่มต้น ต่อไป คุณสามารถสำรวจการสร้างไฟล์เทมเพลตเพิ่มเติม (เช่นpage.php、archive.php、404.php), ศึกษาระบบฮุค (Hooks) และแอ็กชัน (Actions)/ฟิลเตอร์ (Filters) ของ WordPress ให้ลึกซึ้งยิ่งขึ้น และค้นคว้าวิธีทำให้ธีมของคุณรองรับวิดเจ็ต (Widgets) และตัวปรับแต่ง (Customizer) ฝึกฝนและสำรวจอย่างต่อเนื่อง คุณจะกลายเป็นนักพัฒนา WordPress Theme ที่เชี่ยวชาญ

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

จะแก้ไขโลโก้ธีมอย่างไร?

在header.php文件中，找到显示网站标题的代码行。你可以用一个`

`标签替换bloginfo( ‘name’ )，并链接到你的Logo图片。更专业的做法是在functions.phpใช้ฟังก์ชันadd_theme_support( ‘custom-logo’ )เพื่อสนับสนุนฟังก์ชันการอัปโหลดโลโก้ในตัวปรับแต่ง WordPress

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

ก่อนอื่น โปรดตรวจสอบให้แน่ใจว่าคุณได้functions.phpผ่านทางregister_nav_menus()ลงทะเบียนตำแหน่งเมนู (เช่นprimary）。จากนั้นคุณต้องเข้าสู่ระบบ WordPress แดชบอร์ด ไปที่หน้า “รูปลักษณ์” -> “เมนู” สร้างเมนูใหม่ เลือกรายการเมนู และในส่วน “ตำแหน่งที่แสดง” ให้เลือกตำแหน่งเมนูที่คุณลงทะเบียนไว้ (เช่น “เมนูหลัก”) และบันทึกเมนู

วิธีการเพิ่มแถบด้านข้างให้กับธีม?

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

จำเป็นต้องใช้ hook เพื่อติดตั้งการดำเนินการในไฟล์ functions.php หรือไม่

ใช่ ในกรณีส่วนใหญ่ เพื่อให้แน่ใจว่ารหัสทำงานในเวลาที่เหมาะสม คุณควรห่อหุ้มโค้ดฟังก์ชันภายในฟังก์ชันและติดตั้งผ่าน hook เฉพาะ (เช่นafter_setup_theme、wp_enqueue_scripts) การเขียนโดยตรงในfunctions.phpโค้ดที่อยู่ในขอบเขตทั่วโลกอาจดำเนินการในเวลาที่ไม่เหมาะสมหรือทำให้เกิดข้อผิดพลาด

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

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

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

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

แท็ก: