Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Belajar membangunkan tema WordPress daripada awal: panduan utama untuk mencipta laman web yang personal.

Baca dalam 4 minit.
2026-03-13
2026-06-05
2,082
Saya mendapat komisen apabila anda membeli-belah melalui pautan di bawah, tanpa sebarang kos tambahan kepada anda.

Konsep utama pembangunan tema WordPress.

Sebelum meneroka kod dengan lebih mendalam, adalah sangat penting untuk memahami elemen-elemen asas yang membentuk sebuah tema WordPress. Sebuah tema bukan sekadar sekumpulan fail PHP dan CSS; ia merupakan aplikasi yang mengikut struktur tertentu dan berinteraksi rapat dengan inti WordPress. Inti utama sebuah tema terletak pada sistem hierarki templat, yang menentukan bagaimana WordPress memilih dan memaparkan fail templat yang sesuai berdasarkan jenis halaman yang sedang diakses (seperti halaman utama, halaman artikel, halaman kategori, arkib kategori, dan sebagainya).

Topik yang paling asas mesti mengandungi dua fail:style.css和index.phpDi antaranya,style.cssBukan sahaja merupakan fail gaya (style sheet), tetapi juga merupakan “kad pengenalan” bagi sebuah tema. Blok ulasan di bahagian atas fail tersebut mengandungi maklumat meta seperti nama tema, pengarang, deskripsi, dan versi tema.index.phpIni adalah fail templat lalai, dan apabila fail templat yang lebih khusus tidak wujud, WordPress akan kembali menggunakan fail templat lalai tersebut.

Kandungan topik tersebut diatur melalui siri fail templat yang standard.single.phpDigunakan untuk menunjukkan satu artikel sahaja.page.phpDigunakan untuk menunjukkan halaman yang berdiri sendiri.archive.phpDigunakan untuk menampilkan senarai arkib artikel. Kunci kejayaan dalam pembangunannya adalah memahami dan menggunakan pelbagai fungsi terbina yang disediakan oleh WordPress.the_title()、the_content()、wp_head()和wp_footer()Fungsi-fungsi ini mengekstrak data dari pangkalan data dan memaparkannya dengan selamat pada halaman web, berfungsi sebagai jambatan yang menghubungkan reka bentuk laman web (tema) dengan kandungannya.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Bagaimana untuk memilih dan menyesuaikan tema WordPress yang sesuai untuk anda?。

Bina tema pertama anda: Struktur Fail Asas

Mari kita mulakan dengan membuat sebuah tema minimalis yang dinamakan “MyFirstTheme” untuk memahami proses pembangunan. Pertama sekali, buka direktori pemasangan WordPress.wp-content/themes/Buatlah sebuah folder baru, dan berikan nama ia sebagai…myfirsttheme。

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

Mencipta fail skrip gaya (style sheet)

Pertama sekali, buat fail header untuk maklumat topik.style.cssFail ini mendefinisikan metadata untuk tema tersebut.

/*
Theme Name: MyFirstTheme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个用于学习WordPress主题开发的简洁主题。
Version: 1.0
License: GPL v2 or later
Text Domain: myfirsttheme
*/

Text DomainDigunakan untuk pengeinternasionalan, sebagai persiapan untuk fungsi terjemahan yang akan datang. Selepas ini, anda boleh mula menulis gaya CSS untuk laman web tersebut.

Membuat fail templat asas

Seterusnya, buat yang asas.index.phpFail. Ini merupakan pintu masuk kepada keseluruhan topik tersebut.

<!DOCTYPE html>
<html no numeric noise key 1013>
<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 1010>
    <header>
        <h1><a href="/ms/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
    </header>

<main>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <article>
                <h2><?php the_title(); ?></h2>
                <div><?php the_content(); ?></div>
            </article>
        <?php endwhile; endif; ?>
    </main>

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

Kod ini membina struktur halaman HTML5 yang lengkap.wp_head()和wp_footer()Hook membenarkan plugin dan tema untuk menyisipkan kod (seperti CSS, JS) ke dalam bahagian atas dan bawah halaman.body_class()Fungsi tersebut mengeluarkan senarai nama kelas CSS, yang memudahkan reka bentuk gaya berdasarkan syarat tertentu.the_post()Fungsi tersebut menetapkan nilai global dalam gelung.$postVariabel, membuatthe_title()和the_content()Mampu mengeluarkan data artikel semasa dengan betul.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Membina Laman Web Profesional: Panduan Terakhir Untuk Memilih dan Mengatur Tema WordPress。

Mengimport fail fungsi

Walaupun hanya satu…style.css和index.phpTopik tersebut sudah boleh berfungsi, tetapi sebuah topik yang lengkap biasanya mengandungi…functions.phpFail ini bukanlah fail templat, tetapi merupakan “plugin fungsi” untuk tema tersebut, yang digunakan untuk memasang fungsi ke pelbagai titik pengaitan (action hooks) dan titik pengaitan penapis (filter hooks) dalam WordPress.

Menciptafunctions.phpFail ini digunakan untuk menambahkan ciri sokongan tema, serta mengatur susunan pengenalan fail gaya (style sheets) dan skrip (scripts).

<?php
// 添加主题支持功能
function myfirsttheme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章缩略图（特色图像）
    add_theme_support('post-thumbnails');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));
    // 注册一个主导航菜单
    register_nav_menus(array('primary' => __('主导航菜单', 'myfirsttheme')));
}
add_action('after_setup_theme', 'myfirsttheme_setup');

// 排队引入样式表
function myfirsttheme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('myfirsttheme-style', get_stylesheet_uri());
    // 可以引入Google Fonts或其他CSS
    // wp_enqueue_style('myfirsttheme-google-fonts', 'https://fonts.googleapis.com/css?family=...');
}
add_action('wp_enqueue_scripts', 'myfirsttheme_scripts');

melaluiadd_theme_support()Fungsi ini membenarkan kita menggunakan ciri-ciri yang sering digunakan dalam tema WordPress yang moden.wp_enqueue_style()Ini adalah cara standard untuk memperkenalkan fail gaya (style sheet), yang memastikan pengurusan kebergantungan antara komponen dan mengelakkan muat turun yang berulang.

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

Pembangunan Lanjutan: Komponen Templat dan Kawalan Perulangan

Apabila fungsi asas topik tersebut telah diperbaiki, untuk meningkatkan kebolehjagaan dan kebolehgunaan semula kod, adalah perlu untuk mempelajari komponen templat serta kawalan gelung yang lebih terperinci.

Menggunakan komponen templat untuk memisahkan kod

将index.phpMemisahkan bahagian-bahagian umum seperti header, footer, dan sidebar daripada fail template utama merupakan amalan standard.header.php、footer.php和sidebar.php。

将index.php中<body>Semua kod yang berada sebelum tag tersebut hendaklah dipindahkan ke…header.php. Akan</body>和</html>Semua kod yang terdapat sebelum tag (termasuk kandungan kaki halaman)…wp_footer()) Berpindah kefooter.phpKemudian, dalamindex.phpGunakan dalam bahasa Cinaget_header()和get_footer()Fungsi digunakan untuk memperkenalkan (mengimport) mereka.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Dari pembangunan hingga penyebaran: Bagaimana untuk membina dan mengoptimumkan tema WordPress profesional.。

Dipindaindex.phpBahagian utama adalah seperti berikut:

<p>
<main>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <article>
            <h2><?php the_title(); ?></h2>
            <div><?php the_content(); ?></div>
        </article>
    <?php endwhile; else : ?>
        <p><?php _e('抱歉，没有找到任何内容。', 'myfirsttheme'); ?></p>
    <?php endif; ?>
</main>

Mencipta templat halaman khusus (custom page template)

WordPress membenarkan anda membuat templat khusus untuk halaman tertentu. Sebagai contoh, anda boleh membuat templat halaman yang memenuhi seluruh skrin (full-width). Buatlah sebuah fail PHP yang baru, seperti…template-fullwidth.phpDi awal fail, tambahkan ulasan nama templat berikut:

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 
<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽页面模板
 */
get_header(); ?>
<main class="full-width">
    <?php while (have_posts()) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
            <h1><?php the_title(); ?></h1>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    <?php endwhile; ?>
</main>
<?php get_footer(); ?>

Ketika membuat atau mengedit sebuah halaman, anda boleh memilih “Template Halaman Penuh Lebar” daripada senarai drop-down “Properti Halaman” (Page Properties) tersebut. Ini menunjukkan keflexibelan sistem templat.

Kawalan gelung utama dan pertanyaan khusus (custom queries)

在archive.phpAtau pada halaman klasifikasi, anda mungkin perlu mengubah tingkah laku gelung utama. GunakanWP_QueryKelas boleh membuat pertanyaan khusus (custom queries).

// 示例：在模板中查询特定分类下的 sticky 文章
 'news',
    'post__in' =&gt; get_option('sticky_posts'),
    'posts_per_page' =&gt; 3
));
if ($sticky_query-&gt;have_posts()) :
    while ($sticky_query-&gt;have_posts()) : $sticky_query-&gt;the_post();
        // 输出文章内容
        the_title('<h3>', '</h3>');
        the_excerpt();
    endwhile;
    wp_reset_postdata(); // 重置全局$post数据
endif;
?&gt;

Pastikan untuk menggunakannya setelah pengulangan kueri khusus selesai.wp_reset_postdata()Untuk memastikan bahawa pemboleh ubah global kembali ke keadaan semasa dalam gelung utama, ini dapat mengelakkan ralat dalam fungsi-fungsi seterusnya.

Optimasi Tema dan Amalan Terbaik

Setelah proses pembangunan selesai, memastikan kekuatan (robustness), keselamatan (security), dan prestasi (performance) tema tersebut adalah langkah terakhir sebelum ia diterbitkan.

Pastikan keselamatan dan keinternasionalan.

Semua kandungan yang dihasilkan secara dinamik perlu di-ejek (escaped). Gunakan fungsi-ejek yang disediakan oleh WordPress, seperti…esc_html()、esc_attr()、esc_url()Untuk terjemahan, gunakan…__()进行字符串翻译，使用_e()Sebelum ini, kita telah…functions.phpTekan butang “Simpan” untuk menyimpan perubahan.myfirsttheme。

// 正确示例
echo '<a href="/ms/' . esc_url($user_profile_link) . '/">'. esc_html($user_name)'.'</a>';
// 国际化示例
submit_button(__('保存更改', 'myfirsttheme'));

Tambahkan kawasan untuk alat tambahan (widgets).

Bahagian alat tambahan (Sidebar) merupakan ciri klasik WordPress.functions.phpDaftar sebuah kawasan untuk alat tambahan (sidebar widget) di sana.

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

Kemudian, dalamsidebar.phpDi dalamnya, gunakandynamic_sidebar()Fungsi untuk memanggilnya.

<?php if (is_active_sidebar('sidebar-1')) : ?>
    <aside>
        <?php dynamic_sidebar('sidebar-1'); ?>
    </aside>
<?php endif; ?>

Pertimbangan untuk Pengoptimuman Prestasi

Mengoptimumkan kelajuan muat turun tema adalah sangat penting. Pastikan fail CSS dan JavaScript digabungkan dan dikompres dengan betul (biasanya dilakukan pada peringkat pembangunan menggunakan alat pembinaan seperti Webpack atau Gulp).add_image_size()Tambah saiz gambar yang sesuai untuk mengelakkan gambar asli yang terlalu besar daripada dimuat turun di bahagian hadapan (frontend). Bagi skrip, gunakannya hanya apabila perlu.wp_dequeue_script()Padamkannya, dan pastikan skrip dimuatkan di bahagian kaki halaman (dengan cara menyimpannya di sana).wp_enqueue_script()Set the last parameter totrue）。

RINGKASAN

Pembangunan tema WordPress merupakan proses yang sistematik, bermula dengan memahami konsep asas seperti hierarki templat dan fungsi hook, seterusnya membina struktur fail asas, menggunakan komponen templat serta kueri yang disesuaikan untuk reka bentuk yang modular. Akhirnya, tema tersebut perlu diperkukuh dari segi keselamatan dan dioptimumkan dari segi prestasi. Dengan mengikuti standard pengkodan rasmi WordPress dan amalan terbaik, pembangun dapat mencipta tema yang bukan sahaja menarik dari segi penampilan, tetapi juga cekap, selamat, dan mudah diselenggara. Kuncinya adalah untuk terus berlatih dan mempraktikkan kemahiran tersebut, bermula dengan projek yang lebih mudah.index.php和style.cssMula dengan mencuba fail templat yang lebih kompleks secara beransur-ansur.functions.phpDengan menggunakan fungsi-fungsi yang tersedia, akhirnya anda akan dapat mencipta laman web yang benar-benar memenuhi keperluan khusus anda.

FAQ - Soalan Lazim

Bolehkah seseorang yang tidak mempunyai asas pengaturcaraan belajar mengembangkan tema WordPress?

Boleh, tetapi ia memerlukan masa untuk mempelajari asas-asasnya. Saya cadangkan anda menguasai HTML dan CSS terlebih dahulu, kerana ia merupakan asas untuk membina penampilan laman web. Kemudian, belajar secara beransur-ansur tentang sintaks PHP, kerana kod asas WordPress ditulis dalam PHP. Akhirnya, gabungkan fungsi dan mekanisme khusus WordPress untuk melakukan pembangunan. Memulakan dengan mengubah suai tema sedia ada merupakan cara yang baik untuk belajar.

Apa perbezaan antara fail `functions.php` dalam tema dan plugin?

functions.phpIa merupakan sebahagian daripada tema tersebut, dan fungsinya sangat berkaitan dengan penampilan serta cara tema berfungsi. Apabila pengguna menukar tema,functions.phpFungsi yang terdapat dalam tema tersebut akan kehilangan keberkesanannya. Namun, fungsi yang disediakan oleh plugin biasanya beroperasi secara berasingan daripada tema, dan bertujuan untuk menambahkan ciri-ciri khusus kepada laman web (seperti borang hubungan, pengoptimuman SEO), dan fungsi plugin tersebut akan tetap berfungsi walaupun tema diubah. Jika sesuatu fungsi tidak berkaitan dengan reka bentuk visual tema, maka lebih sesuai untuk menjadikannya sebagai plugin.

Mengapa templat halaman khusus saya tidak dipaparkan dalam senarai drop-down?

Sila periksa sama ada fail templat khusus anda berada di dalam direktori akar tema, dan sama ada format blok ulasan nama templat pada awal fail adalah betul. Blok ulasan tersebut harus merupakan ulasan PHP, dan baris “Template Name:” mesti tepat tanpa ralat. Selain itu, pastikan bahawa fail tersebut wujud..phpSufiks tersebut telah ditambahkan, dan cache telah diperbaharui melalui panel pentadbiran WordPress.

Bagaimana untuk menjadikan tema saya menyokong subtema (Child Theme)?

Untuk memastikan tema anda dapat disesuaikan dengan selamat melalui subtema, beberapa garis panduan perlu diikuti semasa proses pembangunan:get_template_directory_uri()Untuk merujuk kepada sumber daripada topik induk, ia akan digunakan dalam topik anak.get_stylesheet_directory_uri()Pakailah fungsi yang boleh disalin dalam…if (!function_exists(‘…’))Dalam pernyataan syarat (conditional statements), dokumen tersebut menjelaskan dengan jelas bahawa topik tersebut menyokong sub-topik, dan menyediakan senarai sub-topik asas yang berkaitan.style.cssContoh.

Apakah piawaian pengkodan yang mesti dipatuhi semasa mengembangkan tema?

Sangat disyorkan untuk mengikut arahan tersebut.Standard Pengaturcaraan PHP Rasmi WordPress和Standard Pemformatan CSS (Cascading Style Sheets)Ini termasuk penggunaan tanda kutip tunggal untuk mendefinisikan rentetan (kecuali jika perlu untuk menganalisis pemboleh ubah), penggunaan ruang kosong untuk pengekstrakan, gaya pemformatan baris menggunakan kurung besar, serta penamaan fungsi dan pemboleh ubah menggunakan huruf kecil dan garis bawah. Mengikuti garis panduan ini akan menjadikan kod anda lebih mudah difahami dan diterima oleh pembangun lain, terutama apabila anda mempertimbangkan untuk menghantar kod tersebut ke direktori rasmi.

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: