เริ่มต้นจากศูนย์: คู่มือฉบับสมบูรณ์และเทคโนโลยีหลักในการพัฒนา WordPress Theme

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

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

在style.cssในส่วนหัวของไฟล์ คุณจำเป็นต้องใช้ความคิดเห็นเฉพาะเพื่อกำหนดธีม ตัวอย่างทั่วไปมีดังนี้:

แนะนำให้อ่าน คู่มือฉบับสมบูรณ์ในการพัฒนา WordPress Themes: หลักสูตรปฏิบัติจากระดับเริ่มต้นจนเชี่ยวชาญ。

/*
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
*/

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

UltaHost WordPress โฮสติ้ง

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

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

ทำความเข้าใจโครงสร้างลำดับชั้นของเทมเพลตธีม

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

กฎการตั้งชื่อไฟล์เทมเพลตหลัก

ลำดับชั้นของเทมเพลตเป็นไปตามหลักการ “จากเฉพาะเจาะจงไปสู่ทั่วไป” ตัวอย่างเช่น เมื่อเข้าถึงบทความบล็อกที่มี ID 123 WordPress จะค้นหาตามลำดับดังนี้:single-post-123.php、single-post.php、single.phpและสุดท้ายคือsingular.phpหากไม่มีไฟล์เหล่านี้ จึงจะใช้index.php。

ไฟล์เทมเพลตหลักที่ใช้บ่อย ได้แก่:
- front-page.phpindex.php: ใช้สำหรับตั้งค่าหน้าแรกของเว็บไซต์
- home.php: หน้าดัชนีบทความบล็อก
- single.php：บทความบล็อกเดี่ยวหรือบทความเดี่ยวของประเภทโพสต์ที่กำหนดเอง
- page.php: หน้าเดี่ยว
- archive.php：เทมเพลตทั่วไปสำหรับหน้าอาร์ไคฟ์ทุกประเภท (หมวดหมู่, แท็ก, ผู้เขียน ฯลฯ)
- category.php：หน้าหมวดหมู่เฉพาะ
- 404.php：404 หน้าข้อผิดพลาด
- header.php、footer.php、sidebar.php：เหล่านี้มักเป็นส่วนของเทมเพลตย่อย

เรียกใช้ฟังก์ชันทั่วไปของเทมเพลตย่อย

เพื่อรักษาความเป็นโมดูลาร์และความสามารถในการบำรุงรักษาของโค้ด WordPress ได้จัดเตรียมฟังก์ชันสำคัญบางส่วนไว้สำหรับการโหลดไฟล์เทมเพลตย่อย ที่สำคัญที่สุดคือget_header()、get_footer()和get_sidebar()ใช้สำหรับการนำเข้าheader.php、footer.php和sidebar.php。

แนะนำให้อ่าน แนวคิดหลักในการพัฒนา WordPress Theme。

อีกฟังก์ชันที่สำคัญคือget_template_part()มันช่วยให้คุณสามารถรวมส่วนของเทมเพลตใดๆ ได้อย่างยืดหยุ่นมากขึ้น ตัวอย่างเช่น ในลูปของบทความบล็อก คุณอาจต้องการรวมเทมเพลตเนื้อหาบทความเฉพาะ:

<?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'template-parts/content', get_post_type() ); ?>
<?php endwhile; ?>

โค้ดนี้จะค้นหาลำดับความสำคัญตามtemplate-parts/content-post.php(สมมติว่าประเภทบทความคือpost), หากไม่พบ, ให้โหลดtemplate-parts/content.php。

ใช้ฟังก์ชันหลักและฮุคเพื่อขับเคลื่อนฟังก์ชันการทำงาน

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

hosting.com 共享主机

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

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

ฟังก์ชันพื้นฐานสำหรับดึงข้อมูลและแสดงผลเนื้อหา

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

ลูปโพสต์บล็อกเป็นหัวใจของเทมเพลต WordPress ซึ่งมีโครงสร้างโค้ดมาตรฐานดังนี้

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <!-- 在这里输出文章内容 -->
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    <?php endwhile; ?>
    <!-- 这里可以放置分页导航 -->
<?php else : ?>
    <!-- 如果没有找到文章，显示的内容 -->
    <p>ยังไม่มีเนื้อหา</p>
<?php endif; ?>

การขยายฟังก์ชันผ่านฮุค

ฮุกแบ่งออกเป็นสองประเภทคือ “แอ็กชัน” และ “ฟิลเตอร์” ฮุกแอ็กชันอนุญาตให้คุณแทรกโค้ดของคุณเองเมื่อเกิดเหตุการณ์เฉพาะ เช่น ในwp_headฮุก คุณสามารถใช้ฟังก์ชันadd_action()เพื่อติดตั้งฟังก์ชันของคุณเอง

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

ตัวอย่างเช่น ในธีมfunctions.phpไฟล์เพื่อเพิ่มการสนับสนุนลิงก์ฟีด:

add_action( 'after_setup_theme', 'mytheme_setup' );
function mytheme_setup() {
    // 为文章和评论添加Feed链接到head中
    add_theme_support( 'automatic-feed-links' );
}

ตัวกรองและฮุคช่วยให้คุณสามารถปรับเปลี่ยนข้อมูลได้ ตัวอย่างเช่น การใช้excerpt_lengthตัวกรองสามารถเปลี่ยนความยาวของบทคัดย่อบทความ:

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

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

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

add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length', 999 );
function mytheme_custom_excerpt_length( $length ) {
    return 30; // 将摘要长度设置为30个单词
}

functions.phpไฟล์นี้เป็น “ศูนย์กลางการทำงาน” ของธีม ฟังก์ชันที่กำหนดเองทั้งหมด การเรียกใช้ฮุค และการประกาศฟังก์ชันของธีมควรอยู่ที่นี่

ประกาศการสนับสนุนฟีเจอร์ธีม

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

การประกาศฟังก์ชันทั่วไป ได้แก่:

add_action( 'after_setup_theme', 'mytheme_theme_support' );
function mytheme_theme_support() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5语义化标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}

การรวมไฟล์สไตล์และสคริปต์ที่กำหนดเอง

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

การลงทะเบียนและโหลดทรัพยากรอย่างปลอดภัย

ห้ามใช้โดยตรงในไฟล์เทมเพลตเด็ดขาด<link>或<script>ป้ายกำกับเพื่อเข้ารหัสทรัพยากรอย่างแข็งกร้าว วิธีที่ถูกต้องคือการใช้wp_enqueue_scriptsAction Hooks ร่วมกับwp_enqueue_style()和wp_enqueue_script()ฟังก์ชัน

在functions.phpคุณต้องกำหนดฟังก์ชันเพื่อจัดการการเรียงลำดับทรัพยากร:

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
function mytheme_enqueue_assets() {
    // 加载主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0' );

// 加载Google字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );

// 加载主JavaScript文件，并依赖jQuery，在页脚加载
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );

// 如果需要传递PHP变量到JS，可以使用wp_localize_script
    wp_localize_script( 'mytheme-script', 'myThemeData', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'home_url' => home_url(),
    ));
}

วิธีนี้รับประกันว่าการพึ่งพาถูกต้อง หลีกเลี่ยงการโหลดซ้ำ และอนุญาตให้ปลั๊กอินและธีมอื่น ๆ จัดการผ่านการประกาศการพึ่งพาของพวกเขา

เพิ่มการสนับสนุนสไตล์ให้กับตัวแก้ไข Gutenberg

ด้วยความนิยมของตัวแก้ไขบล็อก การเพิ่มการสนับสนุนสไตล์ส่วนหน้าสำหรับตัวแก้ไขส่วนหลังจึงมีความสำคัญอย่างยิ่ง เพื่อให้ประสบการณ์การแก้ไขเป็นแบบ “เห็นเหมือนได้” คุณสามารถใช้add_theme_support( ‘editor-styles’ )และจัดคิวสไตล์ชีตของตัวแก้ไข

add_action( 'after_setup_theme', 'mytheme_editor_styles' );
function mytheme_editor_styles() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'assets/css/editor-style.css' );
}

สรุป

การพัฒนา WordPress Theme เป็นกระบวนการที่เริ่มจากการเข้าใจโครงสร้างไฟล์พื้นฐาน แล้วค่อยๆ ลึกลงไปในระดับเทมเพลต ฟังก์ชันหลัก ระบบฮุค และการจัดการทรัพยากร ประเด็นสำคัญอยู่ที่การปฏิบัติ: เริ่มจากสิ่งที่ง่ายที่สุดstyle.css和index.phpเริ่มต้น แล้วจึงสร้างheader.php和footer.phpทำการแยกส่วนเป็นโมดูล จากนั้นใช้ระดับชั้นของเทมเพลตเพื่อสร้างเทมเพลตเฉพาะสำหรับประเภทหน้าต่างๆ เช่นsingle.php或page.phpในfunctions.phpผ่านทางฮุคและadd_theme_supportเพิ่มฟังก์ชันอย่างปลอดภัย และตรวจสอบผ่านทางเสมอwp_enqueue_scriptsเพื่อจัดการสไตล์และสคริปต์ ปฏิบัติตามหลักการและขั้นตอนพื้นฐานเหล่านี้ คุณจะสามารถสร้างธีม WordPress ที่เป็นมืออาชีพ มีประสิทธิภาพ และบำรุงรักษาได้

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

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

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

จะสร้างเทมเพลตหน้าประยุกต์สำหรับธีมของฉันได้อย่างไร

การสร้างเทมเพลตหน้าที่กำหนดเองนั้นง่ายมาก คุณเพียงแค่เพิ่มส่วนคอมเมนต์ PHP เฉพาะที่ด้านบนของไฟล์เทมเพลตใดๆ (โดยปกติคือpage.php) ตัวอย่างเช่น การสร้างเทมเพลต “หน้าความกว้างเต็ม” คุณสามารถสร้างไฟล์ใหม่ชื่อtemplate-full-width.phpและเขียนที่ส่วนต้นของไฟล์:/* Template Name: 全宽页面 */หลังจากบันทึกแล้ว เมื่อแก้ไขหน้าในแถบด้านหลังของ WordPress คุณจะสามารถเห็นและเลือก “หน้าเต็มความกว้าง” ในกล่องดรอปดาวน์ “เทมเพลต” ภายใต้ “คุณสมบัติหน้า”

为什么要在functions.php中使用add_action来添加功能？

โดยตรงบนfunctions.phpการเขียนโค้ดฟังก์ชันโดยตรงอาจทำให้การทำงานดำเนินการในเวลาที่ไม่ถูกต้อง ส่งผลให้เกิดข้อผิดพลาดหรือฟังก์ชันไม่ทำงาน การใช้add_action()或add_filter()การติดตั้งฟังก์ชันของคุณไปยังฮุค WordPress ที่เฉพาะเจาะจงจะช่วยให้มั่นใจว่าโค้ดจะทำงานในเวลาที่ถูกต้องและปลอดภัย ตัวอย่างเช่นafter_setup_themeฮุคใช้สำหรับการเริ่มต้นธีมwp_enqueue_scriptsฮุคใช้สำหรับโหลดทรัพยากร นี่คือแนวปฏิบัติที่ดีที่สุดสำหรับสถาปัตยกรรมแบบปลั๊กอินของ WordPress ซึ่งสามารถเพิ่มความสามารถในการปรับโมดูลและความเข้ากันได้ของโค้ด

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

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

การพัฒนาเทมเพลตเชิงพาณิชย์ต้องคำนึงถึงใบอนุญาตและข้อกำหนดใดบ้าง

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