คู่มือการพัฒนา WordPress Theme ฉบับปฏิบัติจริง: สร้างธีมสมัยใหม่แบบ Responsive ตั้งแต่เริ่มต้น

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

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

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

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

โครงสร้างไดเรกทอรี Theme มาตรฐานและชัดเจนเป็นรากฐานสำคัญของความสามารถในการบำรุงรักษาโครงการ ภายใต้wp-content/themesไดเรกทอรีของ WordPress ให้สร้างโฟลเดอร์ที่ตั้งชื่อตามชื่อ Theme ของคุณ เช่นmy-modern-theme。ในโฟลเดอร์นี้ คุณต้องสร้างไฟล์หลักสองไฟล์:style.cssindex.phpโดยที่style.cssไม่ใช่เพียงสไตล์ชีต แต่ยังบรรจุข้อมูลเมตาของธีมด้วย ไฟล์และไดเรกทอรีอื่นๆ เช่น สำหรับเก็บสคริปต์ JavaScript/jsสำหรับเก็บชิ้นส่วนเทมเพลต/template-partsสำหรับเก็บเทมเพลตหน้า/page-templatesสามารถสร้างขึ้นทีละขั้นตอนในระหว่างกระบวนการพัฒนา

แนะนำให้อ่าน คู่มือขั้นสูงสุดของ Tailwind CSS: จากเริ่มต้นจนเชี่ยวชาญเคล็ดลับการใช้งานจริง

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

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

UltaHost WordPress โฮสติ้ง
การรับประกันคืนเงินภายใน 30 วัน, แบนด์วิธและฐานข้อมูลไม่จำกัด, การป้องกัน DDoS ฟรี, ซื้อ 3 ปีลดราคา 50%
/*
Theme Name: My Modern Theme
Theme URI: https://example.com/my-modern-theme/
Author: Your Name
Author URI: https://example.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-modern-theme
*/

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

นำเข้าไฟล์ฟังก์ชันหลัก

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

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

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

WordPress ใช้ระบบลำดับชั้นของเทมเพลตเพื่อตัดสินใจว่าจะแสดงเนื้อหาประเภทต่าง ๆ อย่างไร การทำความเข้าใจและสร้างไฟล์เทมเพลตหลักเหล่านี้เป็นกุญแจสำคัญในการแปลงการออกแบบของคุณให้เป็นเว็บไซต์แบบไดนามิก

แนะนำให้อ่าน วิเคราะห์การสร้างเว็บไซต์สมัยใหม่อย่างครบถ้วน: คู่มือปฏิบัติจริงฉบับสมบูรณ์ตั้งแต่การวางแผนจนถึงการเปิดตัว

ไฟล์เทมเพลตพื้นฐานที่สุดคือindex.phpซึ่งเป็นเทมเพลตสำรองสุดท้ายสำหรับทุกหน้า แต่เพื่อการควบคุมที่ละเอียดยิ่งขึ้น เราควรสร้างเทมเพลตที่เฉพาะเจาะจงมากขึ้น ตัวอย่างเช่น สำหรับการแสดงรายการบทความบล็อกhome.phpindex.phpสำหรับการแสดงบทความเดี่ยวsingle.phpสำหรับแสดงหน้าเว็บแบบคงที่page.phpและสำหรับแสดงหน้าเก็บถาวร เช่น หมวดหมู่บทความ, แท็กarchive.phpนอกจากนั้น,header.phpfooter.phpใช้สำหรับแยกโค้ดส่วนหัวและส่วนท้ายของเว็บไซต์ ผ่านget_header()get_footer()ฟังก์ชันที่เรียกใช้ในเทมเพลตต่างๆ เพื่อนำโค้ดกลับมาใช้ซ้ำ

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

header.phpไฟล์มักประกอบด้วยเอกสาร HTML<head>ส่วนและโครงสร้างเริ่มต้นของหน้า เช่น โลโก้ไซต์และเมนูนำทางหลัก ขั้นตอนสำคัญคือการเรียกใน<head>ของธีมwp_head()ฮุก (Hook) นี่คือจุดที่ WordPress core, ปลั๊กอิน และธีมเอง จำเป็นต้องส่งออก CSS, JavaScript และ metadata

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

การดำเนินการวนลูปของโพสต์

การวนลูปของโพสต์เป็นกลไกหลักในการส่งออกเนื้อหาแบบไดนามิกของ WordPress ในindex.phpsingle.phpเทมเพลต เราใช้if ( have_posts() ) : while ( have_posts() ) : the_post();มาไล่ดูและแสดงบทความแต่ละบทความ

hosting.com 共享主机
高性能,配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed,全天候24小时、全天候的专家内部支持,高级安全措施,包括 SSL、暴力破解、恶意软件和 DDoS 防护,节省高达 73%
<div id="primary" class="content-area">
    <main id="main" 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>
</div>

get_template_part()ฟังก์ชันเป็นแนวปฏิบัติที่ดี ซึ่งสนับสนุนให้คุณแยกโครงสร้าง HTML ที่ใช้แสดงเนื้อหาบทความออกไปเป็นtemplate-parts/content.phpไฟล์คอมโพเนนต์แบบนี้ ทำให้ไฟล์เทมเพลตหลักมีความกระชับและชัดเจนยิ่งขึ้น

การออกแบบและสไตล์ที่ตอบสนอง

ธีมสมัยใหม่ต้องเป็นแบบ Responsive สามารถให้ประสบการณ์การดูที่ดีบนหน้าจอทุกขนาดตั้งแต่โทรศัพท์มือถือไปจนถึงเดสก์ท็อป ซึ่งทำได้หลักผ่าน CSS Media Queries, Flexbox และ CSS Grid

ก่อนอื่นในfunctions.phpใช้อย่างถูกต้องwp_enqueue_style()ฟังก์ชันเพื่อเพิ่มสไตล์ชีตหลักของคุณลงในคิว ตรวจสอบให้แน่ใจว่าการเรียกใช้ตั้งค่าการพึ่งพาสไตล์เริ่มต้นของ WordPress เช่นdashicons

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

function my_modern_theme_scripts() {
    // 引入主题主要样式表
    wp_enqueue_style( 'my-modern-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义脚本(如果有)
    wp_enqueue_script( 'my-modern-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()-`get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_modern_theme_scripts' );

กลยุทธ์ CSS ที่ให้ความสำคัญกับมือถือเป็นหลัก

ใช้กลยุทธ์ “มือถือก่อน” ในการเขียน CSS ซึ่งหมายถึงการเขียนสไตล์พื้นฐานสำหรับอุปกรณ์หน้าจอเล็ก (เช่น โทรศัพท์มือถือ) ก่อน จากนั้นใช้ media queries เพื่อเพิ่มสไตล์เสริมและการปรับเปลี่ยนเลย์เอาต์สำหรับหน้าจอที่ใหญ่ขึ้นเรื่อยๆ (แท็บเล็ต, เดสก์ท็อป)

/* 基础样式 - 针对移动设备 */
.site-header {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.main-navigation ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .site-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .main-navigation ul {
        flex-direction: row;
        gap: 2rem;
    }
}

/* 针对大桌面设备 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

จัดการรูปภาพที่ตอบสนอง

WordPress มีการรองรับรูปภาพที่ตอบสนองอย่างมีประสิทธิภาพ ใช้the_post_thumbnail()ฟังก์ชันและส่งพารามิเตอร์ขนาดที่เหมาะสม WordPress จะแสดงผลอัตโนมัติด้วยsrcsetsizesแอตทริบิวต์ `

โฮสติ้งแบบแชร์ของ InterServer
共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本,一键安装。

แท็ก ` อนุญาตให้เบราว์เซอร์เลือกไฟล์ภาพที่เหมาะสมที่สุดตามหน้าจออุปกรณ์ เพื่อเพิ่มประสิทธิภาพการโหลด

<?php if ( has_post_thumbnail() ) : ?>
    <figure class="post-thumbnail">
        <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?>
    </figure>
<?php endif; ?>

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

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

ลงทะเบียนเมนูนำทาง

functions.phpใช้ฟังก์ชันregister_nav_menus()ฟังก์ชันเพื่อกำหนดว่าธีมของคุณรองรับตำแหน่งเมนูใด จากนั้นผู้ใช้สามารถกำหนดเมนูให้กับตำแหน่งเหล่านี้ได้ในส่วนหลังบ้านภายใต้ “รูปลักษณ์” -> “เมนู”

function my_modern_theme_setup() {
    // 注册一个主菜单
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary Menu', 'my-modern-theme' ),
        'footer' => esc_html__( 'Footer Menu', 'my-modern-theme' ),
    ) );
    // 添加其他主题支持...
}
add_action( 'after_setup_theme', 'my_modern_theme_setup' );

สร้างพื้นที่วิดเจ็ต

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

function my_modern_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; esc_html__( 'Sidebar', 'my-modern-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; esc_html__( 'Add widgets here.', 'my-modern-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_modern_theme_widgets_init' );

หลังจากลงทะเบียนแล้ว ในไฟล์เทมเพลต (เช่นsidebar.php) ใช้ฟังก์ชันdynamic_sidebar( 'sidebar-1' )การเรียกใช้ฟังก์ชั่นจะแสดงพื้นที่นั้นทันที

การผสานรวม Customizer API

WordPress Customizer อนุญาตให้ผู้ใช้ปรับแต่งตัวเลือกธีมพร้อมดูตัวอย่างแบบเรียลไทม์ คุณสามารถเพิ่มการตั้งค่าที่เรียบง่าย เช่น การเลือกสี การอัปโหลดโลโก้ ผ่าน Customizer API ซึ่งเกี่ยวข้องกับการใช้$wp_customize->add_setting()$wp_customize->add_control()วิธีการ

function my_modern_theme_customize_register( $wp_customize ) {
    // 添加一个站点标题颜色的设置
    $wp_customize->add_setting( 'header_textcolor', array(
        'default'           => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'    => __( 'Header Text Color', 'my-modern-theme' ),
        'section'  => 'colors',
    ) ) );
}
add_action( 'customize_register', 'my_modern_theme_customize_register' );

จากนั้นในheader.phpในนั้น สามารถผ่านทางget_theme_mod( 'header_textcolor' )รับค่านี้และนำไปใช้ในรูปแบบอินไลน์หรือวิธีอื่นๆ

สรุป

การพัฒนา WordPress Theme ที่ตอบสนองและทันสมัยจากศูนย์เป็นงานเชิงระบบที่ต้องให้ผู้พัฒนามีความคุ้นชินไม่เพียงแต่กับ PHP และ WordPress Core API เท่านั้น แต่ยังต้องเชี่ยวชาญใน HTML5, CSS3 (โดยเฉพาะ Flexbox/Grid และ Media Queries) และ JavaScript อีกด้วย กระบวนการทั้งหมดยึดหลักการแบบโมดูลาร์และบำรุงรักษาได้ง่าย: เริ่มจากการตั้งค่าแวดล้อม กำหนดข้อมูลธีม จากนั้นค่อยๆ สร้างไฟล์ PHP ที่เป็นไปตามลำดับชั้นของเทมเพลต เพื่อใช้งานลูปโพสต์หลัก ต่อมา ผ่านกลยุทธ์ CSS แบบ “Mobile First” และเทคโนโลยีรูปภาพที่ตอบสนอง เพื่อให้แน่ใจว่าเว็บไซต์แสดงผลได้ดีบนอุปกรณ์ทุกชนิด สุดท้าย ใช้ฟังก์ชัน API ที่ทรงพลังของ WordPress เพื่อเพิ่มเมนูนำทาง พื้นที่วิดเจ็ต และการสนับสนุน Customizer มอบความสามารถในการปรับแต่งที่ยืดหยุ่นให้กับผู้ใช้ ด้วยการทำตามขั้นตอนเหล่านี้ คุณจะสามารถสร้าง WordPress Theme ที่เป็นมืออาชีพ มีประสิทธิภาพ และบำรุงรักษาได้ง่าย

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

การพัฒนา WordPress Theme ต้องเชี่ยวชาญเทคโนโลยีหลักใดบ้าง

การพัฒนา WordPress Theme ที่สมบูรณ์ คุณจำเป็นต้องเชี่ยวชาญเทคโนโลยีหลักหลายอย่าง เริ่มจาก PHP เพราะ WordPress ถูกเขียนด้วย PHP เอง ไฟล์เทมเพลตและตรรกะการทำงานทั้งหมดล้วนพึ่งพามัน ต่อมาคือ HTML5 และ CSS3 สำหรับสร้างโครงสร้างและสไตล์ของหน้าเว็บ โดยเฉพาะการออกแบบ Responsive ที่ขาดไม่ได้คือ CSS Media Queries และโมเดลการจัดวางสมัยใหม่ (เช่น Flexbox และ Grid) การมีความเข้าใจพื้นฐานเกี่ยวกับ JavaScript ก็สำคัญมากสำหรับการใช้งานฟังก์ชันแบบอินเทอร์แอคทีฟ สุดท้าย คุณต้องเข้าใจแนวคิดหลักของ WordPress อย่างลึกซึ้ง เช่น Template Hierarchy, The Loop, Hooks และ Filters เป็นต้น

Text Domain ในไฟล์ style.css มีหน้าที่อะไร

Text Domainเป็นตัวระบุสำคัญสำหรับการทำให้ธีมเป็นสากลและปรับให้เป็นท้องถิ่นได้ หน้าที่ของมันคือการสร้างพื้นที่ชื่อ (namespace) ที่ไม่ซ้ำกันสำหรับสตริงทั้งหมดในธีมของคุณที่สามารถแปลได้ ในโค้ด เมื่อคุณใช้ฟังก์ชันเช่น__('Hello World', 'my-modern-theme')_e('Read More', 'my-modern-theme')เมื่อใช้ฟังก์ชันแปลนี้ พารามิเตอร์ที่สองจะเป็นโดเมนข้อความ ซึ่งช่วยให้เครื่องมือแปล (เช่น Poedit) สามารถระบุและแยกสตริงที่อยู่ในธีมของคุณได้อย่างถูกต้อง เพื่อสร้าง.po.moไฟล์แปล ทำให้ธีมของคุณสามารถแปลเป็นภาษาใดก็ได้อย่างง่ายดาย

วิธีทำให้ธีมรองรับฟังก์ชันรูปขนาดย่อของบทความ

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

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    // 或者指定文章类型:add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );
    // 你还可以在这里定义默认的缩略图尺寸:set_post_thumbnail_size( 800, 600, true );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

หลังจากเพิ่มการสนับสนุนแล้ว กล่องเมตาดาต้า “รูปภาพเด่น” จะปรากฏขึ้นบนหน้าแก้ไขบทความ ผู้ใช้สามารถอัปโหลดหรือเลือกรูปภาพได้ ในเทมเพลต ใช้has_post_thumbnail()ตรวจสอบว่ามีรูปภาพขนาดย่อหรือไม่ และใช้the_post_thumbnail()ฟังก์ชันเพื่อแสดงมัน

ทำไมจึงแนะนำให้ใช้ฟังก์ชัน get_template_part

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