Dari awal hingga mahir: Panduan lengkap untuk pembangunan tema WordPress dan tutorial praktikal.

Konsep utama dan asas dalam pembangunan tema WordPress

Sebelum mula menulis sebarang kod, adalah sangat penting untuk memahami konsep asas tema WordPress. Sebuah tema WordPress pada dasarnya merupakan koleksi fail-fail yang menentukan cara laman web dipaparkan kepada pengguna, termasuk reka bentuk halaman, warna, dan gaya fon. Tema tersebut mengikuti struktur direktori yang tertentu dan berinteraksi dengan sistem teras WordPress untuk memaparkan kandungan secara dinamik.

Inti topik ini adalah fail templat. Fail-fail yang dibina berdasarkan PHP ini menentukan cara kandungan jenis yang berbeza dipaparkan. Sebagai contoh,index.phpIni adalah fail templat utama, yang digunakan sebagai fail laluan apabila WordPress tidak dapat menemui templat yang lebih khusus. Laman utama biasanya dibina menggunakan fail templat utama ini.home.php或front-page.phpKawalan: Satu artikel dibuat oleh…single.phpKawalan, manakala halaman tersebut dibuat oleh…page.phpKawalan.

Satu lagi fail penting adalah…style.cssIa bukan sahaja mengandungi semua skrip gaya (style sheets) untuk tema tersebut, tetapi juga berfungsi sebagai “kad pengenalan” tema tersebut. Bahagian ulasan di kepala fail (header comments) mengandungi metadata yang penting seperti nama tema, pengarang, deskripsi, dan nombor versi. Tanpa maklumat yang betul…style.cssWordPress tidak akan dapat mengenali tema anda. Struktur asasnya adalah seperti berikut:

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Lengkap Pembangunan Tema WordPress: Daripada Permulaan Hingga Kemahiran Tinggi。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 开发者名称
Author URI: https://example.com
Description: 这是一个为学习而创建的WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Membina struktur fail tema pertama anda

Untuk membuat sebuah tema yang lengkap dan mempunyai struktur yang jelas, adalah penting untuk mengikuti kaedah pengaturan direktori dan fail yang standard. Sebuah tema asas tetapi lengkap boleh dibina bermula dengan beberapa fail utama.

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.

Lawati halaman

Selain daripada yang telah dinyatakan di atas…index.php和style.cssSelain itu, sebuah tema yang lengkap biasanya mengandungi fail-fail kritikal berikut:
1. functions.phpIni merupakan “otak” bagi sesuatu tema, yang digunakan untuk menambahkan ciri-ciri tertentu kepada tema tersebut, seperti menu pendaftaran, bar sisi (kawasan Widget), memuatkan skrip, dan gaya (style). Ia bukanlah sebuah fail templat, namun setiap tema seharusnya mengandungkannya.
2. header.phpStruktur HTML yang merangkumi bahagian kepala dokumen laman web, menu navigasi, dan awal halaman.
3. footer.phpTermasuk maklumat hak cipta, skrip, dan tag penutup di bahagian bawah halaman.
4. sidebar.phpBerikut adalah struktur HTML untuk mendefinisikan sidebar:
5. page.php 和 single.phpMasing-masing digunakan untuk merender halaman statik dan artikel individu.

Sebuah aliran kerja pembangunan yang efisien adalah dengan membuat fail templat utama.index.phpUntuk memanggil fail-fail tersebut, gunakan fungsi templat yang terbina dalam WordPress:

<p>

<main id="main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 显示内容
            the_title( &#039;<h1>', '</h1>' );
            the_content();
        endwhile;
    else :
        echo '<p>没有找到内容。</p>';
    endif;
    ?&gt;
</main>

\n

在functions.phpDi dalamnya, anda boleh melalui…add_actionFungsi pendaftaran menggunakan “hook” (pautan khusus dalam kod), seperti menyokong penambahan gambar ringkasan (gambar istimewa) untuk artikel:

<?php
// 为主题添加基本支持
function mytheme_setup() {
    // 启用文章和页面上的“特色图像”功能
    add_theme_support( 'post-thumbnails' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 注册一个主导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Menggunakan sistem hierarki templat dan pengulangan

Lapisan templat WordPress merupakan sistem peraturan yang menentukan fail templat mana yang akan digunakan untuk permintaan halaman tertentu. Memahami hubungan lapisan ini adalah kunci dalam pembangunan tema yang canggih, kerana ia membenarkan anda mencipta reka letak yang sangat disesuaikan untuk bahagian-bahagian berbeza dalam laman web.

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

Apabila pengguna mengakses laman web anda, WordPress akan mencari fail templat yang sesuai berdasarkan jenis kandungan semasa (seperti artikel blog, halaman, arkib kategori, dsb.). Urutan pencarian adalah dari yang paling khusus ke yang paling umum. Sebagai contoh, untuk halaman dengan ID 5, WordPress akan mencari secara berurutan:
1. page-5.php (Dibuat khusus untuk ID halaman ini)
2. page-sample-page.php (Menggunakan nama samaran halaman)
3. page.php (Template for General Pages)
4. singular.php (Template for general single-content)
5. index.php (Kembali ke keadaan asal)

Inti dari semua kandungan yang dipaparkan adalah “WordPress Loop” (The Loop). Ini merupakan blok kod PHP yang digunakan untuk mengulangi hasil carian semasa dan menampilkan setiap artikel atau halaman. Struktur asas loop ini hampir sama dalam semua fail templat.

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // 当前文章/页面的内容在这里输出
        the_title( &#039;<h2 class="entry-title"><a href="/ms/' . esc_url( get_permalink() ) . '/">', '</a></h2>' );
        the_excerpt(); // 或使用 the_content()
    endwhile;
    the_posts_navigation(); // 文章导航链接
else :
    // 如果没有找到任何内容
    _e( '抱歉，没有找到符合您要求的内容。', 'textdomain' );
endif;
?&gt;

Untuk meningkatkan modulasi dan kebolehpenyelenggaraan templat, WordPress menggalakkan penggunaan…get_template_part()Fungsi ini membenarkan anda untuk memisahkan kod paparan yang bersama-sama (seperti ringkasan artikel, metadata artikel) ke dalam fail-fail berasingan agar dapat digunakan berulang kali.

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%.

Lawati halaman

// 在 archive.php 或 index.php 中
while ( have_posts() ) : the_post();
    get_template_part( 'template-parts/content', get_post_format() );
endwhile;

Kod ini akan mencuba untuk memuatkan…template-parts/content-{post-format}.php(Sebagai contoh)content-video.phpJika tidak wujud, maka muatkanlah.template-parts/content.php。

Ciri-ciri Lanjutan: Penyesuaian Tema dan Medan Sendiri

Pembangunan tema WordPress moden tidak hanya berfokuskan pada aspek penampilan, tetapi juga memberi perhatian kepada penyediaan pilihan penyesuaian yang mudah difahami oleh pengguna. Alat Penyesuaian Tema WordPress (WordPress Theme Customizer) menawarkan antara muka pra-tontonan masa nyata, membolehkan pengguna menyesuaikan tetapan tema tanpa perlu menyentuh kod.

在functions.phpDi dalamnya, anda boleh menggunakan…$wp_customizeObjek digunakan untuk menambahkan tetapan, kawalan, dan blok kandungan. Sebagai contoh, untuk menambahkan pilihan teks hak cipta di bahagian kaki halaman:

Diperoleh daripada WEB\nDisyorkan untuk membaca. Dari kosong ke satu: Memahami kemahiran teras dan panduan amalan untuk pembangunan tema WordPress moden.。

function mytheme_customize_register( $wp_customize ) {
    // 添加一个新的设置
    $wp_customize->add_setting( 'mytheme_footer_text', array(
        'default'           => '© 2026 我的网站。保留所有权利。',
        'sanitize_callback' => 'sanitize_text_field',
        'transport'         => 'postMessage', // 实现实时预览
    ) );

// 添加一个控件来编辑这个设置
    $wp_customize->add_control( 'mytheme_footer_text', array(
        'label'    => __( '页脚版权文本', 'my-first-theme' ),
        'section'  => 'title_tagline', // 放在“站点身份”区域
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Kemudian, dalamfooter.phpDi dalamnya, anda boleh melalui…get_theme_mod()Fungsi mengeluarkan nilai ini:

echo esc_html( get_theme_mod( 'mytheme_footer_text', '默认版权文本' ) );

Untuk struktur kandungan yang lebih kompleks, metadata artikel (medan khusus yang ditentukan oleh pengguna) dan pengembangan sistem klasifikasi merupakan alat yang sangat berguna. Anda boleh menggunakannya melalui plugin Advanced Custom Fields (ACF) atau fungsi asli WordPress. Sebagai contoh, anda boleh menambahkan medan “Masa Membaca” untuk setiap artikel.

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.

Lawati halaman

// 在 single.php 中显示自定义字段
$reading_time = get_post_meta( get_the_ID(), 'reading_time_minutes', true );
if ( $reading_time ) {
    echo '<span class="reading-time">Masa membaca: '.intval($reading_time).' minit</span>';
}

Untuk membina halaman yang lebih dinamik, mencipta templat halaman khusus merupakan teknik yang sering digunakan. Anda hanya perlu menambahkan blok ulasan tertentu di bahagian atas fail PHP, dan ia akan muncul dalam senarai drop-down untuk “templat” halaman tersebut.

<?php
/*
Template Name: 全宽页面模板
*/
get_header();
?>
<!-- 你的全宽内容布局代码 -->
<?php get_footer(); ?>

RINGKASAN

Pembangunan tema WordPress merupakan kemahiran komprehensif yang menggabungkan reka bentuk, teknologi front-end, dan logik back-end. Bermula dengan memahami konsep asas…style.css和index.phpPada awal penggunaan fail tersebut, adalah penting untuk memahami secara beransur-ansur peraturan hierarki templat dan sistem pengulangan, kerana ini merupakan asas untuk membina tema yang berfungsi dengan baik. Dengan memodulkan struktur tema dan menggunakan ciri-ciri tersebut dengan bijak…functions.php和get_template_part()Fungsi dapat meningkatkan dengan ketara kemudahan penyelenggaraan (maintainability) dan kebolehgunaan semula (reusability) kod.

Pada tahap yang lebih maju, penyedia penyesuaian tema yang terintegrasi dengan mendalam dapat memberikan pengalaman pengaturan yang mesra pengguna dan masa nyata. Penggunaan yang fleksibel terhadap bidang khusus (custom fields) dan templat halaman (page templates) membolehkan penciptaan susun atur kandungan yang memenuhi keperluan yang kompleks. Mengikuti standard pengkodan rasmi WordPress dan amalan terbaik akan memastikan tema anda selamat, cekap, dan serasi dengan seluruh ekosistem WordPress. Ini merupakan kunci untuk meningkatkan kemahiran pengembangan anda daripada “boleh digunakan” ke “mahir”.

FAQ - Soalan Lazim

Apa perbezaan antara tema WordPress dan plugin?

Tema utamanya adalah untuk mengawal penampilan dan paparan laman web dari segi visual, termasuk reka bentuk laman, pemilihan warna, dan susunan elemen-elemen pada halaman web. Tema tersebut berinteraksi secara langsung dengan sistem templat WordPress melalui fail-fail templat yang disediakan.

Plugin digunakan untuk memperluas fungsi sebuah laman web, membolehkan penambahan ciri-ciri baru tanpa mengubah penampilannya, seperti borang hubungan, alat pengoptimuman enjin carian, dan fungsi e-dagangan. Sebuah laman web hanya boleh mengaktifkan satu tema pada satu masa, tetapi boleh memasang dan mengaktifkan beberapa plugin.

Apakah kaedah yang betul untuk mendaftarkan gaya dan skrip dalam fail functions.php?

Cara yang betul adalah dengan menggunakan…wp_enqueue_scriptsHook. Ini memastikan bahawa hubungan kebergantungan (dependencies) diproses dengan betul dan mengelakkan muat turun yang berulang. Berikut adalah contoh standard:

function mytheme_enqueue_assets() {
    // 注册并排队主样式表
    wp_enqueue_style( 'mytheme-main-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 注册并排队一个自定义JavaScript文件
    wp_enqueue_script( 'mytheme-custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

Jangan sekali guna ini secara langsung dalam fail templat.link或scriptMenggunakan kod keras untuk memasukkan sumber (resources) tidak selaras dengan amalan terbaik WordPress, dan boleh menyebabkan konflik atau masalah prestasi.

Apa itu subtopik, mengapa dan bagaimana untuk menggunakannya?

Subtopik adalah sebuah topik yang bergantung pada topik lain (dipanggil sebagai topik induk), yang membenarkan anda mengubah suai atau memperluas fungsi dan gaya topik induk tanpa perlu mengedit fail topik induk secara langsung. Kelebihan daripada pendekatan ini adalah apabila topik induk diperbaharui, pengubahsuaian yang anda buat (dalam subtopik) tidak akan ditimpa, menjadikannya lebih selamat dan mudah untuk dijaga.

Mencipta sebuah sub-topik sangat mudah. Pertama sekali,/wp-content/themes/Cipta sebuah folder baru dalam direktori tersebut (contohnya…)mytheme-childKemudian, buat satu di dalamnya.style.cssFail tersebut, mesti mengandungi ulasan di bahagian kepala (header).Template:Gunakan baris ini untuk menentukan nama direktori tema induk.

/*
Theme Name: 我的主题子主题
Template: my-first-theme
*/

Selepas itu, anda boleh mengikuti langkah-langkah yang ditetapkan untuk sub-topik tersebut.style.cssAnda boleh menambahkan peraturan gaya (style rules) ke dalam fail tersebut, atau membuat fail templat dengan nama yang sama untuk menggantikan fail templat yang bersesuaian dalam tema induk.

Bagaimana untuk membuat topik saya menyokong terjemahan pelbagai bahasa?

Membuat tema anda menyokong internasionalisasi (i18n) dan lokalisasi merupakan langkah penting ke arah pembangunan yang profesional. Anda perlu menggunakan fungsi lokalisasi yang disediakan oleh WordPress untuk mengelilingi semua rentetan teks yang dipaparkan kepada pengguna di bahagian frontend.

Pertama sekali, gunakan kaedah terjemahan pada semua ayat yang boleh diterjemahkan.__()(untuk nilai pulangan) atau_e()(Digunakan untuk memaparkan hasil fungsi secara langsung), dan juga untuk menetapkan sebuah bidang teks (Text Domain).functions.phpDi dalamnya, gunakanload_theme_textdomain()Fungsi tersebut bertanggungjawab untuk memuatkan fail terjemahan.

// 在 functions.php 中
function mytheme_load_textdomain() {
    load_theme_textdomain( 'my-first-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'mytheme_load_textdomain' );

// 在模板文件中使用
_e( '阅读更多', 'my-first-theme' );
$heading = __( '最新文章', 'my-first-theme' );

Kemudian, anda boleh menggunakan alat seperti Poedit untuk memindai rentetan teks dalam fail tema dan menghasilkannya..potFail tersebut, dan buat salinan untuk bahasa-bahasa yang berbeza..po和.moFail tersebut, letakkan di dalam bahagian yang berkaitan dengan topik tersebut./languages/Dalam direktori tersebut.