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

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

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

การเตรียมพื้นฐาน

ก่อนที่จะเริ่มเขียนโค้ด สภาพแวดล้อมที่เหมาะสมและความเข้าใจพื้นฐานเป็นรากฐานของความสำเร็จ อันดับแรก คุณต้องมีสภาพแวดล้อมการพัฒนาท้องถิ่น คุณสามารถเลือกแพ็คเกจซอฟต์แวร์แบบรวม เช่น XAMPP, MAMP หรือ Local by Flywheel ซึ่งสามารถกำหนดค่า PHP, MySQL และเว็บเซิร์ฟเวอร์ให้คุณได้อย่างรวดเร็ว แน่นอน คุณยังสามารถเลือกวิธีที่ยืดหยุ่นกว่าได้ โดยการสร้างสภาพแวดล้อมด้วยตนเองในเครื่องท้องถิ่น ตรวจสอบให้แน่ใจว่าเวอร์ชัน PHP ของคุณอยู่ที่ 7.4 ขึ้นไป และ MySQL อยู่ที่ 5.6 ขึ้นไป

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

สร้างไฟล์หลักของธีม

เขียนส่วนหัวสไตล์ชีตของธีม

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

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

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个入门级的自定义 WordPress 主题，用于学习开发。
Version: 1.0.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
*/

โดย “Text Domain” ใช้สำหรับการทำให้เป็นสากล ซึ่งเราจะใช้ฟังก์ชัน __() 或 _e() เพื่อให้ข้อความในธีมรองรับการแปลหลายภาษา

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

สร้างไฟล์เทมเพลตพื้นฐาน

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

<!DOCTYPE html>
<html no numeric noise key 1022>
<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 1019>
    <?php wp_body_open(); ?>
    <header id="site-header">
        <h1><a href="/th/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main id="main-content">
        
                <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
                    <h2><a href="/th/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="entry-content">
                        <?php the_content(); ?>
                    </div>
                </article>
            
            <p><?php _e( '抱歉，没有找到任何文章。', 'my-first-theme' ); ?></p>
        <?php endif; ?>
    </main>

<?php get_sidebar(); ?>

<footer id="site-footer">
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

เทมเพลตนี้ใช้ฟังก์ชันหลักหลายตัวของ WordPress เช่น wp_head(), the_title(), the_content()ฟังก์ชัน get_sidebar() ฟังก์ชัน sidebar.php จะพยายามโหลดไฟล์เทมเพลตชื่อ

การใช้งานเทมเพลตระดับและฟังก์ชันการทำงาน

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

เพิ่มการสนับสนุนรูปภาพเด่นของบทความ

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

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

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

if ( ! function_exists( 'my_first_theme_setup' ) ) :
    function my_first_theme_setup() {
        // 让 WordPress 管理标题标签
        add_theme_support( 'title-tag' );

// 启用文章特色图像支持
        add_theme_support( 'post-thumbnails' );
        // 为文章和页面设置默认特色图像尺寸
        set_post_thumbnail_size( 1200, 800, true );

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

นำเข้าไฟล์สไตล์และสคริปต์

การเพิ่มไฟล์ CSS และ JavaScript เข้าคิวอย่างถูกต้องเป็นแนวทางปฏิบัติที่ดีที่สุดในการพัฒนา WordPress เนื่องจากหลีกเลี่ยงความขัดแย้งของทรัพยากรและการโหลดซ้ำซ้อน เราทำสิ่งนี้ผ่าน wp_enqueue_style() 和 wp_enqueue_script() ฟังก์ชัน ใน functions.php เพิ่มฟังก์ชันใหม่ใน

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

// 如果评论功能开启且有评论，加载评论回复脚本
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

หัวข้อขั้นสูงและแนวทางปฏิบัติที่ดีที่สุด

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

แยกเทมเพลตส่วนหัวและส่วนท้าย

สร้าง header.php 和 footer.php ไฟล์ ย้ายเนื้อหาทั้งหมดก่อนแท็ก index.php 中 <body> ไปยัง header.phpย้ายส่วนของ </body> ไปยัง footer.phpจากนั้นลดความซับซ้อนของ index.php เดิมเป็น:

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

<main id="main-content">
        
                <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
                    <?php if ( has_post_thumbnail() ) : ?>
                        <div class="post-thumbnail">
                            <?php the_post_thumbnail(); ?>
                        </div>
                    <?php endif; ?>
                    <h2><a href="/th/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="entry-content">
                        <?php the_content(); ?>
                    </div>
                </article>
            
            <p><?php _e( '抱歉，没有找到任何文章。', 'my-first-theme' ); ?></p>
        <?php endif; ?>
    </main>

สร้างเทมเพลตแถบด้านข้าง

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

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

จากนั้น ใน sidebar.php เรียกใช้มันใน

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

สรุป

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

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

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

ธีมของฉันไม่แสดงในแถบด้านหลังควรทำอย่างไร?

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

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

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

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

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

หากต้องการสร้างเทมเพลตหน้าคุณเอง ขั้นแรกให้สร้างไฟล์ PHP ใหม่ในไดเรกทอรีธีมของคุณ เช่น template-fullwidth.phpที่ด้านบนสุดของไฟล์นี้ ให้เพิ่มคำอธิบายเทมเพลตเฉพาะดังนี้:

<?php
/**
 * Template Name: 全宽页面
 */

จากนั้น คุณสามารถเขียนโค้ด HTML และ PHP ของคุณในไฟล์นี้ อย่าลืมใช้ฟังก์ชันเช่น get_header(), get_footer() หลังจากบันทึกแล้ว เมื่อแก้ไขหรือสร้างหน้าในแอดมิน WordPress คุณจะสามารถมองเห็นและเลือก “หน้าความกว้างเต็ม” ในเมนูแบบเลื่อนลง “เทมเพลต” ภายใต้ “คุณสมบัติหน้า” ได้

主题开发中 get_template_part() 函数有什么用？

get_template_part() ฟังก์ชันเป็นเครื่องมือที่มีประสิทธิภาพในการพัฒนา WordPress Theme สำหรับการแยกส่วนโค้ดออกเป็นโมดูล หน้าที่ของมันคือการโหลดส่วนเทมเพลตเฉพาะในธีมของคุณ ตัวอย่างเช่น ในลูป คุณสามารถใช้ get_template_part( 'content', get_post_format() ); เพื่อโหลด content.php หรือเจาะจงมากขึ้นเช่น content-video.php ไฟล์ สิ่งนี้ช่วยเพิ่มการนำโค้ดกลับมาใช้ใหม่และความสามารถในการบำรุงรักษาอย่างมาก ทำให้คุณสามารถสร้างเทมเพลตการแสดงผลที่แตกต่างกันสำหรับเนื้อหาบทความประเภทต่างๆ ได้อย่างง่ายดาย

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

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

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

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

แท็ก: