Preparasi dan pembinaan persekitaran.
Sebelum anda mula menulis kod, anda memerlukan persekitaran pembangunan yang sesuai. Ini termasuk sebuah persekitaran pelayan tempatan (seperti XAMPP, MAMP, atau Local by Flywheel) serta sebuah editor kod (seperti VS Code,PhpStorm, atau Sublime Text). Pastikan bahawa persekitaran tempatan anda menyokong PHP (versi 7.4 atau lebih tinggi) dan MySQL/MariaDB.
Seterusnya, anda perlu berada dalam direktori pemasangan WordPress.wp-content/themesCipta sebuah folder baru di dalam folder tersebut, dan folder itu akan menjadi direktori tema anda. Sebagai contoh, anda boleh mencipta sebuah folder dengan nama…my-first-themeFolder ini merupakan “rumah” bagi semua fail-topik anda.
Satu tema WordPress yang paling asas hanya mempunyai dua fail:style.css和index.phpDi antaranya,style.cssBukan sahaja merupakan fail gaya (style sheet), tetapi juga merupakan “kad pengenalan” bagi tema tersebut. Ia menyatakan nama tema, pengarang, deskripsi, dan metadata lainnya kepada WordPress melalui maklumat ulasan (comments) di bahagian kepala fail (header).
Diperoleh daripada WEB\nDisyorkan untuk membaca. Menganalisis secara mendalam pembangunan tema WordPress: panduan teknikal teras dari permulaan hingga mahir.。
Create a theme information file
Dalam folder tema anda, buatlah satu fail baru.style.cssFail, dan masukkan maklumat asas 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
*/Komen ini adalah penting. WordPress berfungsi dengan membaca…Theme NameBaris ini digunakan untuk mengenal pasti dan menunjukkan tema anda dalam senarai tema di latar belakang. Maklumat lain seperti…Text DomainIni adalah persiapan untuk pengekspresian kandungan dalam bahasa antarabangsa (internationalization).
Membuat fail templat asas
Seterusnya, buat yang paling asas.index.phpFail. Walaupun fail ini kosong untuk sementara waktu, asalkan…style.cssApabila maklumatnya lengkap, tema anda akan muncul dalam senarai “Appearance” -> “Themes” di panel pentadbiran WordPress dan boleh diaktifkan. Sekarang, mari kita lanjutkan…index.phpTuliskan struktur HTML yang paling ringkas untuk memaparkan tajuk blog dan kandungan artikel.
<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
<header>
<h1><a href="/ms/</?php echo esc_url( home_url( '/' ) ); ?>">\n</a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
<article>
<h2><a href="/ms/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_content(); ?></div>
</article>
<?php
endwhile;
else :
echo '<p>暂无文章。</p>';
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
<?php wp_foot(); ?>
</body>
</html>Kod ini menggunakan beberapa komponen asas (core) WordPress.模板标签Contohnya,bloginfo()、the_title()、the_content()fungsiwp_head()和wp_foot()Ia merupakan fungsi kritikal yang membenarkan WordPress core, plugin, dan skrip lain untuk memasukkan kod yang diperlukan di bahagian atas (header) dan bawah (footer) halaman web.
Mengerti hierarki templat dan mencipta templat asas
WordPress menggunakan satu set yang digelar…模板层级Aturan ini digunakan untuk menentukan fail templat mana yang perlu digunakan untuk merender permintaan halaman tertentu. Ini merupakan salah satu konsep paling asas dalam pembangunan tema. Dengan kata lain, WordPress akan mencari dari fail templat yang paling khusus, dan jika tidak ditemui, ia akan kembali ke fail yang lebih umum, dan seterusnya…index.php。
Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan permulaan untuk pembangunan tema WordPress: Membina tema kustom pertama anda dari awal.。
Membuat templat untuk halaman butiran artikel
Apabila pengguna mengakses satu artikel tertentu, WordPress akan mencari maklumat tersebut dengan secepat mungkin.single-post.phpJika tidak wujud, maka gunakanlah yang lain.single.phpDan yang terakhir ialahindex.phpMari kita cipta satu…single.phpIa digunakan khusus untuk mengawal penampilan artikel individu.
<p>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
<div class="entry-meta">
发布于： | 作者：
</div>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
<footer class="entry-footer">
分类：
</footer>
</article>
<?php
// 上一篇/下一篇导航
the_post_navigation();
// 评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>
\nTemplate ini memperkenalkan tiga komponen penting:get_header()、get_sidebar()和get_footer()Mereka digunakan masing-masing untuk memperkenalkanheader.php、sidebar.php和footer.phpFail-fail ini merupakan kunci untuk mencapai penggunaan semula kod (code reuse) dan reka bentuk yang bermodul (modular design).
Membuat templat halaman
Untuk halaman statik (seperti “Tentang Kami”), WordPress akan mencari…page.phpCreatepage.phpStrukturnya adalah sama dengan…single.phpSerupa, tetapi biasanya tidak menunjukkan maklumat meta seperti kategori, tag, dan masa penerbitan.
<p>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php
endwhile;
?>
</main>
\nMengaktifkan fungsi dan gaya tema
Sebuah tema yang lengkap memerlukan bukan sahaja fail templat, tetapi juga komponen lain yang perlu disertakan untuk menjadikannya berfungsi dengan baik.functions.phpFail tersebut digunakan untuk menambahkan ciri-ciri baharu, mendaftar menu, kawasan alat tambahan (tools), dan melaksanakan proses yang diperlukan.style.cssTambahkan gaya (style).
File fungsi ciri tema
Cipta direktori di bawah direktori akar tema anda.functions.phpFail ini dimuat secara automatik semasa pengaturan awal tema (theme initialization), dan digunakan untuk menyimpan semua fungsi PHP yang disesuaikan (custom PHP functions) serta mekanisme pengaitan (hooks).
<?php
/**
* 我的第一个主题的功能函数
*/
// 添加主题支持功能
function my_first_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像（缩略图）功能
add_theme_support( 'post-thumbnails' );
// 注册导航菜单
register_nav_menus(
array(
'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
)
);
// 添加HTML5标记支持
add_theme_support(
'html5',
array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
'style',
'script',
)
);
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册小工具侧边栏
function my_first_theme_widgets_init() {
register_sidebar(
array(
'name' => esc_html__( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( '在此添加小工具。', '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' );
// 加载主题样式表和脚本
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载通用CSS
wp_enqueue_style( 'my-first-theme-main-style', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0' );
// 加载通用JavaScript
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Tambahkan gaya asas
Sekarang, mari kita lanjutkan…style.cssSelepas bahagian ulasan pada kepala halaman, tambahkan beberapa kod CSS asas untuk memperindah tema anda.
Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Definitif untuk Pembangunan Tema WordPress: Mencipta Tema Laman Web WordPress Kustom dari Awal。
/* 基础重置与排版 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
header {
border-bottom: 2px solid #0073aa;
margin-bottom: 40px;
padding-bottom: 20px;
}
.entry-title {
color: #222;
}
.site-main {
float: left;
width: 70%;
}
/* 侧边栏样式 */
.widget-area {
float: right;
width: 25%;
padding-left: 5%;
}
/* 页脚样式 */
footer {
clear: both;
border-top: 1px solid #ddd;
margin-top: 60px;
padding-top: 20px;
text-align: center;
color: #666;
}Modulasi dan komponen templat
Untuk meningkatkan kebolehjagaan dan kegunaan semula kod, WordPress menggalakkan pemisahan bahagian-bahagian halaman yang berulang (seperti header, footer, dan sidebar) ke dalam fail-fail komponen template yang berasingan.
Membuat komponen header dan footer
Menciptaheader.phpTermasuk dari...<!DOCTYPE html>Mula hingga membuka<main>Semua kandungan sebelum tag tersebut.
<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
<p>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#primary">Jump to the main content</a>
<header id="masthead" class="site-header">
<div class="site-branding">
<?php
if ( is_front_page() && is_home() ) :
?>
<h1 class="site-title"><a href="/ms/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home">\n</a></h1>
<?php
else :
?>
<p class="site-title"><a href="/ms/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home">\n</a></p>
<?php
endif;
$my_first_theme_description = get_bloginfo( 'description', 'display' );
if ( $my_first_theme_description || is_customize_preview() ) :
?>
<p class="site-description"><?php echo $my_first_theme_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
<?php endif; ?>
</div>
<nav id="site-navigation" class="main-navigation">
'primary',
'menu_id' => 'primary-menu',
)
);
?>
</nav>
</header>
<div id="content" class="site-content">Oleh itu, ciptalah.footer.phpTermasuk</div><!-- #content -->All content that follows.
</div><!-- #content -->
<footer id="colophon" class="site-footer">
<div class="site-info">
<p><?php printf( esc_html__( '主题：%1$s', 'my-first-theme' ), '<a href="https://example.com/">我的第一个主题</a>' ); ?></p>
</div>
</footer>
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>Menciptasidebar.phpUntuk menunjukkan kawasan alat tambahan (widget).
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) :
?>
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
<?php
endif;
?>Setelah menyelesaikan komponen-komponen ini, anda boleh menggunakannya.get_header()、get_footer()和get_sidebar()Fungsi-fungsi tersebut dipanggil dengan ringkas dalam semua fail templat.
RINGKASAN
Dengan panduan ini, anda telah menyelesaikan keseluruhan proses membina sebuah tema WordPress asas dari awal. Anda telah belajar cara mengatur persekitaran pembangunan dan membuat fail-fail tema yang diperlukan.style.css和index.php), dan memahami dengan mendalam sistem hierarki templat WordPress, seterusnya mencipta templat khusus untuk pelbagai jenis halaman (seperti artikel, halaman biasa).single.php， page.phpAnda telah mempelajari cara untuk…functions.phpFail tersebut menambahkan ciri-ciri utama yang berkaitan dengan tema, seperti menu pendaftaran, alat tambahan (tools), dan imej-imej khas yang menyokong tema tersebut. Akhirnya, anda mengamalkan konsep pembangunan bermodul dengan memisahkan bahagian kepala halaman (header), kaki halaman (footer), dan bar sisi (sidebar) menjadi komponen templat yang boleh digunakan semula.header.php， footer.php， sidebar.phpIni telah meningkatkan dengan ketara kemudahan penyelenggaraan kod. Ini hanyalah satu permulaan; berdasarkan ini, anda boleh terus meneroka jenis artikel yang disesuaikan, pilihan tema yang lebih canggih, reka bentuk yang responsif, serta interaksi JavaScript, dan secara beransur-ansur membina tema WordPress yang mempunyai fungsi yang kuat dan reka bentuk yang profesional.
FAQ - Soalan Lazim
Mengapa tema saya tidak dipaparkan di bahagian belakang (backend)?
Pastikan folder tema anda diletakkan di tempat yang betul.wp-content/themes/Berada di dalam direktori tersebut, dan di dalamnya terdapat…style.cssBahagian kepala fail mengandungi blok ulasan yang mempunyai format yang betul, terutamanya…Theme Name:Baris ini mesti wujud dan betul. Kod pengaturcaraan fail haruslah UTF-8 tanpa BOM.
Bagaimana untuk menambahkan sokongan Logo tersuai untuk tema saya?
Dalam milik andafunctions.phpDokumen tersebutmy_first_theme_setupDalam fungsi tersebut, tambahkan satu baris kod:add_theme_support( 'custom-logo' );Setelah ditambahkan, pengguna boleh mengunggah dan menetapkan Logo mereka di bahagian “Penampilan” -> “Khusus” -> “Identiti Laman” di panel pentadbiran WordPress. Anda perlu…header.phpGunakan dalam bahasa Cinathe_custom_logo()Fungsi untuk mengeluarkan Logo.
Apa yang perlu dilakukan jika laman web menunjukkan skrin putih setelah fail functions.php diubah?
Ini biasanya bermakna…functions.phpTerdapat ralat sintaks PHP dalam fail tersebut. WordPress akan berhenti beroperasi disebabkan oleh ralat yang serius. Anda perlu mengakses pelayan melalui FTP atau pengurus fail untuk membetulkan kod yang bermasalah.functions.phpMenukar nama (seperti mengubahnya menjadi…)functions.php.bakIni akan membolehkan laman web anda kembali boleh diakses. Selepas itu, periksa dan betulkan kod anda, kemudian muat naik semula fail yang betul. Adalah amalan yang baik untuk menguji dalam persekitaran pembangunan tempatan untuk mengelakkan masalah seperti ini.
Bagaimana untuk membuat topik saya menyokong terjemahan pelbagai bahasa?
Anda sudah melakukannya.style.cssIa telah disetkan dalam…Text Domain(Teks bidang), danfunctions.phpDalam rentetan teks tersebut, penggunaan simbol tertentu telah dilakukan.esc_html__( ‘文本’， ‘my-first-theme’ )Fungsi terjemahan seperti ini. Selepas itu, anda perlu menggunakan alat seperti Poedit untuk mengimbas semua ayat yang boleh diterjemahkan dalam fail tema tersebut, dan menghasilkan terjemahan yang sesuai..potMula dengan mencipta fail templat, dan kemudian mencipta versi yang sesuai untuk setiap bahasa..po和.moFail-fail tersebut kemudian perlu disimpan dalam folder yang berkaitan dengan topik tersebut./languagesfolder. WordPress akan secara automatik memuatkan terjemahan yang relevan berdasarkan tetapan bahasa laman web.
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 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
- Penyelesaian pembinaan laman web secara bersepadu: Panduan pelaksanaan lengkap dari awal hingga laman web dilancarkan
Bahasa Melayu