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

เริ่มต้นง่ายกับการพัฒนา WordPress Theme: สร้างเว็บไซต์ที่กำหนดเองตั้งแต่เริ่มต้น

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

ทำความเข้าใจโครงสร้างพื้นฐานของธีม WordPress

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

ไฟล์สไตล์ชีตหลัก

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

พื้นฐานที่สุดstyle.cssตัวอย่างส่วนหัวของไฟล์มีดังนี้:

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

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

ไฟล์เทมเพลตหลัก

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

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

นอกจากไฟล์หลักทั้งสองนี้แล้ว ธีมที่ทำงานได้อย่างสมบูรณ์มักจะรวมถึง:
* header.phpส่วนหัวของเว็บไซต์
* footer.phpส่วนท้ายของเว็บไซต์
* functions.phpใช้เพื่อเพิ่มฟังก์ชันการทำงานของธีม, ลงทะเบียนเมนู, แถบด้านข้าง และอื่นๆ
* page.php: ใช้สำหรับแสดงหน้าเดี่ยว
* single.php: สำหรับแสดงบทความบล็อกเดี่ยว

การตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่นและการสร้างชุดรูปแบบแรก

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

การสร้างโฟลเดอร์และไฟล์ชุดรูปแบบ

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

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

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

เขียนไฟล์เทมเพลตพื้นฐาน

ต่อไป ในindex.phpใน เขียนโค้ดพื้นฐานที่สุดต่อไปนี้ ซึ่งรวมถึงแท็กเทมเพลตที่จำเป็นของ WordPress

<!DOCTYPE html>
<html no numeric noise key 1011>
<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 1008>
    <?php wp_body_open(); ?>

<header>
        <h1><a href="/th/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            _e( '抱歉，没有找到任何内容。', 'my-first-theme' );
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>

<?php wp_footer(); ?>
</body>
</html>

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

利用模板层级和核心函数

WordPress采用一套智能的“模板层级”系统来决定对于不同的页面请求（如首页、文章页、分类页）使用哪个模板文件。理解这个系统是主题开发的关键。

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

ทำความเข้าใจลำดับการโหลดเทมเพลต

例如，当访问一篇博客文章时，WordPress会按以下顺序寻找模板文件：single-post.php -> single.php -> singular.php -> index.php。它会使用找到的第一个文件。这种设计让你可以为不同类型的页面创建高度定制化的布局，同时有一个index.phpเป็นตัวเลือกสุดท้ายที่รับประกันได้

ใช้ลูปกับแท็กเทมเพลต

在index.phpในโค้ด PHP ที่คุณเห็นในนั้นคือ “WordPress Loop (The Loop)” ที่มีชื่อเสียง มันเป็นหัวใจของไฟล์เทมเพลตทั้งหมด ใช้สำหรับวนลูปและแสดงผลบทความหรือหน้าที่ควรแสดงบนหน้าปัจจุบัน

ฟังก์ชันในลูปเช่นthe_title()、the_content()、the_excerpt()เรียกว่า “แท็กเทมเพลต” หน้าที่ของพวกเขาคือการแสดงผลข้อมูลบทความที่เกี่ยวข้องอย่างปลอดภัย อีกฟังก์ชันที่สำคัญคือthe_post()มันถูกเรียกในแต่ละการวนซ้ำของลูปเพื่อตั้งค่าออบเจ็กต์$postให้เป็นข้อมูลของบทความปัจจุบัน และดำเนินการไปยังบทความถัดไป

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

การทำให้โครงสร้างหน้าเป็นโมดูลเป็นวิธีที่ดีในการปรับปรุงการบำรุงรักษาโค้ด นี่คือจุดที่header.php和footer.phpเข้ามามีบทบาท

แยกหัวและท้าย

将index.phpใน<head>บางส่วนและ<header>ตัดพื้นที่ออกแล้ววางลงในไฟล์ที่สร้างใหม่header.phpในทำนองเดียวกัน ตัด<footer>ส่วนวางลงในfooter.phpของธีม

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

จากนั้น ในไฟล์ต้นฉบับindex.phpใน, ใช้get_header()和get_footer()ใช้แท็กเทมเพลตทั้งสองนี้เพื่อนำเข้า

<?php get_header(); ?>

<main>
    &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        <p><?php _e( '抱歉，没有找到任何内容。', 'my-first-theme' ); ?></p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

ด้วยวิธีนี้ หน้าเทมเพลตทั้งหมดสามารถใช้ส่วนหัวและส่วนท้ายเดียวกันได้ โดยการแก้ไขเพียงแค่ไฟล์เดียว

เพิ่มฟังก์ชันการทำงานของธีมผ่าน Functions.php

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

การลงทะเบียนฟังก์ชันที่ธีมรองรับ

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

<?php
function my_theme_setup() {
    // 添加对文章缩略图的支持
    add_theme_support( 'post-thumbnails' );

// 添加对自定义菜单的支持
    add_theme_support( 'menus' );

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

เพิ่มสไตล์และสคริปต์

วิธีการเพิ่ม CSS และ JavaScript ที่ถูกต้องคือผ่านwp_enqueue_style()和wp_enqueue_script()ฟังก์ชัน และติดตั้งพวกมันลงบนwp_enqueue_scriptsบน hook นี้ ซึ่งรับประกันว่าการพึ่งพาจะถูกต้องและจะไม่โหลดซ้ำ

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );

// 引入自定义的JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

หลังจากเสร็จสิ้นเหล่านี้ คุณสามารถใช้ฟังก์ชันheader.phpใช้ฟังก์ชันwp_nav_menu()เพื่อแสดงเมนูที่คุณลงทะเบียนไว้ ใช้ในลูปบทความthe_post_thumbnail()เพื่อแสดงรูปภาพเด่น

สรุป

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

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

การพัฒนา WordPress Theme ต้องมีความรู้พื้นฐานใดบ้าง?

คุณจำเป็นต้องมีความรู้พื้นฐานเกี่ยวกับ HTML และ CSS เพื่อใช้ในการสร้างโครงสร้างและรูปแบบของหน้าเว็บ ในเวลาเดียวกัน จำเป็นต้องมีความเข้าใจพื้นฐานเกี่ยวกับ PHP เนื่องจากไฟล์เทมเพลตของ WordPress ส่วนใหญ่ประกอบด้วยโค้ด PHP ซึ่งใช้ในการสร้างเนื้อหาแบบไดนามิก การมีความรู้เกี่ยวกับ JavaScript จะทำให้คุณสามารถเพิ่มฟังก์ชันการโต้ตอบให้กับธีมได้ ซึ่งในระยะแรกอาจไม่จำเป็น แต่มีความสำคัญมากในระยะหลัง

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

สาเหตุที่พบบ่อยที่สุดคือstyle.cssรูปแบบส่วนหัวของข้อมูลธีมในไฟล์ไม่ถูกต้องหรือขาดหายไป โปรดตรวจสอบให้แน่ใจว่าส่วนบนของไฟล์มีบล็อกความคิดเห็นที่สมบูรณ์และเป็นไปตามรูปแบบที่กำหนด นอกจากนี้ โปรดตรวจสอบว่าโฟลเดอร์ธีมถูกวางไว้ในตำแหน่งที่ถูกต้องหรือไม่wp-content/themes/ในไดเรกทอรี และชื่อโฟลเดอร์ไม่ได้ใช้ตัวอักษรพิเศษ

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

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

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

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

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

คุณต้องทำสองสิ่ง อย่างแรก ใช้ฟังก์ชันการแปลของ WordPress ในทุกตำแหน่งที่แสดงข้อความในธีม เช่น__()、_e()และกำหนดให้พวกเขาอยู่ในstyle.cssโดเมนข้อความที่กำหนดในส่วนหัว อย่างที่สอง ใช้เครื่องมือเช่น Poedit เพื่อสแกนไฟล์ธีมและสร้าง.potไฟล์เทมเพลต และสร้างไฟล์แปลสำหรับภาษาที่เกี่ยวข้อง (เช่นzh_CN.po和.mo) ไฟล์แปลของธีม WordPress วางไว้ในโฟลเดอร์ธีม/languages/ไดเรกทอรีอย่างถูกต้องหรือไม่

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

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

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

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

แท็ก: