Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Bermula dari kosong: Memahami asas-asas tema WordPress

Baca dalam masa 2 minit.
2026-03-15
2026-06-03
2,090
Saya mendapat komisen apabila anda membeli-belah melalui pautan di bawah, tanpa sebarang kos tambahan kepada anda.

Bermula dari kosong: Memahami asas-asas tema WordPress

Untuk memahami pembangunan tema WordPress, pertama-tama kita perlu mengetahui komponen-komponen utamanya. Sebuah tema WordPress pada asasnya merupakan koleksi fail-fail yang bersama-sama menentukan penampilan dan fungsi laman web, termasuk fail gaya (style sheets), fail templat (template files), skrip fungsi (function scripts), dan sumber daya seperti imej. Fail utama dalam sebuah tema adalah… style.css 和 index.phpYang pertama merupakan “kad pengenalan” tema dan fail definisi gaya, manakala yang kedua adalah fail templat lalai.

Header File for Theme Information

Di dalam direktori akar setiap topik, mesti terdapat satu fail atau direktori. style.css Fail tersebut mengandungi sebuah notasi khas di bahagian kepala failnya, yang digunakan untuk memberitahu WordPress tentang maklumat asas tema tersebut. Notasi kepala ini merupakan kunci untuk WordPress mengenali dan mengaktifkan tema tersebut.

/*
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
*/

Di antaranya,Text Domain Digunakan untuk pengekstrakan data yang berkaitan dengan proses internasionalisasi, dan merupakan penanda kritikal untuk memuat turun fail terjemahan seterusnya.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pengenalan Pembangunan Tema WordPress: Membina Laman Web Diperibadikan Daripada Kosong。

Fungsi fail templat teras (core template file)

Selain itu, style.cssTopik tersebut mesti mengandungi sekurang-kurangnya satu fail template PHP. Yang paling asas adalah… index.phpIa merupakan templat sandaran untuk semua halaman. Apabila WordPress tidak dapat mencari fail templat yang lebih khusus, ia akan menggunakan templat ini. Fail templat yang lain yang penting termasuk yang digunakan untuk menampilkan artikel individu. single.phpDigunakan untuk menampilkan senarai artikel. archive.phpDigunakan untuk menunjukkan kandungan halaman. page.php Serta definisi untuk bahagian atas dan bawah laman web (header dan footer). header.php 和 footer.php。

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

Membina hierarki templat asas untuk sebuah tema

WordPress menggunakan sistem hierarki templat untuk menentukan fail templat yang akan digunakan untuk halaman yang diminta pada masa tersebut. Sistem ini mengikuti prinsip dari khusus ke umum, membolehkan pembangun melakukan reka bentuk yang sangat disesuaikan untuk pelbagai jenis halaman.

Memahami turutan pemuatan templat.

Apabila pengguna mengakses sebuah artikel blog, WordPress akan mencari fail-fail templat berikut mengikut urutan:single-{post-type}-{slug}.php、single-{post-type}.php、single.phpDan akhir sekali ialah singular.php 和 index.phpSebagai contoh, untuk halaman yang bernama “about” (dengan jenis pos (post-type) sebagai “page”), WordPress akan mencari terlebih dahulu… page-about.phpKemudian cari. page.phpDan akhirnya, gunakanlah itu. index.php。

Mencipta fail templat yang sering digunakan.

Sebuah tema yang lengkap dengan semua fungsi biasanya akan mengandungi fail-fail template asas berikut:
- header.phpMengandungi pengisytiharan jenis dokumen.<head> Bahagian awal kawasan dan laman web (seperti menu navigasi). Gunakan dalam templat lain. get_header() Pengenalan fungsi.
- footer.phpTermasuk bahagian akhir laman web (seperti maklumat hak cipta). Gunakan get_footer() Pengenalan fungsi.
- index.phpTemplate utama, berfungsi sebagai sandaran akhir untuk semua halaman.
- page.phpDigunakan untuk menunjukkan halaman statik.
- single.phpDigunakan untuk menunjukkan satu artikel sahaja.
- archive.phpDigunakan untuk menunjukkan kategori, tag, penulis, tarikh, dan maklumat lain pada halaman arkib.

Dengan memisahkan bahagian-bahagian ini, kebolehgunaan semula (reusability) dan kemudahan penyelenggaraan (maintainability) kod dapat ditingkatkan dengan ketara. Dalam template gelung utama (main loop template), struktur yang serupa dengan yang berikut biasanya digunakan:

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Praktikal untuk Memulakan Pembangunan Tema WordPress: Membina Arkitektur Tema dan Templat Kustom dari Awal。

&lt;?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // 显示文章内容
        the_title( &#039;<h2>', '</h2>' );
        the_content();
    endwhile;
else :
    // 如果没有文章
    echo '<p>暂无内容。</p>';
endif;
?&gt;

Menggunakan fungsi dan hook untuk meningkatkan kefungsian tema

Sebuah tema yang cemerlang bukan sahaja perlu mempunyai antaramuka yang menarik, tetapi juga harus mempunyai keupayaan yang kuat untuk diperluas. Ini terutamanya dicapai melalui dua ciri teras WordPress: fungsi (functions) dan hook (hooks). Fail utama… functions.php Inilah tempat utama untuk menambahkan fungsi-fungsi tersebut.

File fungsi tema

functions.php Fail-fail ini akan dimuat secara automatik semasa tema dimulakan, dan digunakan untuk mendefinisikan fungsi-fungsi tema, mendaftar menu, bar sisi, serta menambah pelbagai penapis dan tindakan. Ia ibarat “otak” tema tersebut, yang mengawal logik tingkah laku tema.

Sebagai contoh, kod untuk mendaftar menu navigasi dan mengaktifkan fungsi gambar ringkasan artikel adalah seperti berikut:

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 
<?php
function my_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

    // 启用文章特色图像支持
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
?>

Action hooks telah digunakan di sini. after_setup_themeIa membenarkan kita untuk menjalankan fungsi kita sendiri setelah tetapan asas untuk topik tersebut selesai. my_theme_setup。

Memahami tindakan (actions) dan penapis (filters)

Terdapat dua jenis hook dalam WordPress: Action dan Filter. Hook Action membenarkan anda untuk memasukkan dan menjalankan kod anda pada titik masa yang tertentu, seperti menghasilkan sesuatu selepas kandungan artikel dipaparkan. Sebaliknya, Hook Filter membenarkan anda untuk mengubah data yang dihasilkan semasa proses operasi WordPress berjalan.

Sebagai contoh, gunakan penapis untuk mengubah panjang teks ringkasan:

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

<?php
function my_excerpt_length( $length ) {
    return 20; // 将摘要长度改为20个单词
}
add_filter( 'excerpt_length', 'my_excerpt_length' );
?>

Dan gunakan tindakan untuk menambahkan kenyataan hak cipta di akhir kandungan artikel:

&lt;?php
function my_post_footer( $content ) {
    if ( is_single() ) {
        $content .= &#039;<p class="copyright">本文版权归本站所有。</p>';
    }
    return $content;
}
add_filter( 'the_content', 'my_post_footer' );
?&gt;

Mengimplementasikan reka bentuk responsif dan penyesuaian tema

Tema WordPress moden harus bersifat responsif dan menyediakan pilihan penyesuaian yang mudah digunakan. Ini memerlukan penggabungan teknologi CSS dan API penyesuaian WordPress untuk dicapai.

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

Menggunakan CSS responsif dalam aplikasi

Reka bentuk responsif biasanya dilaksanakan melalui kueri media CSS. style.css Di dalamnya, anda boleh mendefinisikan gaya (styles) untuk pelbagai lebar skrin yang berbeza.

/* 基础样式 */
.container {
    width: 100%;
    padding: 20px;
}

/* 平板设备（宽度大于768px） */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 桌面设备（宽度大于992px） */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Mengintegrasikan tetapan penyesuaian khusus (customizer settings)

WordPress Customizer membenarkan pengguna untuk melihat pratonton masa nyata dan membuat perubahan pada tetapan tema. functions.phpAnda boleh menambahkan pelbagai pilihan untuk tema, seperti mengunggah logo, memilih warna, dan sebagainya.

Berikut adalah contoh pilihan untuk menambahkan teks hak cipta di bahagian kaki halaman:

<?php
function my_theme_customize_register( $wp_customize ) {
    // 添加一个设置项
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 我的网站。',
        'sanitize_callback' => 'sanitize_text_field',
    ) );

    // 为设置项添加一个控件（输入框）
    $wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'my-first-theme' ),
        'section'  => 'title_tagline', // 放在“站点身份”区域
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );
?>

Dalam fail templat footer.php Di dalamnya, anda boleh mengeluarkan nilai pilihan ini seperti berikut:

<p class="site-info">
    <?php echo esc_html( get_theme_mod( 'footer_copyright_text', '© 2026 我的网站。' ) ); ?>
</p>

RINGKASAN

Pembangunan tema WordPress merupakan kemahiran komprehensif yang menggabungkan pengetahuan pengaturcaraan PHP, struktur HTML, gaya CSS, dan API teras WordPress. Bermula dengan memahami konsep asas… style.css Bermula dengan fail templat, pelajari secara beransur-ansur sistem hierarki templat dan belajar cara menggunakannya. functions.php Menggunakan fungsi tambahan melalui “hooks” untuk akhirnya mencapai reka bentuk yang responsif dan pelbagai pilihan penyesuaian (customization options) merupakan laluan yang jelas untuk menjadi seorang pengembang tema yang berkualiti. Dalam proses pembangunan, mengikuti standard pengkodan rasmi dan amalan terbaik bukan sahaja dapat memastikan kualiti dan keselamatan tema, tetapi juga mewujudkan asas yang kukuh untuk penyelenggaraan dan peningkatan (iteration) pada masa hadapan.

FAQ - Soalan Lazim

Apa pengetahuan asas yang diperlukan untuk belajar pembangunan tema WordPress?

Disyorkan memiliki pengetahuan asas HTML dan CSS, yang merupakan asas untuk membina paparan laman web. Pada masa yang sama, pemahaman asas tentang PHP adalah perlu, kerana inti WordPress dan sistem templatnya dikendalikan oleh PHP. Pengetahuan awal tentang JavaScript akan sangat membantu semasa mengembangkan ciri interaktif pada peringkat kemudian.

Adakah fungsi-fungsi dalam fail functions.php untuk tema utama akan bertentangan dengan fungsi-fungsi dalam fail functions.php untuk subtema?

Tidak akan berlaku konflik; kedua-duanya akan dimuat turun. Subtopik tersebut… functions.php Fail tersebut akan berada di bawah topik induk (parent topic). functions.php Fail akan dimuat turun kemudian. Ini bermakna anda boleh menambahkan ciri-ciri baru dalam sub-topik atau menggantikan ciri-ciri yang telah ditakrifkan dalam topik induk (selagi fungsi dalam topik induk dinyatakan sebagai boleh digantikan). Ini merupakan cara yang disyorkan untuk membuat perubahan pada fungsi asas topik dengan selamat.

Bagaimana untuk menjadikan tema saya menyokong berbilang bahasa (internasionalisasi)?

Anda perlu menggunakan fungsi internasionalisasi (internationalization) WordPress untuk mengelilingi semua rentetan teks yang perlu dipaparkan pada antaramuka pengguna. Fungsi utama yang digunakan ialah `wpgettext()` dan `wpgettext_ex()` untuk terjemahan teks, serta `wpgettext_f()` untuk mengambil teks dari fail terjemahan. __() 和 _e() Fungsi, dan tentukan di mana ia perlu digunakan. style.css Di definisikan dalam Cina Text DomainKemudian, gunakan alat seperti Poedit untuk menjana fail template .pot, yang akan digunakan oleh penterjemah untuk membuat fail terjemahan .po dan .mo. Letakkan fail-fail tersebut dalam folder tema yang berkaitan. /languages/ Dalam direktori tersebut.

Apakah isu-isu undang-undang dan peraturan yang perlu diperhatikan semasa mengembangkan tema perniagaan?

Yang paling penting adalah untuk mematuhi lesen GNU GPL yang digunakan oleh WordPress itu sendiri. Ini bermakna bahagian kod PHP dalam tema anda mesti menggunakan lesen yang serasi dengan GPL. Biasanya, keseluruhan tema akan mewarisi lesen GPL tersebut. Selain itu, anda perlu memastikan bahawa sumber-sumber pihak ketiga yang digunakan (seperti ikon, fon, perpustakaan JavaScript) mempunyai lesen komersial yang sesuai. Dari segi standard kod, anda harus mengikuti piawaian kod rasmi WordPress, dan memastikan tema anda lulus pemeriksaan asas oleh plugin Theme Check, untuk meningkatkan kemungkinan tema tersebut disertakan dalam direktori rasmi 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: