องค์ประกอบหลักของ WordPress Theme

แนะนำให้อ่าน ในโลกออนไลน์ที่มีการแข่งขันสูงในปัจจุบัน WordPress ที่ออกแบบมาอย่างดีและมีประสิทธิภาพสูง。

ข้อมูลส่วนหัวของสไตล์ชีตธีม

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

UltaHost WordPress โฮสติ้ง

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

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

/*
Theme Name: My Awesome Theme
Theme URI: https://example.com/my-awesome-theme/
Author: Your Name
Author URI: https://example.com/
Description: A modern, responsive WordPress theme built for speed and SEO.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
*/

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

การดำเนินการทั่วไปของไฟล์ฟังก์ชันธีม

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

<?php
function my_awesome_theme_setup() {
    // 添加对文章特色图片的支持
    add_theme_support( 'post-thumbnails' );
    // 添加对自定义Logo的支持
    add_theme_support( 'custom-logo' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    // 添加对标题标签的支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );
?>

โค้ดนี้ผ่านทางฮุคafter_setup_themeดำเนินการหลังจากโหลดธีม เปิดใช้งานฟังก์ชันหลักของ WordPress หลายอย่างอย่างปลอดภัย

ลำดับชั้นของเทมเพลตและเทมเพลตที่กำหนดเอง

WordPress ใช้ระบบอัจฉริยะที่เรียกว่า “ลำดับชั้นของเทมเพลต” เพื่อตัดสินใจว่าจะเรนเดอร์หน้าเว็บประเภทต่าง ๆ อย่างไร เมื่อผู้ใช้เข้าชมหน้าเว็บ WordPress จะค้นหาไฟล์เทมเพลตที่เกี่ยวข้องตามลำดับความสำคัญเฉพาะ เช่น สำหรับบทความที่จัดอยู่ในหมวดหมู่ “News” WordPress จะค้นหาตามลำดับต่อไปนี้:single-post-news.php -> single-post.php -> single.php -> singular.php -> index.phpนักพัฒนาสามารถใช้กฎนี้เพื่อควบคุมหน้าเว็บอย่างละเอียดโดยการสร้างไฟล์เทมเพลตที่มีการตั้งชื่อเฉพาะ

แนะนำให้อ่าน เริ่มต้นการพัฒนา WordPress Theme: สร้างเว็บไซต์ที่ปรับแต่งได้ตั้งแต่เริ่มต้น。

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

สร้างเทมเพลตหน้าคุณสมบัติพิเศษ

ตัวอย่างเช่น การสร้างเทมเพลตหน้าที่มีความกว้างเต็มหน้าทั้งหมด สามารถสร้างไฟล์ใหม่ชื่อtemplate-fullwidth.phpและเพิ่มความคิดเห็นต่อไปนี้ที่ส่วนต้นของไฟล์:

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

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

hosting.com 共享主机

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

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

ใช้แท็กเงื่อนไขสำหรับการควบคุมตรรกะ

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

<?php if ( is_home() && ! is_front_page() ) : ?>
    <h1>รายการบทความบล็อก</h1>
<?php elseif ( is_search() ) : ?>
    <h1>搜索结果：</h1>
<?php endif; ?>

แท็กเงื่อนไขที่ใช้บ่อยยังรวมถึงis_single()、is_page()、is_category()、is_archive()เป็นต้น พวกมันเป็นรากฐานสำคัญในการสร้างธีมที่ไดนามิกและชาญฉลาด

การจัดการสคริปต์และสไตล์ของธีม

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

แนะนำให้อ่าน เน้นปฏิบัติจริง: เรียนรู้ตั้งแต่เริ่มต้นจนเชี่ยวชาญทักษะหลักในการพัฒนา WordPress Theme สมัยใหม่。

การลงทะเบียนและคิวทรัพยากรที่ถูกต้อง

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

<?php
function my_awesome_theme_scripts() {
    // 注册并排队主样式表（style.css）
    wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

    // 注册一个自定义JavaScript文件
    wp_register_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0.0', true );
    // 排队这个脚本（仅在需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );
?>

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

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

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

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

เพิ่มสไตล์อินไลน์หรือสคริปต์

บางครั้งจำเป็นต้องสร้าง CSS หรือ JavaScript บางส่วนตามไดนามิกของตรรกะ PHP ในกรณีนี้สามารถใช้wp_add_inline_style()和wp_add_inline_script()ฟังก์ชัน ซึ่งต้องผูกติดกับทรัพยากรที่เข้าคิวแล้ว

<?php
function my_dynamic_css() {
    $custom_css = "
        .site-header {
            background-color: #" . get_theme_mod('header_bg_color', 'ffffff') . ";
        }
    ";
    wp_add_inline_style( 'my-awesome-theme-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_dynamic_css' );
?>

ตัวปรับแต่งธีมและฟังก์ชันที่กำหนดเอง

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

เพิ่มการตั้งค่าใน Customizer

ก่อนอื่น จำเป็นต้องมีfunctions.phpใช้ฟังก์ชันcustomize_registerhook เพื่อลงทะเบียนการตั้งค่า ตัวควบคุม และส่วน

<?php
function my_awesome_theme_customize_register( $wp_customize ) {
    // 添加一个“颜色”板块
    $wp_customize->add_section( 'theme_colors', array(
        'title'    => __( '主题颜色', 'my-awesome-theme' ),
        'priority' => 30,
    ) );

    // 添加一个“链接颜色”设置
    $wp_customize->add_setting( 'link_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

    // 为该设置添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
        'label'    => __( '链接颜色', 'my-awesome-theme' ),
        'section'  => 'theme_colors',
        'settings' => 'link_color',
    ) ) );
}
add_action( 'customize_register', 'my_awesome_theme_customize_register' );
?>

การแสดงผลการตั้งค่าที่กำหนดเองในธีม

หลังจากเพิ่มการตั้งค่าแล้ว จำเป็นต้องแสดงผลค่านี้ในส่วนหน้าของธีม โดยปกติจะอยู่ที่style.cssหรือผ่านwp_add_inline_style()ใน CSS แบบไดนามิกที่เพิ่มเข้ามา ใช้get_theme_mod()ฟังก์ชันเพื่อรับค่า

<?php
function output_customizer_css() {
    $link_color = get_theme_mod( 'link_color', '#0073aa' ); // 第二个参数为默认值
    if ( $link_color !== '#0073aa' ) {
        $css = "
            a { color: {$link_color}; }
            a:hover { color: " . adjust_color( $link_color, -50 ) . "; }
        ";
        wp_add_inline_style( 'my-awesome-theme-style', $css );
    }
}
add_action( 'wp_enqueue_scripts', 'output_customizer_css' );
?>

ด้วยวิธีนี้ ฟังก์ชันการทำงานและรูปลักษณ์ของธีมสามารถปรับแต่งได้สูง ในขณะที่ยังคงรักษาความเรียบร้อยและความปลอดภัยของโค้ด

สรุป

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

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

ธีม WordPress พื้นฐานที่สุดต้องมีไฟล์อย่างน้อยกี่ไฟล์?

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

ธีมลูกและธีมแม่แตกต่างกันอย่างไร? สร้างได้อย่างไร?

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

ทำไมเทมเพลตเพจที่กำหนดเองของฉันไม่แสดงในรายการดรอปดาวน์ในแอดมิน?

โปรดตรวจสอบไฟล์เทมเพลตเพจของคุณ (เช่นmy-template.php）อยู่ในไดเรกทอรีรูทของธีมหรือไม่ และรูปแบบบล็อกความคิดเห็นที่จุดเริ่มต้นของไฟล์ต้องถูกต้องสมบูรณ์ บล็อกความคิดเห็นต้องมีบรรทัดTemplate Name:และตามด้วยชื่อเทมเพลตของคุณโดยทันที การเว้นวรรคที่ผิดพลาดหรือการขาดเครื่องหมายจุดคู่แม้เพียงเล็กน้อยอาจทำให้ WordPress ไม่สามารถรับรู้ได้

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

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