Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Pengenalan Pembangunan Tema WordPress: Bina Tema Custom Pertama Anda Dari Kosong

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

Untuk membina sebuah tema WordPress yang lengkap dengan fungsi-fungsi yang diperlukan, anda perlu menyediakan satu siri fail asas. Fail-fail ini membentuk kerangka tema tersebut, dan setiap fail mempunyai peranan yang khusus.

Fail-fail asas termasuk:
* `style.css`：主题的样式表，同时也是主题的“身份证”，包含主题名称、作者、描述等元信息。
* `index.php`：主题的主模板文件，是默认的首页和文章列表页模板。
* `header.php`：网站的头部模板，通常包含`<head>`部分和网站顶部的导航区域。
* `footer.php`：网站的底部模板，通常包含版权信息、脚本等。
* `functions.php`：主题的功能文件，用于添加自定义功能、注册菜单、侧边栏等。

Mari kita mulakan dengan membuat fail `style.css`. Di bahagian atas fail tersebut, anda perlu menambahkan sebuah komen header yang mengandungi maklumat berkaitan tema.

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

Seterusnya, buat fail `index.php`. Dalam versi yang paling asas, fail ini perlu mengimport bahagian kepala (header) dan bahagian bawah (footer), serta mengulang pengeluaran kandungan artikel (artikel) secara berulang-ulang.

<p>

<main id="main-content">
    
            <article id="post-<?php the_ID(); ?>">
                <h2><a href="/ms/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-content">
                    <?php the_content(); ?>
                </div>
            </article>
        <p>
        <p>Tiada artikel tersedia.</p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

Fail `header.php` dan `footer.php` masing-masing mengandungi struktur HTML untuk bahagian atas dan bawah laman web yang digunakan secara umum. Fail `functions.php` pula digunakan untuk memperkukuh fungsi-fungsi tema (theme functions).

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

Memahami hierarki templat dan pengulangan (looping)

WordPress menggunakan sistem hierarki templat yang pintar untuk menentukan cara kandungan halaman yang berbeza dipaparkan. Sebagai contoh, apabila seseorang mengakses sebuah artikel tertentu, WordPress akan mencari fail `single.php` terlebih dahulu; apabila mengakses halaman kategori, ia akan mencari fail `category.php`. Jika fail-fail tersebut tidak wujud, ia akan kembali ke fail `archive.php`, dan jika masih tidak ditemui, ia akan kembali ke fail `index.php`.

Apa itu gelung utama (main loop)?

`the loop`是WordPress主题开发的核心概念。它是一段PHP代码，用于从数据库中获取文章内容并将其显示在网页上。你在`index.php`中看到的`while ( have_posts() ) : the_post();`就是循环的开始。在循环内部，你可以使用一系列模板标签来输出文章信息，如`the_title()`, `the_content()`, `the_permalink()`等。

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

Create other template files.

Untuk menjadikan tema tersebut lebih profesional, anda harus membuat beberapa fail templat yang sering digunakan. Sebagai contoh, buatlah fail `single.php` untuk menampilkan artikel secara berasingan:

<p>

<main>
    <?php while ( have_posts() ) : the_post(); ?>
        <article>
            <h1><?php the_title(); ?></h1>
            <div class="post-meta">
                发布于： | 作者：
            </div>
            <div class="post-content">
                <?php the_content(); ?>
            </div>
        </article>
        
</main>

<?php get_footer(); ?>

Begitu juga, anda boleh membuat fail `page.php` untuk mendefinisikan templat halaman, dan fail `archive.php` untuk mendefinisikan templat halaman arkib yang merangkumi kategori, tag, dan lain-lain.

Integrating the menu with the sidebar

Sebuah tema moden biasanya mempunyai menu navigasi yang boleh disesuaikan dan kawasan alat tambahan (sidebar widgets) yang boleh disesuaikan. Fungsi-fungsi ini perlu didaftarkan dan diaktifkan melalui fail `functions.php`.

Daftar menu navigasi

Tambahkan kod berikut ke dalam `functions.php` untuk mendaftarkan kedudukan menu untuk tema, seperti “Menu Utama”.

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

Setelah mendaftar, pengguna boleh mengatur susunan menu dalam WordPress di bahagian “Appearance” -> “Menus” dan menetapkan kedudukan menu tersebut. Kemudian, di dalam fail `header.php`, tambahkan kod berikut di tempat di mana anda ingin menu tersebut dipaparkan untuk memanggil menu yang telah diatur.

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 
<nav id="site-navigation">
    <?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_id'        => 'primary-menu',
    ) );
    ?>
</nav>

Tambahkan bar sisi untuk alat tambahan

Widget merupakan ciri yang sangat fleksibel dalam WordPress. Untuk menambahkan sebuah sidebar, anda juga perlu mendaftarkan sebuah “kawasan widget” dalam fail `functions.php`.

function my_first_theme_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', 'my_first_theme_widgets_init' );

Kemudian, dalam fail templat di mana anda ingin menunjukkan bar sisi (seperti `sidebar.php`), gunakan fungsi `dynamic_sidebar()` untuk mengeluarkannya.

<aside id="secondary" class="widget-area">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>

Akhir sekali, jangan lupa untuk memasukkan fail sidebar ini ke dalam `index.php` atau `single.php` dengan menggunakan fungsi `get_sidebar();`.

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

Tambahkan gaya dan skrip

为了保持代码的整洁和可维护性，不应该直接在HTML中硬编码样式和脚本链接。正确的方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数将它们加入队列。

Mengintegrasikan fail gaya (style sheet)

Walaupun fail `style.css` adalah penting, WordPress tidak akan memuatnya secara automatik. Anda perlu menambahkannya secara eksplisit ke dalam proses pemuatannya. Biasanya, kita juga memisahkan fail gaya utama (main style sheet) daripada fail gaya pemulihan (reset style sheet).

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 
function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入一个自定义样式表 (假设位于 /assets/css/main.css)
    wp_enqueue_style( 'my-first-theme-main', get_template_directory_uri() . '/assets/css/main.css' );

// 引入一个自定义JavaScript文件 (假设位于 /assets/js/navigation.js)
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Menggunakan amalan pembangunan CSS moden

Dalam pembangunan front-end pada tahun 2026, memberi perhatian kepada reka bentuk responsif dan kebolehaksesan adalah sangat penting. Dalam fail `style.css` anda atau fail `main.css` yang berasingan, anda harus menggunakan kueri media untuk memastikan laman web dapat dipaparkan dengan baik pada pelbagai peranti.

/* 基础样式 */
body {
    font-family: sans-serif;
    line-height: 1.6;
}

/* 响应式导航菜单 */
@media screen and (max-width: 768px) {
    #primary-menu {
        display: none;
    }
    /* 移动端菜单样式 */
}

Ujian dan Penyelesaian Masalah

Setelah pembangunan tema selesai, ujian merupakan langkah yang penting. Anda perlu melakukan ujian yang menyeluruh pada pelbagai persekitaran, pelayar, dan peranti yang berbeza.

Aktifkan mod pembangunan (debug mode).

Semasa proses pembangunan, pastikan untuk mengaktifkan mod pembangunan (debug mode) di WordPress. Ini akan membantu anda mengenal pasti ralat PHP, amaran, dan notis dengan cepat. Buka fail `wp-config.php`, cari atau tambahkan kod berikut:

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Lanjutan untuk Membangunkan Tema WordPress pada tahun 2026: Membina Laman Web Perniagaan Responsif dari A hingga Z.。

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误，更安全

Unit Test for the Topic

Disyorkan untuk menggunakan data ujian unit tema WordPress rasmi untuk menguji tema anda secara menyeluruh. Data ini merangkumi pelbagai jenis artikel, halaman, media, ulasan, dan lain-lain, yang dapat memastikan tema anda menunjukkan hasil yang betul apabila berhadapan dengan pelbagai jenis kandungan, tanpa sebarang masalah gaya atau reka letak yang terlepas.

RINGKASAN

Dari mencipta fail asas `style.css` dan `index.php`, hingga memahami hierarki templat dan pengulangan (looping), kemudian mendaftar menu, bar sisi, serta menambah skrip gaya dengan selamat, anda telah melalui keseluruhan proses pembinaan sebuah tema WordPress yang asas tetapi lengkap. Ingatlah bahawa pembangunan tema adalah proses yang berulang-ulang; memulakan dengan versi yang paling ringkas dan secara beransur-ansur menambahkan fungsi serta menyempurnakan butiran adalah amalan terbaik. Terus belajar tentang tag templat, hook tindakan (action hooks), dan filter akan membolehkan anda mencipta tema yang lebih kuat dan lebih fleksibel.

FAQ - Soalan Lazim

Apa pengetahuan asas yang diperlukan untuk membangunkan tema WordPress?

Anda perlu menguasai asas-asas HTML, CSS, dan PHP. Pengetahuan tentang JavaScript juga akan sangat membantu, terutamanya untuk menambahkan ciri-ciri interaktif. Selain itu, pemahaman konsep asas WordPress seperti artikel, halaman, kategori, tag, widget, dan menu adalah sangat penting.

Mengapa perubahan yang saya buat pada tema saya tidak berkesan di bahagian belakang (backend)?

Ini biasanya disebabkan oleh cache pelayar atau cache WordPress. Sila cuba memperbaharui pelayar secara paksa (Ctrl + F5 atau Cmd + Shift + R). Jika masalah masih berterusan, periksa sama ada anda telah menambahkan gaya dan skrip dengan betul ke dalam queue, dan pastikan bahawa fail `functions.php` tidak mempunyai ralat sintaks. Dalam kes yang sangat jarang, anda mungkin perlu membersihkan cache pelayan atau plugin.

Bagaimana untuk menjadikan tema saya menyokong berbilang bahasa?

你需要做好主题的“国际化”准备。这意味着在代码中所有需要翻译的文本，都应使用翻译函数（如`__()`， `_e()`）进行包装，并为`text-domain`设置一个唯一标识（在`style.css`的头部已定义）。然后，你可以使用如Poedit这样的工具创建`.po`和`.mo`翻译文件，使你的主题能够被轻松翻译成其他语言。

Apa perbezaan antara tema khusus (custom theme) dan subtema (subtheme)?

Tema yang dibuat khusus (custom theme) adalah tema yang dibangunkan dari awal secara berasingan. Sebaliknya, sub tema (subtheme) adalah berdasarkan sebuah tema “ibu” (parent theme) yang sedia ada, dan ia mewarisi semua fungsi, gaya, serta fail templat dari tema induk tersebut. Sub tema membenarkan anda hanya membuat perubahan atau menambahkan bahagian yang diperlukan (biasanya gaya dan beberapa fail templat), tanpa perlu mengubah tema induk. Ini merupakan pendekatan yang lebih selamat dan cekap apabila anda ingin menyesuaikan atau mengemaskini tema yang popular, kerana ia memastikan bahawa perubahan yang anda buat tidak akan ditimpa oleh kemasinan tema induk.

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: