Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Pembangunan tema WordPress: Panduan lengkap untuk mencipta tema kustomisasi dari awal.

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

Struktur asas tema WordPress

Sebuah tema WordPress pada dasarnya adalah sebuah fail yang terletak di direktori tema WordPress.wp-content/themes/Folder dalam direktori tersebut mengandungi satu siri fail yang digunakan untuk mengawal penampilan dan fungsi laman web. Memahami peranan fail-fail penting ini adalah asas dalam proses pembangunan.

Fail templat yang diperlukan untuk topik tersebut.

Setiap topik mesti mengandungi dua fail asas:style.css和index.phpDi antaranya,style.cssIa bukan sahaja digunakan untuk menyimpan gaya CSS (Cascading Style Sheets), tetapi blok ulasan di bahagian atas fail tersebut juga mengandungi maklumat meta tentang tema tersebut. WordPress bergantung pada maklumat ini untuk mengenal pasti tema yang digunakan.

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

index.phpIa merupakan fail templat lalai untuk sesuatu tema, dan apabila WordPress tidak dapat mencari templat yang lebih khusus, ia akan menggunakan fail ini untuk merender halaman tersebut. Fail ini berfungsi sebagai “jaring keselamatan” yang memastikan semua halaman dapat dipaparkan dengan betul.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Membina Laman Web Berkualiti: Panduan Praktikal Mengenai Penyesuaian dan Pengoptimuman Tema WordPress。

Lain-lain fail templat yang sering digunakan:

Untuk mengawal penampilan halaman yang berbeza dengan lebih terperinci, anda perlu membuat lebih banyak fail templat. Sebagai contoh,header.phpBiasanya mengandungi pengisytiharan jenis dokumen.<head>Bahagian header untuk kawasan dan laman web;footer.phpIa akan mengandungi kandungan kaki halaman dan tag penutup.sidebar.phpUntuk digunakan dalam sidebar. Melalui fungsi yang terbina dalam WordPress seperti…get_header()、get_footer()和get_sidebar()Anda boleh dengan mudah memasukkan bahagian-bahagian ini ke dalam template lain.

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

Selain itu, anda juga boleh membuat…single.phpUntuk artikel tunggal.page.phpUntuk halaman yang berdiri sendiri (independent pages).archive.phpUntuk senarai arkib, sertafunctions.phpFail khas ini digunakan untuk menambahkan ciri-ciri dan fungsi berkaitan tema.

Membuat templat halaman utama untuk topik (theme)

Halaman utama merupakan “wajah” sesuatu laman web, dan biasanya memerlukan reka bentuk yang paling unik. Kita akan mula dengan membina…index.phpMari bermula, dan kita akan membincangkan bagaimana untuk memperkenalkan pengulangan (loop) untuk menunjukkan kandungan.

Mengintegrasikan header dan footer

Amalan yang baik adalah untuk memodulkan bahagian-bahagian yang bersama-sama digunakan. Pertama sekali, buatlah modul-modul tersebut dalam folder tema (theme folder) anda.header.php和footer.phpDi dalamheader.phpDalam kes ini, anda perlu menyertakan<!DOCTYPE html>Pengisytiharan,<html>Permulaan tag…<head>Kawasan (penggunaan)wp_head()Hook membenarkan plugin dan tema untuk menyisipkan kod di sini, serta kandungan pembuka seperti logo laman web dan navigasi utama.

Kemudian, dalamindex.phpPada permulaan, gunakan…<?php get_header(); ?>Untuk memperkenalkan header ini, sila letakkan kod berikut di bahagian atas halaman web anda.index.phpDi hujung, gunakan<?php get_footer(); ?>Untuk memperkenalkan…footer.phpDi dalamnya harus mengandungiwp_footer()Hook call and closure</body></html>Tag.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Lengkap Pembangunan Tema WordPress: Membina Tema Custom Berprestasi Tinggi Dari Kosong。

Menggunakan gelung untuk mengeluarkan kandungan artikel

Inti WordPress adalah “The Loop”, yang merupakan segmen kod PHP yang digunakan untuk memeriksa sama ada terdapat artikel atau tidak, dan jika ada, artikel-artikel tersebut akan dipaparkan satu persatu.index.php的get_header()Selepas itu, anda boleh memasukkan kod gelung asas berikut:

\n
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/ms/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    <p> </p>  
 <p></p>
    <p>Maaf, tiada artikel yang ditemui.</p>
<?php endif; ?>

Dalam kod ini,have_posts()和the_post()Function-driven loop.the_title()、the_permalink()和the_excerpt()Tag templat seperti ini digunakan untuk menghasilkan kandungan artikel yang sebenar. Dengan cara ini, halaman senarai artikel yang asas telah siap dibina.

Tambah gaya dan skrip untuk tema tersebut.

Sebuah tema yang tidak mempunyai gaya (style) adalah kurang menarik. Anda perlu menyertakan fail CSS dan JavaScript dengan betul ke dalam barisan pengurusan fail (queue), yang merupakan amalan yang disyorkan oleh WordPress. Ini dapat memastikan hubungan antara komponen-komponen dalam tema berfungsi dengan betul dan mengelakkan konflik.

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

Mengintroduksi fail gaya (style sheet) dengan betul

Walaupunstyle.cssIa adalah perlu, tetapi anda tidak sepatutnya mengaitkannya terus dalam HTML. Cara yang betul adalah dengan…functions.phpDokumen tersebut menggunakanwp_enqueue_style()Fungsi. Pertama sekali, cipta fail tersebut dalam direktori akar tema (theme root directory).functions.phpFail tersebut, kemudian tambahkan kod berikut:

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Kod ini mendefinisikan sebuah fungsi yang memberitahu WordPress untuk menggunakan fail skema utama tema tersebut.get_stylesheet_uri()Path yang diperolehi akan ditambahkan ke dalam queue dengan “my-theme-style” sebagai penanda (handle).add_action()Hook akan memuatkan fungsi ini (mount the function).wp_enqueue_scriptsUntuk tindakan ini, pastikan ia dilaksanakan semasa halaman dimuat.

Mengintegrasikan JavaScript khusus (custom JavaScript)

Cara untuk memasukkan fail JavaScript adalah serupa, tetapi menggunakan…wp_enqueue_script()Fungsi. Bayangkan anda mempunyai satu fungsi yang terletak di…js/script.jsUntuk menambah fail tersebut, anda boleh melakukannya dengan cara berikut:

Diperoleh daripada WEB\nDisyorkan untuk membaca. Dari Permulaan Hingga Kemahiran: Panduan Lengkap dan Tutorial Praktikal Pembangunan Tema WordPress。

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

Di sini, parameter-parameter tersebut mewakili: pengekstrak skrip (script handler), URL skrip, dan array kebergantungan (dependencies).array('jquery')Versi nombor, serta sama ada ia dimuatkan di bahagian kaki halaman (footer) atau tidak.trueMenunjukkan bahawa…</body>(Predloading).

Mengembangkan ciri-ciri topik (topic features)

functions.phpIni adalah “Kit Alat” untuk tema tersebut, di mana anda boleh menambahkan pelbagai ciri untuk memperbaiki tema tersebut, tanpa perlu mengubah fail templat asas.

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

Menambahkan ciri sokongan tema

WordPress menyediakan banyak ciri terbina dalam, tetapi ciri-ciri tersebut hanya boleh diaktifkan jika tema yang digunakan menyatakan dengan jelas bahawa ia menyokong ciri-ciri tersebut. Ini dilakukan melalui…add_theme_support()Pengimplementasian fungsi. Sebagai contoh, untuk menyokong gambar ringkasan artikel (gambar khas), logo yang didefinisikan sendiri, dan tag HTML5, ia boleh dilakukan dengan…functions.phpTambahkan yang berikut ke dalam teks:

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    add_theme_support( 'title-tag' ); // 让WordPress管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_action( 'after_setup_theme', 'my_theme_setup' )Pastikan tetapan ini dijalankan secepat mungkin semasa tema dimulakan (diproses).

Daftar menu navigasi

Untuk membolehkan pengguna menetapkan navigasi dalam bahagian “Penampilan – Menu” di latar belakang, anda perlu mendaftarkan kedudukan menu terlebih dahulu. Gunakan kaedah yang disediakan.register_nav_menus()Fungsi:

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

Setelah mendaftar, anda akan dapat mengakses fail-fail templat (seperti…)header.php）digunakan dalamwp_nav_menu( array( 'theme_location' => 'primary' ) )Sekarang menu ini telah dipaparkan.

RINGKASAN

Dari masa penciptaan yang mengandungi…style.css和index.phpBermula dari folder asas, anda secara beransur-ansur membina sebuah tema WordPress yang lengkap. Dengan memahami struktur hierarki templat, anda belajar cara membuat fail templat khusus untuk mengawal jenis-jenis halaman yang berbeza dengan tepat.wp_enqueue_style()和wp_enqueue_script()Mengurus sumber adalah amalan terbaik untuk memastikan keserasian dan prestasi sesuatu tema. Akhir sekali, gunakanlah dengan bijak.functions.phpFail, anda boleh mengaksesnya melalui…add_theme_support()和register_nav_menus()Fungsi-fungsi seperti ini membolehkan anda menambahkan ciri-ciri yang kuat kepada tema WordPress dengan selamat. Dengan menguasai langkah-langkah asas ini, anda akan mempunyai asas yang kukuh untuk mengembangkan tema WordPress yang diperibadikan sendiri.

FAQ - Soalan Lazim

Apakah pengetahuan awal yang diperlukan untuk membangunkan tema WordPress?

Anda perlu memiliki asas yang kukuh dalam HTML dan CSS untuk membina struktur dan gaya halaman web. Pada masa yang sama, anda perlu memahami sintaks asas PHP, kerana templat tema WordPress kebanyakannya dijalankan oleh PHP. Pengetahuan asas tentang JavaScript akan membantu anda menambahkan ciri interaktif. Selain itu, pemahaman konsep asas WordPress seperti artikel, halaman, kategori, dan tag akan memudahkan anda semasa proses pembangunan.

Mengapa kita perlu menggunakan `wp_enqueue_style` untuk memuatkan fail gaya (style sheet), dan bukan hanya menggunakan `link` secara langsung?

Gunakan terus.<link>Terdapat beberapa masalah dengan penggunaan kod keras untuk menentukan laluan fail skrip gaya (style sheet). Pertama sekali, pendekatan ini tidak dapat menguruskan hubungan kebergantungan dengan betul; contohnya, gaya yang anda gunakan mungkin bergantung pada gaya dari sesuatu rangka (framework). Kedua…wp_enqueue_styleIa membenarkan plugin atau sub-topik tema lain untuk menutupi atau mengubah gaya (style) anda dengan selamat. Yang paling penting, ia dapat bekerjasama dengan lebih baik dengan plugin caching dan pengoptimuman prestasi, memastikan susunan dan kecekapan pengambilan sumber (resources). Ini merupakan amalan standard dalam ekosistem WordPress.

Apa perbezaan antara functions.php dan plugin?

functions.phpKod yang didefinisikan dalam tema adalah berkait rapat dengan tema tersebut, dan apabila pengguna menukar tema, fungsi-fungsi ini akan tidak lagi tersedia. Kod tersebut sesuai untuk disimpan dalam tema kerana ia berkaitan secara langsung dengan penampilan visual dan susun atur tema, seperti menu pendaftaran, sokongan untuk gambar khas, dan definisi sidebar. Sebaliknya, fungsi yang disediakan oleh plugin biasanya adalah berasingan daripada tema dan bertujuan untuk menambahkan ciri-ciri umum kepada laman web (seperti borang hubungan, pengoptimuman SEO), dan fungsi-fungsi ini akan tetap ada walaupun pengguna menukar tema. Jika sesuatu fungsi tidak berkaitan dengan penampilan tema, maka mempertimbangkan untuk menjadikannya sebagai plugin biasanya merupakan pilihan yang lebih fleksibel.

Bagaimana untuk membuat topik saya menyokong terjemahan pelbagai bahasa?

Membuat tema menyokong penggunaan bahasa antarabangsa (internationalization) adalah kunci untuk memasuki pasaran global. Pertama sekali, di semua tempat di mana teks tema dipaparkan, gunakan fungsi terjemahan yang disediakan oleh WordPress, seperti…__('文本', 'my-custom-theme')或_e('文本', 'my-custom-theme')Di antaranyamy-custom-themeAdalahstyle.cssKemudian, gunakan alat seperti Poedit untuk memindai fail tema dan menjana kandungan yang didefinisikan dalam teks tersebut..potFile-file templat, yang mana penterjemah boleh menggunakannya untuk mencipta teks dalam pelbagai bahasa..po和.moDokumen. Akhirnya, dalamfunctions.phpMelaluiload_theme_textdomain()Fungsi tersebut bertanggungjawab untuk memuatkan fail terjemahan.

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: