Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Pengenalan kepada pembangunan tema WordPress: Membina tema kustom dari awal

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

Untuk membina tema WordPress yang dibuat khas, anda perlu memahami struktur asasnya terlebih dahulu. Tema WordPress yang paling ringkas pada dasarnya merupakan sebuah fail yang terletak di direktori tema standard WordPress./wp-content/themes/Dalam folder tersebut, terdapat dua fail yang diperlukan:style.css和index.phpYang pertama bukan sahaja menentukan gaya tema tersebut, tetapi yang lebih penting adalah bahagian ulasan kepala fail (header comments) yang mengandungi metadata tema, seperti nama tema, pengarang, deskripsi, dan lain-lain. Yang kedua adalah fail templat lalai, yang akan digunakan oleh WordPress apabila ia tidak dapat mencari templat yang lebih khusus.

Selain daripada dua fail ini, sebuah tema yang lengkap dengan fungsi-fungsi yang diperlukan biasanya juga akan mengandungi fail-fail template lain, seperti yang digunakan untuk menampilkan artikel individu.single.phpDigunakan untuk menunjukkan senarai artikel.archive.php, serta yang digunakan untuk menunjukkan halamanpage.phpMemahami dan membuat fail-fail templat ini adalah asas dalam pembangunan tema.

Sebelum memulakan proses pengkodan, disyorkan untuk membina persekitaran pembangunan di lokal, seperti menggunakan XAMPP, MAMP, atau Local by Flywheel. Ini akan membolehkan anda melakukan ujian dan penyelarasan dengan bebas tanpa mempengaruhi laman web yang bersifat online. Pada masa yang sama, pastikan bahawa editor teks atau IDE anda (seperti VS Code,PhpStorm) sudah bersedia, dan anda memahami asas-asas pengaturcaraan dalam PHP, HTML, CSS, dan JavaScript.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan permulaan untuk pembangunan tema WordPress: Membina tema pertama anda dari awal.。

Mencipta fail asas dan struktur untuk tema

Membina folder tema dan fail gaya (style sheet)

Pertama sekali,/wp-content/themes/Cipta sebuah folder baru dalam direktori tersebut, contohnya dengan nama “New Folder”.my-first-themeKemudian, cipta sebuah fail dalam folder tersebut.style.cssFail tersebut, dan masukkan maklumat header fail berikut:

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 
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress主题入门示例。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Komen ini adalah kunci untuk WordPress mengenal pasti tema yang digunakan. Selepas itu, anda boleh menambahkan beberapa gaya asas dalam fail CSS ini.

Membuat fail templat asas

Kemudian, ciptaindex.phpFail. Ini adalah templat sandaran untuk semua halaman. Yang paling mudah.index.phpIa boleh hanya mengandungi struktur asas yang merangkumi panggilan kepada bahagian kepala (header) laman web, kandungan berulang (looped content), dan bahagian akhir (footer) laman web.

<!DOCTYPE html>
<html no numeric noise key 1011>
<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 1008>
    <p>
    <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();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Fail ini menggunakan beberapa fungsi teras WordPress, seperti…wp_head()、body_class()、the_content()Dan lain-lain, ia sangat penting untuk operasi yang normal bagi topik tersebut.

Mengerti dan melaksanakan hierarki templat

WordPress menggunakan satu set peraturan yang dipanggil “Template Hierarchy” untuk menentukan fail templat mana yang perlu digunakan untuk permintaan halaman tertentu. Memahami hierarki ini adalah kunci kepada pembangunan tema yang cekap.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Penting untuk membina laman web profesional: Panduan lengkap untuk pembangunan dan penyesuaian tema WordPress.。

Fail templat yang sering digunakan dan fungsi masing-masing:

Ketika mengakses halaman utama laman web, WordPress akan mencari (atau mengambil) kandungan secara berurutan.front-page.php、home.phpDan yang terakhir ialahindex.phpUntuk halaman senarai artikel blog, ia akan mencari…home.phpUntuk satu artikel sahaja, ia akan menggunakan kaedah yang lebih utama (prioritised method) terlebih dahulu.single-post.phpatau umumsingle.phpUntuk halaman statik, gunakan…page.phpHalaman direktori kategori yang bersesuaiancategory.phpHalaman carian yang bersesuaiansearch.phpHalaman ralat 404 adalah untuk...404.php。

Dengan membuat fail-fail templat yang khusus ini, anda boleh merancang reka bentuk dan gaya yang berbeza untuk bahagian-bahagian yang berbeza dalam laman web.

Menggunakan komponen templat untuk memisahkan kod

Untuk menjaga kod tetap kemas dan boleh digunakan semula, bahagian-bahagian yang berulang perlu dipisahkan ke dalam fail-fail “komponen templat” yang berasingan. Pemisahan yang paling biasa dilakukan adalah dengan mengasingkan bahagian kepala (Header), kaki (Footer), dan bar sisi (Sidebar).

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

Menciptaheader.phpFail, akanindex.php中Tag bermula dari…Pindahkan semua kod yang berada sebelum tag ke dalamnya. Kemudian, gunakan kod tersebut di tempat asalnya.get_header()Panggilan fungsi.

// 在 index.php 中替换原来的代码
<?php get_header(); ?>

Begitu juga, untuk mencipta…footer.phpKod kaki halaman disimpan dalam fail, dan ia digunakan…get_footer()Panggilan. Anda juga boleh membuatnya.sidebar.phpDan gunakan jugaget_sidebar()Panggilan tersebut. Kaedah ini meningkatkan tahap modularisasi kod dengan ketara.

Mengintegrasikan fungsi asas WordPress

Mengintegrasikan pengulangan artikel dan imej-imej khas

“Cyclic loading” (atau “looping”) merupakan mekanisme asas yang digunakan oleh WordPress untuk mendapatkan dan memaparkan artikel dari pangkalan data.index.php或single.phpDi sini, kami menggunakan…if ( have_posts() ) : while ( have_posts() ) : the_post();Untuk memulakan kitaran tersebut, anda boleh menggunakan satu siri tag templat di dalam kitaran tersebut untuk memaparkan maklumat artikel.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Sebuah panduan lengkap untuk pembangunan plugin WordPress, dari awal hingga akhir – membina plugin pertama anda sendiri。

Sebagai contoh, gunakan…the_title()Tajuk Artikel:the_permalink()Pautan artikel:the_content()Kandungan artikel:the_excerpt()Untuk menyokong imej-imej menarik dalam artikel, langkah pertama yang perlu diambil adalah…functions.phpPenambahan pengisytiharan sokongan tema dalam fail:

add_theme_support( 'post-thumbnails' );

Kemudian, dalam gelung fail templat, ia boleh digunakan.the_post_thumbnail()Outputkan imej-imej yang menarik.

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

Cipta fail `functions.php` untuk menguatkan tema.

functions.phpFail tersebut merupakan “pusat kawalan” untuk tema anda. Ia bukanlah sesuatu yang wajib, tetapi hampir semua tema menggunakan fail ini. Di sini, anda boleh menambahkan ciri-ciri tambahan, mendaftarkan menu, mendefinisikan kawasan alat tambahan (widgets), memasukkan skrip, dan fail gaya (style sheets).

Asasfunctions.phpMungkin mengandungi kandungan berikut:

__( '顶部菜单', 'my-first-theme' ),
            'footer-menu' =&gt; __( '底部菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'mytheme_register_menus' );

// 添加小工具区域支持
function mytheme_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', 'mytheme_widgets_init' );

// 引入主题样式表和脚本
function mytheme_enqueue_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
    // 引入主JavaScript文件
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()-&gt;get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );
?&gt;

Menambah gaya dan reka bentuk responsif

Membina rangka kerja CSS asas

从style.cssMula dengan membina gaya visual asas untuk topik anda. Anda boleh menetapkan model kotak (box model), jenis font, dan warna secara global terlebih dahulu.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

Mengimplementasikan reka bentuk responsif yang mengutamakan peranti mudah alih

Tema moden mesti bersifat responsif. Gunakan strategi yang mengutamakan peranti mudah alih, dengan terlebih dahulu merancang reka bentuk untuk skrin kecil, dan kemudian menggunakan Media Queries untuk menambah atau menggantikan gaya reka bentuk tersebut untuk skrin yang lebih besar.

/* 移动端基础样式 */
.main-navigation ul {
    display: flex;
    flex-direction: column;
    list-style: none;
}
.main-navigation li {
    border-bottom: 1px solid #ddd;
}

/* 平板及以上设备 */
@media (min-width: 768px) {
    .main-navigation ul {
        flex-direction: row;
    }
    .main-navigation li {
        border-bottom: none;
        margin-right: 2rem;
    }
    .content-area {
        width: 70%;
        float: left;
    }
    .widget-area {
        width: 28%;
        float: right;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    .container {
        padding: 0 40px;
    }
}

Untuk memastikan bahawa gambar juga bersifat responsif, anda boleh mengaturnya melalui CSS.max-width: 100%; height: auto;Atau gunakan ciri-ciri yang disediakan oleh WordPress sendiri.srcsetAttributethe_post_thumbnail()(Ia akan dihasilkan secara laluan.)

RINGKASAN

Membangunkan sebuah tema WordPress dari awal merupakan proses pembelajaran yang sistematik, yang meliputi pelbagai aspek seperti mencipta struktur fail asas, memahami hierarki templat, memisahkan komponen-komponen templat, dan seterusnya…functions.phpMengintegrasikan fungsi-fungsi teras, kemudian merancang reka bentuk dan menyesuaikan halaman web agar responsif kepada peranti yang berbeza. Proses ini bukan sahaja akan membolehkan anda memahami dengan mendalam cara WordPress berfungsi, tetapi juga memberi anda kawalan penuh ke atas penampilan dan fungsi laman web tersebut. Ingatlah, bermula dari reka bentuk yang sangat sederhana…style.css和index.phpMula dengan menambahkan fungsi secara beransur-ansur dan mengujinya adalah pendekatan yang selamat serta berkesan untuk belajar. Topik pertama anda mungkin kelihatan sangat mudah, tetapi ia akan meletakkan asas yang kukuh untuk anda membina projek yang lebih kompleks dan profesional pada masa hadapan.

FAQ - Soalan Lazim

Untuk membangunkan tema WordPress, apakah bahasa pengaturcaraan yang perlu dikuasai?

Untuk mengembangkan sebuah tema WordPress yang lengkap dengan semua fungsi, anda perlu menguasai bahasa pemrograman PHP, HTML, CSS, dan JavaScript. PHP merupakan komponen utama yang digunakan untuk mengendalikan logik dan memanggil fungsi-fungsi yang disediakan oleh WordPress; HTML digunakan untuk membina struktur halaman web; CSS bertanggungjawab untuk penampilan dan susun atur halaman; manakala JavaScript digunakan untuk mencipta kesan interaktif serta fungsi-fungsi dinamik. Memiliki pengetahuan asas tentang SQL juga akan membantu anda memahami cara WordPress melakukan pertanyaan terhadap pangkalan data.

Mengapa tema kustom saya tidak dipaparkan di latar belakang?

Ini biasanya disebabkan oleh...style.cssMasalah ini disebabkan oleh ralat atau kekurangan maklumat dalam nota kepala fail. Pastikan fail tersebut berada dalam direktori akar folder tema, dan bahagian nota di awal fail mempunyai format yang betul, termasuk maklumat wajib seperti “Theme Name”. Selain itu, periksa juga sama ada hak akses untuk folder tema adalah betul.style.cssFail tersebut sendiri tidak mempunyai ralat tatabahasa.

Bagaimana untuk menambahkan templat halaman khusus (custom page template) kepada tema saya?

Pertama sekali, buatlah sebuah fail PHP baru dalam direktori tema anda, contohnya:template-fullwidth.phpDi bahagian atas fail ini, tambahkan sebuah ulasan khas untuk mendefinisikan nama templat. Kemudian, anda boleh menulis sebarang kod PHP dan HTML yang anda inginkan di dalam fail ini. Ingatlah untuk merujuk kepada fail templat lain (seperti…).page.phpStruktur asas seperti gelung pengulangan (loop) juga disertakan. Setelah pembuatan selesai, anda boleh melihat dan memilih templat kustom yang anda buat dalam kotak drop-down “Template” di bawah “Page Attributes” semasa mengedit halaman di panel pentadbiran WordPress.

Bagaimanakah untuk membetulkan ralat PHP dengan selamat 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 kepadatrueIni akan memaparkan semua ralat, amaran, dan notis PHP pada skrin. Untuk penyelidikan yang lebih mendalam, anda boleh menggunakan…WP_DEBUG_LOGCatatkan ralat ke dalam…/wp-content/debug.logDalam fail tersebut. Sila ambil perhatian bahawa sebelum laman web dilancarkan, pastikan mod pembangunan (debugging mode) dimatikan.

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: