คู่มือขั้นสูงสุดในการพัฒนา WordPress Theme: ตั้งแต่เริ่มต้นจนเชี่ยวชาญในการสร้างเว็บไซต์แบบกำหนดเอง

พื้นฐานการพัฒนา WordPress Theme และการตั้งค่าแวดล้อม

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

ขั้นตอนการสร้างสภาพแวดล้อมการพัฒนาท้องถิ่น

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

การเลือกตัวแก้ไขโค้ด

ตัวแก้ไขโค้ดที่ทรงพลังเป็นกุญแจสำคัญในการเพิ่มประสิทธิภาพการพัฒนา Visual Studio Code (VS Code) เป็นตัวเลือกที่ได้รับความนิยมอย่างมากในปัจจุบัน ด้วยระบบนิเวศของส่วนขยายที่อุดมสมบูรณ์ เช่น ส่วนขยายสำหรับ PHP IntelliSense, ตัวอย่างโค้ด WordPress, การแสดงตัวอย่างแบบเรียลไทม์ และการผสานรวม Git เครื่องมือเหล่านี้สามารถช่วยเหลือคุณในการเขียนโค้ดที่ถูกต้องและมีประสิทธิภาพได้อย่างมาก

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

โครงสร้างไฟล์ธีมและเทมเพลตหลัก

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

UltaHost WordPress โฮสติ้ง

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

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

ธีมพื้นฐานที่ครบถ้วนสมบูรณ์ตามหน้าที่มักประกอบด้วยไฟล์เทมเพลตหลักต่อไปนี้:
* header.php: 网站头部，通常包含、部分以及网站标志和主导航。
* footer.php: ส่วนท้ายของเว็บไซต์ ประกอบด้วยข้อมูลลิขสิทธิ์ การอ้างอิงสคริปต์ ฯลฯ
* index.php: เทมเพลตพื้นฐานที่สุด ใช้เป็นทางเลือกสำรองเริ่มต้นสำหรับทุกหน้า
* style.css: สไตล์ชีตหลัก ประกอบด้วยข้อมูลธีม
* functions.php: ไฟล์ฟังก์ชันของธีม ใช้สำหรับเพิ่มฟังก์ชัน การลงทะเบียนเมนู แถบด้านข้าง เป็นต้น
* single.php: ใช้สำหรับแสดงบทความบล็อกเดี่ยว
* page.php: ใช้สำหรับแสดงหน้าเดี่ยว
* archive.php: สำหรับแสดงรายการหมวดหมู่บทความ แท็ก วันที่ และอื่นๆ

การแยกและเรียกใช้ไฟล์เทมเพลต

เพื่อปฏิบัติตามหลักการ DRY (อย่าทำซ้ำตัวเอง) WordPress theme ใช้ฟังก์ชันเฉพาะเพื่อแยกและประกอบหน้า ในindex.php、page.phpไฟล์ คุณจะเห็นโครงสร้างโค้ดดังต่อไปนี้:

<?php get_header(); ?>

<main>
    <!-- 主循环和页面特定内容在这里 -->
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article>
            <h1><?php the_title(); ?></h1>
            <div><?php the_content(); ?></div>
        </article>
    <?php endwhile; endif; ?>
</main>

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

เพิ่มฟังก์ชันธีมผ่านไฟล์ functions.php

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

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

เพิ่มการสนับสนุนธีมและลงทะเบียนเมนูนำทาง

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

<?php
function mytheme_setup() {
    // 添加文章特色图像支持
    add_theme_support( 'post-thumbnails' );
    // 添加HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 添加标题标签支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

การลงทะเบียนเมนูนำทางอนุญาตให้ผู้ใช้จัดการเมนูใน “รูปลักษณ์ > เมนู” ในแถบด้านหลังของ WordPress โดยปกติคุณต้องลงทะเบียนการนำทางหลัก (เมนูเฮดเดอร์) และการนำทางส่วนท้าย (เมนูฟุตเตอร์)

function mytheme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'mytheme' ),
            'footer'  => __( '页脚菜单', 'mytheme' ),
        )
    );
}
add_action( 'init', 'mytheme_menus' );

หลังจากลงทะเบียนแล้ว คุณก็สามารถใช้งานในไฟล์เทมเพลต (เช่นheader.php) ใช้ฟังก์ชันwp_nav_menu( array( ‘theme_location’ => ‘primary’ ) );เพื่อแสดงเมนูนี้

hosting.com 共享主机

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

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

การนำสคริปต์และสไตล์ชีตเข้ามาอย่างปลอดภัย

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

function mytheme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

สร้างเทมเพลตหน้าคู่มือและเทคนิคขั้นสูง

เมื่อคุณเข้าใจพื้นฐานแล้ว คุณสามารถสร้างเทมเพลตหน้าคู่มือและใช้ระบบฮุคอันทรงพลังของ WordPress เพื่อสร้างเลย์เอาต์และฟังก์ชันการทำงานของหน้าเว็บที่เป็นเอกลักษณ์

สร้างเทมเพลตหน้าหน้าแบบกำหนดเอง

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

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

ตัวอย่างเช่น สร้างไฟล์ชื่อpage-fullwidth.phpเทมเพลต:

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽度页面模板
 */
get_header(); ?>

<main class="full-width">
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
            <h1 class="entry-title"><?php the_title(); ?></h1>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    <?php endwhile; ?>
</main>

<?php get_footer(); ?>

ทำความเข้าใจและใช้ฮุคของ WordPress

Hook (Hooks) เป็นหัวใจสำคัญของสถาปัตยกรรมปลั๊กอินและการพัฒนาธีมของ WordPress พวกมันอนุญาตให้คุณ “เชื่อมต่อ” เข้ากับกระบวนการหลักของ WordPress ในจุดเวลาที่กำหนด เพื่อรันโค้ดของคุณเองโดยไม่ต้องแก้ไขไฟล์หลัก มี Hook สองประเภท: Action Hooks และ Filter Hooks

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

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

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

Action hooks are used to execute code at specific moments. For example, adding some tracking code at thewp_footerhook:

function mytheme_add_tracking_code() {
    echo '<!-- 这里是自定义的追踪代码 -->';
}
add_action( 'wp_footer', 'mytheme_add_tracking_code' );

Filter hooks are used to modify data. For example, modifying the length of the article summary:

function mytheme_custom_excerpt_length( $length ) {
    return 20; // 将摘要字数改为20个
}
add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length' );

การเตรียมความพร้อมสากลสำหรับธีม

เพื่อให้ธีมของคุณสามารถใช้งานได้ทั่วโลก คุณต้องเตรียมความพร้อมสำหรับความเป็นสากล (i18n) ซึ่งหมายความว่าสตริงทั้งหมดที่เผยแพร่ต่อผู้ใช้ควรถูกห่อหุ้มด้วยฟังก์ชันการแปลของ WordPress เช่น()、_e()ในตัวอย่างการลงทะเบียนเมนูข้างต้น( ‘主导航菜单’, ‘mytheme’ )คือการใช้งานหนึ่ง ที่นี่‘mytheme’คือโดเมนข้อความ (Text Domain) ซึ่งควรตรงกับชื่อธีม ใช้เพื่อให้เครื่องมือแปลระบุว่าสตริงใดเป็นของธีมของคุณ

สรุป

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

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

การพัฒนา WordPress Theme จำเป็นต้องเชี่ยวชาญ PHP หรือไม่?

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

ทำไมสไตล์ที่ปรับแต่งเองของฉันจึงไม่ทำงาน?

ก่อนอื่น โปรดตรวจสอบให้แน่ใจว่า stylesheet ของคุณถูกเข้าคิวอย่างถูกต้องผ่านฟังก์ชันwp_enqueue_style()ประการที่สอง ตรวจสอบเครื่องมือนักพัฒนาของเบราว์เซอร์ เพื่อดูว่ากฎ CSS ของคุณถูกเขียนทับด้วยตัวเลือกที่มีความเฉพาะเจาะจงสูงกว่าหรือถูกทำเครื่องหมายว่า “ไม่ได้ใช้” สุดท้าย ตรวจสอบให้แน่ใจว่าล้างแคชเบราว์เซอร์และแคชปลั๊กอิน WordPress (หากใช้) หลังจากทำการเปลี่ยนแปลง CSS

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

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

อะไรคือ Child Theme และเหตุใดจึงต้องใช้มัน

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

จะดีบั๊กโค้ดธีมของฉันได้อย่างไร?

การเปิดใช้งานโหมดดีบั๊กของ WordPress เป็นขั้นตอนแรก ผ่านการแก้ไขwp-config.phpที่อยู่ในไดเรกทอรีรูทของ WordPress เปลี่ยนWP_DEBUGเป็นtrueซึ่งจะแสดงข้อผิดพลาด คำเตือน และการแจ้งเตือน PHP โดยตรงบนหน้าเว็บ นอกจากนี้ ใช้คอนโซลและแผงเครือข่ายของเครื่องมือนักพัฒนาของเบราว์เซอร์ร่วมกันเพื่อดีบั๊กปัญหาของ JavaScript และ CSS ใช้ปลั๊กอินดีบั๊กของตัวแก้ไขโค้ดหรือ Xdebug สำหรับการดีบั๊กโค้ด PHP ที่ลึกยิ่งขึ้น