Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Menguasai kemahiran penting: Membina tema WordPress pertama anda dari awal

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

Pengaturcaraan persekitaran dan persiapan fail asas

Sebelum mula menulis kod, adalah sangat penting untuk membina sebuah persekitaran pembangunan tempatan yang stabil. Ini akan membolehkan anda melakukan ujian tanpa mempengaruhi laman web yang berada dalam talian. Alat seperti Local by Flywheel, XAMPP, atau MAMP disyorkan untuk membina dengan cepat sebuah persekitaran pelayan tempatan yang merangkumi PHP dan MySQL.

Seterusnya, anda perlu berada dalam direktori pemasangan WordPress. wp-content/themes Dalam folder tersebut, buatlah sebuah folder baru untuk topik anda, contohnya dengan nama “MyProject”. my-first-themeFolder ini merupakan direktori akar untuk tema anda. Kemudian, anda perlu membuat dua fail asas dan penting:style.css 和 index.php。

style.css Fail tersebut bukan sahaja mengandungi skema gaya tema anda, tetapi yang lebih penting, ia juga mengandungi bahagian kepala maklumat tema (Theme Header) yang ditulis menggunakan ulasan CSS. Bahagian kepala ini merupakan satu-satunya petunjuk yang digunakan oleh WordPress untuk mengenal pasti tema anda.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Dari Kosong Ke Satu: Panduan Langkah Demi Langkah dan Teknik Praktikal Untuk Pembangunan Tema WordPress。

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个从零开始创建的 WordPress 主题示例。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

index.php Ini adalah fail templat utama untuk tema anda, dan juga merupakan fail sandaran terakhir yang akan digunakan oleh WordPress semasa mencari templat. Ia sekurang-kurangnya harus mengandungi panggilan kepada komponen asas WordPress untuk menghasilkan bahagian atas halaman (header), kandungan utama (content loop), dan bahagian bawah halaman (footer).

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 
<!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>
    
</body>
</html>

Memahami hierarki templat untuk topik tertentu

Sebelum membuat fail templat yang lain, memahami hierarki templat (Template Hierarchy) dalam WordPress adalah sangat penting. Hierarki ini menentukan fail templat mana yang akan digunakan oleh WordPress untuk merender jenis halaman yang berbeza, seperti halaman utama, halaman artikel, halaman kategori, dan sebagainya. Sebagai contoh, apabila seseorang mengakses sebuah artikel tertentu, WordPress akan mencari fail templat yang sesuai mengikut urutan tertentu:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php -> index.phpDengan menguasai peraturan ini, anda akan dapat membuat fail-fail tertentu (seperti…) single.php 或 page.php) untuk mengawal penampilan halaman yang berbeza dengan tepat.

Membina templat asas untuk topik (theme)

Satu topik yang lengkap seharusnya tidak terdiri daripada hanya satu perkara sahaja. index.phpUntuk mencapai organisasi kod yang lebih baik dan penggunaan semula kod yang lebih efektif, kita perlu memecahkan halaman tersebut kepada beberapa bahagian dan memasukkannya melalui fungsi.

Pisahkan bahagian kepala (header) dan bahagian kaki (footer).

Mencipta header.php Fail tersebut digunakan untuk menyimpan bahagian kepala dokumen HTML (DOCTYPE, ...)., <head> Sebahagian daripada kandungan, serta bahagian awal badan halaman (seperti tajuk laman web dan navigasi utama). Oleh itu, buatlah yang sesuai. footer.php Fail tersebut digunakan untuk menyimpan kandungan di bahagian bawah halaman (seperti maklumat hak cipta) serta tag penutup.

Kemudian, dalam index.php Di dalamnya, anda boleh menggunakannya. get_header() 和 get_footer() Gunakan fungsi untuk memperkenalkan elemen-elemen tersebut, agar struktur menjadi lebih jelas.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Lengkap untuk Pemula dalam Pembangunan Tema WordPress: Membina Tema Pertama Anda dari Kosong。

Membuat templat sidebar

Jika topik tersebut memerlukan bar sisi (sidebar), anda boleh membuatnya. sidebar.php Fail tersebut, yang mengandungi kandungan yang digunakan… dynamic_sidebar() Fungsi ini digunakan untuk memanggil bar sisi yang telah didaftarkan di kawasan alat tambahan (widget). Dalam templat utama, gunakan fungsi tersebut untuk mengaktifkan atau mengatur penampilan bar sisi tersebut. get_sidebar() Fungsi digunakan untuk memperkenalkannya.

Mengimplementasikan pengulangan artikel dan templat kandungan

Ciklus artikel merupakan inti utama tema WordPress, di mana ia digunakan untuk mengambil dan memaparkan artikel dari pangkalan data. index.php 或 single.php Di sini, kita menggunakan struktur gelung standard. Untuk mengawal penampilan artikel dengan lebih termodul, sama ada pada senarai (seperti halaman utama, halaman arkib) atau halaman artikel individu, kita boleh membuat… content.php Atau buatnya secara berasingan. content-single.php 和 content-excerpt.php。

Dalam bahagian kod yang berulang (loop), gunakan… get_template_part() Fungsi yang digunakan untuk memanggil fail-fail templat kandungan tersebut, contohnya:get_template_part( 'content', get_post_format() );。

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

Pengintegrasian ciri-ciri tema dengan gaya (theme features with styling)

Sebuah tema yang cemerlang bukan sahaja perlu mempunyai reka bentuk yang menarik, tetapi juga perlu diperkukuhkan dengan fungsi-fungsi yang terdapat dalam fail-fail berkaitan.

Mengintegrasikan fail fungsi tema

Mencipta functions.php Fail ini bukanlah fail templat, tetapi ia merupakan “otak” bagi tema tersebut, yang digunakan untuk menambahkan ciri-ciri tema, menu pendaftaran, bar sisi, serta memasukkan skrip dan gaya (styles). Fail ini akan dimuat secara automatik oleh WordPress semasa tema tersebut diinisialisasikan.

Dalam fail ini, anda boleh menggunakan… add_theme_support() Fungsi ini digunakan untuk mengaktifkan ciri-ciri tertentu dalam tema, seperti gambar ringkasan artikel (Featured Image), logo khusus (Custom Logo), dan sokongan untuk tag HTML5.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pembangunan Tema WordPress: Panduan Asas Hingga Kemahiran Lanjutan: Panduan Utama Untuk Membina Laman Web Yang Diperibadikan。

function my_first_theme_setup() {
    // 添加文章和评论的 RSS feed 链接到 head
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Bahagian Pendaftaran Alat Kecil

在 functions.php Di dalamnya, gunakan register_sidebar() Fungsi tersebut boleh mendefinisikan satu atau lebih kawasan widget (Widget Areas), membenarkan pengguna untuk menyeret dan meletakkan komponen pada antara muka “widget” di latar belakang.

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

Menggunakan gaya dan skrip dengan betul

Jangan pernah menggunakan kod secara langsung dalam fail templat. <link> 或 <script> Tag hardcoding untuk memasukkan fail CSS dan JavaScript adalah tidak disyorkan. Kaedah yang betul adalah dengan menggunakan skrip atau fail konfigurasi yang membenarkan penggunaan fail-fail tersebut secara dinamik, berdasarkan keperluan aplikasi. functions.php Gunakan dalam bahasa Cina wp_enqueue_style() 和 wp_enqueue_script() Fungsi tersebut, dan kemudian dilampirkan (dimount) ke… wp_enqueue_scripts Pada kait itu. Ini memastikan hubungan kebergantungan adalah betul dan mengelakkan muat turun yang berulang.

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 
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载导航脚本，依赖 jQuery
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Internationalisasi Tema dan Persiapan Pengeluaran

Mengimplementasikan terjemahan tema

Untuk memastikan tema anda dapat digunakan oleh pengguna di seluruh dunia, penginternasionalan (i18n) merupakan langkah yang penting. Ini bermakna anda perlu mengelilingi semua teks yang ditujukan untuk pengguna dengan fungsi terjemahan. Fungsi yang paling sering digunakan adalah… __()(Digunakan untuk memaparkan terjemahan dalam PHP) dan _e()(Digunakan untuk mengeluarkan terjemahan dalam PHP.) Pada masa yang sama, style.css Kepala dan functions.php Dalam fungsi muat turun tersebut, adalah perlu untuk menetapkan domain teks (Text Domain) dengan betul, seperti yang telah kita lakukan sebelum ini. my-first-theme。

Melakukan ujian akhir dan pengekstrakan (compression).

Sebelum diterbitkan, ujian yang menyeluruh perlu dilakukan dalam pelbagai persekitaran (versi PHP yang berbeza, versi WordPress yang berbeza) dan peranti yang berbeza (komputer desktop, tablet, telefon bimbit). Periksa sama ada semua fail templat berfungsi dengan betul, sama ada ciri-ciri tersebut dilaksanakan seperti yang dijangka, dan sama ada templat tersebut memenuhi piawaian semakan tema rasmi WordPress.

Akhir sekali, buang semua kod pembangunan dan ulasan (kecuali jika ia membantu pengguna), dan gunakan alat seperti CodeKit atau kompresor dalam talian untuk memampatkan fail CSS dan JavaScript anda bagi mengurangkan saiznya. Kemudian, paketkan keseluruhan folder tema tersebut ke dalam fail ZIP. Setelah itu, anda boleh bersedia untuk menghantar tema tersebut ke direktori tema WordPress.org atau mengedarkannya kepada pengguna.

RINGKASAN

Membina tema WordPress dari awal merupakan proses pembelajaran yang sistematik, yang melibatkan pelbagai aspek termasuk penubuhan persekitaran pembangunan, pemahaman struktur templat, pembinaan fail templat asas, hingga penggunaan alat dan teknik tertentu untuk mengoptimumkan fungsi tema tersebut. functions.php Proses integrasi ciri-ciri lanjutan yang komprehensif ini bergantung pada pematuhan kepada standard pengkodan dan amalan terbaik WordPress, seperti penggunaan fungsi yang disediakan, pengenalan sumber dengan betul, dan pelaksanaan ciri antarabangsa (internationalization). Dengan mengikuti langkah-langkah yang diterangkan dalam artikel ini, anda bukan sahaja akan mendapatkan sebuah tema yang boleh digunakan, tetapi juga akan memahami dengan lebih mendalam mekanisme asas kerja tema WordPress, yang seterusnya akan membina asas yang kukuh untuk mengembangkan tema yang lebih kompleks dan profesional.

FAQ - Soalan Lazim

Adakah kemahiran dalam PHP diperlukan untuk membuat topik (topics)?

Ya, pemahaman yang mendalam tentang PHP adalah syarat penting untuk mengembangkan tema WordPress yang diperibadikan. Ini kerana WordPress sendiri ditulis dalam PHP, dan semua fail templat (seperti… index.php, single.php）dan fail fungsi (functions.phpSemua fungsi tersebut menggunakan kod PHP secara langsung untuk menjana kandungan secara dinamik, memanggil pangkalan data, dan mengendalikan logik. Tanpa pengetahuan tentang PHP, anda tidak akan dapat memahami dan mengoperasi bahagian penting dari tema tersebut.

Adakah pembangunan tema perlu menulis semua kod dari awal?

Tidak semestinya. Bagi pemula, memulakan dari kosong merupakan cara yang sangat baik untuk belajar. Namun, dalam kerja sebenar, pembangun sering menggunakan “tema permulaan” (Starter Theme) atau “tema induk” (Parent Theme) sebagai asas. Sebagai contoh, tema rasmi _Underscores (_s) merupakan pilihan yang sangat baik – ia bersifat minimalis dan mematuhi piawaian pengaturcaraan yang berkualiti tinggi; struktur fail asas dan fungsi-fungsi yang sering digunakan sudah disediakan. Anda boleh mengembangkan kod berdasarkan tema ini, yang dapat meningkatkan kecekapan dan memastikan kualiti kod yang dihasilkan.

Apa akibat yang boleh berlaku jika terdapat ralat dalam fail functions.php?

functions.php Ralat sintaks atau ralat serius dalam fail tersebut boleh menyebabkan laman web WordPress menunjukkan “White Screen of Death” (Skrin Putih Kematian), di mana kedua-dua antaramuka pengurusan bahagian hadapan (frontend) dan belakang (backend) tidak dapat diakses. Ini berlaku kerana fail tersebut dijalankan pada awal proses memuat turun tema. Apabila ini berlaku, anda perlu menggunakan FTP atau alat pengurusan fail pelayan untuk mengganti nama folder tema yang bermasalah, atau menggantikannya dengan tema yang berfungsi dengan baik (seperti Twenty Twenty-Six), untuk memulihkan akses ke laman web. Selepas itu, anda boleh memperbaiki kod yang bermasalah.

Bagaimana untuk menjadikan tema saya menyokong editor Gutenberg?

Untuk memastikan tema tersebut lebih menyokong editor blok Gutenberg, langkah pertama yang perlu diambil adalah… functions.php Gunakan dalam bahasa Cina add_theme_support( ‘editor-styles’ ) Untuk mengaktifkan sokongan gaya editor, lakukan langkah-langkah berikut: Kemudian, gunakannya. add_editor_style() Fungsi tersebut akan memasukkan fail gaya tema anda atau fail CSS yang khusus dibuat untuk editor ke dalam editor latar belakang, yang dapat memastikan bahawa gaya yang dilihat oleh pengguna semasa penyuntingan adalah sepadan sebanyak mungkin dengan apa yang dipaparkan di bahagian hadapan (front end). Selain itu, anda juga boleh menambahkan sokongan untuk ciri-ciri seperti penjajaran lebar (width alignment), penyesuaian warna, dan fungsi-fungsi lain yang berkaitan.

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: