Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Panduan lengkap untuk pembangunan tema WordPress: bina penampilan laman web anda dari awal.

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

Memahami struktur asas dan fail-fail utama sesuatu topik

Pusat utama sebuah tema WordPress standard adalah sebuah folder yang mengandungi fail-fail tertentu, dan folder tersebut terletak di…/wp-content/themes/Dalam direktori tersebut, setiap topik memerlukan sekurang-kurangnya dua fail utama agar dapat dikenali dan diaktifkan oleh WordPress.

Pertama sekali…style.cssIni bukan sahaja merupakan fail gaya tema (style sheet), tetapi juga merupakan fail maklumat. Blok ulasan di bahagian atas fail tersebut mendefinisikan maklumat asas tema, seperti nama tema, pengarang, deskripsi, dan versi. Tanpa ulasan kepala yang diformat dengan betul, WordPress tidak akan dapat menunjukkan tema anda dalam senarai tema di latar belakang.

Satu lagi fail yang diperlukan adalahindex.phpIa merupakan fail templat lalai untuk tema tersebut. Apabila WordPress tidak dapat mencari templat yang lebih khusus untuk menampilkan kandungan, maka fail ini akan digunakan.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Permulaan untuk Membangunkan Tema WordPress: Dari Nol ke Satu, Mencipta Rupa Laman Web Kustom。

Selain itu, sebuah tema yang lengkap dengan ciri-ciri yang diperlukan biasanya akan mengandungi beberapa fail berikut:header.php、footer.php、sidebar.php和functions.php. Dokumenfunctions.phpYang paling penting, ia merupakan “otak” bagi tema tersebut, membenarkan anda menambahkan ciri-ciri baru, mendaftar panel sisi (sidebar), mendefinisikan menu navigasi, dan sebagainya, tanpa perlu mengubah kod asas.

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

Bagaimana untuk merancang sebuah header maklumat tema standard?

在style.cssDalam fail tersebut, format maklumat kepala (header information) mesti dipatuhi dengan ketat. Berikut adalah contoh standard:

/*
Theme Name: 我的第一个主题
Theme URI: https://www.example.com/my-first-theme/
Author: 你的名字
Author URI: https://www.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
*/

Maklumat ini akan dipaparkan di halaman “Appearance” -> “Themes” di bahagian belakang WordPress (backend).Text DomainIa digunakan untuk pengeinternasionalan, dan sangat penting ketika anda bersedia menterjemahkan tema tersebut ke dalam bahasa lain.

Membina struktur templat halaman asas

Fail templat merupakan kerangka bagi tema WordPress, dan ia menentukan bagaimana pelbagai jenis kandungan dipaparkan. Memahami serta menggunakan struktur hierarki templat WordPress adalah kunci kepada pembangunan yang cekap.

Membina fail kepala (header) dan kaki (footer) untuk halaman web

Mengasingkan bahagian yang berulang dalam halaman ke dalam fail yang berasingan merupakan amalan terbaik untuk menjaga kod tetap kemas dan mudah diselenggara.header.phpFail biasanya mengandungi pengisytiharan jenis dokumen (document type declaration).<head>TeksSemua tag dalam kawasan tersebut (seperti tajuk, rujukan CSS dan JS), serta penanda header laman web (seperti Logo dan menu utama).

Diperoleh daripada WEB\nDisyorkan untuk membaca. Belajar membangunkan tema WordPress daripada awal: panduan lengkap untuk membina tema laman web kustom.。

<!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>
    <header id="site-header">
        <h1><a href="/ms/</?php echo esc_url( home_url( '/' ) ); ?>">\n</a></h1>
    </header>

Oleh itu,footer.phpFail tersebut mengandungi kandungan kaki halaman (seperti maklumat hak cipta), dan berakhir pada…header.phpHTML tag yang dibuka dalam dokumen tersebut, dan pada masa yang sama, fungsi tertentu dipanggil (dipanggil).wp_footer()Fungsi.

    <footer id="site-footer">
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

wp_head()和wp_footer()Dua “hook” ini adalah penting, kerana ia membenarkan plugin dan WordPress sendiri untuk menyisipkan kod masing-masing di bahagian atas dan bawah halaman.

Mengimplementasikan templat halaman utama dan halaman artikel

Sebagai kontena umum untuk topik-topik tertentu…index.phpFail tersebut menggunakan tag templat WordPress untuk memanggil bahagian-bahagian templat lain dan mengeluarkan kandungan artikel secara berulang-ulang.

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 
<p>

<main id="primary">
    
            <article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
                <h2><a href="/ms/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-content">
                    <?php the_content(); ?>
                </div>
            </article>
        
</main>

\n

Untuk halaman artikel tunggal, anda perlu membuat…single.phpStrukturnya adalah…index.phpSerupa, tetapi biasanya akan memanggil (similar, but usually it will be called)the_post_thumbnail()Untuk menunjukkan imej-imej istimewa, gunakan…the_category()和the_tags()Ia digunakan untuk menunjukkan kategori dan tag.

Membangunkan fungsi tambahan dalam fail fungsi tema

functions.phpFail tersebut merupakan tempat di mana anda menambahkan semua ciri khusus dan tetapan untuk tema WordPress anda. Ia umpama sebuah plugin tambahan, tetapi khusus untuk tema anda sahaja.

Fungsi asas untuk menetapkan tema:

Gunakanadd_theme_support()Fungsi tersebut boleh mengisytiharkan pelbagai ciri yang disokong oleh tema, seperti imej khas untuk artikel, logo yang boleh disesuaikan, tag HTML5, dan sebagainya. Ini biasanya dilakukan dalam sebuah…after_setup_themeDilakukan dalam fungsi yang diaktifkan oleh pengait (hook).

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Lengkap Pembangunan Tema WordPress: Membina Laman Web Responsif Profesional Dari Kosong。

function my_theme_setup() {
    // 启用文章特色图像
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );

// 支持HTML5标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Implement a sidebar and a gadget area.

Alat tambahan (plugins) merupakan komponen penting dalam WordPress. Untuk membuat kawasan alat tambahan (sidebar) untuk sesuatu tema, anda perlu…functions.phpGunakan dalam bahasa Cinaregister_sidebar()Fungsi.

function my_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>'function my_theme_widgets_init() {  
    register_sidebars( array(  
        'sidebars' =&gt; array(  
            'name' =&gt; 'My Sidebar',  
            'id' =&gt; 'my-sidebar',  
        ),  
    ) );  
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Selepas pendaftaran, anda akan dapat…sidebar.php模板文件中使用dynamic_sidebar( ‘sidebar-1’ )Sudah tiba masanya untuk memanggil kawasan ini.

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

Mengintegrasikan fail gaya (style sheets) dan skrip (script files)

Menyertakan fail gaya CSS dan skrip JavaScript dengan betul ke dalam tema adalah kunci untuk memastikan prestasi dan keserasian yang baik. Jangan pernah mengkodekan pautan secara langsung dalam fail templat, sebaliknya gunakan sistem pengurusan pengiriman (enqueue) yang disediakan oleh WordPress.

Definisi fail gaya utama untuk tema tersebut

Walaupunstyle.cssIa adalah perkara yang perlu, tetapi biasanya kami hanya menyimpan maklumat kepala (header) tersebut untuk tujuan pengenalpastian topik, manakala gaya (style) sebenar ditulis dalam fail CSS yang berasingan dan diaplikasikan melalui…wp_enqueue_style()Function loading.

function my_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0' );

// 加载一个自定义样式表
    wp_enqueue_style( 'my-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array('my-theme-style'), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

get_stylesheet_uri()Fungsi tersebut akan secara automatik merujuk ke direktori akar tema (theme root directory).style.cssFail. Penggunaan sistem antrian membolehkan plugin atau sub-topik untuk dengan mudah bergantung pada gaya reka bentuk anda atau menggantikannya.

Menambah dan mengintegrasikan skrip kustom

Untuk fail JavaScript, prosedurnya adalah serupa, tetapi anda perlu menggunakanwp_enqueue_script()Fungsi. Amalan yang baik adalah meletakkan skrip di bahagian kaki halaman (footer) semasa proses memuatkan halaman, untuk meningkatkan kelajuan rendering halaman.

function my_theme_scripts() {
    // ... 样式加载代码 ...

// 在页脚加载一个自定义JS文件，并依赖jQuery
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Perhatikan parameter yang terakhir.trueIa memberitahu WordPress untuk meletakkan skrip tersebut di bahagian kaki halaman (footer). Jika skrip anda memerlukan...<head>TeksJika ia dimuat turun, maka tetapkannya sebagai…false。

RINGKASAN

Pembangunan tema WordPress adalah proses yang menggabungkan reka bentuk, HTML, PHP, dan pengetahuan asas WordPress. Bermula dengan memahami konsep tema…style.css和index.phpBermula dengan dua fail asas ini, struktur halaman dibina dengan mencipta fail templat yang berasingan, kemudian menggunakan keupayaan yang kuat…functions.phpFail-fail tersebut memungkinkan anda menambahkan pelbagai ciri dan fungsi ke dalam tema anda, dan akhirnya mengurus gaya serta skrip menggunakan kaedah pengurusan yang standard. Dengan mengikuti standard pengkodan dan hierarki templat WordPress, anda bukan sahaja dapat membuat tema yang mempunyai struktur yang jelas dan mudah diselenggara, tetapi juga memastikan keserasian dengan seluruh ekosistem WordPress. Cara terbaik untuk menguasai kemahiran ini adalah dengan bermula dengan membuat folder tema yang paling ringkas, dan kemudian secara beransur-ansur menambahkan ciri-ciri tambahan ke dalamnya.

FAQ - Soalan Lazim

开发一个WordPress主题需要掌握哪些语言

Untuk mengembangkan sebuah tema asas untuk WordPress, anda perlu menguasai HTML, CSS, dan PHP. HTML digunakan untuk membina struktur halaman, CSS digunakan untuk mengawal gaya dan susun atur halaman, manakala PHP merupakan bahasa skrip pihak server dalam WordPress yang digunakan untuk melaksanakan semua fungsi dinamik. Bagi tema yang lebih kompleks dan interaktif, pengetahuan tentang JavaScript juga sangat penting.

Bagaimana untuk menjadikan tema saya menyokong berbilang bahasa?

Proses menjadikan tema anda menyokong berbilang bahasa dikenali sebagai “internasionalisasi” (internationalization). Anda perlu…style.cssSet the header information correctly within the content.Text DomainDan juga…functions.phpGunakan dalam bahasa Cinaload_theme_textdomain()Fungsi tersebut memuatkan fail bahasa.

Selepas itu, dalam fail PHP yang berkaitan dengan topik tersebut, semua rentetan teks yang perlu diterjemahkan harus digunakan dengan cara yang serupa.__('Hello World', 'my-theme-text-domain')Pakailah fungsi terjemahan tersebut untuk melakukan proses pengelompokan (pembungkusan) kod. Akhirnya, gunakan alat seperti Poedit untuk menghasilkan kandungan terjemahan yang diinginkan..po和.moFail bahasa disediakan untuk digunakan oleh penterjemah.

Adakah reka bentuk responsif merupakan keperluan dalam pembangunan tema?

Pada tahun 2026 hari ini, reka bentuk responsif bukan lagi sesuatu yang “menambah nilai”, tetapi merupakan keperluan asas dalam pembangunan tema web. Lebih daripada separuh laluan data internet di seluruh dunia datang dari peranti mudah alih, dan tema yang tidak mempunyai reka bentuk responsif akan merosakkan pengalaman pengguna dengan teruk, serta memberi kesan negatif terhadap kedudukan laman web dalam enjin carian pada peranti mudah alih.

Anda harus menggunakan teknik seperti kueri media CSS untuk memastikan reka letak tema anda boleh menyesuaikan diri dengan skrin yang berbeza saiz, daripada komputer meja hingga telefon pintar, dan memberikan pengalaman pelayaran yang baik. Banyak rangka CSS moden (seperti Tailwind CSS) juga menyediakan kemudahan untuk membina antara muka yang responsif dengan cepat.

Bagaimanakah tema saya boleh disesuaikan oleh pengguna melalui bahagian belakang (backend)?

Menyediakan pilihan penyesuaian latar belakang untuk pengguna terutamanya dilakukan melalui API “Customizer” di WordPress. Anda boleh…functions.phpGunakan dalam bahasa Cina$wp_customize->add_setting()和$wp_customize->add_control()Cara untuk menambahkan tetapan dan kawalan.

Sebagai contoh, anda boleh menambahkan pilihan yang membolehkan pengguna mengubah warna tajuk laman web. Nilai-nilai untuk tetapan ini boleh disetkan dalam fail templat tema.get_theme_mod()Fungsi tersebut digunakan untuk mengambil dan memaparkan maklumat tertentu. Ini memberikan pengguna kemudahan untuk mengubah suai penampilan tema tanpa perlu mengedit kod, sehingga meningkatkan keselesaan dan profesionalisme tema tersebut.

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: