Sebelum memulakan penulisan kod, anda memerlukan persekitaran pembangunan tempatan. Ini biasanya termasuk pelayan tempatan (seperti XAMPP, MAMP atau Local) dan editor kod (seperti VS Code, PhpStorm). Pastikan PHP (disyorkan versi 7.4 atau lebih tinggi) dan MySQL dipasang dalam persekitaran anda.
Tema WordPress standard ialah folder yang mengandungi koleksi fail tertentu. Pertama sekali, dalam pemasangan WordPress tempatan andawp-content/themesCipta sebuah folder baru dalam direktori tersebut, contohnya dengan nama “New Folder”.my-first-theme。
Selanjutnya, cipta dua fail yang paling asas dan penting:style.css和index.phpDi antaranya,style.cssIni bukan sekadar lembar gaya, tetapi juga “ID kad” untuk tema tersebut. Bahagian nota di bahagian atas fail digunakan untuk mengumumkan tema anda kepada WordPress.
Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Permulaan untuk Membangunkan Tema WordPress: Membina Laman Web Peribadi dari Awal。
在style.cssDalam dokumen tersebut, anda perlu menambahkan maklumat tajuk dalam format berikut:
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Maklumat ini akan dipaparkan pada halaman “Rupa” -> “Tema” di bahagian pentadbiran WordPress. Pada masa yang sama,index.phpDokumen tersebut merupakan templat lalai untuk tema, dan ia harus wujud walaupun ia kosong untuk sementara waktu, supaya WordPress dapat mengenalinya sebagai tema yang sah.
Membina fail templat asas
Setelah mempunyai fail asas, tema anda masih belum dapat memaparkan sebarang kandungan. WordPress menggunakan sistem hierarki templat untuk menentukan templat mana yang akan dimuatkan untuk pelbagai jenis halaman. Selanjutnya, kami akan mencipta beberapa fail templat teras.
Membuat templat kepala (header) dan kaki (footer)
Untuk mencapai penggunaan semula kod dan konsistensi, kami biasanya memisahkan bahagian atas (header) dan bahagian bawah (footer) halaman web ke dalam fail berasingan. Pertama, ciptaheader.phpFile, yang mengandungi bahagian kepala dokumen HTML, membuka<body>Tag-tag dan kawasan umum di bahagian atas laman web (seperti logo dan menu navigasi).
Yang paling mudah…header.phpContoh-contoh mungkin termasuk yang berikut:
Diperoleh daripada WEB\nDisyorkan untuk membaca. Membina Laman Web Profesional: Panduan Muktamad untuk Pembangunan dan Pengubahsuaian Tema WordPress yang Komprehensif。
<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<header>
<h1><a href="/ms/</?php echo esc_url( home_url( '/' ) ); ?>">\n</a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header>Perhatikan yang di dalamnyawp_head()Fungsi ini mesti dipanggil untuk membenarkan teras WordPress, plugin, dan tema itu sendiri untuk menyisipkan kod yang diperlukan (seperti CSS dan JS) di bahagian atas halaman.
Kemudian, ciptafooter.phpDokumen, yang digunakan untuk menutup<body>和<html>Tag, dan juga mengandungi kandungan kaki halaman (footer content).
<footer>
<p>© . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Demikian juga,wp_footer()Fungsi juga diperlukan.
Sekarang, kita boleh mengemaskiniindex.php, menggunakanget_header()和get_footer()Fungsi untuk memperkenalkan kedua-dua bahagian ini:
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 文章内容将在这里显示
endwhile;
else :
// 没有找到文章时的内容
endif;
?>
</main>
<?php get_footer(); ?>Mencipta kitaran artikel dan templat kandungan.
Di atasindex.phpDi sini, kita melihat teras WordPress: The Loop. Ia digunakan untuk melalui semua artikel (atau artikel tunggal) pada halaman semasa. Untuk memastikan kandungan artikel disusun dengan lebih baik, kita biasanya memisahkan logik paparan artikel tunggal ke dalam fail berasingan.
Menciptacontent.php或template-parts/content.phpMenguruskan fail, dan kemudian melalui mereka dalam satu lingkaran.get_template_part()Fungsi memanggilnya.
Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Lengkap Pembangunan Tema WordPress: Daripada Permulaan Hingga Kemahiran Tinggi。
// 在 index.php 的循环中
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;Kemudian, buatlah.template-parts/content.php：
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<h2><a href="/ms/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-meta">
by
</div>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
</article>Oleh itu, tajuk artikel, abstrak, metadata, dan sebagainya akan dihasilkan dalam format standard.
Mengintegrasikan gaya (styles) dan skrip (scripts)
Sebuah tema moden tidak boleh berfungsi tanpa CSS dan JavaScript. WordPress menyediakan fungsi standard untuk mengatur gaya dan skrip secara selamat, berbanding menggunakannya secara langsung dalam templat.<link>或<script>Tag.
\nDaftar dan beratur untuk templat utama
Walaupun kita sudah mempunyainya.style.cssNamun, biasanya kita melakukannya melaluifunctions.phpUntuk memuatkannya, anda perlu mencipta fail. Pertama, cipta fail tersebut dalam direktori utama topik tersebut.functions.phpDokumen.
Kemudian, gunakanwp_enqueue_style()Kami menggunakan fungsi untuk memuatkan lembar gaya. Kami perlu melakukan ini dalamfunctions.phpCipta sebuah fungsi dalam C dan kaitkannya denganwp_enqueue_scriptsIn this action.
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// 加载Google Fonts示例
wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );get_stylesheet_uri()Fungsi tersebut akan mengambil tema secara automatik.style.cssLaluan fail.
Tambahkan skrip menu navigasi responsif.
Untuk menambahkan fungsi interaktif, seperti menu responsif untuk peranti mudah alih, kita perlu memperkenalkan JavaScript. Bayangkan kita mempunyai skrip sederhana untuk menukar paparan/penyembunyian menu.
Pertama sekali, buatlah satu…js/navigation.jsDokumen. Kemudian, dalamfunctions.phpDalam fungsi yang sama, gunakanwp_enqueue_script()Mari kita muat turunnya.
function my_first_theme_scripts() {
// ... 之前的样式代码 ...
// 加载导航脚本
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}Parameter yang terakhirtrueMenunjukkan bahawa skrip akan diletakkan di bahagian bawah halaman (di dalam )</body>Sebelum tag, ini biasanya membantu meningkatkan prestasi memuat halaman.
Mengimplementasikan fungsi teras topik tersebut.
functions.phpIni adalah “otak” tema, yang digunakan untuk menambah pelbagai fungsi dan sokongan. Selain memuatkan sumber, kita juga perlu menyatakan fungsi yang disokong oleh tema di sini.
Menambahkan sokongan untuk ciri tema.
WordPress menyediakan pelbagai “fungsi tema”, dan anda perlu secara eksplisit mengisytiharkan sokongan untuk mereka agar dapat menggunakannya. Fungsi-fungsi asas termasuk gambar thumbnail artikel (gambar unggulan), menu tersuai, dan sokongan untuk markup HTML5.
在functions.phpTambahkan kod berikut ke dalam:
function my_first_theme_setup() {
// 让主题支持文章和评论的RSS feed链接自动添加到head中
add_theme_support( 'automatic-feed-links' );
// 让文章和页面支持“特色图像”
add_theme_support( 'post-thumbnails' );
// 启用对HTML5标记的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 启用标题标签支持，WordPress会自动管理文档标题
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );after_setup_themeIni adalah pengait tindakan yang dijalankan semasa topik dimulakan, dan ia merupakan lokasi standard untuk menetapkan fungsi topik.
Daftar menu navigasi
Kebanyakan laman web memerlukan menu navigasi. Sistem menu WordPress membenarkan pengguna untuk menyesuaikan item menu di bahagian “Rupa” -> “Menu” di backend. Anda perlu mendaftar lokasi menu untuk tema anda terlebih dahulu.
Dalam perbincangan sebelum ini,my_first_theme_setupDalam fungsi, teruskan dengan menambahkan:
function my_first_theme_setup() {
// ... 之前的 add_theme_support 代码 ...
// 注册一个主菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}Setelah mendaftar, anda akan dapat mengakses fail-fail templat (seperti…)header.php）digunakan dalamwp_nav_menu()Fungsi untuk memaparkan menu ini:
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>Membuat bar sisi dan kawasan alat tambahan
Widget merupakan satu lagi fungsi kuat WordPress. Untuk menggunakannya, anda perlu mendaftar sidebar terlebih dahulu (kawasan siap widget).
在functions.phpCipta fungsi baru dalam C dan hubungkannya kepadawidgets_initDari segi tindakan:
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>'add_action( 'widgets_init', 'my_first_theme_widgets_init' );Selepas mendaftar, anda boleh melihat kawasan “Bar Sisi Utama” di bahagian belakang “Rupa” -> “Alat-alat Kecil”, dan menyeret alat-alat kecil ke dalamnya. Untuk memaparkannya dalam tema, anda perlu menggunakan templat seperti ini:sidebar.php(4) Panggilan dalamdynamic_sidebar( 'sidebar-1' )Fungsi.
RINGKASAN
Melalui panduan ini, kami telah menyelesaikan proses pembangunan tema WordPress yang sangat ringkas tetapi lengkap. Kami bermula dengan menyiapkan persekitaran, mencipta fail asas, membina hierarki templat secara bertahap, memisahkan bahagian atas dan bawah, dan melaksanakan kitaran artikel utama. Kemudian, kami belajar cara menambahkan gaya dan skrip ke tema dengan cara standard, memastikan keserasian dan prestasi. Akhirnya, kamifunctions.phpDi dalamnya, kami mengaktifkan fungsi teras tema seperti imej ciri, menu navigasi, dan kawasan widget, yang membolehkan tema tersebut mempunyai kebolehdisesuaian yang kuat.
Ini hanya permulaan. Berdasarkan ini, anda boleh terus mencipta fail templat yang lebih profesional (sepertisingle.php、page.php、archive.php), meneroka API WordPress yang lebih kompleks, seperti jenis artikel tersuai, taksonomi, API Penyesuaian, dan lain-lain, untuk mencipta tema laman web eksklusif yang kaya dengan fungsi dan reka bentuk unik.
FAQ - Soalan Lazim
Apakah teknologi yang perlu dikuasai untuk membangunkan tema WordPress?
Membangunkan tema WordPress memerlukan penguasaan beberapa teknologi teras. Pertama ialah PHP, kerana WordPress itu sendiri ditulis dalam PHP, dan semua fail templat dan logik fungsi bergantung padanya. Anda perlu memahami sintaks PHP asas, fungsi, gelung dan pernyataan syarat.
Selanjutnya ialah HTML dan CSS, yang digunakan untuk membina struktur dan gaya halaman web. Adalah penting untuk memahami prinsip-prinsip reka bentuk web responsif dan teknik-teknik susun atur CSS moden (seperti Flexbox, Grid). Akhir sekali, mempunyai pengetahuan asas tentang JavaScript untuk melaksanakan fungsi interaktif di bahagian depan. Penguasaan fungsi PHP dan sistem pengait (Hooks) khusus WordPress adalah kunci untuk pembangunan tema yang berkesan.
Di antara fail style.css dan functions.php, mana yang lebih penting?
Kedua-dua fail ini memainkan peranan yang sangat berbeza namun penting dalam pembangunan tema WordPress, dan tidak mungkin untuk membandingkan mana yang lebih penting daripada yang lain.style.cssDokumen tersebut merupakan “identiti” tema tersebut, dan blok anotasi di bahagian atas dokumen tersebut adalah wajib bagi WordPress untuk mengenali sebuah tema. Tanpa itu, tema tersebut tidak akan dipaparkan dalam senarai “Tema” di bahagian pentadbiran.
而functions.phpFile tersebut merupakan “pusat fungsi” tema tersebut, dan hampir semua kod yang meningkatkan fungsi tema ditulis di sini, seperti mendaftar menu, menambah sokongan tema, memuatkan gaya skrip, mentakrifkan fungsi khusus, dan lain-lain. Tanpa itu, tema tersebut akan kehilangan sebahagian besar fungsi dinamik dan skalabiliti. Kedua-duanya saling melengkapi, dan keduanya diperlukan.
Mengapa kita mesti menggunakan fungsi wp_head() dan wp_footer()?
wp_head()和wp_footer()Ini adalah pengait utama untuk komunikasi antara teras WordPress dan tema, serta plugin. Dalamheader.php的</head>Call before the tagwp_head()Ini adalah cara standard untuk membenarkan WordPress sendiri, plugin yang anda pasang, dan bahagian lain daripada tema anda untuk menyisipkan kod yang diperlukan (seperti tag meta, pautan gaya, rujukan skrip, data berstruktur JSON-LD, dsb.) ke dalam bahagian atas halaman.
Demikian juga, dalamfooter.php的</body>Call before the tagwp_footer()Ini digunakan untuk memasukkan skrip yang perlu dimuatkan di bahagian bawah halaman (seperti kod analisis, JS yang dimuatkan dengan lambat) atau HTML lain. Jika fungsi-fungsi ini diabaikan, ini mungkin mengakibatkan plugin tidak berfungsi dengan betul, bar alat pengurusan tidak dipaparkan, dan pelbagai masalah keserasian.
Bagaimana untuk menjadikan tema saya mematuhi standard rasmi WordPress?
Untuk memastikan tema anda memenuhi standard rasmi WordPress dan berkualiti tinggi, anda perlu mematuhi “Panduan Pembangunan Tema WordPress” dan “Keperluan Semakan Tema”. Ini termasuk: menggunakan amalan pengekodan yang selamat, dan menggunakan fungsi penyahkodan untuk semua data output dinamik (seperti <).esc_html(), esc_url()(1) Gunakan fungsi pengantarabangsaan (seperti ) untuk semua rentetan terjemahan.__(), _e()Dan memuatkan medan teks.
Tema harus mempunyai reka bentuk responsif untuk memastikan ia kelihatan baik pada semua peranti. Kod harus jelas, beranotasi, dan mematuhi standard pengekodan WordPress. Selain itu, tema harus menyediakan pilihan penyesuaian yang mencukupi melalui Penyesuaian WordPress dan melaksanakan semua fungsi dan pengait utama WordPress dengan betul. Sebelum menerbitkan, adalah baik untuk menguji tema menggunakan plugin Theme Check.
Selanjutnya, apa yang perlu kita lakukan seterusnya?
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.
- Pembangunan Tema WordPress: Dari Pemulaan Hingga Kemahiran Lanjutan: Panduan Lengkap Untuk Membina Laman Web Yang Diperibadikan
- Panduan Terakhir Pembinaan Laman Web: Proses Lengkap Dari Perancangan Hingga Pelancaran dan Analisis Teknologi Asas
- Membangunkan Tema WordPress dari Kosong: Mencipta Antaramuka Laman Web yang Unik
- Mengapa memilih WordPress sebagai platform utama untuk laman web?
- Panduan Asas WordPress: Bina Laman Web Profesional Pertama Anda Dari Kosong
Bahasa Melayu