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

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

ก่อนเริ่มเขียนโค้ด คุณจำเป็นต้องมีสภาพแวดล้อมการพัฒนาที่มั่นคงและเป็นมืออาชีพในเครื่องของคุณเอง ขอแนะนำอย่างยิ่งว่าอย่าแก้ไขไฟล์ธีมโดยตรงบนเซิร์ฟเวอร์ออนไลน์ สภาพแวดล้อมการพัฒนาท้องถิ่นจะช่วยให้คุณสามารถทดสอบได้อย่างอิสระโดยไม่ส่งผลกระทบต่อการเข้าถึงเว็บไซต์ปกติ คุณสามารถเลือกใช้ซอฟต์แวร์สภาพแวดล้อมแบบรวม เช่น XAMPP, MAMP (สำหรับ Mac) หรือ Laragon (สำหรับ Windows) ซึ่งสามารถติดตั้งและกำหนดค่า Apache, MySQL และ PHP ได้ในคลิกเดียว

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

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

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

ทำความเข้าใจโครงสร้างพื้นฐานของธีม WordPress

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

UltaHost WordPress โฮสติ้ง

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

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

กลไกหลักที่สำคัญที่สุดคือ “ลำดับชั้นของเทมเพลต” WordPress จะเลือกไฟล์เทมเพลตที่สอดคล้องกันโดยอัตโนมัติตามประเภทของหน้าที่กำลังเข้าชมเพื่อแสดงเนื้อหา ตัวอย่างเช่น เมื่อเข้าชมบทความบล็อก WordPress จะค้นหา single.phpก่อน; เมื่อเข้าชมหน้าแรกของบล็อก จะค้นหา home.php 或 index.phpกลไกนี้ให้ความยืดหยุ่นอย่างมากแก่ธีม

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

ส่วนหัวความคิดเห็นทั่วไปของธีมมีดังนี้:

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

Text Domain สำหรับการทำให้เป็นสากล มันคือตัวระบุที่ใช้ในการเรียกฟังก์ชันแปลในภายหลัง

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

นอกจากสองไฟล์นี้แล้ว ธีมที่ทำงานได้อย่างสมบูรณ์มักจะประกอบด้วย:header.php(ส่วนหัวของหน้าเว็บ)footer.php(ส่วนท้ายของหน้าเว็บ)sidebar.php(แถบด้านข้าง) และ functions.php(ไฟล์เพิ่มประสิทธิภาพฟังก์ชันธีม) โดยการเข้าใจโครงสร้างพื้นฐานนี้ คุณจะเข้าใจโครงร่างของการพัฒนาธีม

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

ตอนนี้ เรามาเริ่มสร้างธีมแรกกัน ใน /wp-content/themes/ ไดเรกทอรีของคุณ สร้างโฟลเดอร์ใหม่ ตั้งชื่อเช่น my-first-theme, จากนั้นภายในโฟลเดอร์นั้นให้สร้างไฟล์พื้นฐานที่สุด

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

hosting.com 共享主机

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

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

<?php get_header(); ?>
<main>
  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <article>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
      </article>
    
    <p>ยังไม่มีเนื้อหา</p>
  <?php endif; ?>
</main>

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

สร้าง header.phpมันควรมีส่วนเริ่มต้นของเอกสาร HTML จนถึงจุดเริ่มต้นของพื้นที่เนื้อหาหลัก:

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <?php wp_head(); ?>
</head>
<body no numeric noise key 1004>
  <header>
    <h1><a href="/th/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    <p><?php bloginfo( 'description' ); ?></p>
    <nav>
      'primary'
        ) );
      ?&gt;
    </nav>
  </header>

ที่นี่wp_head() เป็นฮุคที่สำคัญซึ่งอนุญาตให้ WordPress core, ปลั๊กอิน และธีมแทรกโค้ดที่จำเป็น (เช่น ลิงก์สไตล์ชีต) เข้าไปในส่วนหัวของหน้าbody_class() ฟังก์ชันจะแสดงชื่อคลาส CSS ที่มีความหมายหลายรายการ เพื่ออำนวยความสะดวกในการควบคุมสไตล์อย่างละเอียด

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

สร้าง footer.php เพื่อปิดแท็กที่เปิดอยู่:

  <footer>
    <p>©</p>
    <?php wp_footer(); ?>
  </footer>
</body>
</html>

โปรดทราบว่าwp_footer() คือ wp_head() ซึ่งเป็นฮุคส่วนท้ายที่คู่กันและไม่สามารถขาดได้

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

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

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

สร้าง sidebar.phpในตอนนี้สามารถใส่เพียงการเรียกใช้คอนโทรลอย่างง่ายได้:

<aside>
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>
</aside>

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

เพิ่มประสิทธิภาพการทำงานของเทมเพลตผ่าน Functions.php

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

คุณต้องสร้างไฟล์นี้ในไดเรกทอรีรูทของธีม ก่อนอื่น มาลองเพิ่มไฟล์สไตล์ชีตและสคริปต์ให้กับธีม วิธีที่ถูกต้องคือการ “เข้าคิว” ผ่านฟังก์ชันที่ WordPress จัดให้ ไม่ใช่การเขียนลงใน HTML โดยตรง <link> แท็ก

<?php
function my_first_theme_scripts() {
    // 添加主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 添加一个自定义样式表
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 添加一个 JavaScript 文件
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

ที่นี่wp_enqueue_style() 和 wp_enqueue_script() เป็นฟังก์ชันสำหรับเพิ่มทรัพยากรอย่างปลอดภัยget_stylesheet_uri() ชี้ไปยังธีม style.css。add_action() เชื่อมโยงฟังก์ชันของเรากับ wp_enqueue_scripts ฮุคนี้ เพื่อให้มั่นใจว่ามันทำงานในเวลาที่เหมาะสม

ต่อไปนี้ ให้ลงทะเบียนเมนูนำทางและแถบด้านข้าง (พื้นที่วิดเจ็ต):

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );

// 为“文章”类型启用文章格式支持
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 添加对 HTML5 标记格式的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 启用标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() ทำให้ตำแหน่งเมนูที่สามารถเลือกได้ปรากฏในส่วน “รูปลักษณ์” -> “เมนู” ของแอดมินadd_theme_support() ฟังก์ชันสำหรับเปิดใช้งานคุณสมบัติต่างๆ ของธีม นี่คือวิธีมาตรฐานในการพัฒนาธีมสมัยใหม่ ตัวอย่างเช่น หลังจากเปิดใช้งาน title-tag คุณไม่จำเป็นต้อง header.php ใน <title> ป้ายกำกับแล้ว

สุดท้าย ลงทะเบียนพื้นที่วิดเจ็ตด้านข้าง

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'my-first-theme' ),
        '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_first_theme_widgets_init' );

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

สรุป

เริ่มจากการสร้างที่มี style.css 和 index.php เริ่มจากโฟลเดอร์ ไปจนถึงการสร้างส่วนประกอบเทมเพลตที่แยกออกมา (header.php, footer.php），ต่อมาผ่านการ functions.php การลงทะเบียนเมนูไฟล์ แถบด้านข้าง และการโหลดทรัพยากรอย่างปลอดภัย คุณได้ผ่านเส้นทางหลักที่สมบูรณ์ในการสร้างธีม WordPress ที่กำหนดเองแล้ว ใจกลางของกระบวนการนี้อยู่ที่การทำความเข้าใจและปฏิบัติตามลำดับชั้นเทมเพลตและระบบฮุคของ WordPress

คุณไม่ใช่แค่ผู้ใช้ธีมอีกต่อไป แต่เป็นผู้สร้าง ด้วยความรู้พื้นฐานเหล่านี้ คุณสามารถศึกษาต่อไปยังไฟล์เทมเพลตที่ซับซ้อนมากขึ้น เช่น single.php、page.php、archive.phpสำรวจความเป็นไปได้เพิ่มเติมของลูป WordPress และใช้แท็กเงื่อนไข (เช่น is_page(), is_single()) เพื่อควบคุมหน้าเว็บได้อย่างละเอียดยิ่งขึ้น โลกของการพัฒนา Theme นั้นกว้างใหญ่และน่าสนใจ นี่เป็นเพียงจุดเริ่มต้นที่มั่นคงเท่านั้น

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

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

需要具备 PHP 的基础知识，但无需达到精通的水平。你至少需要理解变量、数组、条件语句（if/else）、循环（while/foreach）以及函数的基本概念。因为 WordPress 主题开发大量使用了其内置的 PHP 函数（模板标签）和钩子系统，所以学习重点在于理解 WordPress 特有的 PHP 函数如何使用，而非从头编写复杂的 PHP 算法。

ทำไมต้องใช้ฟังก์ชัน wp_head() และ wp_footer()?

ฟังก์ชันทั้งสองนี้เป็น Hook หลักของ WordPresswp_head() ตั้งอยู่ที่ </head> ก่อนแท็ก, มันอนุญาตให้ WordPress หลัก, ปลั๊กอิน และธีมของคุณเองแทรกรหัสที่จำเป็นในส่วนหัวของหน้า เช่น ลิงก์สไตล์ชีต CSS, แท็กเมตา, ตัวแปร JavaScript เป็นต้นwp_footer() ตั้งอยู่ที่ </body> ก่อนแท็ก, มักใช้สำหรับแทรกรหัสวิเคราะห์, ไฟล์ JavaScript ที่โหลดแบบล่าช้า หากขาดสิ่งเหล่านี้ ปลั๊กอินจำนวนมากจะไม่สามารถทำงานได้อย่างถูกต้อง และแม้แต่ฟังก์ชันบางอย่างของ WordPress เองก็อาจทำงานผิดปกติ

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

สร้างไฟล์ PHP ใหม่ เช่น page-fullwidth.php. ที่ด้านบนของไฟล์นี้ คุณจำเป็นต้องเพิ่มบล็อกความคิดเห็นชื่อเทมเพลตเฉพาะ ตัวอย่างเช่น:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的页面模板
 */

จากนั้น คุณสามารถเขียนในไฟล์นี้แตกต่างจาก page.php โครงสร้าง HTML เช่น การละเว้น get_sidebar() เรียกใช้ หลังจากบันทึกแล้ว เมื่อแก้ไขหน้าระบบหลังของ WordPress ในรายการแบบเลื่อนลง “เทมเพลต” ของ “คุณสมบัติหน้า” จะมีตัวเลือก “หน้าเต็มความกว้าง” ให้คุณเลือก

ในการพัฒนาเทม ควรจัดการ CSS และ JavaScript อย่างไรจึงจะเป็นวิธีปฏิบัติที่ดีที่สุด?

วิธีปฏิบัติที่ดีที่สุดคือการใช้สิ่งที่ WordPress จัดให้ wp_enqueue_style() 和 wp_enqueue_script() ฟังก์ชัน เพื่อลงทะเบียนและจัดคิวใน functions.php การติดตั้งบน wp_enqueue_scripts ใช้ hook เพื่อเพิ่มทรัพยากร วิธีนี้สามารถ: 1) จัดการการพึ่งพาอย่างถูกต้อง (เช่น สคริปต์ของคุณพึ่งพา jQuery); 2) หลีกเลี่ยงการโหลดทรัพยากรเดียวกันซ้ำ; 3) สะดวกในการจัดการปลั๊กอินและโค้ดธีมอื่นๆ; 4) เป็นไปตามมาตรฐานการเข้ารหัสของ WordPress ควรหลีกเลี่ยงการใช้งานโดยตรงในไฟล์เทมเพลต <link> 或 <script> แท็กที่เข้ารหัสทรัพยากรแบบแข็ง

ธีมของฉันจะรองรับหลายภาษา (สากล) ได้อย่างไร?

คุณต้องทำสองสิ่ง ประการแรก ใน style.css ส่วนหัวความคิดเห็นและเมื่อเรียกข้อความแปล ใช้ “โดเมนข้อความ” (Text Domain) ที่ถูกต้อง ตามที่แสดงในคู่มือ ให้กำหนด Text Domain: my-first-themeประการที่สอง ใน functions.php และในไฟล์เทมเพลตทั้งหมด ให้ใช้ฟังก์ชันแปลของ WordPress เพื่อห่อหุ้มข้อความส่วนติดต่อผู้ใช้ทั้งหมดที่ต้องแปล โดยที่ใช้บ่อยที่สุดคือ __()(ส่งคืนสตริงที่แปลแล้ว) และ _e()(แสดงผลสตริงที่แปลแล้วโดยตรง) ตัวอย่างเช่น:<?php _e( ‘Hello World’, ‘my-first-theme’ ); ?>หลังจากนั้น คุณสามารถใช้เครื่องมือเช่น Poedit เพื่อสร้าง .pot ไฟล์เทมเพลต สำหรับนักแปลในการสร้าง .po 和 .mo ไฟล์สำหรับภาษาต่างๆ ได้