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

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

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

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

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

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

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

แนะนำให้อ่าน คู่มือเจาะลึกการพัฒนา WordPress Theme: จากพื้นฐานสู่การเชี่ยวชาญด้วยเทคโนโลยีหลัก。

สร้างไฟล์ข้อมูลธีม

ในโฟลเดอร์ธีมของคุณ ให้สร้างstyle.cssไฟล์ และป้อนข้อมูลพื้นฐานต่อไปนี้:

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

คอมเมนต์นี้จำเป็น WordPress ใช้การอ่านTheme Nameบรรทัดนี้เพื่อระบุและแสดงธีมของคุณในรายการธีมหลังบ้าน ข้อมูลอื่น ๆ เช่นText Domainเป็นการเตรียมพร้อมสำหรับการแปลเป็นภาษาต่าง ๆ (การแปล)

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

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

<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
    <header>
        <h1><a href="/th/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                ?>
                <article>
                    <h2><a href="/th/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div><?php the_content(); ?></div>
                </article>
                &lt;?php
            endwhile;
        else :
            echo &#039;<p>暂无文章。</p>';
        endif;
        ?&gt;
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_foot(); ?>
</body>
</html>

โค้ดนี้ใช้หลายฟังก์ชันหลักของ WordPress模板标签ตัวอย่างเช่นbloginfo()、the_title()、the_content()ฟังก์ชันwp_head()和wp_foot()เป็นฮุคที่สำคัญซึ่งอนุญาตให้ WordPress Core, ปลั๊กอิน และสคริปต์อื่น ๆ แทรกโค้ดที่จำเป็นในส่วนหัวและส่วนท้ายของหน้า

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

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

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

เพื่อสร้างเทมเพลตสำหรับหน้าละเอียดโพสต์

เมื่อผู้ใช้เข้าชมบทความเดียว WordPress จะค้นหาอันดับแรกsingle-post.phpหากไม่มีอยู่ จะใช้single.phpและสุดท้ายคือindex.phpให้เราสร้างsingle.phpเพื่อควบคุมการแสดงผลของบทความเดียวโดยเฉพาะ

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
            <header class="entry-header">
                &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
                <div class="entry-meta">
                    发布于： | 作者：
                </div>
            </header>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
            <footer class="entry-footer">
                分类：
            </footer>
        </article>
        <?php
        // 上一篇/下一篇导航
        the_post_navigation();
        // 评论模板
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;
    endwhile;
    ?>
</main>

เทมเพลตนี้ได้แนะนำสามส่วนประกอบเทมเพลตที่สำคัญ:get_header()、get_sidebar()和get_footer()ใช้สำหรับการนำเข้าheader.php、sidebar.php和footer.phpไฟล์ นี่คือกุญแจสำคัญในการนำโค้ดกลับมาใช้ใหม่และการออกแบบโมดูลาร์

สร้างเทมเพลตหน้า

สำหรับหน้าเว็บแบบคงที่ (เช่น “เกี่ยวกับเรา”) WordPress จะมองหาpage.php. สร้างpage.phpโครงสร้างของมันเหมือนกับsingle.phpคล้ายกัน แต่โดยปกติจะไม่แสดงข้อมูลเมตา เช่น หมวดหมู่ แท็ก และเวลาเผยแพร่

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

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
            <header class="entry-header">
                &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
            </header>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
        <?php
    endwhile;
    ?>
</main>

การใช้งานฟังก์ชันและสไตล์ของธีม

ธีมที่สมบูรณ์ไม่เพียงต้องการไฟล์เทมเพลตเท่านั้น แต่ยังต้องผ่านfunctions.phpไฟล์เพื่อเพิ่มฟังก์ชัน ลงทะเบียนเมนู พื้นที่วิดเจ็ต และผ่านstyle.cssเพิ่มสไตล์

ไฟล์ฟังก์ชันธีม

สร้างที่ไดเรกทอรีรากของธีมของคุณfunctions.phpไฟล์นี้โหลดโดยอัตโนมัติเมื่อเริ่มต้นธีม ใช้สำหรับเก็บฟังก์ชัน PHP ที่กำหนดเองและฮุคทั้งหมด

<?php
/**
 * 我的第一个主题的功能函数
 */

// 添加主题支持功能
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像（缩略图）功能
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单
    register_nav_menus(
        array(
            'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
        )
    );
    // 添加HTML5标记支持
    add_theme_support(
        'html5',
        array(
            'search-form',
            'comment-form',
            'comment-list',
            'gallery',
            'caption',
            'style',
            'script',
        )
    );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册小工具侧边栏
function my_first_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          =&gt; esc_html__( '主侧边栏', 'my-first-theme' ),
            'id'            =&gt; 'sidebar-1',
            'description'   =&gt; esc_html__( '在此添加小工具。', 'my-first-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_first_theme_widgets_init' );

// 加载主题样式表和脚本
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
    // 加载通用CSS
    wp_enqueue_style( 'my-first-theme-main-style', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0' );
    // 加载通用JavaScript
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

เพิ่มสไตล์พื้นฐาน

ตอนนี้ ให้เราเพิ่ม CSS พื้นฐานเพื่อตกแต่งธีมของคุณ หลังจากส่วนหัวความคิดเห็นของstyle.cssหลังจากส่วนหัวของความคิดเห็น ให้เพิ่ม CSS พื้นฐานเพื่อตกแต่งธีมของคุณ

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

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

header {
    border-bottom: 2px solid #0073aa;
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.entry-title {
    color: #222;
}

.site-main {
    float: left;
    width: 70%;
}

/* 侧边栏样式 */
.widget-area {
    float: right;
    width: 25%;
    padding-left: 5%;
}

/* 页脚样式 */
footer {
    clear: both;
    border-top: 1px solid #ddd;
    margin-top: 60px;
    padding-top: 20px;
    text-align: center;
    color: #666;
}

การทำให้เป็นโมดูลและชิ้นส่วนเทมเพลต

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

สร้างส่วนประกอบส่วนหัวหน้าและส่วนท้ายหน้า

สร้างheader.phpประกอบด้วยจาก<!DOCTYPE html>เริ่มต้นจนถึงการเปิด<main>ทั้งหมดนี้

โฮสติ้งแบบแชร์ของ InterServer
共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本，一键安装。
โลโก้ InterServer เข้าถึงหน้าเว็บ 
<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
<?php wp_body_open(); ?>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#primary">ข้ามไปยังเนื้อหาหลัก</a>
    <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;
            $my_first_theme_description = get_bloginfo( 'description', 'display' );
            if ( $my_first_theme_description || is_customize_preview() ) :
                ?>
                <p class="site-description"><?php echo $my_first_theme_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
            <?php endif; ?>
        </div>
        <nav id="site-navigation" class="main-navigation">
            'primary',
                    'menu_id'        =&gt; 'primary-menu',
                )
            );
            ?&gt;
        </nav>
    </header>
    <div id="content" class="site-content">

ตามนั้น สร้างfooter.phpซึ่งรวมถึง</div><!-- #content -->เนื้อหาทั้งหมดหลังจาก

    </div><!-- #content -->
    <footer id="colophon" class="site-footer">
        <div class="site-info">
            <p>&lt;?php printf( esc_html__( &#039;主题：%1$s&#039;, &#039;my-first-theme&#039; ), &#039;<a href="https://example.com/">我的第一个主题</a>' ); ?&gt;</p>
        </div>
    </footer>
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

สร้างsidebar.phpเพื่อแสดงพื้นที่วิดเจ็ต

<?php
if ( is_active_sidebar( 'sidebar-1' ) ) :
    ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
    <?php
endif;
?>

หลังจากที่คุณสร้างวิดเจ็ตเหล่านี้เสร็จแล้ว คุณสามารถใช้get_header()、get_footer()和get_sidebar()ฟังก์ชันเพื่อเรียกใช้พวกเขาในไฟล์เทมเพลตทั้งหมดได้อย่างกระชับ

สรุป

ผ่านคู่มือนี้ คุณได้เสร็จสิ้นกระบวนการสร้างธีม WordPress พื้นฐานตั้งแต่เริ่มต้น คุณได้เรียนรู้วิธีการตั้งค่าสภาพแวดล้อมการพัฒนา สร้างไฟล์ธีมที่จำเป็น (style.css和index.php），และเข้าใจระบบลำดับชั้นของเทมเพลตของ WordPress อย่างลึกซึ้ง จึงสามารถสร้างเทมเพลตเฉพาะสำหรับประเภทหน้าต่างๆ (เช่น บทความ, หน้า) ได้ (single.php， page.php). คุณได้เรียนรู้การเพิ่มฟังก์ชันหลักให้กับธีมผ่านไฟล์functions.phpเช่น การลงทะเบียนเมนู, วิดเจ็ต และการรองรับภาพเด่น. สุดท้าย คุณได้ฝึกฝนแนวคิดการพัฒนาแบบโมดูลาร์ โดยแยกส่วนหัวหน้า, ส่วนท้ายหน้า และแถบด้านข้างออกเป็นส่วนประกอบเทมเพลตที่นำกลับมาใช้ใหม่ได้ (header.php， footer.php， sidebar.php), ซึ่งช่วยเพิ่มความสะดวกในการบำรุงรักษาโค้ดได้อย่างมาก. นี่เป็นเพียงจุดเริ่มต้นเท่านั้น จากพื้นฐานนี้ คุณสามารถสำรวจเพิ่มเติมเกี่ยวกับประเภทบทความที่กำหนดเอง, ตัวเลือกธีมขั้นสูง, การออกแบบที่ตอบสนองต่ออุปกรณ์ต่างๆ และการโต้ตอบด้วย JavaScript เพื่อสร้างธีม WordPress ที่มีประสิทธิภาพสูงและออกแบบอย่างมืออาชีพได้อย่างค่อยเป็นค่อยไป.

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

ทำไมธีมของฉันไม่แสดงในแอดมิน?

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

วิธีการเพิ่มการรองรับโลโก้ที่กำหนดเองให้กับธีมของฉัน?

ในของคุณfunctions.phpไฟล์my_first_theme_setupในฟังก์ชัน เพิ่มโค้ดบรรทัดเดียว:add_theme_support( 'custom-logo' );หลังจากเพิ่ม ผู้ใช้จะสามารถอัปโหลดและตั้งค่าโลโก้ได้ใน WordPress backend ภายใต้ “รูปลักษณ์”->“ปรับแต่ง”->“ข้อมูลประจำตัวไซต์” คุณต้องใช้header.phpใช้ฟังก์ชันthe_custom_logo()ฟังก์ชันเพื่อแสดงผลโลโก้

หลังจากแก้ไขไฟล์ functions.php แล้วเว็บไซต์แสดงหน้าขาวว่างควรทำอย่างไร?

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

วิธีทำให้ธีมของฉันรองรับการแปลหลายภาษา

คุณได้ตั้งค่าไว้แล้วstyle.cssในText Domain(ช่องข้อความ) และใช้ในfunctions.phpสตริงของesc_html__( ‘文本’， ‘my-first-theme’ )ฟังก์ชันการแปลเช่นนี้ ต่อไปคุณต้องใช้เครื่องมือเช่น Poedit เพื่อสแกนสตริงที่สามารถแปลได้ในไฟล์ธีม สร้าง.potไฟล์เทมเพลต จากนั้นสร้างไฟล์ที่ตรงกันสำหรับแต่ละภาษา.po和.moไฟล์ และวางไว้ในธีม/languagesโฟลเดอร์ WordPress จะโหลดการแปลที่เกี่ยวข้องโดยอัตโนมัติตามการตั้งค่าภาษาของไซต์

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

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

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

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

แท็ก: