Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Panduan Lengkap Pembangunan Tema WordPress: Daripada Permulaan Hingga Kemahiran Tinggi

Bacaan 3 minit
2026-03-17
2026-06-04
1,963
Saya mendapat komisen apabila anda membeli-belah melalui pautan di bawah, tanpa sebarang kos tambahan kepada anda.

Asas Pembangunan Tema WordPress dan Penubuhan Persekitaran (WordPress Theme Development Basics and Environment Setup)

Untuk memulakan pembangunan tema WordPress, anda perlu memahami struktur asasnya terlebih dahulu. Sebuah tema yang paling asas memerlukan sekurang-kurangnya dua fail:style.css 和 index.phpDi antaranya,style.cssBukan sahaja fail gaya (style sheets), tetapi juga mengandungi maklumat meta tentang tema tersebut, seperti nama tema, pengarang, deskripsi, dan lain-lain. Maklumat ini ditentukan melalui blok ulasan CSS (CSS comments) dan merupakan kunci bagi WordPress untuk mengenali tema yang digunakan.

Membina persekitaran pembangunan tempatan

Sebelum mula menulis kod, adalah sangat penting untuk membina sebuah persekitaran pembangunan tempatan yang cekap. Paket perisian yang mengintegrasikan Apache/Nginx, PHP, dan MySQL seperti Local by Flywheel, XAMPP, atau MAMP disyorkan. Alat-alat ini membolehkan anda membina persekitaran pelayan tempatan dengan satu klik sahaja, serta mensimulasikan keadaan operasi secara dalam talian. Selain itu, pasang juga editor kod seperti Visual Studio Code atauPhpStorm di komputer anda; editor-editor ini menyediakan fungsi penyorotan sintaks yang kuat dan cadangan kod untuk bahasa PHP, HTML, CSS, dan JavaScript.

Setelah persekitaran pembangunan bersedia, anda perlu melakukannya dalam direktori pemasangan WordPress.wp-content/themesCipta folder untuk tema anda di dalam folder tersebut. Sebagai contoh, cipta satu folder dengan nama “my_theme”.my-first-themeSenarai direktori tersebut, kemudian buat direktori yang diperlukan di dalam direktori tersebut.style.cssDokumen.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Lengkap Pembangunan Tema WordPress: Membina Laman Web Peribadi Dari Kosong。

Menulis maklumat kepala tema

style.cssKomen di bahagian atas fail merupakan “kad pengenalan” bagi topik tersebut. Berikut adalah contoh asas maklumat header:

UltaHost – Penyedia Hosting untuk WordPress
Jaminan pemulangan wang dalam tempoh 30 hari, lebar jalur dan pangkalan data yang tidak terhad, perlindungan DDoS percuma, diskaun 50% untuk pembelian selama 3 tahun.
LOGO UltaHost Lawati halaman 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Di antaranya,Text DomainDigunakan untuk pengekstrakan kandungan yang perlu diterjemahkan (internationalization atau i18n), sebagai persediaan untuk penggunaan fungsi terjemahan pada masa akan datang.__()或_e()Ini adalah penanda yang mesti digunakan pada masa tertentu. Setelah fail ini dibuat, tema anda akan muncul dalam senarai “Appearance” -> “Themes” di panel pentadbiran WordPress, walaupun pada masa ini tema tersebut tidak mempunyai sebarang fungsi.

Fail templat teras dan hierarki templat

WordPress menggunakan sistem hierarki templat untuk menentukan cara kandungan yang berbeza dipaparkan. Memahami hierarki ini adalah asas untuk mengembangkan tema yang fleksibel. Apabila pengguna mengakses sebuah halaman, WordPress akan mencari fail templat yang sesuai mengikut urutan keutamaan yang ditetapkan.

Mengerti struktur hierarki templat

Sebagai contoh, apabila seseorang mengakses sebuah artikel blog (posting individu), WordPress akan mencari maklumat tersebut secara berurutan:single-post-{post-id}.php -> single-post-{post-type}.php -> single.php -> singular.php -> index.phpPembangun hanya perlu membuat fail templat yang diperlukan, dan WordPress akan secara automatik memanggil templat yang paling sesuai dengan keperluan tersebut.

Membuat fail templat asas

Selain itu,index.phpSebuah tema yang lengkap dengan semua fungsi biasanya mengandungi fail-fail templat inti berikut:
* header.phpBahagian atas laman web, yang merangkumi<head>Tajuk kawasan dan laman web, menu navigasi.
* footer.phpBahagian kaki laman web, yang mengandungi maklumat hak cipta dan lain-lain.
* sidebar.phpKawasan alat tambahan pada bar sisi.
* functions.phpFail fungsi untuk tema, digunakan untuk menambah ciri-ciri, mendaftar menu, alat tambahan (tools), dan lain-lain.
* style.cssFail gaya utama (Main Style Sheet).
* page.phpDigunakan untuk menunjukkan halaman statik.
* single.phpDigunakan untuk menunjukkan satu artikel blog.
* archive.phpDigunakan untuk menampilkan senarai arkib artikel (seperti kategori, tag, halaman penulis).

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Lengkap Pembangunan Tema WordPress: Tutorial Praktikal Untuk Membina Tema Custom Dari Kosong。

Melalui tag templat, anda boleh memasukkan bahagian lain ke dalam pelbagai fail templat. Sebagai contoh,index.phpMengintegrasikan bahagian kepala (header) di bahagian atas:<?php get_header(); ?>Fungsi ini akan memuatkan kandungan secara automatik.header.phpDokumen.

Ciri-ciri tema ini telah disatukan dengan inti WordPress (core).

functions.phpFail tersebut merupakan “otak” bagi tema tersebut; ia membenarkan anda memperluas fungsi tema dan mengintegrasikannya dengan lebih mendalam dengan kod asas WordPress, tanpa perlu mengubah fail-fail asas WordPress itu sendiri. Fail ini akan dimuat secara automatik apabila tema tersebut diaktifkan.

Ciri-ciri yang disokong oleh pendaftaran topik:

Gunakanadd_theme_support()Fungsi tersebut boleh menyatakan fungsi-fungsi WordPress yang disokong oleh tema anda. Ini sepatutnya dilakukan di…after_setup_themeTindakan tersebut dilakukan dalam fungsi “action hook”. Sebagai contoh, kod untuk mengaktifkan imej khas bagi artikel dan logo yang disesuaikan adalah seperti berikut:

hosting.com Hosting Bersama
Prestasi tinggi, menampilkan CPU AMD EPYC, storan SSD NVMe dan LiteSpeed, dengan sokongan pakar dalaman 24/7, langkah keselamatan canggih termasuk SSL, perlindungan serangan paksa kata laluan, perisian hasad dan DDoS, menjimatkan sehingga 73%.
logo hosting.com Lawati halaman 
function mytheme_setup() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 支持HTML5标记（用于评论列表、搜索表单等）
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Daftar menu navigasi dan kawasan alat tambahan (widgets).

Menu navigasi dan alat tambahan (widgets) merupakan bahagian penting dalam interaksi antara tema (theme) dan pengguna. Anda perlu melakukannya terlebih dahulu…functions.phpAnda perlu mendaftarkannya terlebih dahulu, kemudian barulah anda boleh memanggilnya dalam templat.

Gunakanregister_nav_menus()Tempat pendaftaran fungsi:

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

Selepas pendaftaran, pengguna boleh mengurus menu untuk lokasi-lokasi tersebut di bahagian “Penampilan” -> “Menu” di bahagian pentadbiran (backend). Dalam templat (seperti…)header.php(Sila rujuk kepada gambar di atas), gunakanwp_nav_menu()Fungsi untuk memaparkan menu.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Belajar Membangunkan Tema WordPress Dari Kosong: Membina Laman Web Yang Diperibadikan。

Gunakanregister_sidebar()Kawasan alat pendaftaran fungsi:

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

Dalam templat (seperti…)sidebar.php(Sila rujuk kepada gambar di atas), gunakandynamic_sidebar( 'sidebar-1' )Untuk menunjukkan kawasan alat kecil ini.

Hosting Bersama InterServer
Hosting kongsi: 1TB/bulan pada $2.50 USD, bulan pertama pada $0.10 USD dengan kod promo tryinterserver. 461 skrip aplikasi awan tersedia untuk pemasangan satu klik.
Logo InterServer Lawati halaman

Pengurusan gaya, skrip dan penyesuaian tema

Pembangunan tema WordPress moden memerlukan pengurusan yang teratur untuk fail gaya (CSS) dan skrip (JavaScript), serta penggunaan penuh API Customizer WordPress untuk menyediakan pilihan konfigurasi dengan pra-tontonan masa nyata kepada pengguna.

Mengintegrasikan CSS dan JavaScript dengan betul

Jangan sekali guna dalam fail-fail templat secara langsung.<link>或<script>Sumber yang dikodkan secara keras dalam tag. Ini sepatutnya digunakan.wp_enqueue_style()和wp_enqueue_script()Fungsi, melaluiwp_enqueue_scriptsHook digunakan untuk memuatkan fail yang diperlukan. Ini memastikan bahawa hubungan antara komponen (dependencies) adalah betul dan mengelakkan pemuatannya yang berulang-ulang.

function mytheme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 引入Google Fonts
    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-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Mengintegrasikan Customizer WordPress

Alat penyesuaian ini membenarkan pengguna untuk menyesuaikan pilihan tema secara masa nyata, seperti warna, Logo, teks header, dan lain-lain. Anda boleh menggunakannya.WP_Customize_ManagerObjek digunakan untuk menambahkan tetapan, kawalan, dan kawasan (areas).

Berikut adalah contoh ringkas tentang cara menambahkan pilihan untuk menyesuaikan teks di bahagian kaki halaman (footer):

function mytheme_customize_register( $wp_customize ) {
    // 添加一个“页脚设置”区域
    $wp_customize->add_section( 'mytheme_footer_options', array(
        'title'    => __( '页脚设置', 'my-first-theme' ),
        'priority' => 160,
    ) );

// 添加一个“页脚版权文本”设置
    $wp_customize->add_setting( 'mytheme_footer_copyright', array(
        'default'           => __( '© 2026 我的网站。保留所有权利。', 'my-first-theme' ),
        'sanitize_callback' => 'sanitize_text_field', // 数据清理回调函数
        'transport'         => 'refresh', // 或 ‘postMessage’ 用于无需刷新的实时预览
    ) );

// 为这个设置添加一个文本输入控件
    $wp_customize->add_control( 'mytheme_footer_copyright', array(
        'label'    => __( '页脚版权文本', 'my-first-theme' ),
        'section'  => 'mytheme_footer_options',
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

在footer.phpDalam templat tersebut, anda boleh menggunakan…get_theme_mod()Fungsi untuk mendapatkan dan memaparkan nilai ini:<?php echo get_theme_mod( 'mytheme_footer_copyright' ); ?>。

RINGKASAN

Pembangunan tema WordPress merupakan sebuah proses yang sistematik, bermula dengan memahami fail-fail templat asas dan struktur hierarkinya, hingga ke tahap di mana tema tersebut dapat disesuaikan dan diperbaiki mengikut keperluan pengguna.functions.phpMengintegrasikan fungsi-fungsi asas, mengurus skrip sumber dengan teratur, serta menggunakan alat khusus (customizers) untuk menyediakan antara muka konfigurasi yang mesra pengguna. Dengan mengikuti standard pengkodan dan amalan terbaik WordPress, tema tersebut akan menjadi lebih stabil dan selamat, di samping mudah untuk diselenggara serta serasi dengan plugin lain. Dengan menguasai kemahiran-kemahiran asas ini, anda kini mempunyai keupayaan untuk membina tema WordPress yang profesional, boleh disesuaikan, dan memenuhi standard web moden dari awal.

FAQ - Soalan Lazim

Apakah bahasa pengaturcaraan yang perlu dikuasai untuk membangunkan tema WordPress?

Untuk mengembangkan tema WordPress, empat teknologi asas perlu dikuasai: PHP, HTML, CSS, dan JavaScript. PHP merupakan komponen utama yang digunakan untuk memproses data dinamik dan logik. HTML digunakan untuk membina struktur halaman web. CSS bertanggungjawab untuk gaya dan susun atur halaman. JavaScript pula digunakan untuk mencipta kesan interaktif pada bahagian pengguna (front end). Selain itu, pemahaman asas tentang SQL juga membantu dalam memahami cara data dipanggil dan diakses.

Bagaimana untuk menjadikan tema saya memenuhi piawaian semakan rasmi WordPress?

Untuk memastikan tema tersebut memenuhi piawaian semakan direktori tema WordPress.org, adalah penting untuk mematuhi dengan ketat panduan pembangunan tema. Poin-poin utama termasuk: kod mesti selamat (semua output dinamik harus di-escape atau dibersihkan), mengikuti hierarki templat, menggunakan fungsi hook dengan betul, menyokong aksesibiliti (WCAG), memastikan reka bentuk yang responsif, mengelakkan penggunaan fungsi yang telah ditinggalkan, dan menyediakan sokongan penuh untuk penyesuaian bahasa (internationalization).

Apa itu Tema Anak (Child Theme), dan mengapa saya perlu menggunakannya?

Subtopik adalah sebuah topik yang berdiri sendiri tetapi bergantung pada topik induk (parent topic), dan ia mewarisi semua fungsi, gaya, serta fail templat dari topik induk tersebut. Kelebihan terbesar menggunakan subtopik adalah apabila topik induk diperbaharui, pengubahsuaian yang anda lakukan pada subtopik (seperti menggantikan gaya atau fail templat) tidak akan hilang. Ini merupakan cara yang paling selamat dan disyorkan untuk menyesuaikan atau mengemaskini mana-mana topik sedia ada.

Apakah fungsi yang perlu digunakan dalam tema untuk mendapatkan laluan fail tema atau URL tema?

Kita mesti menggunakan fungsi path yang disediakan oleh WordPress untuk memastikan kesahihan.get_template_directory_uri()URL yang digunakan untuk mendapatkan direktori tema induk (seperti alamat fail CSS/JS).get_stylesheet_directory_uri()URL yang digunakan untuk mendapatkan direktori topik aktiviti semasa (jika ia adalah sub-topik, maka merujuk kepada sub-topik tersebut).get_template_directory()和get_stylesheet_directory()Digunakan untuk mendapatkan laluan fizikal pada pelayan.

Selanjutnya, apa yang perlu kita lakukan seterusnya?

Jika anda sedang membina atau mengoptimumkan laman web WordPress, langkah seterusnya adalah untuk terus membaca tentang pengoptimuman prestasi, konfigurasi plugin dan penyesuaian tema.

Bacaan lanjutan dan pengetahuan praktikal

Konten berikut berkaitan dengan topik artikel ini dan sesuai untuk bacaan lanjut. Lebih baik untuk memulakan dengan artikel yang paling dekat dengan masalah anda sekarang, dan kemudian secara bertahap mengembangkan ke topik yang berkaitan, kerana ini biasanya akan memberikan hasil yang lebih baik.

Tag: