Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Tutorial lengkap untuk pembangunan tema WordPress: Membina tema kustom dari awal.

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

Preparasi dan pembinaan persekitaran.

Sebelum memulakan penulisan kod, sebuah persekitaran pembangunan tempatan yang stabil dan cekap adalah sangat penting. Ini bukan sahaja membolehkan anda melakukan ujian tanpa mempengaruhi laman web dalam talian, tetapi juga dapat meningkatkan kecekapan pembangunan dengan ketara.

Konfigurasi persekitaran pembangunan tempatan

Disyorkan untuk menggunakan alat pembangunan tempatan yang terintegrasi, seperti Local by Flywheel, XAMPP, atau MAMP. Alat-alat ini memasang PHP, MySQL, dan pelayan web (seperti Apache atau Nginx) yang diperlukan untuk menjalankan WordPress dengan satu klik sahaja. Sebagai contoh, Local by Flywheel menyediakan antara muka yang mudah digunakan untuk mencipta dan mengurus beberapa laman web WordPress dengan cepat, serta mempunyai ciri-ciri berguna seperti kemudahan bertukar antara laman web, pengaktifan HTTPS (SSL) dengan satu klik, dan penangkapan e-mel, yang sangat sesuai untuk pembangunan tema.

Pemilihan Editor dan Alat Kod

Sebuah editor kod yang berkuasa merupakan alat yang sangat berguna bagi para pembangun. Visual Studio Code (VS Code) sangat popular kerana saiznya yang kecil, percuma, dan ekosistem tambahan (plugin) yang kaya. Untuk pembangunan tema WordPress, disyorkan untuk memasang tambahan (extension) berikut: PHP Intelephense (yang menyediakan kefahaman pintar terhadap kod PHP dan cadangan kod), WordPress Snippet (yang mengandungi banyak segmen kod fungsi untuk WordPress), serta tambahan yang berkaitan dengan bahasa pemprosesan prapemprosesan CSS (seperti Sass). Selain itu, penggunaan Git untuk kawalan versi merupakan standard industri dalam mengurus perubahan kod, kerjasama, dan pemulihan versi sebelumnya.

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

Membina struktur asas dan fail-fail utama untuk sebuah tema

Sebuah tema WordPress pada dasarnya adalah sebuah fail yang terletak di direktori tema WordPress. /wp-content/themes/ Folder dalam direktori tersebut mengandungi satu siri fail tertentu. Fail-fail ini bersama-sama menentukan penampilan dan fungsi laman web.

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

File Maklumat Tema

Setiap topik mesti mengandungi satu elemen yang bernama… style.css Fail tersebut bukan sahaja berfungsi untuk menulis gaya (style) tetapi yang lebih penting, ia menyatakan metadata tema kepada WordPress melalui blok ulasan (comments) yang khusus di bahagian atas fail. Ini merupakan kunci bagi WordPress untuk mengenal pasti sebuah tema.

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始构建的 WordPress 自定义主题，用于学习主题开发。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
*/

Di antaranya,Text Domain Digunakan untuk pengekstrakan kandungan yang perlu diterjemahkan (internationalization atau i18n), dan kemudian fungsi terjemahan (seperti…) dapat digunakan untuk menerjemahkan kandungan tersebut. __() 或 _e()Identifiers yang mesti digunakan ketika...

Fail Templat Utama

Selain itu, style.cssSatu lagi fail yang diperlukan adalah index.phpIa merupakan templat lalai untuk sesuatu tema, dan akan digunakan oleh WordPress apabila tema tersebut tidak dapat mencari fail templat yang lebih khusus. Namun, sebuah tema yang lengkap dengan ciri-ciri akan mengandungi pelbagai fail templat untuk mengawal penampilan halaman-halaman yang berbeza dengan lebih tepat.

  • header.phpMendefinisikan kawasan header (tajuk) laman web, yang biasanya mengandungi <!DOCTYPE html> Pengisytiharan,<head> Sebahagian dan permulaan <body> Dan navigasi utama.
  • footer.phpMendefinisikan kawasan kaki halaman (footer) untuk laman web, yang biasanya mengandungi maklumat hak cipta, pengenalan skrip (scripts), dan kod penutupan (closing code). </body></html> Tag.
  • functions.phpIni adalah “Pusat Fungsi” untuk tema, yang digunakan untuk menambahkan ciri-ciri tema, menu pendaftaran, bar sisi, serta mengatur susunan fail gaya (style sheets) dan skrip (scripts).
  • page.phpDigunakan untuk menunjukkan halaman yang berasingan.
  • single.phpDigunakan untuk menunjukkan satu artikel blog.
  • archive.phpDigunakan untuk menampilkan senarai arkib artikel (seperti mengikut kategori, tag, atau tarikh).
  • front-page.phpDigunakan untuk menyesuaikan halaman utama laman web.
  • style.cssFail gaya utama (Master Style Sheet).

Membina ciri-ciri tema dan sistem templat

WordPress menggunakan sistem hierarki templat untuk menentukan fail templat yang akan digunakan untuk halaman yang diminta pada masa tersebut. Memahami dan memanfaatkan sistem ini adalah kunci untuk membina tema yang fleksibel.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Membina Laman Web yang Sempurna: Panduan Lengkap untuk Membina Tema WordPress Custom dari Kosong。

Penerangan Terperinci Mengenai Fail Fungsi Tema (Theme Function File)

functions.php Fail tersebut akan dijalankan secara automatik semasa tema dimuat. Salah satu tugas utamanya adalah untuk menggunakan… wp_enqueue_style() 和 wp_enqueue_script() Fungsi ini digunakan untuk memperkenalkan sumber (resources) dengan betul. Ini merupakan cara yang disyorkan oleh WordPress secara rasmi, kerana ia dapat mengurus kebergantungan (dependencies), mengelakkan muat turun yang berulang, dan mengawal masa muat turun tersebut.

function my_theme_enqueue_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    // 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

Selain itu, anda juga perlu mendaftar ciri sokongan tema di sini, seperti gambar kecil artikel, penempatan menu yang boleh disesuaikan, dan format artikel.

function my_theme_setup() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
    // 支持 HTML5 标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Template Tags and Loops

Tag templat adalah fungsi PHP yang disediakan oleh WordPress, yang digunakan untuk menghasilkan kandungan secara dinamik dalam fail templat. Yang paling penting adalah “The Loop”, iaitu segmen kod PHP yang digunakan untuk memeriksa sama ada terdapat artikel pada halaman semasa, dan kemudian mengeluarkan setiap artikel tersebut secara berurutan.

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

在 index.php 或 single.php Dalam bahasa pengaturcaraan, struktur asas pengulangan (loop) adalah seperti berikut:

\n
    <article>
        <h2><?php the_title(); ?></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </article>
<?php endwhile; else : ?>
    <p><?php _e( '抱歉，没有找到任何内容。', 'my-custom-theme' ); ?></p>
<?php endif; ?>

Di sini,the_title() 和 the_content() Itulah tag-tag templat, yang masing-masing digunakan untuk menampilkan tajuk dan kandungan artikel semasa. Tag-tag templat yang sering digunakan lainnya termasuk… the_permalink()(Pautan artikel),the_post_thumbnail()(Gambar istimewa) Dan the_author()(Author), dsb.

Mengimplementasikan reka bentuk responsif dan ciri-ciri lanjutan

Laman web moden mesti dapat dipaparkan dengan baik pada pelbagai peranti. Pada masa yang sama, untuk meningkatkan kekuatan dan kebolehurusan tema tersebut, beberapa amalan pembangunan yang canggih perlu diperkenalkan.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai Pembangunan Tema WordPress: Panduan Praktikal Lengkap dari Pemula hingga Pakar.。

Menggunakan CSS untuk mencapai reka bentuk yang responsif

Inti reka bentuk responsif adalah kueri media (Media Queries). Anda boleh… style.css Peraturan gaya yang berbeza ditentukan untuk lebar 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 diperkenalkan secara beransur-ansur untuk skrin yang lebih besar.

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 0 15px;
}
/* 中等屏幕（平板，768px 及以上） */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}
/* 大屏幕（桌面，992px 及以上） */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Mengintegrasikan sub-topik untuk penyesuaian

Mengubah kod tema induk (tema yang sedang anda kembangkan) secara langsung mempunyai risiko, kerana perubahan anda akan ditimpa apabila tema induk diperbaharui. Ciri tema anak (sub-theme) dalam WordPress menyelesaikan masalah ini dengan sempurna. Tema anak mewarisi semua fungsi tema induk, tetapi membenarkan anda hanya mengubah fail-fail yang perlu diperbaiki. style.css、functions.php atau fail templat tertentu).

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

Mencipta sub-topik sangat mudah: /wp-content/themes/ Buat sebuah folder baru, dan cipta sebuah fail yang mengandungi maklumat header berikut: style.css Fail, di mana Template: Baris tersebut mesti menentukan nama direktori tema induk.

/*
Theme Name: 我的自定义主题 - 子主题
Template: my-custom-theme
*/

Kemudian, dalam sub-topik tersebut… functions.php Dalam hal ini, anda boleh menambahkan ciri-ciri baru atau memodifikasi ciri-ciri sedia ada dengan selamat, tanpa perlu menyentuh kod tema induk. Ini merupakan strategi penyesuaian dan pengemaskinian yang kuat dan selamat dalam ekosistem tema WordPress.

RINGKASAN

Membangunkan tema khusus untuk WordPress dari awal merupakan projek yang sistematik, yang memerlukan pengembang bukan sahaja mahir dalam teknologi front-end seperti PHP, HTML, CSS, dan JavaScript, tetapi juga memahami konsep asas WordPress dengan mendalam, seperti hierarki templat, pengulangan (looping), tag templat, dan sistem hook. Proses ini bermula dengan membina persekitaran setempat (local environment), mencipta struktur fail asas, dan seterusnya… functions.php Dengan meningkatkan fungsi, membina sistem templat, dan akhirnya menerapkan reka bentuk responsif serta strategi sub-topik, anda boleh membina sebuah tema yang berkualiti tinggi yang memenuhi kedua-dua piawaian standard dan keperluan peribadi pengguna. Proses ini bukan sahaja merupakan amalan teknikal, tetapi juga merupakan pengalaman mendalam terhadap kefleksibelan dan keupayaan pengembangan WordPress yang luar biasa.

FAQ - Soalan Lazim

Adakah pembangunan tema WordPress memerlukan kemahiran yang tinggi dalam PHP?

Ya, memiliki asas PHP yang kukuh adalah syarat penting untuk melakukan pembangunan mendalam tema WordPress. Ini kerana WordPress sendiri ditulis dalam PHP, dan semua fail templat (seperti… page.php, single.php) dan fail-fail fungsi utama functions.php Semuanya adalah skrip PHP. Anda perlu menggunakan PHP untuk memanggil fungsi WordPress (tag templat dan API), memproses data, dan mengawal aliran logik. Walaupun anda boleh membuat beberapa penyesuaian pada permukaan menggunakan pembina halaman atau subtema, pengetahuan PHP adalah penting untuk mencapai reka bentuk dan fungsi yang benar-benar diperibadikan.

Bolehkah terdapat beberapa fail functions.php untuk sesuatu tema?

Tidak boleh. Setiap topik (atau sub-topik) hanya boleh mempunyai satu nama sahaja. functions.php Fail tersebut akan dimuat turun secara automatik semasa tema dimulakan. Jika anda ingin memodulkan fungsi-fungsi untuk menjaga kod menjadi lebih teratur, anda boleh… functions.php Gunakan dalam bahasa Cina require_once() 或 include_once() Ayat untuk memanggil fail PHP lain yang terletak di dalam direktori topik. Sebagai contoh, anda boleh mencipta… /inc/ Dalam direktori tersebut, fungsi-fungsi seperti jenis artikel yang diperibadikan, alat tambahan (widgets), dan kod pendek (shortcodes) boleh ditulis dalam fail-fail yang berbeza. Kemudian, semua komponen ini boleh digabungkan dalam fail utama untuk mencipta aplikasi atau laman web yang lengkap. functions.php Diperkenalkan secara seragam di seluruh negara.

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

Untuk menjadikan tema menyokong berbilang bahasa, iaitu internasionalisasi (i18n), terdapat dua langkah utama yang perlu diikuti. Pertama, di semua tempat di mana teks dipaparkan dalam tema, gunakan fungsi terjemahan WordPress untuk membungkus ayat-ayat tersebut. Fungsi yang paling sering digunakan adalah… __()(Kembali ke rentetan terjemahan) dan _e()Anda mesti menentukan dalam kod di mana… style.css Didefinisikan di bahagian kepala (header) Text Domain。

echo __( ‘这是一个示例文本‘， ‘my-custom-theme‘ );

Kedua, anda perlu menggunakan alat seperti Poedit untuk memindai semua rentetan teks yang boleh diterjemahkan dalam tema tersebut, dan menghasilkan sebuah… .pot(Template) Fail. Penterjemah boleh menggunakan ini untuk membuat fail dalam bahasa yang sesuai. .po Dan selepas dikompilasi. .mo Fail. Letakkan fail-fail bahasa ini dalam folder tema. /languages/ Dalam direktori tersebut, apabila pengguna menukar bahasa laman web, terjemahan yang bersesuaian akan dimuat turun secara automatik.

Setelah pembangunan selesai, bagaimanakah tema tersebut boleh dipaket dan diterbitkan?

Sebelum memuat naik, pastikan semua kod pembangunan (debug code) dan maklumat sensitif dalam ulasan (comments) telah dikeluarkan. Minimalkan saiz fail CSS dan JavaScript untuk meningkatkan prestasi aplikasi. Kemudian, buat sebuah fail kompresi ZIP yang mengandungi semua fail tema (theme files). Fail-fail penting dalam direktori akar (root directory) mesti termasuk:style.css(Dengan maklumat kepala yang lengkap dan betul)index.php 和 functions.phpAnda juga boleh menyertakan satu lagi… screenshot.png(1200×900 piksel) Digunakan sebagai gambar pratonton di latar belakang untuk tema tersebut. Jika anda ingin menghantar tema tersebut ke direktori tema rasmi WordPress, anda perlu mengikuti garis panduan kod dan prosedur semakan yang ketat. Untuk pengedaran sendiri, pastikan tema anda mematuhi lesen GPL dan menyediakan maklumat yang jelas. readme.txt Penerangan fail mengenai kaedah pemasangan dan penggunaan.

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: