Pengenalan Pembangunan Tema WordPress: Bina Tema Custom Pertama Anda Dari Kosong

Bagi mana-mana pembangun yang ingin menyesuaikan penampilan dan fungsi laman web dengan lebih mendalam, mempelajari pengembangan tema WordPress merupakan kemahiran yang sangat berharga. Berbeza dengan menggunakan tema siap sedia, membina tema sendiri bermakna anda mempunyai kawalan penuh dan dapat mencipta laman web yang unik, berprestasi tinggi, serta memenuhi keperluan khusus anda. Artikel ini akan membimbing anda melalui langkah-langkah asas dalam membina tema WordPress yang pertama, daripada menyediakan persekitaran pembangunan hingga mencipta fail-fail templat asas.

Pengaturcaraan persekitaran dan persiapan alat

Sebelum anda mula menulis kod, anda memerlukan persekitaran pembangunan tempatan yang sesuai. Ini akan membolehkan anda melakukan ujian dan penyelidikan tanpa mempengaruhi laman web dalam talian.

Konfigurasi persekitaran pelayan tempatan

Disyorkan untuk menggunakan pakej perisian pelayan tempatan yang terintegrasi, seperti XAMPP, MAMP (untuk Mac), atau Local by Flywheel. Alat-alat ini memasang pelayan Apache, pangkalan data MySQL, dan PHP dengan satu klik sahaja, menghilangkan keperluan untuk proses konfigurasi yang rumit. Sebagai contoh, selepas memasang XAMPP dan mengaktifkan perkhidmatan Apache dan MySQL, anda akan mempunyai persekitaran pelayan tempatan yang siap digunakan.

Pemilihan Editor Kod

Sebuah editor kod yang berkuasa merupakan alat yang penting untuk pembangunan yang cekap. Visual Studio Code (VS Code) merupakan pilihan yang sangat popular pada masa kini; ia percuma, ringan, dan dilengkapi dengan pelbagai tambahan (plugin) yang sangat berguna, seperti PHP Intelephense (untuk cadangan kod yang pintar untuk kod PHP), WordPress Snippet (untuk segmen kod), dan Live Server (untuk pra-tontonan masa nyata), yang dapat meningkatkan kecekapan pembangunan dengan ketara.

Pemasangan fail asas WordPress

Dalam direktori akar pelayan tempatan anda (contohnya, folder `htdocs` dalam XAMPP), buat sebuah folder projek baru, seperti `my-first-theme`. Kemudian, pergi ke laman web rasmi WordPress.org untuk memuat turun paket WordPress yang terkini, extract (pecahkan) fail tersebut, dan letakkan semua fail ke dalam folder `my-first-theme`. Selepas itu, akses `http://localhost/my-first-theme` melalui pelayar web anda, dan ikuti arahan pemasangan “Lima Minit” yang disediakan untuk menyelesaikan proses pemasangan WordPress. Ingat nama data, nama pengguna, dan kata laluan yang anda tetapkan, kerana ia akan digunakan semasa anda menyambung ke pangkalan data nanti.

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

Struktur asas dan fail untuk membuat topik (topic)

Sebuah tema WordPress pada asasnya adalah sebuah folder yang terletak di dalam direktori `wp-content/themes/`, yang mengandungi satu siri fail template PHP, fail gaya (style sheets), dan fail skrip (scripts) yang mempunyai fungsi-fungsi tertentu.

Folder Tema dan Fail Gaya (Theme Folder and Style Sheets)

Pertama sekali, masuk ke direktori pemasangan WordPress anda di lokal komputer, ke dalam folder `wp-content/themes/`, dan buat sebuah folder baru dengan nama tema yang anda inginkan, contohnya `mycustomtheme`. Dalam folder ini, fail pertama yang perlu anda buat dan yang paling penting adalah `style.css`. Komen di bahagian atas fail `style.css` bukan sahaja digunakan untuk menyatakan maklumat tema, tetapi juga merupakan kunci bagi WordPress untuk mengenali tema tersebut.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Permulaan Pembangunan Tema WordPress: Bina Tema Custom Anda Sendiri Dari Kosong。

css
/*
Nama Tema: My Custom Theme
URI Tema: https://example.com/mycustomtheme
Penulis: Nama Anda
URI Penulis: https://example.com
Description: Ini adalah tema WordPress pertama yang saya buat sendiri, digunakan untuk belajar tentang pembangunan web.
Versi: 1.0.0
Lesen: GPL v2 atau versi yang lebih baru
Domain teks: mycustomtheme
*/
```

Fail templat utama: index.php dan functions.php

Cipta fail `index.php`. Ini merupakan fail templat laluan dan sandaran untuk tema tersebut. Jika fail templat yang lebih khusus tidak wujud, WordPress akan menggunakan `index.php` untuk merender halaman tersebut. Pada mulanya, ia boleh sangat ringkas.

PHP
<!DOCTYPE html>
<html no numeric noise key 1000>
<head>
<meta charset="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1000>

Seterusnya, buat fail `functions.php`. Ini merupakan “enjin” untuk tema anda, yang digunakan untuk menambahkan fungsi, mengaktifkan ciri-ciri (seperti gambar ringkasan artikel), serta mengatur pengurusan pengambilan gaya dan skrip.

PHP
<?php
// Mengaktifkan ciri gambar khas untuk artikel
add_theme_support('post-thumbnails');

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

// Menambahkan sokongan untuk menu
add_theme_support('menus');

// Mendaftar kedudukan menu navigasi
`register_navMenus(array(...));`
'primary' => __( '主导航菜单', 'mycustomtheme' ),
) );

// Memindahkan fail gaya utama dengan betul
function mycustomtheme_enqueue_styles() {
wp_enqueue_style( 'mycustomtheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mycustomtheme_enqueue_styles' );
```

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pengenalan Pembangunan Tema WordPress: Bina Tema Custom Pertama Anda Dari Kosong。

Setelah menyelesaikan langkah-langkah di atas, log masuk ke panel pentadbiran WordPress anda. Dalam menu “Penampilan” (Appearance) -> “Tema” (Themes), anda sepatutnya dapat melihat “My Custom Theme” disenaraikan. Klik butang untuk mengaktifkannya.

Lapisan Templat dan Fail Templat yang Kerap Digunakan

Memahami hierarki templat WordPress adalah asas dalam pembangunan tema. Ia menentukan templat fail mana yang akan digunakan oleh WordPress terlebih dahulu untuk permintaan halaman yang berbeza.

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

Konsep hierarki templat

WordPress akan mencari fail templat mengikut susunan keutamaan tertentu berdasarkan jenis halaman yang sedang dilihat. Sebagai contoh, apabila anda mengakses sebuah artikel blog yang berasingan, WordPress akan mencari fail berikut secara berurutan: `single-post.php` -> `single.php` -> `singular.php` -> `index.php`. Fail pertama yang ditemui akan digunakan.

Mencipta fail templat yang sering digunakan.

Berdasarkan hierarki ini, anda boleh mula membuat fail templat yang lebih khusus untuk memperkaya tema anda.

• `header.php` dan `footer.php`: Pindahkan kod kepala (header) dan kaki (footer) dari `index.php` ke dalam dua fail berasingan ini, kemudian gunakan fungsi `get_header()` dan `get_footer()` dalam `index.php` untuk memanggil kod tersebut. Dengan cara ini, kod dapat digunakan berulang kali (reused).
• `page.php`: Digunakan untuk menunjukkan halaman statik. Anda boleh menyalin kandungan dari `index.php` terlebih dahulu untuk membuatnya, kemudian membuat pengubahsuaian yang diinginkan.
• `single.php`: Digunakan untuk menampilkan satu artikel sahaja. Biasanya, halaman ini akan memaparkan maklumat seperti tajuk artikel, kandungan, tarikh penerbitan, penulis, kategori, dan tag-tag yang berkaitan dengan artikel tersebut.
• `archive.php`: Digunakan untuk menampilkan senarai arkib artikel, seperti halaman arkib mengikut kategori, tag, penulis, atau tarikh.
• `front-page.php`: Jika fail ini wujud, ia akan digunakan sebagai halaman utama laman web, dan keutamannya lebih tinggi daripada `home.php` dan `index.php`. Anda boleh merancang reka bentuk halaman utama yang unik di sini.

Setelah anda membuat fail-fail ini, struktur tema anda akan menjadi lebih jelas dan profesional.

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

Menambah gaya dan fungsi asas

Sebuah tema yang tidak mempunyai sebarang gaya atau reka bentuk yang khusus dianggap sebagai tema yang “asli” (original). Namun, beberapa ciri asas (basic features) dapat meningkatkan dengan ketara kepraktisan tema tersebut serta pengalaman pengguna (user experience).

Menulis gaya CSS asas

Di bawah ulasan pada bahagian atas fail `style.css`, mulakan menulis peraturan gaya anda. Mulakan dengan menetapkan semula gaya lalai pelayar, mengatur font dan warna global, kemudian secara beransur-ansur reka gaya untuk bahagian kepala, navigasi, kandungan utama, bar sisi (jika ditambahkan nanti), dan kaki halaman. Gunakan kueri media reka bentuk responsif untuk memastikan laman web dapat dipaparkan dengan baik pada telefon bimbit, tablet, dan komputer.

css
/* Penetapan semula asas dan gaya global */
* {
\nmargin: 0;
\npadding: 0;
`box-sizing: border-box;`;
}
body {
`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;`;
line-height: 1.6;
Warna: #333;
`background-color: #f4f4f4;`;
}
.container {
Lebar: 90%;
Max-lebar: 1200px;
`margin: 0 auto;`;
padding: 20px;
}
/* Gaya kepala (Header Style) */
header {
Latar belakang: #333;
Warna: #fff;
padding: 1rem 0;
`text-align: center;`;
}
/* Gaya menu navigasi */
.primary-menu {
/* Gaya menu navigasi anda */
}
```

Mengimplementasikan menu navigasi dan bar sisi

Dalam fail `header.php`, gunakan posisi menu yang telah disediakan untuk memanggil fungsi `wp_nav_menu()` yang telah didaftarkan dalam fail `functions.php`.

PHP

Untuk menambahkan sidebar, anda perlu mendaftarkan kawasan alat sidebar dalam fail `functions.php` terlebih dahulu.

PHP
function mycustomtheme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'mycustomtheme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'mycustomtheme' ),
'before_widget' => '