WordPress ธีมพัฒนาเริ่มต้น: สร้างธีมที่กำหนดเองตั้งแต่เริ่มต้น

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

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

ก่อนอื่น คุณจำเป็นต้องติดตั้งสภาพแวดล้อมเซิร์ฟเวอร์แบบบูรณาการบนคอมพิวเตอร์ท้องถิ่นของคุณ สำหรับผู้ใช้ WindowsXAMPP或WampServerเป็นตัวเลือกที่พบบ่อย ผู้ใช้ macOS สามารถพิจารณาMAMP或Local by Flywheelชุดเครื่องมือเหล่านี้รวมเซิร์ฟเวอร์ Apache ฐานข้อมูล MySQL และสภาพแวดล้อม PHP เข้าด้วยกัน ติดตั้งเพียงครั้งเดียวก็สามารถใช้งานได้ทันที

ต่อไปนี้ ดาวน์โหลดไฟล์หลัก WordPress เวอร์ชันล่าสุดและแตกไฟล์ไปยังโฟลเดอร์รากของเว็บไซต์บนเซิร์ฟเวอร์ท้องถิ่น (เช่นhtdocs) จากนั้นทำตามขั้นตอนการติดตั้งมาตรฐาน “ห้านาที” เพื่อสร้างเว็บไซต์ WordPress ท้องถิ่นสำหรับการพัฒนา พร้อมกันนี้ ขอแนะนำอย่างยิ่งให้ติดตั้งโปรแกรมแก้ไขโค้ด เช่นVisual Studio Code、PhpStorm或Sublime Textซึ่งให้การเน้นไวยากรณ์ การแนะนำโค้ด และการสนับสนุนการดีบักที่ดีเยี่ยมสำหรับ PHP, HTML, CSS และ JavaScript

แนะนำให้อ่าน คู่มือการพัฒนา WordPress Theme ขั้นสุดท้าย: จากพื้นฐานสู่การปฏิบัติจริงแบบปรับแต่งได้。

สุดท้าย เพื่อสังเกตผลกระทบของการเปลี่ยนแปลงโค้ดต่อรูปลักษณ์ของเว็บไซต์แบบเรียลไทม์ คุณต้องทำการดีบักในเครื่องมือนักพัฒนาของเบราว์เซอร์ (กด F12 เพื่อเปิด) การทำความคุ้นเคยกับแผง “ตัวตรวจสอบองค์ประกอบ” และ “คอนโซล” จะเป็นทักษะที่ขาดไม่ได้ในการพัฒนาต่อไป

UltaHost WordPress โฮสติ้ง

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

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

ทำความเข้าใจโครงสร้างพื้นฐานและไฟล์หลักของธีม

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

ไฟล์ที่จำเป็นสำหรับธีม

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

/*
Theme Name: 我的第一个自定义主题
Theme URI: https://example.com/my-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 ไม่พบไฟล์เทมเพลตที่เจาะจงกว่า (เช่นsingle.php），จะย้อนกลับไปใช้index.php。

ระดับชั้นของไฟล์เทมเพลตและฟังก์ชันการรวม

WordPress ใช้ระบบระดับชั้นเทมเพลตเพื่อตัดสินใจว่าไฟล์เทมเพลตใดจะถูกใช้สำหรับคำขอประเภทต่างๆ ตัวอย่างเช่น เมื่อเข้าถึงโพสต์บล็อก WordPress จะค้นหาเรียงตามลำดับsingle-post.php -> single.php -> index.phpการเข้าใจระดับชั้นนี้มีความสำคัญอย่างยิ่งสำหรับการสร้างเลย์เอาต์หน้าที่แม่นยำ

แนะนำให้อ่าน คู่มือการสร้างเว็บไซต์แบบรอบด้าน: กระบวนการทั้งหมดและเทคโนโลยีหลักในการสร้างเว็บไซต์มืออาชีพตั้งแต่เริ่มต้น。

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

ในของคุณindex.phpโครงสร้างทั่วไปภายในไฟล์มีดังนี้:

<?php get_header(); ?>

<main id="main-content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 输出文章内容
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

ลักษณะ “ไดนามิก” ของธีมจะแสดงให้เห็นอย่างชัดเจนในความสามารถในการดึงและแสดงเนื้อหาจากฐานข้อมูล และกลไกหลักของทั้งหมดนี้คือ “WordPress Loop”

hosting.com 共享主机

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

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

หลักการทำงานของลูปหลัก

“Loop” เป็นโค้ด PHP ที่ตรวจสอบว่าหน้าปัจจุบันมี “โพสต์” (หมายถึงโพสต์, หน้า หรือประเภทโพสต์ที่กำหนดเองทั้งหมด) ที่ต้องแสดงหรือไม่ หากมี ก็จะวนซ้ำผ่านแต่ละโพสต์ และทำให้ข้อมูลของโพสต์นั้นพร้อมใช้งานสำหรับแท็กเทมเพลต โครงสร้าง Loop มาตรฐานมีดังนี้:

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>

<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/th/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>


    <p>ขออภัย ไม่พบเนื้อหาใดๆ</p>
<?php endif; ?>

ในลูปนี้the_title()、the_content()、the_permalink()แท็กเทมเพลตจะถูกเรียกเพื่อแสดงข้อมูลเฉพาะของโพสต์ปัจจุบัน

สร้างไฟล์เทมเพลตที่ใช้บ่อย

ตามระดับชั้นของเทมเพลต คุณควรสร้างไฟล์เทมเพลตเฉพาะสำหรับประเภทเนื้อหาต่างๆ เพื่อให้สามารถควบคุมได้อย่างละเอียดยิ่งขึ้น
* header.php: ประกอบด้วยการประกาศประเภทเอกสาร,พื้นที่ (ผ่านwp_head()ฟังก์ชันนำเข้า CSS และ JS หลัก) รวมถึงพื้นที่สาธารณะด้านบนของเว็บไซต์ (เช่นโลโก้และเมนูนำหลัก)
* footer.php: ประกอบด้วยพื้นที่สาธารณะด้านล่างของเว็บไซต์ (เช่นข้อมูลลิขสิทธิ์) และwp_footer()การเรียกใช้ฟังก์ชัน (สำหรับนำเข้าสคริปต์ที่ต้องการในส่วนท้ายของหน้า)
* single.php: สำหรับแสดงบทความบล็อกเดี่ยว
* page.php: ใช้สำหรับแสดงหน้าเว็บอิสระ
* front-page.phpหากมีอยู่ จะใช้เป็นหน้าแรกแบบคงที่ของเว็บไซต์
* functions.phpนี่ไม่ใช่ไฟล์เทมเพลต แต่เป็น “ไลบรารีฟังก์ชัน” ของธีม ใช้สำหรับเพิ่มการสนับสนุนธีม การลงทะเบียนเมนู แถบด้านข้าง และอื่นๆ

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

เพิ่มฟังก์ชันและสไตล์ของธีม

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

ขยายฟังก์ชันผ่าน functions.php

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

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

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

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

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面的“特色图像”
    add_theme_support( 'post-thumbnails' );
    // 让WordPress管理文档<title>标签
    add_theme_support( 'title-tag' );
    // 为主题添加HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 启用自定义logo功能
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

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

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

การเขียนสไตล์และสคริปต์

在style.cssในนั้น นอกเหนือจากบล็อกคอมเมนต์ด้านบน คุณสามารถเพิ่มสไตล์ให้กับโครงสร้าง HTML ของคุณได้เหมือนเขียน CSS ปกติ เพื่อให้ได้การออกแบบที่ตอบสนองต่ออุปกรณ์ อย่าลืมใช้ Media Queries

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

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

สรุป

การพัฒนา WordPress Theme เป็นกระบวนการที่ค่อยเป็นค่อยไปตั้งแต่โครงสร้างจนถึงรายละเอียด ก่อนอื่นคุณต้องสร้างสภาพแวดล้อมการพัฒนาท้องถิ่นที่มั่นคง และทำความเข้าใจระบบโครงสร้างไฟล์และลำดับชั้นของเทมเพลตให้ลึกซึ้ง จากนั้น ด้วยการเข้าใจกลไกหลักที่เรียกว่า “WordPress Loop” คุณจะสามารถแสดงเนื้อหาเว็บไซต์แบบไดนามิกได้ สุดท้าย ใช้functions.phpไฟล์เพิ่มการสนับสนุนฟังก์ชันการทำงานต่าง ๆ ให้กับธีมของคุณ และมอบประสบการณ์การมองเห็นและการโต้ตอบที่เป็นเอกลักษณ์ผ่านการเข้ารหัส CSS และ JavaScript ระดับมืออาชีพ ด้วยการทำตามขั้นตอนเหล่านี้ คุณจะสามารถเริ่มต้นจากindex.php和style.cssง่าย ๆ และค่อย ๆ สร้างธีม WordPress ที่กำหนดเองซึ่งครบถ้วนด้วยฟังก์ชันและเป็นไปตามมาตรฐาน

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

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

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

ไฟล์ functions.php ของธีมแตกต่างจากปลั๊กอินอย่างไร

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

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

การทำให้ธีมรองรับการสากล (i18n) เป็นขั้นตอนสำคัญในการพัฒนาแบบมืออาชีพ คุณต้องใช้ฟังก์ชันแปลภาษาเพื่อห่อหุ้มสตริงข้อความทั้งหมดที่เผยแพร่ต่อผู้ใช้ในโค้ดของคุณ ตัวอย่างเช่น__('文本', 'text-domain')或_e('文本', 'text-domain')ในstyle.cssบล็อกความคิดเห็นของfunctions.phpในฟังก์ชันโดเมนข้อความ คุณต้องตั้งค่าText Domain(โดเมนข้อความ) ให้ถูกต้อง ซึ่งโดเมนข้อความนี้ต้องตรงกับชื่อโฟลเดอร์ธีมของคุณ หลังจากเตรียมโค้ดเสร็จแล้ว คุณสามารถใช้เครื่องมือเช่น Poedit เพื่อสร้าง.potไฟล์เทมเพลต และสร้างไฟล์แปลที่สอดคล้องกันโดยนักแปล.po和.moไฟล์ภาษา

ในระหว่างการพัฒนาจะดีบักข้อผิดพลาด PHP ที่อาจเกิดขึ้นได้อย่างไร?

ในขั้นตอนการพัฒนา แนะนำให้เปิดโหมดดีบักของ WordPress ซึ่งจะช่วยให้คุณระบุข้อผิดพลาดได้อย่างรวดเร็ว เปิดไฟล์ในไดเรกทอรีรูทของ WordPress ของคุณwp-config.phpไฟล์, ค้นหาการตั้งค่าที่เกี่ยวข้องและแก้ไขดังนี้:

define( 'WP_DEBUG', true ); // 开启调试模式
define( 'WP_DEBUG_LOG', true ); // 将错误日志记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误（避免用户看到）

หลังจากตั้งค่าแล้ว ข้อผิดพลาด คำเตือน และการแจ้งเตือนของ PHP จะถูกบันทึกลงในwp-content/debug.logในไฟล์ โปรดปิดโหมดดีบักก่อนที่ธีมจะออนไลน์