Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Pembangunan Tema WordPress: Panduan Lengkap Untuk Membina Tema Custom Dari Kosong

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

Mengapa memilih untuk membangunkan tema WordPress dari awal (dari kosong)?

Dalam ekosistem WordPress, terdapat sejumlah besar tema percuma dan berbayar yang boleh dipilih. Jadi, mengapa pembangun masih perlu belajar untuk membina tema dari awal? Sebab utamanya adalah untuk mendapatkan kawalan yang lebih penuh, mengoptimumkan prestasi, dan meningkatkan kemahiran mereka. Walaupun menggunakan tema sedia ada adalah cara yang cepat, ia seringkali disertai dengan kod yang berlebihan, ciri-ciri yang tidak diperlukan, dan had yang menyukarkan penyesuaian. Membina tema dari awal membolehkan anda mengawal setiap baris kod, memastikan tema tersebut hanya mengandungi fungsi-fungsi yang diperlukan oleh laman web, seterusnya meningkatkan kelajuan muat turun, prestasi SEO, dan keselamatan laman web tersebut.

Membina tema dari awal juga merupakan cara terbaik untuk memahami dengan mendalam mekanisme kerja asas WordPress. Anda akan berinteraksi secara langsung dengan lapisan templat (templates) dan komponen lain yang terdapat dalam sistem WordPress.WP_QueryMenguruskan Action Hooks dan Filter Hooks merupakan asas untuk melakukan penyesuaian lanjutan dan pembangunan plugin. Selain itu, sebuah tema yang dibina dengan teliti dapat memenuhi keperluan imej jenama dan pengalaman pengguna dengan sempurna, yang sukar dicapai oleh tema standard.

Membina persekitaran pembangunan dan mencipta struktur asas tema

Sebelum menulis baris kod pertama, adalah sangat penting untuk membina persekitaran pembangunan tempatan yang cekap. Alat seperti Local by Flywheel, DevKinsta, atau Docker disyorkan, kerana ia dapat mengkonfigurasi persekitaran yang lengkap yang merangkumi PHP, MySQL, dan pelayan web dengan cepat.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan permulaan untuk pembangunan tema WordPress: Membina tema kustom pertama anda dari awal.。

Seterusnya, dalam direktori pemasangan WordPress anda…wp-content/themesDalam folder tersebut, buatlah sebuah folder baru sebagai direktori untuk tema anda, contohnya:my-custom-themeSebuah tema WordPress yang berkesan memerlukan sekurang-kurangnya dua fail:style.css和index.php。

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

style.cssFail tersebut bukan sahaja mengandungi jadual gaya (style sheets), tetapi juga mengandungi maklumat meta berkaitan tema tersebut. Komen-komen di bahagian kepala fail (file header comments) merupakan “kad pengenalan” bagi tema tersebut.

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 一个从零开始构建的现代化WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Text DomainUntuk tujuan internasionalisasi, ia mesti selaras dengan nama folder tema.

index.phpIni adalah fail templat lalai untuk tema tersebut, dan juga merupakan pilihan terakhir (backup) dalam hierarki templat. Pada peringkat awal, ia boleh sangat ringkas, hanya bertujuan untuk memastikan tema dapat dikenali oleh WordPress.

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
    <p>
    <header>
        <h1>My custom theme</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>Maklumat di bahagian bawah laman web</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Pada masa ini, anda boleh melihat dan mengaktifkan tema anda di bahagian “Penampilan” -> “Tema” di panel pentadbiran WordPress.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Membina Laman Web Profesional: Panduan Lengkap Untuk Membangunkan Tema WordPress Custom Dari Kosong。

Fail templat teras dan hierarki templat

WordPress menggunakan sistem “lapisan templat” yang canggih untuk menentukan fail templat mana yang perlu dimuatkan untuk permintaan semasa. Memahami sistem lapisan ini adalah asas dalam pembangunan tema.

Memahami turutan pemuatan templat.

Apabila pengguna mengakses sebuah halaman, WordPress akan mencari fail templat yang paling khusus berdasarkan jenis pertanyaan (adakah halaman utama, artikel individu, halaman biasa, atau direktori kategori?). Jika fail templat tersebut tidak wujud, WordPress akan mencari fail templat seterusnya secara berperingkat, sehingga templat yang sesuai ditemui dan digunakan untuk memaparkan kandungan halaman tersebut.index.phpSebagai contoh, untuk sebuah artikel yang berasingan, WordPress akan mencari maklumat tersebut mengikut urutan berikut:single-post-{slug}.php -> single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.php。

Mencipta fail templat yang sering digunakan.

Anda perlu membuat fail-fail template kunci berikut untuk membina struktur asas tema tersebut:
* header.phpBahagian atas laman web, termasuk<head>Kawasan dan navigasi atas.
* footer.phpDi bahagian bawah laman web.
* functions.phpFail fungsi untuk tema, digunakan untuk menambahkan ciri-ciri baru, mendaftarkan menu, bar sisi, dan lain-lain.
* page.php:Digunakan untuk menunjukkan halaman statik.
* single.php: Digunakan untuk menunjukkan satu artikel sahaja.
* archive.php: Digunakan untuk menampilkan senarai artikel (kategori, tag, penulis, dll.).
* 404.phpHalaman ralat 404.
* search.phpHalaman keputusan carian.

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

Gunakanget_header(), get_footer(), get_sidebar()Tag-tag template digunakan untuk memasukkan komponen-komponen ke dalam fail template.

Meningkatkan fungsi tema dalam fail functions.php

functions.phpIni adalah “Pusat Kawalan” untuk tema anda. Di sini, anda boleh mengembangkan dan mengubah suai fungsi-fungsi dengan menggunakan pelbagai Hook yang disediakan oleh WordPress.

Ciri-ciri yang disokong oleh pendaftaran topik:

Gunakanadd_theme_support()Fungsi ini digunakan untuk menyatakan fungsi-fungsi asas WordPress yang disokong oleh tema anda. Ia biasanya diletakkan dalam fail yang ditentukan oleh WordPress.after_setup_themeDalam fungsi yang dijalankan oleh hook tersebut.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Mulakan dari awal: Kuasai proses teras dan teknik praktikal untuk membangunkan tema WordPress dengan cekap.。

function my_custom_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 支持文章标题标签（Title Tag），无需手动写入<head>
    add_theme_support( 'title-tag' );
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 支持HTML5标记（用于评论表单、搜索表单等）
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Daftar menu navigasi dan bar sisi

Menu navigasi dan bar sisi (kawasan alat tambahan) juga perlu disertakan.functions.phpDaftar di sini.

// 注册导航菜单位置
function my_custom_theme_menus() {
    register_nav_menus( array(
        'primary' =&gt; __( '主导航菜单', 'my-custom-theme' ),
        'footer'  =&gt; __( '底部菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'init', 'my_custom_theme_menus' );

// 注册侧边栏（小工具区域）
function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-custom-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_custom_theme_widgets_init' );

Setelah mendaftar, anda boleh membuat pengaturan di bahagian “Penampilan” -> “Menu” dan “Penampilan” -> “Widget” pada panel pentadbiran, serta menggunakannya dalam templat-templat yang ada.wp_nav_menu()和dynamic_sidebar()Untuk memanggilnya.

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

Gaya, pengenalan skrip, dan kawalan gelung

Pembangunan tema moden memerlukan pengikutan amalan terbaik untuk mengurus CSS dan JavaScript, serta untuk menghasilkan kandungan artikel dengan cara yang selamat dan cekap.

Menambahkan CSS dan JavaScript dengan selamat

Jangan sekali-kali membuat pautan langsung (hard link) ke fail CSS dan JS dalam fail templat. Sebaliknya, gunakan kaedah yang sesuai untuk mengimportnya.wp_enqueue_style()和wp_enqueue_script()Fungsi tersebut, dan kemudian dilampirkan (dimount) ke…wp_enqueue_scriptsPada kait itu.

function my_custom_theme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义CSS
    wp_enqueue_style( 'my-custom-theme-custom', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
    // 引入jQuery（WordPress已内置）和自定义JS
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Gunakan parameter ketiga…$depsLetakkan sebagaiarray( 'jquery' )Anda boleh menyatakan kebergantungan tersebut untuk memastikan jQuery dimuat turun terlebih dahulu. Parameter yang terakhir adalah…trueMenunjukkan bahawa skrip dimuat turun di bahagian bawah halaman.

Mengeluarkan kandungan dengan selamat dalam satu gelung (loop)

Dalam fail templat (seperti…)single.php, archive.phpDalam kod tersebut, penggunaan “loop” digunakan untuk memaparkan kandungan artikel. Adalah penting untuk menggunakan tag templat yang disediakan oleh WordPress dan fungsi pengelakan (escape function) untuk memastikan keselamatan.

\n
    <article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
        <header class="entry-header">
            <h1 class="entry-title"><?php the_title(); ?></h1>
            <div class="entry-meta">
                |
            </div>
        </header>
        <div class="entry-content">
            <?php
            // 输出文章内容，并应用段落过滤器等
            the_content();
            ?>
        </div>
        <footer class="entry-footer">
            &lt;?php the_tags( &#039;标签: &#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
        </footer>
    </article>
    
    <p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-custom-theme' ); ?></p>
<?php endif; ?>

Gunakanthe_title(), the_content()Fungsi-fungsi seperti ini akan mengeluarkan kandungan secara automatik. Gunakanlah dengan bijak.esc_html_e()或esc_html__()Untuk teks yang perlu diterjemahkan, proses pengelakkan kesilapan (escaping) dan penyesuaian untuk penggunaan dalam pelbagai bahasa (internationalization) perlu dilakukan.

RINGKASAN

Membangunkan tema WordPress dari awal merupakan satu proses yang sistematik, dan ia jauh lebih dari sekadar menulis kod HTML dan CSS. Anda perlu memahami konsep asas WordPress: hierarki templat menentukan logik penampilan kandungan.functions.phpIa merupakan pusat fungsi utama, yang berinteraksi dengan inti WordPress melalui sistem hook;WP_Query“Cyclic” merupakan enjin untuk pengeluaran kandungan dinamik; manakala pengenalan sumber secara selamat, pembebasan kod berbahaya (escaping), dan pengaturcaraan untuk kepelbagaian bahasa (internationalization) merupakan prinsip asas dalam membina tema yang berkualiti tinggi. Bermula dari mencipta yang paling asas…style.css和index.phpMulakan dengan menambahkan fail-fail templat secara beransur-ansur, menu pendaftaran, dan ciri-ciri khusus yang disokong. Anda akan menyaksikan secara berperingkat kelahiran sebuah tema yang lengkap dengan fungsi, berprestasi tinggi, dan mudah diselenggara. Proses ini bukan sahaja membolehkan anda mencipta laman web yang unik, tetapi juga menjadikan anda seorang pengembang WordPress yang sebenar.

FAQ - Soalan Lazim

Untuk membangunkan tema dari awal, apakah bahasa pengaturcaraan yang perlu dikuasai?

Untuk membangunkan sebuah tema WordPress dari awal, anda perlu menguasai HTML, CSS, dan PHP sebagai bahasa asas. HTML digunakan untuk membina struktur halaman, CSS untuk reka bentuk gaya dan susun atur (disarankan juga untuk memahami reka bentuk responsif). PHP merupakan bahasa pihak server dalam WordPress yang digunakan untuk memproses logik, memanggil data, dan menjana halaman dinamik. Selain itu, pengetahuan asas tentang JavaScript (terutamanya jQuery) akan sangat membantu dalam mencipta kesan interaktif pada bahagian hadapan (front end) aplikasi.

Dalam pembangunan tema, bagaimanakah kita boleh melaksanakan penyesuaian reka bentuk halaman (page layout) secara khusus?

Dalam pembangunan tema WordPress, susun atur halaman terutamanya dilakukan melalui fail templat dan CSS. Pertama sekali, anda boleh membuat fail templat yang berbeza untuk jenis halaman yang berbeza (seperti halaman utama, senarai blog, halaman individu).front-page.php, home.phpDalam setiap fail, definisikan struktur HTML yang unik. Selanjutnya, gunakan teknologi susun atur Flexbox atau Grid dalam CSS untuk mencipta reka bentuk yang responsif. Kaedah yang lebih canggih adalah dengan membuat beberapa kawasan sidebar dan membenarkan pengguna untuk menggabungkan komponen secara dinamik melalui “alat tambahan” di bahagian belakang.

Apa itu subtopik, mengapa dan bagaimana untuk menggunakannya?

Subtopik adalah sebuah topik yang berfungsi dengan bergantung pada topik lain (topik induk). Ia membenarkan anda memodifikasi atau memperluas fungsi dan gaya topik induk tanpa perlu mengubah kod topik induk secara langsung. Kelebihan daripada ini adalah: apabila topik induk diperbaharui, pengubahsuaian yang anda buat (dalam subtopik) tidak akan ditimpa, dan proses pembaruan menjadi lebih selamat dan bebas daripada risiko.

Menggunakan sub-topik sangat mudah.wp-content/themesCipta sebuah folder baru di dalam direktori tersebut sebagai sub-topik, dan kemudian cipta satu fail lagi di dalam folder tersebut.style.cssFail tersebut, kepala failnya mesti memenuhi syarat yang ditetapkan.Template:Pernyataan medan menunjukkan nama direktori topik induk. Subtopik…functions.phpIa akan dimuat turun terlebih dahulu, dan anda boleh menambahkan ciri-ciri baru di sini atau mengubah tingkah laku tema induk melalui “hook” (mekanisme pengaitan). Fail templat juga akan digunakan terlebih dahulu.

Bagaimana untuk menjadikan tema saya menyokong berbilang bahasa (internasionalisasi)?

Pastikan tema menyokong pelbagai bahasa, iaitu internasionalisasi (i18n). Ini terutamanya melibatkan pengaturan teks yang kelihatan kepada pengguna agar dapat dikenali oleh alat terjemahan. Dalam kod, jangan menulis teks dalam bahasa Inggeris atau Cina secara langsung, sebaliknya gunakan fungsi terjemahan WordPress.()Digunakan untuk mengembalikan rentetan terjemahan dalam PHP._e()Untuk output langsung.esc_html()Digunakan untuk mengelakkan masalah penguraian data dan mengembalikan nilai yang diinginkan.

Anda perlu…style.css的Text DomainDalam semua panggilan fungsi terjemahan, gunakan domain teks (Text Domain) yang konsisten. Kemudian, anda boleh menggunakan perisian seperti Poedit untuk memeriksa kod tema anda dan menjana hasil terjemahan yang diperlukan..potTranslate the template file, and the translator will create the corresponding language version based on this.zh_CN.poFail terjemahan untuk (…) kemudian dikompilasi menjadi.moDokumen-dokumen tersebut dimasukkan ke dalam topik tersebut.languagesFolder. WordPress akan memuat turun terjemahan yang sesuai secara automatik berdasarkan tetapan bahasa laman web.

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: