Dari kosong ke satu: Panduan langkah demi langkah untuk menguasai kemahiran asas pembangunan tema WordPress moden

Konsep asas pembangunan tema WordPress moden

Pembinaan tema WordPress moden berbeza dengan cara tradisional. Perubahan utama adalah penggunaan sepenuhnya tema blok (Block Theme) dan mod edit seluruh laman web (Full Site Editing/FSE). Ini bermakna penampilan dan susun atur tema, daripada header, footer hingga kandungan artikel, boleh dibina dan diubah melalui editor Gutenberg menggunakan “blok-blok” yang disediakan, tanpa perlu menulis kod PHP yang kompleks secara langsung.

Struktur fail utama untuk tema moden telah disederhanakan secara radikal. Fail templat yang paling penting di antaranya adalah…theme.jsonIa mendefinisikan gaya tema, palet warna, pemformatan, dan tetapan global yang lain. Satu lagi fail yang sangat penting adalah…index.htmlIa menggantikan yang tradisional.index.phpSebagai templat lalai, gunakan blok HTML yang statik dan boleh dianalisis oleh editor untuk membina kerangka halaman. Pada masa yang sama,style.cssFail tersebut masih wujud dan terutamanya digunakan untuk menyatakan maklumat tema, namun kebanyakan definisi gaya CSS telah dipindahkan ke tempat lain.theme.jsonAtau diuruskan oleh editor.

Untuk mengekalkan keserasian dengan versi sebelumnya, WordPress akan memeriksa sama ada direktori akar tema (theme root directory) wujud atau tidak.block-templates或templatesFolder. Folder-folder ini digunakan untuk menyimpan fail-fail template HTML berbasis blok (block-based HTML templates).single.html或page.htmlMereka akan diberi keutamaan berbanding fail templat PHP semasa digunakan. Pada masa yang sama, kaedah untuk mengurus gaya dan sumber frontend yang datang dari tema bergantung pada…wp_enqueue_style和wp_enqueue_scriptFungsi, biasanya terdapat dalam fail utama.functions.phpProses pendaftaran dan mengatur barisan dilakukan di sana.

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

Memahami perubahan dalam konsep pengembangan ini—dari menulis templat PHP yang tetap kepada menggunakan JSON dan penanda blok untuk mendefinisikan gaya dan struktur—adalah langkah pertama dalam menguasai pengembangan tema moden.

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

Pembuatan dan Konfigurasi Fail Inti Tema

Untuk membuat tema WordPress yang moden, pertama-tama anda perlu…wp-content/themesCipta sebuah folder tema baru di dalam direktori tersebut. Ini termasuk untuk tema blok juga.style.cssFail tersebut masih merupakan fail “identifikasi” yang diperlukan, dan blok komen di bahagian atasnya mesti mengandungi maklumat tertentu.

/*
Theme Name: 我的现代主题
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 一个使用全站编辑的现代WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-modern-theme
*/

Seterusnya, anda perlu mencipta “otak” yang berkonsep moden untuk tema tersebut.theme.jsonFail ini merupakan fail JSON yang terletak dalam direktori utama tema, dan berfungsi untuk mengawal gaya dan tetapan tema secara keseluruhan. Melalui fail ini, anda boleh mendefinisikan sistem pemformatan (seperti saiz dan keluarga font), palet warna, gaya lalai bagi blok-blok kandungan, dan sebagainya. Plugin dan tema anak (sub-theme) juga boleh menambah atau mengubah tetapan tersebut untuk mencapai penyesuaian gaya yang diinginkan.theme.jsonStrukturnya adalah seperti berikut:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "黑色", "slug": "black", "color": "#000000" },
        { "name": "白色", "slug": "white", "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "name": "小", "slug": "small", "size": "14px" },
        { "name": "中", "slug": "medium", "size": "20px" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "white",
      "text": "black"
    },
    "typography": {
      "fontSize": "var(--wp--preset--font-size--medium)"
    }
  },
  "customTemplates": [
    {
      "name": "宽幅页面",
      "title": "宽幅页面",
      "postTypes": [ "page" ]
    }
  ]
}

Template utama untuk topik tersebutindex.htmlStruktur halaman lalai telah ditentukan. Ia terdiri sepenuhnya daripada tag blok yang dilingkari oleh ulasan HTML yang boleh dikenali oleh editor, seperti contoh berikut:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Struktur seperti ini dengan jelas memisahkan bahagian kepala halaman (header), kandungan utama (main content), dan kaki halaman (footer), dan melalui…wp:post-contentKandungan artikel dimuat turun secara dinamik dalam blok-blok tertentu. Akhir sekali, diperlukan untuk membuat direktori bernama “Template Parts” di dalam direktori utama tema (theme root directory).partsDan letakkan di dalamnya.header.html和footer.htmlFail-fail komponen yang berkaitan.

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

Membina halaman menggunakan templat dan komponen templat

Dalam tema blok, struktur susun atur halaman dibina terutamanya melalui Templat (Templates) dan Komponen Templat (Template Parts). Templat digunakan untuk mendefinisikan kerangka keseluruhan halaman jenis tertentu (seperti artikel individu, halaman arkib), manakala Komponen Templat merupakan modul yang boleh digunakan berulang kali, seperti kepala halaman (header) dan kaki halaman (footer).

Fail templat biasanya disimpan dalam folder tema.templatesDalam folder tersebut, WordPress akan secara automatik memadankan fail templat yang sesuai untuk jenis pertanyaan yang berbeza. Sebagai contoh,single.htmlDigunakan untuk memaparkan satu artikel sahaja.page.htmlUntuk halaman statik.home.html或index.htmlUntuk halaman utama blog. Anda boleh…theme.json的customTemplatesBeberapa templat khusus disediakan, dan pengguna boleh memilihnya dalam editor halaman.

Komponen templat disimpan di…partsDalam folder tersebut, ia meningkatkan dengan ketara kadar penggunaan semula kod (code reuse) dan kemudahan penyelenggaraan. Fail header (header file) telah dibuat.header.htmlBahagian atas halaman boleh dibina menggunakan blok tajuk laman web, blok navigasi, dan lain-lain. Buatlah fail kaki halaman (footer file).footer.htmlBoleh meletakkan maklumat hak cipta dan kawasan untuk alat tambahan (tools).

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

Satu yang tipikal…header.htmlMungkin seperti berikut:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation {"ref":4} /-->
</header>
<!-- /wp:group -->

Dalam contoh ini,wp:navigationBlock tersebut dilalui melalui…refAtribut tersebut merujuk kepada menu navigasi yang dibuat dan disimpan dalam “Penampilan” -> “Pengedit” (dengan ID 4), yang menunjukkan kekuatan pemisahan kandungan dan struktur dalam penyuntingan keseluruhan laman web. Dengan merujuk kepada komponen-komponen ini dalam templat utama,Anda boleh menyisipkannya ke dalam halaman dengan mudah.

Untuk reka bentuk yang lebih kompleks, anda boleh menggunakan…wp:group、wp:columns、wp:queryGunakan blok-blok untuk membina baris, lajur, dan kandungan berulang (looping content). Sebagai contoh,wp:queryBlok tersebut boleh menyenaraikan artikel-artikel terkini secara dinamik, yang setara dengan “main loop” dalam tema tradisional, tetapi kini semuanya dikonfigurasi sepenuhnya melalui editor visual.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Dari awal hingga mahir: Panduan lengkap untuk pembangunan tema WordPress dan tutorial praktikal.。

Menambahkan fungsi dan gaya melalui fail fungsi

Walaupun topik blok sangat bergantung pada…theme.jsonDan template HTML, tetapi…functions.phpFail tersebut masih merupakan inti dari fungsi tema tambahan (extension themes). Ia merupakan fail PHP yang tidak mengembalikan sebarang nilai, dan digunakan untuk menambahkan fungsi-fungsi baru, mendaftarkan skrip gaya (style scripts), serta mendefinisikan sokongan untuk tema-tema tertentu.

Satu operasi asas adalah mendaftar dan mengatur susunan fail gaya (stylesheet) serta skrip untuk tema tersebut. Walaupun gaya (style) tersebut kebanyakannya ditentukan oleh…theme.jsonUntuk pengurusan, anda mungkin masih memerlukan CSS khusus yang disesuaikan (custom CSS) tambahan.

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

function my_modern_theme_setup() {
    // 添加对特定功能的支持，例如自定义标志
    add_theme_support('custom-logo');
    // 通过区块编辑器添加主题样式
    add_theme_support('wp-block-styles');
    // 添加对全站编辑器的支持
    add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'my_modern_theme_setup');

function my_modern_theme_scripts() {
    // 排队主题的主样式表
    wp_enqueue_style(
        'my-modern-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );
    // 排队编辑器样式
    add_editor_style('style-editor.css');
}
add_action('wp_enqueue_scripts', 'my_modern_theme_scripts');

functions.phpIa juga merupakan tempat yang sangat baik untuk menambahkan ciri-ciri khusus yang disesuaikan dengan keperluan pengguna. Sebagai contoh, anda boleh menggunakan…register_block_styleFungsi ini mendaftarkan variasi visual yang disesuaikan untuk blok utama yang sedia ada (seperti paragraf), supaya ia dapat dipilih oleh pengguna dalam panel “Gaya” editor.

// 为段落块注册一个“特别提示”样式
register_block_style(
    'core/paragraph',
    array(
        'name'         => 'notice',
        'label'        => __( '特别提示', 'my-modern-theme' ),
        'inline_style' => '.is-style-notice { padding: 1em; border-left: 4px solid #00a0d2; background-color: #f0f8ff; }',
    )
);

Selain itu, anda juga boleh menggunakan pengait (hook) seperti…wp_head、wp_footerMasukkan kod khusus yang anda buat sendiri, atau gunakan kaedah yang disediakan.add_filterAnda boleh mengubah tingkah laku kueri lalai, kandungan yang dihasilkan, dan sebagainya. Untuk keperluan penyesuaian yang lebih kompleks, mungkin lebih baik untuk membuat sebuah plugin kecil yang lebih modular.

Topik Ujian dan Penyelesaian Masalah (Testing and Debugging)

Setelah pembangunan selesai, adalah sangat penting untuk melakukan ujian menyeluruh terhadap tema tersebut. Pertama sekali, tema tersebut harus diaktifkan dalam persekitaran setempat atau sementara untuk memeriksa susun atur asas halaman depan, reka bentuk responsif, dan gaya semua blok utama (tajuk, paragraf, gambar, galeri, butang, dsb.) untuk memastikan ia dipaparkan dengan betul. Selain itu, perlu juga memastikan bahawa menu navigasi dan pautan berfungsi dengan baik.

Kedua, perlu melakukan ujian terperinci menggunakan editor Gutenberg. Buat halaman dan artikel baru, cuba membina reka bentuk yang kompleks menggunakan pelbagai blok, dan periksa sama ada toolbar dan panel tetapan untuk blok-blok tersebut berfungsi dengan baik. Selain itu, uji juga gaya yang disesuaikan (seperti melalui…)theme.jsonAdakah palet warna atau saiz font yang telah ditentukan digunakan dengan betul pada blok-blok tertentu? Pastikan anda menguji editor keseluruhan laman web (“Penampilan” -> “Editor”), dan cuba membuat perubahan pada bahagian header, footer, template halaman utama, dsb. Pastikan juga bahawa perubahan tersebut akan dipaparkan dengan betul setelah disimpan.

Pembaikan (debugging) merupakan komponen utama dalam pembangunan moden. Buka alat pembangun (developer tools) pada pelayar (biasanya dengan menekan kekunci F12), dan periksa sama ada terdapat ralat JavaScript atau konflik CSS.wp-config.phpDi dalam pengaturandefine('WP_DEBUG', true);Anda boleh memaparkan amaran dan ralat PHP pada halaman web, yang akan membantu anda mengenal pasti masalah dalam kod dengan cepat. Pastikan juga bahawa tema yang digunakan mematuhi standard pengkodan WordPress, dan periksa pengesah struktur HTML (W3C Validator) dalam konsol untuk melihat jika terdapat sebarang ralat dalam struktur HTML.

Akhir sekali, lakukan ujian keserasian merentas platform pada pelbagai pelayar (Chrome, Firefox, Safari, Edge) dan peranti (desktop, tablet, telefon bimbit) untuk memastikan semua pengguna mendapat pengalaman yang konsisten.

RINGKASAN

Pembangunan tema WordPress moden merupakan satu inovasi dalam konsep, di mana pendekatan pengaturcaraan telah beralih daripada penggunaan template PHP prosedural ke arah pendekatan yang lebih moden.theme.jsonPembangunan bersifat deklaratif yang berpusat pada penanda blok dan kemudahan penyuntingan keseluruhan laman web. Pembangun perlu menguasai kemahiran ini dengan baik.theme.jsonGunakan konfigurasi untuk menentukan gaya global, gunakan templat blok HTML untuk membina struktur halaman, dan melalui…functions.phpPeningkatan fungsi telah dilakukan. Mod ini secara signifikan mengurangkan halangan untuk mengatur susun atur kandungan secara sendiri, memberikan kreatif kandungan kebebasan reka bentuk yang besar, namun pada masa yang sama juga memerlukan pembangun untuk memahami dengan mendalam sistem editor blok tersebut. Dengan mengikuti laluan kemahiran teras yang dinyatakan di atas, anda akan dapat membina tema WordPress yang fleksibel, berkuasa, dan bersedia untuk masa depan.

FAQ - Soalan Lazim

Adakah tema blok pembangunan #### masih memerlukan pengetahuan PHP?
Ya, ia masih diperlukan. Walaupun struktur utama halaman ditentukan oleh templat HTML,functions.phpFail-fail tersebut masih sangat penting untuk menambahkan ciri-ciri tertentu seperti tema, mengatur skrip gaya, serta menggunakan “hook” dan “filter” untuk penyesuaian yang lebih mendalam. Selain itu, pengetahuan tentang PHP adalah sangat penting semasa membuat komponen templat yang dinamik dan berdasarkan pertanyaan khusus, atau semasa mengendalikan logik perniagaan yang kompleks.

Bolehkah tema blok dan tema tradisional wujud bersama-sama?

Boleh. WordPress akan menentukan jenis tema secara automatik. Jika direktori akar tema anda mengandungi…theme.jsonFail dantemplates/partsTemplate blok yang terdapat dalam folder tersebut akan dikenali oleh WordPress sebagai tema blok, dan ciri penyuntingan seluruh laman web akan diaktifkan. Namun, walaupun fail-fail tersebut wujud, sistem masih akan mengekalkan sistem templat PHP tradisional sebagai sandaran. Jika template blok yang sesuai untuk sesuatu permintaan tidak ditemui, sistem akan secara automatik kembali menggunakan templat PHP yang bersesuaian.single.php）。

Bagaimana untuk menambahkan CSS khusus (custom CSS) kepada tema blok saya?

Terdapat tiga cara utama. Cara yang paling disyorkan adalah melalui…theme.jsonDokumen tersebutstylesSebahagian daripada kod CSS yang ditambahkan berfungsi untuk keseluruhan laman web atau blok tertentu. Selain itu, ia juga boleh disesuaikan mengikut tema yang digunakan.style.cssTulis peraturan gaya tambahan dalam fail tersebut. Untuk gaya yang lebih dinamik atau untuk halaman tertentu, ia juga boleh dilakukan…functions.phpGunakan dalam bahasa Cinawp_add_inline_styleMenambahkan kod fungsi secara in-line, atau mendaftarkan gaya khusus secara langsung untuk blok tertentu.

Adakah mod edit seluruh laman web menimbulkan risiko kepada laman web sedia ada?

Bagi laman web yang sudah mempunyai kandungan, perlu berhati-hati semasa beralih ke tema blok yang baru. Disarankan untuk melakukan ujian menyeluruh terlebih dahulu dalam persekitaran ujian (seperti persekitaran pembangunan tempatan atau laman web sementara) untuk memastikan semua kandungan sedia ada dapat dipaparkan dengan betul di bawah tema baru dan susun atur tidak menjadi kacau. Sebelum membuat perubahan, pastikan anda membuat salinan penuh laman web tersebut (termasuk fail dan pangkalan data). Walaupun editor laman web mempunyai ciri-ciri yang kuat, perubahan yang dilakukan secara langsung adalah pada templat, dan jika tidak dilakukan dengan betul, ia boleh mempengaruhi semua halaman yang menggunakan templat tersebut.