Panduan Permulaan Pembangunan Tema WordPress: Bangun Tema Laman Web Pertama Anda Dari Kosong

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

Sebelum anda mula menulis kod, anda perlu memahami komposisi asas sebuah tema WordPress. Sebuah tema pada dasarnya adalah sebuah folder yang mengandungi pelbagai fail seperti PHP, CSS, JavaScript, dan gambar-gambar, yang bersama-sama menentukan rupa dan beberapa fungsi laman web tersebut. Folder ini mesti terletak di dalam direktori pemasangan WordPress.wp-content/themesDalam direktori tersebut, setiap topik memerlukan satu fail gaya (style file) yang utama.style.cssDan sebuah fail templat asas.index.phpIni adalah syarat minimum untuk memulakan sebarang projek pembangunan tema.

Untuk menjalankan proses pembangunan dengan cekap, sangat disyorkan untuk membina persekitaran pembangunan setempat (local development environment). Ini membolehkan anda menguji kod dengan bebas tanpa mempengaruhi laman web yang bersedia untuk digunakan oleh pengguna. Anda boleh menggunakan pakej integrasi seperti XAMPP, MAMP, Local by Flywheel, atau DevKinsta, yang membenarkan pemasangan Apache/Nginx, PHP, dan MySQL dengan satu klik sahaja. Dalam persekitaran setempat ini, anda juga memerlukan editor kod seperti VS Code,PhpStorm, atau Sublime Text; fungsi penyorotan sintaks dan cadangan kod untuk PHP, HTML, dan CSS akan sangat meningkatkan kecekapan pengaturcaraan anda.

Setelah persiapan selesai, anda perlu…wp-content/themesCipta sebuah folder baru dalam direktori tersebut, sebagai contoh…my-first-themeSeterusnya, kita akan membuat fail pertama yang diperlukan.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai Pembangunan Tema WordPress dari Awal: Amalan Terbaik dan Panduan untuk Membina Laman Web Sendiri。

Membuat fail gaya asas (core style file)

Dalam folder tema tersebut, buat satu fail baru dengan namastyle.cssFail tersebut bertanggungjawab untuk menentukan gaya penampilan laman web. Header yang terdapat pada awal fail itu merupakan cara tunggal bagi WordPress untuk mengenal pasti tema yang digunakan. Header tersebut mengandungi maklumat meta seperti nama tema, pengarang, dan deskripsi tema.

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

Berikut adalah…style.cssContoh standard untuk bahagian kepala fail (file header):

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 一个用于学习WordPress主题开发的简洁入门主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 博客, 简洁, 响应式
Text Domain: my-first-theme
*/

Selepas bahagian kepala fail (file header), anda boleh mula menambahkan peraturan gaya (style rules) untuk elemen-elemen laman web anda, sama seperti anda menulis kod CSS biasa. Ini termasuk untuk kawasan teks (text fields).my-first-themeIa merupakan penunjuk yang disediakan untuk pengekstrakan kandungan berdasarkan tema (tema localization), dan harus selaras dengan nama folder tema tersebut.

Membina fail templat inti untuk tema

Fail templat merupakan kerangka bagi tema WordPress, dan ia menentukan bagaimana kandungan yang berbeza disusun dan dipaparkan. Fail-fail ini terutamanya terdiri daripada kod PHP, yang dicampur dengan tag HTML. Fail templat yang paling asas adalah…index.phpIa merupakan templat alternatif untuk semua halaman, apabila tidak ada templat yang lebih khusus (seperti…)single.php或page.phpApabila sesuatu itu berlaku, WordPress akan menggunakannya.

Mencipta fail indeks asas

Cipta dalam folder tema.index.phpSalah satu yang paling mudah tetapi paling lengkap dalam fungsinya…index.phpIa boleh mengandungi WordPress The Loop, yang merupakan mekanisme utama yang digunakan untuk mendapatkan dan memaparkan kandungan artikel dari pangkalan data.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pembangunan Tema WordPress: Dari Permulaan Hingga Kemahiran Lanjutan: Panduan Langsung Untuk Membina Laman Web Sendiri。

Yang telah dikurangkan saiznya (minimized)index.phpContoh berikut:

<!DOCTYPE html>
<html no numeric noise key 1017>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <p><strong>Halo, saya ingin mengucapkan terima kasih kerana melawat laman web saya.</strong></p>
</head>
<body no numeric noise key 1014>
    <header>
        <h1><a href="/ms/</?php echo esc_url( home_url( '/' ) ); ?>">\n</a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main>
        
                <article>
                    <h2><a href="/ms/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div><?php the_content(); ?></div>
                </article>
            
            <p>Tiada artikel tersedia.</p>
        <?php endif; ?>
    </main>

<footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Fail ini mengandungi beberapa bahagian penting:wp_head()和wp_footer()Hook (tangkai) membenarkan WordPress core, plugin, dan skrip lain untuk menyisipkan kod yang diperlukan sebelum dan selepas kandungan halaman dipaparkan (seperti CSS, JS).the_post()Fungsi tersebut digunakan dalam gelung untuk menetapkan data artikel semasa, dan kemudian…the_title()和the_content()Tag templat seperti ini akan menghasilkan kandungan yang sesuai.

Mengintegrasikan gaya (styles) dan skrip (scripts)

Hanya adastyle.cssFail tersebut masih tidak mencukupi; anda perlu memberitahu WordPress bila untuk memuatkannya menggunakan fungsi tertentu. Untuk ini, anda perlu membuat satu fail lagi yang sangat penting dalam folder tema anda:functions.phpIni bukanlah sebuah fail templat, tetapi “pustaka fungsi” untuk tema tersebut, yang digunakan untuk meningkatkan keupayaan tema, mengatur menu pendaftaran, bar sisi, serta memasukkan fail gaya (style sheets) dan skrip dengan selamat.

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

Mengembangkan ciri-ciri topik dan proses memuat turun gaya (styles)

functions.phpFail tersebut merupakan “bilik enjin” bagi tema tersebut, dan semua kod PHP yang tidak berkaitan dengan output halaman secara langsung perlu diletakkan di sini. Dalam fail ini, anda harus menggunakan…add_action()Fungsi tersebut akan memuatkan kod anda ke dalam pengait tindakan (action hook) yang khusus dalam WordPress, untuk memastikan ia dijalankan pada masa yang sesuai.

Mengambil fail gaya dengan selamat

Cara yang betul bukanlah dengan terus memasukkan tag dalam fail templat.style.cssBukan dengan cara itu, tetapi melalui…wp_enqueue_style()Fungsi ini digunakan untuk mengatur proses pengambilan (loading) secara berperingkat. Ia mengikuti mekanisme pengurusan kebergantungan (dependency management) WordPress, dan dapat mencegah pengambilan yang berulang-ulang.

在functions.phpTambahkan kod berikut ke dalam:

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Popular untuk Pemula Tahun 2026: Cara Membina Tema WordPress Pertama Anda Dari Kosong。

<?php
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 可以在此加载其他样式或脚本，例如：
    // wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Di sini,get_stylesheet_uri()Fungsi tersebut akan secara automatik mendapatkan tema yang berkaitan.style.cssLaluan fail.add_action( 'wp_enqueue_scripts', ... )Pastikan fungsi muat turun (loading function) kita dipanggil ketika WordPress sedang menyediakan skrip dan gaya (styles) untuk bahagian hadapan (frontend) laman web.

Aktifkan ciri tema asas.

在functions.phpDi sini, kita juga boleh mengaktifkan beberapa ciri yang sangat penting untuk laman web moden. Sebagai contoh, menyokong penggunaan imej khas (gambaran ringkasan artikel) untuk artikel dan halaman, serta menambahkan lokasi menu khusus untuk laman web tersebut.

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

// 启用文章特色图像
add_theme_support( 'post-thumbnails' );

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

// 为WordPress生成的标签添加title属性支持
add_theme_support( 'title-tag' );

add_theme_support()Fungsi tersebut digunakan untuk mendeklarasikan pelbagai ciri yang disokong oleh topik tersebut.register_nav_menus()Ini menentukan lokasi di mana menu boleh diletakkan dalam panel “Penampilan” -> “Menu” di bahagian belakang WordPress.

Membuat templat khusus dan menguji tema

Seiring dengan peningkatan fungsi asas tema tersebut, yang asalnya tunggal…index.phpFail tersebut tidak lagi mampu memenuhi keperluan untuk menunjukkan semua jenis halaman. Struktur hierarki templat WordPress membenarkan anda membuat fail templat khusus untuk halaman utama, artikel individu, halaman biasa, halaman arkib, dan lain-lain, bagi memberikan kawalan yang lebih terperinci.

Membuat templat halaman artikel tunggal

Apabila pengguna mengklik untuk membaca keseluruhan kandungan artikel, mereka akan dibawa ke halaman artikel tersebut. Buatlah satu nama untuk halaman tersebut…single.phpFail tersebut digunakan khusus untuk mengawal cara ia dipaparkan. Ia biasanya mengandungi maklumat artikel yang lebih lengkap, seperti kategori, tag, penulis, dan ulasan.

<p>

<main>
    \n
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1013>
            <h1><?php the_title(); ?></h1>
            <div class="meta">
                发布于： | 作者：
            </div>
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="featured-image">
                    <?php the_post_thumbnail(); ?>
                </div>
            <?php endif; ?>
            <div class="content">
                <?php the_content(); ?>
            </div>
            <div class="taxonomies">
                分类：
                <br>
                标签：
            </div>
        </article>
        
</main>

\n

Template ini memperkenalkan fungsi template yang baru:get_header(), get_sidebar()和get_footer()Mereka akan memuat turun secara berasingan fail-fail yang bernama…header.php、sidebar.php和footer.phpFail komponen templat tersebut. Pendekatan ini memodulkan struktur halaman, mengelakkan pengulangan kod. Anda perlu membuat fail-fail yang sesuai dan memasukkan kandungan yang diperlukan ke dalamnya.index.phpKod kepala, kaki, dan bar sisi yang sesuai untuk bahagian tengah.

Ujian dan pengesahan tema anda

Setelah menyelesaikan pembuatan templat asas, log masuk ke panel pentadbiran WordPress anda, kemudian ke “Penampilan” -> “Tema”. Anda sepatutnya dapat melihat “My First Theme” dalam senarai tema. Aktifkan tema tersebut, kemudian kunjungi halaman utama laman web dan halaman artikel individu untuk memeriksa sama ada semua elemen (tajuk, kandungan, menu, kaki halaman) dipaparkan seperti yang dijangka.

Gunakan alat pembangun pelayar (browser developer tools) untuk memeriksa sama ada struktur HTML adalah betul dan sama ada kod CSS berfungsi dengan baik. Cuba membuat beberapa artikel ujian yang mengandungi imej khas, kategori, dan tag, dan pastikan bahawa semua elemen tersebut dapat dipanggil dan dipaparkan dengan betul dalam templat. Ini adalah cara terbaik untuk mengenal pasti dan membetulkan masalah yang mungkin ada.

RINGKASAN

Tahniah kerana anda telah menyelesaikan pembinaan asas untuk tema WordPress yang pertama. Melalui panduan ini, anda telah mempelajari cara membuat folder tema dari awal, serta menulis kod yang diperlukan untuk mengatur fungsi dan penampilan tema tersebut.style.css和index.phpFail, untuk digunakanfunctions.phpProses yang lengkap termasuk peningkatan fungsi, memuatkan sumber, membuat fail templat khusus, dan pembangunan bermodul. Ini hanyalah permulaan dalam dunia pembangunan tema; seterusnya, anda boleh meneroka lebih banyak jenis fail templat (seperti…page.php、archive.phpCiri-ciri lanjutan seperti kawasan alat tambahan (widgets), jenis artikel yang boleh disesuaikan, dan lain-lain, serta terus mengoptimumkan struktur kod dan reka bentuk anda.

FAQ - Soalan Lazim

### Mengapa topik saya tidak dipaparkan di latar belakang?
Ini biasanya disebabkan oleh...style.cssMasalah ini disebabkan oleh format header ulasan tema dalam fail yang tidak betul atau tidak wujud. Pastikan fail tersebut berada di direktori akar folder tema, dan maklumat header ulasan adalah lengkap serta mempunyai format yang betul. Sebab lain yang mungkin adalah masalah kebenaran akses (permissions); pastikan WordPress mempunyai kebenaran untuk membaca folder tema tersebut.

Adakah fail functions.php penting?

Dari segi teknikal, sesuatu yang hanya…style.css和index.phpTopik tersebut juga boleh berfungsi. Tetapi…functions.phpIa adalah penting untuk melaksanakan sebarang fungsi yang melangkaui output HTML asas (seperti menu pendaftaran, menambahkan bar sisi, memuatkan skrip dan gaya dengan selamat). Ia merupakan cara standard untuk memperluas dan menyesuaikan ciri-ciri tema, oleh itu ia merupakan keperluan bagi mana-mana tema yang praktikal.

Bagaimana untuk menambahkan sidebar kepada tema saya?

Pertama sekali,functions.phpGunakan dalam bahasa Cinaregister_sidebar()Fungsi ini mendaftarkan satu atau lebih kawasan alat tambahan (bar sisi). Kemudian, dalam fail templat di mana anda ingin memaparkan bar sisi tersebut…index.php或single.phpDalam kes ini, gunakandynamic_sidebar()Fungsi tersebut digunakan untuk memanggilnya. Akhirnya, pengguna boleh menarik dan meletakkan widget ke kawasan tersebut pada halaman “Appearance” -> “Widgets” di bahagian belakang WordPress.

Apa yang perlu diambil kira dari segi keselamatan semasa mengembangkan tema?

Jangan pernah mempercayai data yang dimasukkan oleh pengguna atau data yang berasal dari pangkalan data secara langsung. Apabila menghasilkan sebarang kandungan dinamik pada halaman, pastikan anda menggunakan fungsi pengelakkan (escape function) yang disediakan oleh WordPress.esc_html()、esc_url()和wp_kses_post()Ketika memperkenalkan ciri-ciri khusus atau borang dalam tema, anda harus mengikuti mekanisme pemeriksaan nonce dan kebenaran (permissions) yang disediakan oleh WordPress.wp_enqueue_style()和wp_enqueue_script()Ia digunakan untuk memuatkan sumber, bukan untuk mengkodekannya secara keras atau menggunakan tag.