Sebelum anda mula menulis kod, anda memerlukan sebuah persekitaran pembangunan tempatan. Ini biasanya termasuk pelayan tempatan (seperti XAMPP, MAMP atau Local by Flywheel), PHP, pangkalan data MySQL, dan editor kod (seperti VS Code, Sublime Text). Pastikan bahawa versi PHP yang anda gunakan memenuhi keperluan rasmi WordPress.
Seterusnya, dalam direktori pemasangan WordPress anda…wp-content/themesDalam folder tersebut, buatlah sebuah folder baru, sebagai contoh…my-first-themeFolder ini akan menyimpan semua fail yang berkaitan dengan topik anda.
Sebuah tema WordPress yang paling asas hanya memerlukan dua fail:style.css和index.phpPertama sekali, buatlah…style.cssFail tersebut perlu disertakan dengan nota maklumat tema di bahagian atasnya, yang merupakan syarat penting bagi WordPress untuk mengenal pasti tema yang digunakan.
Diperoleh daripada WEB\nDisyorkan untuk membaca. Tema WordPress yang Diperibadikan: Panduan Lengkap Untuk Membina Reka Bentuk Laman Web Anda Sendiri Dari Awal。
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 一个简单的入门级响应式WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Kemudian, buat yang paling mudah.index.phpFail tersebut, untuk sementara waktu, hanya mengandungi satu kerangka HTML (skeleton) dan ayat “Hello World”.
<!DOCTYPE html>
<html no numeric noise key 1004>
<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 1001>
<h1>Hello World! Ini adalah tema pertama saya.</h1>
<?php wp_footer(); ?>
</body>
</html>Sekarang, log masuk ke panel pentadbiran WordPress anda, dan di bahagian “Penampilan” -> “Tema”, anda sepatutnya dapat melihat “My First Theme” dan boleh mengaktifkannya. Walaupun fungsi temanya masih terhad pada masa ini, anda telah berjaya membuat sebuah tema yang boleh dikenali oleh WordPress.
Membina fail templat asas untuk tema
Sebuah tema yang lengkap terdiri daripada satu siri fail templat, yang mengawal penampilan bahagian-bahagian berbeza pada laman web. Mari kita mulakan membina tema ini dengan beberapa fail yang paling penting.
Pisahkan bahagian header (tajuk halaman) daripada bahagian footer (kaki halaman).
Mengasingkan kod yang berulang (seperti bahagian kepala dan bawah) ke dalam fail yang berasingan adalah langkah pertama yang perlu dilakukan. Buatlah fail-fail tersebut.header.phpFail tersebut mengandungi kandungan yang diperoleh daripada…<!DOCTYPE html>Untuk membuka…<body>Semua kandungan sebelum tag tersebut.
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<p><strong>Halo, saya ingin mengucapkan terima kasih kerana melawat laman web saya.</strong></p>
</head>
<body no numeric noise key 1003>
<p>
<header id="masthead" class="site-header">
<h1 class="site-title"><a href="/ms/</?php echo esc_url( home_url( '/' ) ); ?>">\n</a></h1>
</header>Menciptafooter.phpFail tersebut mengandungi kandungan kaki halaman (footer) dan tag penutup (closing tags).
Diperoleh daripada WEB\nDisyorkan untuk membaca. 从零开始，打造您的专属 WordPress 主题：架构、设计与开发全攻略。
<footer id="colophon" class="site-footer">
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Kemudian, ubahlah sesuatu yang berkaitan dengan anda.index.phpDokumen, gunakanget_header()和get_footer()Fungsi digunakan untuk memperkenalkan bahagian-bahagian ini.
<p>
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 文章内容将在这里显示
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>No content found.</p>';
endif;
?>
</main>
<?php get_footer(); ?>Mencipta kitaran artikel dan bar sisi
Di atasindex.phpIa sudah mengandungi kitaran utama WordPress (The Loop) yang asas, yang digunakan untuk mendapatkan dan menampilkan senarai artikel. Seterusnya, mari kita buat…sidebar.phpMari tambah sebuah bar sisi (sidebar).
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Untuk memasukkan bar sisi ke dalam halaman, anda perlu…index.phpPinda struktur kawasan kandungan utama sebelum dan selepas, dan gunakan…get_sidebar()Fungsi. Pada masa yang sama, perlu juga membuat satu (create one).functions.phpFail yang digunakan untuk mendaftar kawasan alat tambahan (sidebar widget) ini.
Mengimplementasikan reka bentuk dan gaya yang responsif
Reka bentuk responsif memastikan tema anda dapat dipaparkan dengan baik pada pelbagai peranti. Kita akan bermula dengan struktur CSS asas dan kueri media (media queries).
Menetapkan gaya asas dan model kotak fleksibel
Dalam milik andastyle.cssDi bawah keterangan maklumat topik, tambahkan fungsi untuk memulihkan gaya dan susun atur asal (reset style and basic layout). Menggunakan Flexbox untuk mencipta susun atur yang responsif (responsive layout) merupakan titik permulaan yang baik.
/* 基础重置与样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
/* 主要布局容器 */
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
flex: 1;
padding: 2rem;
}
/* 头部与底部样式 */
.site-header, .site-footer {
background-color: #f8f9fa;
padding: 1rem 2rem;
text-align: center;
}Tambahkan kueri media (media query).
Kueri media merupakan inti reka bentuk responsif. Kami telah menambahkan satu titik pemutusan (breakpoint) yang mudah; apabila lebar skrin kurang daripada 768px (biasanya untuk peranti tablet), susunan kawasan kandungan dan bar sisi akan berubah daripada bersebelahan menjadi bertindan (stacked).
Diperoleh daripada WEB\nDisyorkan untuk membaca. Pembangunan Tema WordPress: Panduan Lengkap Dari Permulaan Hingga Kemahiran Lanjutan。
Pertama sekali, ubah struktur HTML tersebut.index.phpGunakan sebuah kontena untuk mengelilingi kandungan utama dan bar sisi.
<div class="content-area">
<main id="primary" class="site-main">
<!-- 主循环内容 -->
</main>
<?php get_sidebar(); ?>
</div>Kemudian, tambahkan gaya yang sesuai dalam CSS.
.content-area {
display: flex;
flex-wrap: wrap;
}
.site-main {
flex: 3;
min-width: 300px;
}
#secondary {
flex: 1;
min-width: 250px;
padding-left: 2rem;
}
/* 响应式断点：平板及以下 */
@media (max-width: 768px) {
.content-area {
flex-direction: column;
}
#secondary {
padding-left: 0;
padding-top: 2rem;
}
.site-header, .site-footer, .site-main {
padding: 1rem;
}
}Meningkatkan fungsi tema melalui fungsi.php
functions.phpFail tersebut merupakan “bilik enjin” untuk topik anda, di mana anda boleh menambahkan fungsi, mendaftarkan ciri-ciri, serta memasukkan skrip dan gaya dengan selamat.
Mengaktifkan menu navigasi dan kawasan widget
在functions.phpDi dalamnya, gunakanregister_nav_menusFungsi ini digunakan untuk mendaftarkan kedudukan menu navigasi bagi topik tertentu.
esc_html__( 'Primary Menu', 'my-first-theme' ),
'footer' => esc_html__( 'Footer Menu', 'my-first-theme' ),
) );
// 注册侧边栏小工具区域
register_sidebar( array(
'name' => esc_html__( 'Main Sidebar', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>Selepas mendaftar, anda akan dapat…header.php和footer.phpGunakan dalam bahasa Cinawp_nav_menu()Fungsi tersebut digunakan untuk memanggil menu-menu tersebut.
Mengambil kira keselamatan, gaya dan skrip perlu dimuat turun dengan cara yang betul.
Jangan sekali-kali membuat pautan langsung (hard link) ke fail CSS atau JavaScript dalam fail templat. Sebaliknya, gunakan kaedah yang sesuai untuk memasukkan kod tersebut ke dalam templat.wp_enqueue_style()和wp_enqueue_script()Fungsi, dan melaluiwp_enqueue_scriptsGantungkannya untuk memuat turunnya.
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载一个自定义JavaScript文件（如果需要）
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Cipta lebih banyak fail templat untuk memperkaya fungsi-fungsi yang ada.
Pada masa ini, kami hanya mempunyai satu topik.index.phpIa akan digunakan untuk semua halaman. Tahap hierarki templat WordPress menentukan sama ada ia akan mencari templat yang lebih khusus untuk jenis halaman yang berbeza. Mari kita buat beberapa templat tersebut.
Artikel tunggal dan templat halaman
Menciptasingle.phpDigunakan untuk menunjukkan satu artikel sahaja.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'single' );
// 显示文章导航
the_post_navigation();
// 如果评论开启，则加载评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Menciptapage.phpDigunakan untuk menunjukkan halaman statik. Strukturnya adalah…single.phpSerupa, tetapi biasanya tidak menunjukkan maklumat meta seperti kategori atau tag.
Untuk mengikuti prinsip DRY (Don’t Repeat Yourself), kita boleh mengekstrak bahagian kandungan yang perlu dipaparkan dalam artikel dan halaman ke komponen templat (Template Part). Buatlah komponen tersebut dalam direktori akar tema (theme root directory).template-partsBuat folder tersebut, dan kemudian cipta kandungan di dalamnya.content-single.php和content-page.php。
Template untuk Halaman Arkib Artikel
Menciptaarchive.phpIa digunakan untuk menunjukkan halaman arkib yang merangkumi kategori, tag, penulis, dan lain-lain. Ia boleh digunakan berulang kali.index.phpPengulangan dalam teks tersebut, tetapi biasanya tajuk arkib akan dipaparkan di bahagian atas.
<p>
<main id="primary" class="site-main">
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="archive-description">', '</div>' );
?>
</header>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
the_posts_navigation(); // 显示上一页/下一页导航
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main>
\nRINGKASAN
Dengan panduan ini, anda telah menyelesaikan pembinaan sebuah tema WordPress yang responsif, walaupun ia bersifat asas tetapi lengkap. Anda telah memahami struktur fail asas tema tersebut, belajar cara memisahkan komponen-komponen templat (header, footer, sidebar), mengimplementasikan loop utama WordPress, dan menggunakan kueri media CSS untuk mencipta reka bentuk yang responsif. Selain itu, anda juga telah menguasai cara untuk…functions.phpCara untuk mendaftarkan menu, alat tambahan (widgets), dan sumber yang dimuat turun dengan selamat dalam fail, serta memulakan penggunaan sistem hierarki templat yang canggih dalam WordPress.
Pembangunan tema adalah proses yang berterusan dan semakin mendalam. Selanjutnya, anda boleh meneroka lebih banyak fail templat (seperti…)404.php、search.php），学习使用WordPress的Body Class和Post Class来增加样式控制的精细度，深入研究主题定制器（Customizer）API为用户提供可视化设置选项，甚至尝试将Sass或ES6等现代前端工作流集成到你的开发过程中。
FAQ - Soalan Lazim
Berapakah fail yang paling minimum diperlukan untuk sebuah tema WordPress?
Satu tema yang paling ringkas dan boleh dikenali oleh WordPress hanya memerlukan dua fail sahaja:style.css和index.php。style.cssBahagian kepala (header) mesti mengandungi keterangan maklumat topik yang betul.index.phpIa akan dijadikan sebagai templat lalai untuk semua halaman.
Bagaimana untuk membuat topik saya menyokong terjemahan pelbagai bahasa?
Anda perlu melakukan dua perkara. Pertama,style.cssKomen di bahagian atas dan semua tempat di mana teks digunakan (seperti melalui…)__()或_e()Fungsi tersebut menggunakan domain teks (Text Domain). Dalam panduan ini, domain teks yang kita gunakan adalah “my-first-theme”. Selanjutnya, gunakan alat seperti Poedit untuk membuat fail .pot, dan terjemahkan kandungannya ke dalam fail .po dan .mo, kemudian letakkan fail-fail tersebut dalam folder tema yang berkaitan./languagesDalam direktori tersebut. Akhirnya,functions.phpGunakan dalam bahasa Cinaload_theme_textdomain()Function loading.
Mengapa gaya atau skrip yang saya buat sendiri tidak berfungsi?
Ini biasanya disebabkan oleh kegagalan untuk memuatkan kandungan dengan cara yang disyorkan oleh WordPress. Sila pastikan anda menggunakan kaedah yang betul untuk mengatur urutan pemuatannya.functions.phpDalam dokumen tersebut, penggunaanwp_enqueue_style()和wp_enqueue_script()Fungsi, dan pasangkannya kewp_enqueue_scriptsGunakan “hook” untuk menambah gaya (style) dan skrip (script). Pautan yang ditulis terus dalam fail templat mungkin diabaikan oleh plugin caching, atau proses pengambilan (loading) mungkin tidak berjalan dengan betul dalam keadaan tertentu.
Bagaimana untuk menambahkan sokongan Logo tersuai untuk tema saya?
Ini adalah ciri yang sangat biasa digunakan. Anda perlu…functions.phpDalam fungsi penetapan tema fail (melalui)after_setup_theme(Execution of the hook), tambahadd_theme_support( 'custom-logo' )Anda boleh menghantar array parameter untuk menentukan saiz dan atribut lain Logo. Setelah ditambahkan, pengguna boleh mengemukakan Logo mereka di “Penampilan” -> “Khusus” -> “Identiti Laman Web”. Di bahagian frontend, anda boleh menggunakan…the_custom_logo()Fungsi tersebut digunakan untuk menunjukkannya.
Bagaimana untuk membetulkan ralat PHP semasa proses pembangunan?
Disyorkan untuk menggunakan persekitaran pembangunan tempatan (local development environment).wp-config.phpAktifkan mod pembangunan (debug mode) untuk WordPress dalam fail tersebut.WP_DEBUGKonstanta ditetapkan kepadatrueAnda juga boleh menetapkan beberapa perkara pada masa yang sama.WP_DEBUG_LOG和WP_DEBUG_DISPLAYUntuk mengawal sama ada ralat akan direkod dalam fail log atau dipaparkan pada skrin, perlu diingat bahawa mod pembangunan (debug mode) mesti dimatikan sebelum tema tersebut dilancarkan ke perkhidmatan.
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.
- Panduan Pembangunan Tema WordPress: Membina Laman Web Custom Dari Kosong
- Panduan Lengkap Pembangunan Tema WordPress: Tutorial Praktikal Dari Awal Hingga Mahir
- Panduan Lengkap Pembangunan Tema WordPress: Membina Templat Laman Web Profesional Dari Kosong
- Pembangunan Tema WordPress: Membina Laman Web Korporat Responsif Dari Kosong
- Membina Tema WordPress Tanpa Kod: Panduan Lengkap Dari Awal Hingga Mahir
Bahasa Melayu