Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Pengenalan Pembangunan Tema WordPress: Bina Tema Custom Pertama Anda Dari Kosong

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

Pra-persiapan: Mencipta satu persekitaran tema yang lengkap

Sebelum menulis sebarang kod, membina persekitaran pembangunan yang jelas dan teratur adalah kunci kejayaan. Pertama sekali, anda perlu memasang WordPress pada komputer anda atau pada pelayan jauh. Buatlah sebuah direktori untuk menyimpan tema-tema, dan letakkan direktori tersebut di bawah direktori pemasangan WordPress. /wp-content/themes/ Ya. Kita akan membuat satu yang dinamakan… my-first-theme Folder baru ini merupakan direktori utama untuk tema yang kita buat sendiri.

Sebuah tema WordPress yang paling asas hanya memerlukan dua fail untuk dikenali oleh sistem. Yang pertama adalah fail skema (style sheet). style.cssIa bukan sahaja menentukan penampilan laman web tersebut, tetapi juga maklumat ulasan di bahagian kepala (header) merupakan “kad pengenalan” tema tersebut, yang mengandungi nama tema, penulis, deskripsi, dan metadata lain. Yang kedua adalah fail templat utama (core template file). index.phpIa merupakan fail templat laluan (entry template) yang digunakan oleh WordPress secara lalai.

Mari kita bermula dengan menciptanya terlebih dahulu. style.css Fail tersebut digunakan untuk menulis maklumat kepala (header) yang diperlukan.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pembangunan Tema WordPress: Panduan Lengkap Untuk Membina Tema Custom Dari Kosong。

/*
Theme Name: My First Theme
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://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
*/

/* 以下是正式的样式内容 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

Seterusnya, buat yang paling asas. index.php Fail tersebut boleh sangat ringkas, dan hanya digunakan untuk menguji sama ada topik tersebut dikenali dengan betul atau tidak.

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 
<!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>Hai dunia! Ini adalah tema pertama saya.</h1>
    <?php wp_footer(); ?>
</body>
</html>

Setelah menyelesaikan kedua-dua fail tersebut, log masuk ke panel pentadbiran WordPress anda, kemudian ke halaman “Appearance” -> “Themes”. Di sana, anda sepatutnya dapat melihat tema “My First Theme” yang baru sahaja kita buat. Aktifkan tema tersebut, dan kemudian kunjungi halaman utama laman web anda untuk melihat hasilnya. Ini menandakan bahawa kerangka tema anda telah dibina dengan jaya.

Memahami fail templat asas dan struktur hierarkinya

WordPress menggunakan Hierarki Templat (Template Hierarchy) untuk menentukan fail templat mana yang perlu digunakan untuk merender dan menunjukkan kandungan halaman yang diminta oleh pengguna. Memahami peraturan ini adalah asas dalam pembangunan tema (theme development). Dengan kata lain, apabila pengguna mengakses sebuah halaman tertentu, WordPress akan mencari fail templat yang sesuai mengikut susunan keutamaan yang telah ditetapkan. Yang paling asas… index.phpIa merupakan pilihan untuk kembali ke halaman asal (default page) bagi semua halaman.

Sebagai contoh, apabila seseorang mengakses kandungan individu daripada sebuah artikel blog, WordPress akan mencari terlebih dahulu… single-post.phpJika tidak ada, maka carilah. single.phpJika belum ada, barulah ia akan digunakan. index.phpUntuk halaman yang menunjukkan senarai artikel, ia akan mencari secara berurutan. home.php、front-page.php、index.php。

Untuk mencipta sebuah tema blog yang lengkap dengan semua fungsi yang diperlukan, kita perlu membuat sekurang-kurangnya beberapa fail templat kunci berikut:header.php(Top bar of the website)footer.php(Baru bahagian kaki laman web),sidebar.php(Sidebar, optional)index.php(Indeks Kandungan Utama)single.php(Satu artikel)page.php(Single page) dan style.css(CSS – Stylesheet)

Diperoleh daripada WEB\nDisyorkan untuk membaca. Bagaimana untuk memulakan pembangunan tema WordPress yang diperibadikan dari awal?。

melalui get_header()、get_footer() 和 get_sidebar() Dengan fungsi-fungsi templat ini, kita dapat memodulkan kod yang bersifat umum, sehingga membolehkan penggunaan semula kod tersebut. Fail templat utama adalah seperti… index.php Struktur tersebut akan menjadi sangat jelas kerana itu.

<?php get_header(); ?>

<main id="main-content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
        endwhile;
    else :
        // 没有找到内容的提示
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Konsep modular ini bukan sahaja menjadikan kod lebih mudah diselenggara, tetapi juga membolehkan anda dengan mudah membuat header dan footer yang khusus untuk pelbagai jenis halaman.

Pembangunan Praktikal: Mencipta Gelung Utama dan Memanggil Kandungan Artikel

Inti dari mana-mana tema blog adalah “The Loop” (Lingkaran Utama). Ia merupakan struktur kod PHP yang digunakan oleh WordPress untuk mengambil kandungan artikel dari pangkalan data dan memaparkannya di halaman web. Di dalam lingkaran ini, anda boleh menggunakan pelbagai tag templat (Template Tags) untuk menampilkan tajuk artikel, kandungan, penulis, tarikh, dan maklumat lain.

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

Mari kita bina yang paling asas.index.phpFail tersebut memaparkan senarai artikel dalam gelung utama (main loop).

<p>

<div class="content-area">
    <main class="site-main">
        <?php if ( have_posts() ) : ?>
            <header class="page-header">
                <h1 class="page-title">Artikel Terkini</h1>
            </header>
            <?php
            while ( have_posts() ) : the_post();
            ?>
                <article no numeric noise key 1011 id="post-<?php the_ID(); ?>">
                    <h2 class="entry-title">
                        <a href="/ms/</?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </h2>
                    <div class="entry-meta">
                        Diterbitkan pada:<time datetime="<?php echo get_the_date( 'c' ); ?>"><?php echo get_the_date(); ?></time> | 作者：
                    </div>
                    <div class="entry-content">
                        <?php the_excerpt(); // 输出文章摘要 ?>
                    </div>
                </article>
            <?php
            endwhile;
            // 输出分页导航
            the_posts_navigation();
        else :
            ?>
            <p>Maaf, tiada artikel yang ditemui.</p>
        <?php endif; ?>
    </main>
    <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

Dalam kod di atas, kita menggunakan have_posts() 和 the_post() Untuk membina gelung, gunakan tag templat yang sesuai. the_title()、the_permalink()、the_excerpt() “Deng” digunakan untuk menghasilkan kandungan yang sesuai.post_class() Fungsi tersebut akan menjana secara automatik satu siri kelas CSS yang sangat berguna untuk konten artikel, yang memudahkan kami dalam reka bentuk gaya (style design).

Untuk sebuah artikel tunggal, kita perlu membuat… single.phpStrukturnya serupa dengan halaman indeks, tetapi biasanya hanya mengulangi satu artikel sahaja dan menunjukkan kandungannya sepenuhnya.the_content())。

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Permulaan Pembangunan Tema WordPress: Membina Tema Custom Dari Kosong。

<?php get_header(); ?>

<main id="primary">
    <?php
    while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/content', 'single' );
    endwhile;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Di sini, sebuah fungsi yang lebih berkuasa telah diperkenalkan. get_template_part()Ia digunakan untuk memuatkan fail segmen templat lain yang terletak dalam direktori tema. Sebagai contoh,get_template_part( 'template-parts/content', 'single' ); Akan dimuat turun terlebih dahulu. template-parts/content-single.php Jika fail tersebut tidak wujud, ia akan dimuat turun. template-parts/content.phpIni seterusnya meningkatkan organisasi dan kebolehgunaan semula kod tersebut.

Peningkatan Fungsi Tema dan Amalan Terbaik

Setelah sebuah tema asas dibentuk, kita boleh menjadikannya lebih kuat dan stabil dengan menambahkan fail-fail fungsi tema dan mengikuti amalan terbaik. Salah satu fail yang paling penting adalah… functions.php。

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

Topikfunctions.phpFail tersebut tidak wajib, tetapi ia membenarkan anda menambahkan ciri-ciri tambahan kepada tema anda, mendaftarkan fungsi-fungsi tertentu, dan berinteraksi dengan API teras WordPress. Ia boleh dianggap sebagai “plugin” untuk tema anda, namun ia masih terikat dengan tema tersebut. Apa yang perlu anda lakukan di sini adalah mendaftarkan dan mendeklarasikan komponen-komponen tersebut, bukan sekadar memaparkan kandungan secara langsung.

Standardfunctions.phpBerikut adalah beberapa bahagian yang perlu disertakan:

1. 注册菜单：使用 register_nav_menus() Fungsi.
2. 注册侧边栏：使用 register_sidebar() Fungsi.
3. 添加主题支持：使用 add_theme_support() Fungsi ini digunakan untuk mengaktifkan ciri-ciri utama seperti imej khas artikel, logo yang disesuaikan, dan lain-lain.
4. 加载样式和脚本：使用 wp_enqueue_style() 和 wp_enqueue_script() Fungsi, dan gunakannya dengan betul. wp_enqueue_scripts Kuku.

__( '主导航菜单', '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() );
    // 加载谷歌字体
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap', array(), null );
    // 加载主 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' );

// 注册一个右侧边栏
function my_first_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>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );
?&gt;

Ikuti amalan terbaik ini, seperti menambahkan fungsi melalui “hook”, mengatur pengambilan sumber dengan betul, dan menggunakan fungsi terjemahan. __() 和 _e() Menginternasionalisasi tema anda dapat memastikan bahawa tema tersebut selamat, cekap, dan memenuhi standard pembangunan rasmi WordPress.

RINGKASAN

Dari masa penciptaan yang mengandungi… style.css 和 index.php Bermula dengan folder asas, anda telah melalui perjalanan utama dalam membina tema WordPress yang diperibadikan. Kita telah membincangkan secara mendalam sistem hierarki templat, dan memahami bagaimana WordPress memilih fail templat yang sesuai secara automatik untuk merender halaman yang berbeza. Kita juga telah mengamalkan pembinaan “main loop” (loop utama), dan belajar menggunakan pelbagai tag templat untuk menghasilkan kandungan secara dinamik. Akhirnya, kita… functions.php Temanya telah diperkaya dengan fungsi yang lebih kuat dan standard yang lebih tinggi. Walaupun ini hanyalah satu permulaan, ia membuka pintu bagi anda untuk terus meneroka, menambah lebih banyak fail templat, gaya yang lebih pelbagai, serta ciri interaktif, sehingga akhirnya anda dapat mencipta laman web yang unik yang benar-benar memenuhi keperluan anda atau pelanggan anda.

FAQ - Soalan Lazim

Adakah pembangunan tema memerlukan pengetahuan tentang PHP?

Ya, untuk mengembangkan tema WordPress dengan lebih mendalam, pengetahuan asas PHP adalah penting. Ini kerana WordPress dibina menggunakan PHP, dan semua fail templat, panggilan fungsi, serta logik pemprosesan data bergantung pada PHP. Bagi pemula, menguasai sintaks asas PHP, pemboleh ubah, array, gelung, pengurusan keadaan (conditionals), dan fungsi adalah sangat penting.

Bagaimana untuk menjadikan tema saya sesuai dengan peranti mudah alih?

Membuat tema mempunyai reka bentuk yang responsif adalah keperluan asas untuk laman web moden. Anda perlu menggunakan Media Queries dalam CSS untuk menyesuaikan susun atur dan gaya mengikut lebar skrin yang berbeza. Semasa proses pembangunan, strategi “mobile-first” harus diikuti, iaitu menulis gaya yang sesuai untuk skrin kecil terlebih dahulu, dan kemudian secara beransur-ansur menambah atau menggantikan gaya tersebut untuk skrin yang lebih besar melalui Media Queries.

Apakah cara terbaik untuk mengembangkan dan menguji tema?

Saya sangat mengesyorkan untuk mengembangkan tema dalam persekitaran pembangunan tempatan. Dengan menggunakan alat seperti Local by Flywheel, XAMPP, MAMP, atau Docker untuk membina persekitaran pelayan tempatan, anda dapat melakukan iterasi dan ujian dengan cepat tanpa mempengaruhi laman web dalam talian. Pada masa yang sama, aktifkan ciri-ciri khusus dalam WordPress yang berkaitan dengan pembangunan tema. WP_DEBUG Mod sangat penting kerana ia membolehkan ralat dan amaran PHP dipaparkan di skrin, yang membantu anda mengesan dan memperbaiki masalah dalam kod dengan segera.

Apa teknologi front-end yang perlu saya kuasai?

Selain PHP, anda juga perlu mahir dalam HTML dan CSS, yang merupakan asas untuk membina struktur dan gaya halaman web. Untuk interaksi yang lebih kompleks serta kesan dinamik, pengetahuan tentang JavaScript juga sangat penting. Terutamanya, belajar cara memasukkan dan menggunakan fail JavaScript dengan selamat dan betul dalam WordPress (melalui…) wp_enqueue_script), serta belajar cara menggunakan perpustakaan JavaScript yang disertakan bersama WordPress.

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: