สร้างธีม WordPress ที่สมบูรณ์แบบ: คู่มือการพัฒนาแบบครบวงจรตั้งแต่เริ่มต้นจนเชี่ยวชาญ

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

การตั้งค่าสภาพแวดล้อมการพัฒนาและทำความเข้าใจโครงสร้างพื้นฐาน

ก่อนเริ่มเขียนโค้ด สภาพแวดล้อมการพัฒนาในเครื่องที่มีประสิทธิภาพเป็นสิ่งสำคัญ ขอแนะนำให้ใช้เครื่องมือเช่น Local by Flywheel, XAMPP หรือ MAMP เพื่อตั้งค่าเซิร์ฟเวอร์ท้องถิ่นที่รวมPHP、MySQL和Apache/Nginxอย่างรวดเร็ว พร้อมกันนี้ ติดตั้งโปรแกรมแก้ไขโค้ดที่ถนัดมือ เช่น VS Code หรือ PHPStorm และทำความคุ้นเคยกับกระบวนการติดตั้งWordPressขั้นตอนการติดตั้ง

การวิเคราะห์ไดเรกทอรีธีมและไฟล์หลัก

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

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

/*
Theme Name: My Perfect Theme
Theme URI: https://example.com/my-perfect-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个为学习和专业开发打造的完美WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-perfect-theme
*/

Text Domainใช้สำหรับการแปลเป็นภาษาต่างๆ เป็นตัวระบุสำคัญสำหรับการเรียกใช้ฟังก์ชันการแปลในภายหลัง ถัดไปคือโครงสร้างลำดับชั้นของไฟล์เทมเพลตindex.phpเป็นเทมเพลตเริ่มต้นของธีม แต่WordPressปฏิบัติตามโครงสร้างลำดับชั้นของเทมเพลตเฉพาะเพื่อตัดสินใจว่าไฟล์เทมเพลตใดจะถูกใช้ในหน้าต่างๆ ตัวอย่างเช่น เมื่อแสดงบทความเดี่ยวจะค้นหาลำดับความสำคัญก่อนsingle.phpหากไม่มีให้ย้อนกลับไปที่index.phpไฟล์เทมเพลตหลักอื่นๆ ได้แก่:header.php(ส่วนหัว)footer.php(ส่วนท้าย)sidebar.php(แถบด้านข้าง)page.php(เทมเพลตหน้า)front-page.php(เทมเพลตหน้าแรก) และfunctions.php(ไฟล์ฟังก์ชันธีมหลัก)

UltaHost WordPress โฮสติ้ง

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

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

การสร้างเทมเพลตธีมและระบบลูป

WordPressหัวใจสำคัญคือ “ลูป” ซึ่งเป็นPHPโครงสร้างโค้ดที่ใช้ในการดึงข้อมูลจากฐานข้อมูลและแสดงผลบนหน้าเว็บ การเข้าใจและใช้ลูปอย่างถูกต้องเป็นกุญแจสำคัญในการพัฒนาธีม

การแยกส่วนของส่วนหัว ส่วนท้าย และแถบด้านข้างเป็นโมดูล

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

ในนั้น ต้องเรียกใช้ฟังก์ชันสองฟังก์ชันต่อไปนี้:wp_head()วางไว้ก่อนแท็กก่อนแท็กbody_class()วางไว้ก่อนแท็กภายในแท็ก ใช้สำหรับการส่งออกคลาส CSS ที่ช่วยในการออกแบบสไตล์

在footer.phpในส่วนหลักประกอบด้วยเนื้อหาส่วนท้ายของหน้าและการเรียกใช้wp_footer()ฟังก์ชัน ซึ่งเป็นฮุคสำหรับปลั๊กอินในการเพิ่มโค้ดในส่วนท้ายของหน้า ในไฟล์แม่แบบหลัก การนำเข้าโมดูลเหล่านี้จะทำผ่านget_header()、get_footer()和get_sidebar()ฟังก์ชัน

แนะนำให้อ่าน คู่มือการพัฒนา WordPress Theme ตั้งแต่เริ่มต้นจนเชี่ยวชาญอย่างสมบูรณ์。

เรียนรู้การใช้งานลูปหลักและแท็กเทมเพลต

在index.php或single.phpในเทมเพลต ใช้ลูปมาตรฐานเพื่อแสดงเนื้อหา แท็กเทมเพลตคือชุดของPHPฟังก์ชันที่ใช้แสดงเนื้อหาแบบไดนามิกทั้งภายในและภายนอกลูป เช่น ชื่อบทความ เนื้อหา เวลาที่เผยแพร่ เป็นต้น

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <header class="entry-header">
                <h2 class="entry-title"><a href="/th/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-meta">
                    | 作者：
                </div>
            </header>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>

ในลูปนี้the_title()、the_content()、the_permalink()、the_time()、the_author()和post_class()เป็นแท็กเทมเพลตที่ใช้กันทั่วไป เข้าใจคอนเท็กซ์ของหน้าต่างๆ (หน้าหลัก หน้าประเภท หน้าค้นหา หน้าเดี่ยว) และใช้แท็กเงื่อนไขอย่างถูกต้อง เช่นis_home()、is_single()、is_page()การรอคอย สามารถทำให้ธีมของคุณแสดงผลได้อย่างชาญฉลาดยิ่งขึ้น

การรวมสไตล์ สคริปต์ และฟังก์ชันเมนู

ธีมสมัยใหม่ขาดไม่ได้จากCSS、JavaScriptและเมนูนำทางแบบไดนามิก วิธีการรวมที่ถูกต้องไม่เพียงแต่รับประกันประสิทธิภาพ แต่ยังมั่นใจได้ว่าจะทำงานร่วมกับWordPressความเข้ากันได้ทางนิเวศวิทยา

hosting.com 共享主机

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

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

ใช้ functions.php ลงทะเบียนทรัพยากร

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

function my_perfect_theme_scripts() {
    // 注册并排入主样式表
    wp_enqueue_style( 'my-perfect-theme-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 注册并排入自定义JavaScript文件
    wp_enqueue_script( 'my-perfect-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_perfect_theme_scripts' );

โปรดทราบว่าget_stylesheet_uri()รับได้จากธีมstyle.cssในขณะที่get_template_directory_uri()ใช้สำหรับรับ URL ของไดเรกทอรีธีมเพื่ออ้างอิงทรัพยากรอื่น ๆ ตั้งค่าพารามิเตอร์สุดท้ายของสคริปต์เป็นtrueสามารถวางไว้ในส่วนท้ายของหน้าเพื่อโหลด

เปิดใช้งานเมนูนำทางและแถบด้านข้าง

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

แนะนำให้อ่าน คู่มือฉบับสมบูรณ์สำหรับการพัฒนา WordPress Theme: จากผู้เริ่มต้นสู่การปฏิบัติจริงในโครงการ。

function my_perfect_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-perfect-theme' ),
        'footer'  => __( '页脚菜单', 'my-perfect-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_perfect_theme_setup' );

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

การใช้งานฟังก์ชันขั้นสูงและการปรับแต่งธีม

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

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

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

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

เพิ่มประเภทบทความและหมวดหมู่ที่กำหนดเอง

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

function create_portfolio_post_type() {
    register_post_type( 'portfolio',
        array(
            'labels' => array(
                'name' => __( '作品集', 'my-perfect-theme' ),
                'singular_name' => __( '作品', 'my-perfect-theme' )
            ),
            'public' => true,
            'has_archive' => true,
            'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
            'menu_icon' => 'dashicons-portfolio',
        )
    );
}
add_action( 'init', 'create_portfolio_post_type' );

หลังจากสร้างแล้ว คุณสามารถสร้างไฟล์เทมเพลตเฉพาะสำหรับportfolioประเภทบทความที่กำหนดเองนี้ได้ เช่นsingle-portfolio.php和archive-portfolio.php。

สร้างตัวเลือกตัวกำหนดค่าแบบกำหนดเองของธีม

WordPressตัวกำหนดค่าช่วยให้ผู้ใช้สามารถดูตัวอย่างการเปลี่ยนแปลงได้ทันที เป็นวิธีที่แนะนำในการเพิ่มตัวเลือกธีม คุณสามารถทำได้ผ่านWP_Customize_Managerเพิ่มการตั้งค่าและตัวควบคุมให้กับวัตถุ

function my_perfect_theme_customize_register( $wp_customize ) {
    // 添加一个“站点标识颜色”的设置
    $wp_customize->add_setting( 'primary_color', array(
        'default' => '#0073aa',
        'transport' => 'postMessage', // 支持实时预览刷新
    ) );
    // 为该设置添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label' => __( '主色调', 'my-perfect-theme' ),
        'section' => 'colors',
    ) ) );
}
add_action( 'customize_register', 'my_perfect_theme_customize_register' );

จากนั้น คุณสามารถstyle.cssหรือผ่านสไตล์อินไลน์ โดยใช้get_theme_mod(‘primary_color’)เพื่อดึงค่าที่ผู้ใช้ตั้งค่าไว้และนำไปใช้กับส่วนหน้า

สรุป

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

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

ธีม WordPress อย่างน้อยต้องมีไฟล์อะไรบ้าง?

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

วิธีการเพิ่มไฟล์ JavaScript และ CSS ให้กับธีมอย่างถูกต้อง?

ห้ามใช้โดยตรงในไฟล์เทมเพลตเด็ดขาด或วิธีที่ถูกต้องคือ ใน functions.php ของธีมfunctions.phpในไฟล์ ให้สร้างฟังก์ชัน และใช้wp_enqueue_style()和wp_enqueue_script()เพื่อลงทะเบียนและคิวสไตล์ชีตและสคริปต์ของคุณ จากนั้น ฮุคฟังก์ชันนี้ไปยังwp_enqueue_scriptsนี้actionสิ่งนี้จะช่วยให้แน่ใจว่ามีการจัดการการพึ่งพาและหลีกเลี่ยงความขัดแย้งกับปลั๊กอินอื่น

เทมเพลตฮีราคีคืออะไรและทำไมจึงสำคัญ?

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

ธีมลูกและธีมแม่แตกต่างกันอย่างไร และควรใช้งานอย่างไร

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