คู่มือเริ่มต้นการพัฒนา WordPress Theme: สร้างเว็บไซต์ของคุณตั้งแต่เริ่มต้น

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

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

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

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

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

การพัฒนา WordPress Theme สมัยใหม่ยังแนะนำให้ใช้ธีมลูก (Child Theme). นี่เป็นวิธีที่ปลอดภัยในการปรับแต่งธีมและเพิ่มฟังก์ชันโดยไม่ต้องแก้ไขไฟล์ธีมหลักโดยตรง. เมื่อธีมหลักได้รับการอัปเดต, เนื้อหาที่คุณปรับแต่ง (ซึ่งเก็บไว้ในธีมลูก) จะยังคงอยู่. การสร้างธีมลูกก็ต้องใช้ไฟล์หลักสองไฟล์ข้างต้นเช่นกัน, และในstyle.css ส่วนหัวสไตล์ผ่านTemplate:ฟิลด์ประกาศธีมหลัก

UltaHost WordPress โฮสติ้ง

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

เข้าถึงหน้าเว็บ

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

WordPress ใช้ระบบลำดับชั้นเทมเพลต (Template Hierarchy) เพื่อตัดสินใจว่าสำหรับคำขอหน้าเฉพาะควรใช้ไฟล์เทมเพลต PHP ไฟล์ไหนในการแสดงผลเนื้อหา. การเข้าใจกฎชุดนี้เป็นกุญแจสำคัญในการพัฒนาธีม.

เทมเพลตสำหรับแสดงบทความและหน้า

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

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
<?php endwhile; endif; ?>

โค้ดนี้ตรวจสอบว่ามีโพสต์หรือไม่ จากนั้นเข้าสู่ลูปและแสดงหัวข้อและเนื้อหาของโพสต์ตามลำดับ ฟังก์ชันเช่นthe_title()和the_content()ใช้สำหรับแสดงข้อมูลที่เกี่ยวข้อง

เทมเพลตรายการบทความและเก็บถาวร

เมื่อผู้ใช้เยี่ยมชมหน้าแรกของบล็อก หน้าหมวดหมู่ หรือหน้าเก็บถาวรของผู้เขียน WordPress จะใช้เทมเพลตรายการ เทมเพลตรายการที่พบบ่อยที่สุดคือindex.php(เป็นตัวเลือกสำรองสุดท้าย) และarchive.php。ในเทมเพลตรายการ การวนซ้ำจะวนลูปผ่านหลายบทความ โดยปกติเราใช้the_excerpt()เพื่อแสดงบทคัดย่อของบทความแทนเนื้อหาทั้งหมด

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

// 在循环中输出文章列表项
<article>
    <h2><a href="/th/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_excerpt(); ?>
</article>

the_permalink()ฟังก์ชันใช้เพื่อรับลิงก์ถาวรของบทความปัจจุบัน

ส่วนประกอบทั่วไปของธีม

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

ตัวอย่างเช่นheader.phpไฟล์ประกอบด้วยส่วนหัวของเอกสาร HTML พื้นที่และเมนูนำทางด้านบนของเว็บไซต์ ในsingle.phpในนั้น คุณเพียงแค่เรียกใช้ที่จุดเริ่มต้นget_header(), WordPress จะนำเข้าโดยอัตโนมัติheader.phpเนื้อหา

hosting.com 共享主机

高性能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候24小时、全天候的专家内部支持，高级安全措施，包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 73%

เข้าถึงหน้าเว็บ

ในทำนองเดียวกัน สำหรับบล็อกโค้ดที่ใช้ซ้ำในหลายที่ (เช่น ข้อมูลเมตาของบทความ) คุณสามารถบันทึกเป็นcontent.php或template-parts/content.phpจากนั้นใช้ในแม่แบบหลักget_template_part('template-parts/content', get_post_format());เรียกใช้มัน พารามิเตอร์ที่สองช่วยให้คุณโหลดไฟล์รูปแบบที่แตกต่างกันตามรูปแบบบทความ (เช่น แกลเลอรี, คำคม) เช่นcontent-gallery.php）。

ใช้ไฟล์ฟังก์ชันเพื่อเพิ่มประสิทธิภาพการทำงานของธีม

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

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

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

แนะนำให้อ่าน สถาปัตยกรรมหลักและหลักการทำงานของ WordPress。

function my_theme_setup() {
    // 添加文章和页面特色图片支持
    add_theme_support('post-thumbnails');
    // 为导航菜单功能添加支持
    add_theme_support('menus');
    // 为评论列表、搜索表单等添加HTML5标记支持
    add_theme_support('html5', array('comment-list', 'search-form'));
}
add_action('after_setup_theme', 'my_theme_setup');

จากนั้น คุณสามารถใช้register_nav_menus() ฟังก์ชันเพื่อกำหนดตำแหน่งเมนูที่มีอยู่ในธีมของคุณ เช่น “เมนูนำหลักด้านบน” และ “เมนูนำทางส่วนท้าย”

การนำเข้า Stylesheet และ JavaScript

正确地将CSS和JavaScript文件排入队列（enqueue）是专业开发的关键。这确保了依赖关系正确，并且避免了脚本冲突。绝对不要直接在模板文件中使用或wp_enqueue_scripts

โฮสติ้งแบบแชร์ของ InterServer

共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本，一键安装。

เข้าถึงหน้าเว็บ

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
    // 引入自定义JavaScript文件，依赖于jQuery
    wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

ฮุคwp_enqueue_scripts ใช้สำหรับโหลดสคริปต์และสไตล์ในส่วนหน้าเว็บไซต์ และget_stylesheet_uri()和get_template_directory_uri() ฟังก์ชันสามารถช่วยคุณรับ URL ที่ถูกต้องของไดเรกทอรีธีม

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

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

function my_theme_widgets_init() {
    register_sidebar(array(
        'name'          => '主侧边栏',
        'id'            => 'sidebar-1',
        'description'   => '此区域的小工具将显示在文章和页面侧边。',
        '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_theme_widgets_init');

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

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

เว็บไซต์สมัยใหม่ต้องแสดงผลได้ดีบนอุปกรณ์ทุกประเภท ซึ่งหมายความว่าธีมของคุณต้องเป็นแบบตอบสนอง การออกแบบที่ตอบสนองส่วนใหญ่ใช้ CSS Media Queries และ Fluid Layouts

กลยุทธ์สไตล์แบบเคลื่อนที่เป็นหลัก

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

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 0 15px;
}
.article {
    font-size: 16px;
    line-height: 1.6;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
    }
}

/* 针对桌面设备 */
@media (min-width: 992px) {
    .container {
        max-width: 970px;
    }
    .article {
        font-size: 18px;
    }
}

กลยุทธ์นี้รับประกันว่าเนื้อหาหลักจะเข้าถึงได้บนอุปกรณ์ทุกชนิด และเพิ่มประสิทธิภาพการใช้งานบนหน้าจอขนาดใหญ่ขึ้นเรื่อยๆ

จัดการภาพและสื่ออย่างยืดหยุ่น

การรับประกันว่าภาพและเนื้อหาที่ฝังตัว (เช่น วิดีโอ) จะไม่ล้นออกนอกคอนเทนเนอร์เป็นข้อกำหนดพื้นฐานของการออกแบบที่ตอบสนอง กฎทั่วไปง่ายๆ คือ:

img,
iframe,
video {
    max-width: 100%;
    height: auto;
}

กฎ CSS นี้ทำให้มั่นใจว่าความกว้างขององค์ประกอบสื่อจะไม่เกินความกว้างของคอนเทนเนอร์หลัก ในขณะที่ความสูงจะปรับอัตโนมัติตามสัดส่วน เพื่อหลีกเลี่ยงการทำลายโครงหน้า

ใช้คลาสและฟังก์ชันช่วยของ WordPress

WordPress จะส่งออกคลาส CSS ที่มีประโยชน์มากมาย ซึ่งคุณสามารถใช้เพื่อควบคุมสไตล์ได้อย่างแม่นยำมากขึ้น เช่น标签上会添加页面、文章类型的类（如.page, .single-post），และรหัสบทความประเภท (เช่น.postid-123). ในการวนลูปรายการบทความ,post_class()ฟังก์ชันจะส่งออกชุดชื่อคลาส (เช่นรูปแบบบทความ, หมวดหมู่ ฯลฯ) สำหรับคอนเทนเนอร์ของแต่ละบทความ ซึ่งให้ความสะดวกอย่างมากสำหรับการออกแบบสไตล์ที่ละเอียด

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <!-- 文章内容 -->
</article>

ในสไตล์ชีต คุณสามารถกำหนดเป้าหมายได้ดังนี้:

/* 为所有文章添加通用样式 */
article {
    margin-bottom: 2em;
}
/* 仅为“引语”格式的文章添加特殊样式 */
.format-quote {
    background-color: #f9f9f9;
    border-left: 4px solid #ccc;
    padding-left: 1em;
}

สรุป

การพัฒนา WordPress Theme คือกระบวนการที่ผสมผสานความคิดสร้างสรรค์ เทคโนโลยี Front-end (HTML, CSS, JavaScript) และเทคโนโลยี Back-end (PHP) เข้าด้วยกัน เริ่มจากการสร้างโฟลเดอร์พื้นฐานที่มีstyle.css和index.phpเรียนรู้และนำระบบลำดับชั้นของเทมเพลตไปใช้ทีละขั้นตอน แบ่งหน้าเว็บออกเป็นส่วนประกอบเทมเพลตที่นำกลับมาใช้ใหม่ได้ ไฟล์functions.phpหลักคือเวทีที่คุณขยายฟังก์ชันการทำงานของธีม ลงทะเบียนเมนูและสคริปต์ สุดท้าย ด้วยการออกแบบ CSS ที่ตอบสนองต่ออุปกรณ์ รับประกันว่าธีมของคุณจะมอบประสบการณ์การเรียกดูที่ยอดเยี่ยมบนอุปกรณ์ทุกชนิดตั้งแต่โทรศัพท์มือถือไปจนถึงเดสก์ท็อป การปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด เช่น การใช้ Child Theme สำหรับการแก้ไข การเข้าคิวสคริปต์และสไตล์อย่างถูกต้อง จะทำให้ธีมของคุณมีความเป็นมืออาชีพมากขึ้น ปลอดภัยมากขึ้น และบำรุงรักษาได้ง่ายขึ้น

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

ไม่มีพื้นฐาน PHP สามารถพัฒนา WordPress Theme ได้หรือไม่?

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

หลังจากพัฒนาธีมเสร็จแล้ว จะเผยแพร่ให้ผู้อื่นใช้ได้อย่างไร?

ก่อนที่จะเผยแพร่ธีมไปยังไดเรกทอรีธีมอย่างเป็นทางการของ WordPress หรือจำหน่ายเชิงพาณิชย์ คุณจำเป็นต้องทำการทดสอบอย่างเข้มงวด และให้แน่ใจว่าเป็นไปตามมาตรฐานการเขียนโค้ดใน "WordPress Theme Developer Handbook" ซึ่งรวมถึงการตรวจสอบความปลอดภัยของโค้ด การทำให้ธีมรองรับการแสดงผลบนทุกอุปกรณ์ (responsive) เตรียมความพร้อมสำหรับการสากล (i18n) (โดยใช้ฟังก์ชันแปลภาษา เช่น __()) และลบโค้ดสำหรับดีบักทั้งหมดออก จากนั้นคุณสามารถเลือกที่จะส่งไปยังไดเรกทอรีอย่างเป็นทางการ หรือแจกจ่ายผ่านเว็บไซต์ของคุณเอง__()和_e()），并移除所有调试代码。然后，你可以选择提交到官方目录，或通过自己的网站进行分发。

ความสัมพันธ์ระหว่างการอัปเดตธีมลูกและธีมแม่คืออะไร?

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

ฉันจะเพิ่มหน้าเลือกกำหนดเองสำหรับธีมของฉันได้อย่างไร

การเพิ่มหน้าตัวเลือกปรับแต่งสำหรับธีมขั้นสูง มักจะใช้ WordPress Settings API หรือผ่านการรวมเฟรมเวิร์กตัวเลือกยอดนิยม (เช่น Redux, Kirki หรือใช้ไลบรารี Carbon Fields) Settings API เป็นอินเทอร์เฟซมาตรฐานที่ให้มาใน WordPress core สำหรับการสร้าง ตรวจสอบและบันทึกตัวเลือกอย่างปลอดภัย สำหรับผู้เริ่มต้น การใช้เฟรมเวิร์กที่พัฒนามาแล้วสามารถสร้างแผงตัวเลือกที่เป็นมิตรกับผู้ใช้ได้เร็วขึ้น แต่จะเพิ่มความซับซ้อนและขนาดไฟล์ของธีม