Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Panduan Praktikal Pembangunan Tema WordPress Dari Kosong Ke Kemahiran Tinggi: Membina Tema Laman Web Sendiri

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

Membina tema WordPress yang diperibadikan bermakna anda mempunyai kawalan penuh ke atas penampilan, fungsi, dan prestasi laman web anda. Berbeza dengan menggunakan tema siap sedia, pembangunan yang diperibadikan membolehkan anda mencipta laman web yang unik, cekap, dan sesuai sepenuhnya dengan jenama anda. Panduan ini akan membimbing anda daripada mengatur persekitaran asas hingga ke pelancaran tema yang lengkap dengan semua fungsi yang diperlukan.

Pengaturcaraan Persekitaran dan Struktur Fail Asas

Sebelum mula menulis kod, adalah sangat penting untuk membina persekitaran pembangunan tempatan yang sesuai. Anda boleh menggunakan XAMPP, MAMP, atau alat yang lebih profesional seperti Valet dan Local by Flywheel. Pastikan bahawa persekitaran anda menyokong PHP 7.4 atau versi yang lebih baru, serta pangkalan data MySQL atau MariaDB.

Sebuah tema WordPress pada dasarnya adalah sebuah fail yang terletak di direktori tema WordPress. wp-content/themes/ Direktori dalam folder tersebut. Direktori ini mesti mengandungi sekurang-kurangnya dua fail utama: fail gaya (stylesheet) dan template indeks (index template).

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Permulaan untuk Pembangunan Tema WordPress: Membina Rupa Laman Web Anda dari Awal。

Pertama sekali, wp-content/themes/ Cipta sebuah folder baru, sebagai contoh… my-custom-themeKemudian, buat fail pertama yang diperlukan:style.cssFail ini bukan sahaja mendefinisikan gaya tema tersebut, tetapi juga mengandungi metadata tema dalam ulasan kepala fail (header comments).

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 
/*
Theme Name: My Custom Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个从头开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Seterusnya, buat fail kedua yang diperlukan:index.phpIni adalah fail templat lalai untuk tema tersebut, dan ia akan digunakan oleh WordPress apabila templat yang lebih khusus tidak ditemui. Ini merupakan contoh templat yang paling ringkas. index.php Boleh hanya menggunakan satu gelung untuk menunjukkan senarai artikel.

<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;
    endif; ?>
</main>

\n

Memahami hierarki templat.

WordPress menggunakan hierarki templat untuk menentukan templat fail mana yang perlu digunakan untuk halaman tertentu. Sebagai contoh, apabila seseorang mengakses sebuah artikel yang berasingan, WordPress akan mencari templat yang sesuai terlebih dahulu. single.phpJika ia tidak wujud, kemudian kembali ke singular.phpDan yang terakhir ialah index.phpMemahami hubungan hierarki ini adalah kunci kepada pembangunan tema yang cekap. Anda harus membuat fail templat yang sesuai berdasarkan keperluan, seperti… page.php(Page)archive.php(Arkhiv Halaman) dan single.php(Satu artikel.)

Fail templat asas dan ciri-ciri tema

Selain itu, index.php 和 style.cssSebuah tema yang lengkap dengan semua fungsi memerlukan beberapa fail templat inti lain untuk memisahkan struktur halaman dan membolehkan penggunaan kod yang berulang (code reuse).

Mencipta header.php Fail tersebut biasanya mengandungi pengisytiharan jenis dokumen (document type declaration).<head> Bahagian kawasan, serta navigasi dan logo di bahagian atas laman web. Gunakan (Use). wp_head() Fungsi-fungsi ini sangat penting kerana ia membenarkan bahagian inti WordPress, plugin, dan tema anda untuk menyisipkan kod yang diperlukan (seperti pautan ke fail gaya dan meta-tag) di tempat yang sesuai.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai Pembangunan Tema WordPress Dari Kosong Ke Sifar: Panduan Praktikal Untuk Membina Laman Web Moden。

<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
<header>
    <h1><a href="/ms/</?php echo esc_url( home_url( '/' ) ); ?>">\n</a></h1>
</header>

Mencipta footer.php Fail tersebut mengandungi kandungan kaki halaman (footer) dan tag HTML yang digunakan untuk menutup fail tersebut. Oleh itu, fungsi yang berkaitan perlu dipanggil untuk melaksanakan tindakan yang sesuai. wp_footer() Fungsi ini digunakan untuk memuatkan kod yang diperlukan oleh skrip dan plugin.

functions.php Fail tersebut merupakan “pusat kawalan” untuk tema anda. Ia bukanlah fail templat, tetapi sebaliknya sebuah fail PHP yang dimuat secara automatik semasa tema tersebut diinisialisasikan. Di sini, anda boleh mendaftarkan menu, bar sisi, menambahkan ciri-ciri sokongan untuk tema tersebut, serta menyusun fail gaya (style sheets) dan skrip (scripts).

<?php
// 添加主题支持
function my_theme_setup() {
    add_theme_support( 'title-tag' ); // 让 WordPress 管理标题标签
    add_theme_support( 'post-thumbnails' ); // 启用文章缩略图功能
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

// 注册导航菜单
function my_theme_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'init', 'my_theme_menus' );

Menu yang dijana secara dinamik

在 header.php Di dalamnya, anda boleh menggunakan… wp_nav_menu() Fungsi ini digunakan untuk menunjukkan menu yang telah anda daftarkan. Fungsi tersebut akan menghasilkan senarai tidak teratur (unordered list) yang mengandungi kelas CSS dan struktur yang betul, seperti yang disetkan dalam bahagian “Appearance > Menus” di panel pentadbiran WordPress.

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>
    <?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
        'container'      => false,
    ) );
    ?>
</nav>

Gaya, skrip, dan reka bentuk responsif

Tema WordPress moden mesti mengikuti amalan terbaik untuk memuatkan fail CSS dan JavaScript, serta memastikan laman web dapat dipaparkan dengan baik pada semua peranti.

在 functions.php Di dalamnya, gunakan wp_enqueue_style() 和 wp_enqueue_script() Fungsi ini digunakan untuk mengatur pengurusan sumber. Ia memastikan pengurusan kebergantungan dan susunan pemuatannya yang betul, serta membenarkan plugin dan sub-topik untuk membuat perubahan (overwriting).

function my_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0.0' );

// 排入自定义 JavaScript 文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.0', true );

// 为脚本本地化数据（可选）
    wp_localize_script( 'my-theme-script', 'myThemeData', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
    ) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Reka bentuk responsif seharusnya dijadikan standard lalai. Dalam projek anda… style.css Dalam reka bentuk web, media queries digunakan untuk menyesuaikan susun atur halaman mengikut saiz skrin yang berbeza. Salah satu corak yang biasa digunakan ialah “mobile-first”, di mana gaya asas untuk peranti mudah alih ditulis terlebih dahulu, dan kemudian gaya tambahan disesuaikan untuk skrin yang lebih besar. min-width Media queries digunakan untuk menambah gaya yang dipertingkatkan untuk skrin yang lebih besar.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Tutorial langkah demi langkah untuk membantu anda mencipta tema WordPress kustom yang kuat.。

/* 基础移动样式 */
.container { width: 100%; padding: 0 15px; }
.menu { display: block; }

/* 平板电脑及以上 */
@media (min-width: 768px) {
    .container { width: 750px; margin: 0 auto; }
    .menu { display: flex; }
}

/* 桌面电脑 */
@media (min-width: 992px) {
    .container { width: 970px; }
}

Menggunakan kelas dan fungsi terbina dalam WordPress

WordPress menyediakan banyak kelas CSS dan fungsi PHP yang berguna untuk membantu dalam pembangunan reka bentuk (style development).body_class() Fungsi tersebut akan mengeluarkan satu siri kelas CSS yang berdasarkan jenis halaman semasa (seperti…) home, single-post, page-id-2Anda boleh menggunakan kelas-kelas ini dalam CSS untuk menulis gaya yang disasarkan.post_class() Fungsi tersebut menghasilkan kelas yang serupa untuk elemen kontena setiap artikel.

Pengintegrasian ciri-ciri lanjutan dengan komponen kecil (widgets)

Untuk menjadikan tema anda lebih profesional dan mudah digunakan, anda boleh mengintegrasikan beberapa ciri lanjutan, seperti jenis artikel yang boleh disesuaikan, kawasan widget (bar sisi), dan tetapan penyesuaian.

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

Kawasan widget membenarkan pengguna untuk menyesuaikan kandungan dengan menarik dan meletakkan modul melalui “Penampilan > Widget” di panel pentadbiran WordPress. functions.php Daftar sebuah kawasan untuk widget sidebar di sini.

function my_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; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>'function my_theme_widgets_init() {  
    register_sidebars( array(  
        'sidebars' =&gt; array(  
            'name' =&gt; 'My Sidebar',  
            'id' =&gt; 'my-sidebar',  
        ),  
    ) );  
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Selepas pendaftaran, anda akan dapat menggunakan fungsi-fungsi tersebut dalam fail-fail templat (seperti…) sidebar.phpGunakan dynamic_sidebar() Fungsi digunakan untuk memanggil kawasan ini.

WordPress Customizer membenarkan pengguna untuk melihat pratonton perubahan pada tema secara masa nyata. Anda boleh menambahkan beberapa tetapan asas kepada tema anda, seperti logo laman web atau teks hak cipta di bahagian kaki halaman. Ini melibatkan penggunaan… WP_Customize_Manager Kelas, dalam… functions.php Tambahkan kod yang berkaitan ke dalam bahagian tersebut.

function my_theme_customize_register( $wp_customize ) {
    // 添加一个“版权信息”设置
    $wp_customize->add_setting( 'footer_copyright', array(
        'default'           => '© 2026 Your Site Name',
        'sanitize_callback' => 'sanitize_text_field',
    ) );

$wp_customize->add_control( 'footer_copyright', array(
        'label'    => __( '页脚版权文本', 'my-custom-theme' ),
        'section'  => 'title_tagline', // 放在“站点身份”区域
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );

Kemudian, dalam dokumen anda… footer.php Di dalamnya, anda boleh menggunakan… get_theme_mod() Fungsi untuk mengeluarkan nilai yang telah disetkan ini:<?php echo esc_html( get_theme_mod( 'footer_copyright' ) ); ?>。

RINGKASAN

Pembangunan tema WordPress adalah proses yang menggabungkan pengetahuan tentang PHP, HTML, CSS, dan JavaScript dengan arkitektur asas WordPress. Ia bermula dengan membina struktur fail yang betul, kemudian melaksanakan hierarki templat, fail-fail fungsi utama, pengurusan sumber, dan reka bentuk responsif. Dengan mengintegrasikan ciri-ciri lanjutan seperti widget dan customizer, anda dapat mencipta tema yang kuat dan mesra pengguna. Kuncinya adalah memahami cara WordPress berfungsi, serta mengikuti standard pengkodan dan amalan terbaiknya, yang akan memastikan tema anda selamat, cekap, dan mudah diselenggara.

FAQ - Soalan Lazim

Apa pengetahuan asas yang diperlukan untuk membangunkan tema WordPress?

Anda perlu memiliki asas yang kukuh dalam HTML dan CSS, yang merupakan batu asas untuk membina penampilan laman web. Pada masa yang sama, anda mesti menguasai sintaks asas PHP, kerana kod teras WordPress dan templat tema ditulis dalam PHP. Pengetahuan tentang JavaScript (terutamanya jQuery) sangat membantu dalam menambahkan ciri interaktif. Akhirnya, memahami konsep asas WordPress, seperti gelung (loops), hook, dan hierarki templat, adalah kunci untuk mengembangkan tema dengan berjaya.

Berapakah panjang yang boleh dimiliki oleh fail functions.php untuk sebuah tema? Adakah ia akan mempengaruhi prestasi?

functions.php Secara teorinya, fail boleh menjadi sangat panjang. Namun, demi kemudahan penyelenggaraan, adalah sangat disyorkan untuk memodulaskannya. Anda boleh memisahkan fungsi-fungsi yang berbeza (seperti jenis artikel khusus, kod pendek, alat tambahan) ke dalam fail-fail yang berasingan, dan kemudian… functions.php Gunakan dalam bahasa Cina require_once 或 include Untuk memperkenalkannya, selagi kod ditulis dengan cekap dan tiada pertanyaan yang berlebihan (redundant queries), panjang kod tersebut mempunyai kesan yang sangat kecil terhadap prestasi. Bagi projek yang besar, memecahkan fail menjadi bahagian-bahagian yang lebih kecil merupakan amalan standard.

Bagaimana untuk membuat topik saya menyokong terjemahan pelbagai bahasa?

Membuat tema menyokong internasionalisasi (i18n) adalah langkah penting untuk menarik pengguna dari seluruh dunia. Dalam kod PHP anda, semua rentetan teks yang ditujukan untuk pengguna harus dibungkus menggunakan fungsi terjemahan WordPress. __()(untuk menunjukkan kembali teks) atau _e()(Digunakan untuk output teks secara langsung.) Anda perlu style.css Kepala dan load_theme_textdomain() Pengaturan yang betul semasa pemanggilan fungsi Text DomainSelepas itu, pembangun boleh menggunakan alat seperti Poedit untuk menghasilkan kandungan yang diperlukan. .pot Fail templat, dan buat yang bersesuaian dengannya. .po 和 .mo Menterjemahkan dokumen.

Bagaimanakah saya boleh menghantar tema yang saya bangunkan ke direktori tema rasmi WordPress?

Untuk menghantar kod ke direktori rasmi, terdapat beberapa syarat yang perlu dipenuhi. Kod anda mesti mengikut standard pengaturcaraan WordPress, dan tidak boleh menggunakan sebarang kod pendek (shortcodes) atau widget untuk mengaturkod kandungan secara langsung. Pastikan semua fungsi adalah selamat dan mematuhi lesen GPL. Tema yang dihantar mesti lulus ujian menggunakan plugin Theme Check, serta mempunyai reka bentuk yang responsif, kebolehaksesan yang baik, dan dokumentasi yang lengkap. Proses penghantaran dilakukan melalui halaman penghantaran di laman web rasmi WordPress, dan selepas itu akan ada pasukan pengauditan yang akan meninjau kod tersebut.

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: