Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Pengenalan Pembangunan Tema WordPress: Membina Tema Pertama Anda Dari Kosong

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

Pengurusan persiapan: Memahami struktur topik dan fail-fail asas

Sebelum mula menulis kod, kita perlu memahami komponen asas sebuah tema WordPress standard. Tema WordPress yang paling asas hanya memerlukan dua fail:style.css 和 index.phpNamun, sebuah tema yang lengkap dengan ciri-ciri yang baik dan struktur yang jelas memerlukan lebih banyak fail templat khusus untuk mendefinisikan bahagian-bahagian yang berbeza dalam laman web tersebut.

Fail-fail templat utama termasuk:
* index.phpFail templat utama untuk topik tersebut merupakan templat laluan (default fallback template) untuk semua halaman laman web.
* style.cssFail gaya utama tema tersebut mengandungi bukan sahaja peraturan CSS, tetapi juga ulasan di bahagian kepala fail yang mendefinisikan maklumat meta tema, seperti nama tema, pengarang, dan deskripsi. Maklumat ini sangat penting bagi WordPress untuk mengenal pasti sebuah tema.
* header.phpTemplate untuk bahagian header laman web biasanya merangkumi:<head>Sebahagian daripada laman web, LOGO, dan menu navigasi utama.
* footer.phpTemplat kaki halaman laman web biasanya mengandungi maklumat hak cipta, kawasan Widget, dan lain-lain.
* functions.phpFail fungsi tema ini digunakan untuk menambahkan ciri-ciri tema, mendaftar menu, kawasan Widget, serta mengandungi fail-fail PHP yang lain.

Selain itu, terdapat juga templat yang digunakan untuk halaman-halaman tertentu, seperti… single.php(Satu artikel)page.php(Laman web yang berdiri sendiri)archive.php(Laman Arkib Artikel) Dan sebagainya. Memahami fungsi fail-fail ini adalah asas penting dalam membina topik (tema) yang berkaitan.

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

Saya akan mengambil cuti sepanjang bulan April.

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

Pembinaan persekitaran pembangunan juga sangat penting. Anda memerlukan sebuah persekitaran pembangunan PHP setempat (seperti XAMPP, Local by Flywheel, atau DevKinsta), sebuah editor kod (seperti VS Code atauPhpStorm), dan pastikan bahawa WordPress yang anda pasang di komputer anda adalah versi terkini.

Saya akan mengambil cuti sepanjang bulan April.

Mencipta fail tema dan struktur direktori

Pertama, di direktori di mana WordPress anda dipasang, wp-content/themes/ Dalam folder tersebut, buatlah sebuah folder baru dan berikan nama ia mengikut nama topik anda, sebagai contoh: my-first-themeSemua fail tema akan diletakkan dalam folder ini.

Seterusnya, kita akan membuat fail pertama, yang juga merupakan fail yang penting:style.cssDi bahagian atas fail ini, anda perlu menambahkan satu ulasan khusus untuk memberitahu WordPress bahawa ini adalah tema anda.

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个用于学习WordPress主题开发的入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Sekarang, buatlah fail kedua yang diperlukan:index.phpPada peringkat awal, kita boleh menjadikannya sangat mudah, dengan hanya menghasilkan satu struktur HTML asas.

<!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>
        <h1>Selamat datang ke tema WordPress pertama saya!</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>© Hak Cipta Dilindungi Undang-Undang</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Pada masa ini, jika anda masuk ke bahagian “Penampilan” -> “Tema” di panel pentadbiran WordPress, anda sepatutnya dapat melihat tema “My First Theme” dan boleh mengaktifkannya. Setelah diaktifkan, apabila anda mengakses halaman utama laman web, anda akan melihat kandungan artikel yang disertakan dalam sebuah halaman HTML yang sangat asas.

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

Saya akan mengambil cuti sepanjang bulan April.

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

Membina templat asas dan ciri-ciri utama

Untuk menjadikan struktur topik lebih jelas, kita perlu…index.phpPecahkan ia menjadi bahagian yang lebih kecil dan boleh digunakan semula. Pertama sekali, buatlah… header.php Fail, akan<head>Sebahagian kandungan dan bahagian kepala (header) telah dipindahkan ke dalam.

<!DOCTYPE html>
<html no numeric noise key 1012>
<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 1009>
<p>
<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;
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
                'menu_id'        =&gt; 'primary-menu',
            ) );
            ?&gt;
    </nav>
</header>

Kemudian, cipta footer.php Dokumen.

<footer id="colophon" class="site-footer">
    <div class="site-info">
        <p><?php echo esc_html__( '由WordPress驱动', 'my-first-theme' ); ?></p>
    </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Sekarang, kita perlu membuat “otak” bagi tema tersebut. functions.php Fail. Di sini, kita akan mengatur ciri-ciri sokongan tema, menetapkan lokasi untuk menyimpan resipi, serta menambahkan fail gaya (stylesheet) dan skrip (script).

Saya akan mengambil cuti sepanjang bulan April.

<?php
// 添加主题功能支持
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus(
        array(
            'menu-1' => esc_html__( '主导航', 'my-first-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册前端样式表
function my_first_theme_scripts() {
    // 主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 主JavaScript文件（如果存在）
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Akhir sekali, ubah suai semula kod anda… index.phpGunakan tag templat WordPress untuk memasukkan header dan footer.

<?php get_header(); ?>
<main id="primary" class="site-main">
    <?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>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Menambah gaya dan ciri interaktif

Sekarang kerangka topik tersebut sudah siap, dan tiba masanya untuk menambah gaya serta interaksi kepadanya. Pertama sekali,style.cssSelepas ulasan di bahagian kepala fail (file header), tambahkan beberapa kod CSS asas untuk memperindah tema anda.

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 
/* 基础样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
}
.site-header {
    background: #fff;
    padding: 1rem 2rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-navigation ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.main-navigation li {
    margin-left: 1.5rem;
}
.site-main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.site-footer {
    text-align: center;
    padding: 2rem;
    color: #666;
    border-top: 1px solid #eee;
}

Untuk mengurus navigasi pada peranti mudah alih, kita boleh membuat sebuah fail JavaScript yang ringkas. Buatlah fail tersebut dalam direktori utama tema (theme root directory). /js/navigation.js。

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Lengkap Pembangunan Plugin WordPress: Daripada Asas Hingga Pelancaran Ke Aplikasi Sebenar。

Saya akan mengambil cuti sepanjang bulan April.

// 简单的移动端菜单切换示例
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.createElement('button');
    menuToggle.textContent = '菜单';
    menuToggle.classList.add('menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');
    if (primaryMenu) {
        primaryMenu.parentNode.insertBefore(menuToggle, primaryMenu);
        menuToggle.addEventListener('click', function() {
            primaryMenu.classList.toggle('show');
        });
    }
});

Dan tambahkan gaya yang sesuai dalam CSS:

.menu-toggle {
    display: none;
    background: #007cba;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    .main-navigation ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .main-navigation ul.show {
        display: flex;
    }
}

RINGKASAN

Melalui langkah-langkah di atas, kita telah menyelesaikan sebuah tema WordPress yang asas tetapi mempunyai struktur yang lengkap. Kita bermula dengan memahami fail-fail utama tema tersebut, dan kemudian secara beransur-ansur membina komponen-komponen yang diperlukan untuk tema tersebut.style.css和index.phpKemudian, dengan memisahkannya...header.php、footer.phpdan yang kuatfunctions.phpFail-fail tersebut membuat struktur topik menjadi lebih modular dan mudah diselenggara. Akhirnya, kami menambahkan gaya asas dan interaksi JavaScript yang ringkas untuk meningkatkan pengalaman pengguna.

Saya akan mengambil cuti sepanjang bulan April.

Tema ini mempunyai ciri-ciri asas tema WordPress moden: menyokong tag-tag judul (title tags), gambar-gambar menarik (featured images), menu navigasi, dan sudah mempunyai asas reka bentuk yang responsif (responsive design). Dengan ini sebagai titik permulaan, anda boleh terus meneroka dan mencipta lebih banyak lagi.single.php、page.phpMenunggu lebih banyak fail templat, mengintegrasikan rangka kerja CSS yang lebih kompleks (seperti Bootstrap), atau menggunakan REST API WordPress untuk membina antara muka yang lebih dinamik. Dunia pembangunan tema sangat luas dan menarik; kuncinya adalah dengan berlatih sendiri dan terus melakukan iterasi.

FAQ - Soalan Lazim

Mengapa tema saya tidak dipaparkan dalam senarai tema di bahagian belakang (backend)?

Sila periksa terlebih dahulu sama ada folder tema anda diletakkan di laluan yang betul:wp-content/themes/Kedua, pastikan…style.cssBlok komen maklumat tema di bahagian atas fail tersebut mempunyai format yang betul sepenuhnya, terutamanya baris “Theme Name:”. Sebarang ralat ejaan atau masalah format boleh menyebabkan WordPress tidak mengenali tema tersebut.

Bagaimana untuk menambahkan kawasan Widget kepada tema saya?

Anda perlu…functions.phpDokumen tersebut menggunakanregister_sidebar()Fungsi ini digunakan untuk mendaftarkan kawasan alat tambahan (widgets). Selepas pendaftaran, anda boleh menggunakannya dalam fail templat yang sesuai (seperti…).sidebar.php或footer.php）digunakan dalamdynamic_sidebar()Fungsi tersebut digunakan untuk memanggilnya. Ini merupakan kaedah standard untuk mengembangkan ciri-ciri seperti sidebar atau footer pada sesuatu tema.

函数 get_template_part() 有什么用？

get_template_part()Ia merupakan tag templat yang sangat kuat, digunakan untuk memuatkan segmen kod yang boleh digunakan semula dalam sesuatu tema. Sebagai contoh, ia boleh digunakan untuk memanggil fungsi tertentu dalam satu gelung (loop).get_template_part( 'template-parts/content', get_post_type() );Akan mencuba untuk memuatkan terlebih dahulu.template-parts/content-post.php(Membuat anggapan bahawa jenis artikelnya adalah )postJika gagal, maka proses muat turun akan dilakukan.template-parts/content.phpIni telah meningkatkan modulasi dan kebolehpenyelenggaraan kod dengan ketara.

Ketika membangunkan tema, bagaimanakah untuk memastikan ia mematuhi standard pengkodan WordPress?

WordPress menetapkan standard pengkodan yang terperinci untuk PHP, HTML, CSS, dan JavaScript. Disyorkan agar anda memasang alat linting yang sesuai dalam editor kod anda (seperti PHP_CodeSniffer yang disertakan dengan peraturan standard pengkodan WordPress, atau ESLint). Selain itu, rujuklah secara berkala kepada dokumen standard pengkodan yang disediakan oleh WordPress, dan laksanakan standard-standard ini dengan ketat dalam proses pembangunan bersama pasukan untuk memastikan kualiti dan konsistensi kod.

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: