Bermula dari kosong: Panduan Langsung untuk Membangunkan Tema WordPress yang Dikustomisasi

Membangunkan tema WordPress yang diperibadikan adalah cara terbaik untuk memahami dengan lebih mendalam rangka kerja WordPress dan meningkatkan kemahiran pembangunan bahagian hadapan (front-end). Berbeza dengan menggunakan tema siap sedia, membina dari awal memberi anda kawalan penuh, membolehkan anda mencipta laman web yang unik dan sepenuhnya memenuhi keperluan projek anda. Artikel ini akan membimbing anda melalui proses pembinaan tema WordPress yang asas tetapi lengkap dengan fungsi-fungsi yang diperlukan.

Pengaturan persekitaran pembangunan dan struktur tema

Sebelum anda mula menulis kod, anda memerlukan sebuah persekitaran pembangunan setempat. Ini biasanya termasuk satu set perisian pelayan setempat (seperti XAMPP, MAMP atau Local by Flywheel), sebuah editor kod (seperti VS Code), dan versi terkini WordPress.

Pertama sekali, dalam WordPress. <code>wp-content/themes</code> Dalam direktori tersebut, buatlah sebuah folder untuk topik baru anda, sebagai contoh: <code>my-custom-theme</code>Sebuah tema WordPress yang paling asas memerlukan sekurang-kurangnya dua fail utama.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Tutorial lengkap untuk pembangunan tema WordPress: Membina tema kustom dari awal.。

Mencipta fail skrip gaya (style sheet)

Fail pertama yang diperlukan adalah… style.cssFail ini bukan sahaja mendefinisikan gaya tema tersebut, tetapi juga mengandungi metadata yang menerangkan tema kepada WordPress dalam bentuk ulasan pada bahagian kepala fail (header comments). Sila tambahkan ulasan berikut di bahagian atas fail:

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.

Lawati halaman

/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

“Text Domain” digunakan untuk tujuan pengekstrakan kandungan ke dalam bahasa yang berbeza (internationalization), dan ia mesti selaras dengan nama folder tema anda. Selepas itu, anda boleh menulis semua peraturan CSS (Cascading Style Sheets) dalam fail tersebut.

Create a core function file

Fail kedua yang diperlukan adalah functions.phpIni merupakan “otak” bagi tema tersebut, yang digunakan untuk memasukkan fail gaya (style sheets), fail JavaScript, mendaftarkan menu, bar sisi (sidebars), dan ciri-ciri lain, serta untuk menambahkan pelbagai sokongan fungsi.

Asas functions.php Pengenalan biasanya bermula seperti berikut, yang digunakan untuk menambahkan fail gaya (style sheet) ke dalam barisan tunggu (queue):

<?php
// 将主题样式表加入队列
function my_custom_theme_enqueue_styles() {
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );

Pada masa ini, walaupun belum ada sebarang fail templat, tema anda sudah boleh muncul dalam senarai “Appearance” -> “Themes” di panel pentadbiran WordPress dan boleh diaktifkan. Setelah diaktifkan, laman web akan menunjukkan halaman kosong kerana kekurangan fail templat untuk menentukan struktur halaman tersebut.

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

Membina fail templat asas

Fail templat mengawal cara bahagian-bahagian berbeza pada laman web dipaparkan. WordPress menggunakan struktur hierarki templat untuk menentukan templat mana yang akan digunakan untuk permintaan semasa.

Membuat kepala dan kaki halaman untuk seluruh laman web

Amalan terbaik adalah untuk memisahkan kod kepala (header) dan kod kaki (footer) yang digunakan secara umum. Buatlah kod tersebut secara berasingan. header.php Fail tersebut biasanya mengandungi pengisytiharan jenis dokumen (document type declaration). Kawasan tersebut, serta proses pembukaannya… Tag dan navigasi utama.

<!DOCTYPE html>
<html no numeric noise key 1007>
<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 1004>
    <header>
        <h1><a href="/ms/</?php echo esc_url( home_url( '/' ) ); ?>">\n</a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
        <nav>
            'primary' ) ); ?&gt;
        </nav>
    </header>
    <main>

Oleh itu, ciptalah. footer.php Mari tutupnya. header.php Kontainer utama dan tag yang dibuka dalam sistem tersebut.

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%.

Lawati halaman

    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

wp_head() 和 wp_footer() Ini merupakan fungsi kritikal yang membenarkan WordPress core, plugin, dan tema sendiri untuk memasukkan kod yang diperlukan (seperti gaya dan skrip) pada lokasi-lokasi yang ditentukan.

Mencipta indeks dan templat artikel

index.php Ini adalah fail penyesuaian (configuration file) untuk struktur hierarki templat, dan juga merupakan titik permulaan bagi tema kita. Ia digunakan untuk… get_header() 和 get_footer() Untuk memperkenalkan modul-modul yang terpisah.

<article>
            <h2><a href="/ms/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div><?php the_excerpt(); ?></div>
        </article>
    <p> </p>  
 <p></p>
    <p>Tiada artikel tersedia.</p>

Untuk menunjukkan artikel individu secara berasingan, buatlah… single.phpStrukturnya adalah seperti… index.php Serupa, tetapi menggunakan… the_content() Untuk menunjukkan keseluruhan teks.

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

<article>
            <h1><?php the_title(); ?></h1>
            <div><?php the_content(); ?></div>
        </article>

Meningkatkan fungsi tema

Setelah mempunyai struktur asas, kita kemudian… functions.php Tambahkan lebih banyak ciri yang berguna untuk menjadikan tema tersebut lebih profesional dan mudah digunakan.

Daftar menu navigasi dan bar sisi

在 functions.php Tambahkan kod berikut untuk mendaftar kawasan menu navigasi utama dan kawasan sidebar (ruang alat tambahan):

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.

Lawati halaman

// 注册导航菜单
function my_custom_theme_register_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_register_menus' );

// 注册侧边栏小工具区域
function my_custom_theme_register_sidebar() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-custom-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'my-custom-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_custom_theme_register_sidebar' );

Selepas pendaftaran, anda perlu memanggilnya dalam templat. Sebagai contoh, header.php Kita sudah menggunakannya di sini. wp_nav_menu Menu “primary” telah dipanggil. Untuk menunjukkan alat tambahan (gadget) di bar sisi, anda boleh… sidebar.php Cipta templat sidebar dalam “middle” (bahagian tengah), dan kemudian… index.php 或 single.php Gunakan dalam bahasa Cina get_sidebar() Pengenalan.

Menambahkan sokongan untuk ciri tema.

WordPress menyediakan banyak ciri terbina dalam, dan beberapa daripadanya perlu diisytiharkan secara eksplisit sebagai disokong sebelum ia boleh digunakan dalam tema. Sebagai contoh, sokongan untuk menambahkan gambar kecil (thumbnail) kepada artikel, sokongan untuk logo yang diperibadikan, dan sokongan untuk tag HTML5.

// 添加主题功能支持
function my_custom_theme_setup() {
    // 支持文章缩略图
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 对搜索表单、评论表单等使用HTML5标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 在管理后台提供<title>标签支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Setelah sokongan “post-thumbnails” ditambahkan, anda kini boleh menggunakannya dalam pengulangan artikel (article loop). the_post_thumbnail() Fungsi tersebut kini digunakan untuk menghasilkan imej-imej yang menarik.

Reka bentuk gaya dan susun atur responsif

Sebuah tema yang menarik dan boleh disesuaikan dengan pelbagai peranti adalah sangat penting. Anda boleh… style.css Semua gaya reka bentuk harus ditulis dalam kod tersebut. Adalah disyorkan untuk mengamalkan strategi yang mengutamakan penggunaan peranti mudah alih (mobile-first).

Gaya asas dan pemformatan

Pertama sekali, tetapkan beberapa gaya penampilan dan susunan asas untuk memastikan keseragaman dalam persembahan pada pelbagai pelayar web.

/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

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

/* 头部样式 */
header {
    background: #f8f9fa;
    padding: 2rem 0;
    border-bottom: 1px solid #dee2e6;
}

/* 导航菜单样式 */
.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.main-navigation a {
    text-decoration: none;
    color: #007bff;
}

Mengimplementasikan reka bentuk responsif

Gunakan media queries untuk menyesuaikan reka letak pada saiz skrin yang berbeza. Sebagai contoh, apabila skrin menjadi lebih kecil, ubah menu navigasi kepada susunan menegak.

/* 移动端样式 */
@media (max-width: 768px) {
    .main-navigation ul {
        flex-direction: column;
        gap: 0.5rem;
    }

.container {
        padding: 0 15px;
    }

article {
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #eee;
    }
}

Pastikan imej juga bersifat responsif:

img {
    max-width: 100%;
    height: auto;
}

RINGKASAN

Dengan langkah-langkah di atas, anda telah berjaya membuat tema WordPress yang diperibadikan dengan ciri-ciri yang lengkap. Kita mulakan dengan mengkonfigurasi persekitaran pembangunan dan membuat komponen asas untuk tema tersebut. style.css 与 functions.php Pada awal fail tersebut, proses pembinaan fail templat asas telah dilakukan secara beransur-ansur.header.php, footer.php, index.php, single.phpKita juga telah meningkatkan fungsi praktikal tema tersebut, seperti menu pendaftaran, bar sisi, dan sokongan untuk imej-imej khas. Akhirnya, kita telah menambah gaya asas dan reka bentuk responsif kepada tema tersebut, agar ia dapat dipaparkan dengan baik pada pelbagai peranti. Ini hanyalah satu permulaan; anda boleh terus meneroka dan mencipta lebih banyak templat halaman berdasarkan asas yang telah kita bangunkan.page.phpTemplate untuk pengarkiban (Archive Template)archive.phpTemplate pencarian (Search Template)search.php), malah menggunakan sub-topik untuk membuat penyesuaian, sehingga mencipta laman web yang lebih kuat dan profesional.

FAQ - Soalan Lazim

Apakah teknik yang perlu dikuasai untuk mengembangkan tema WordPress?

Untuk mengembangkan sebuah tema asas untuk WordPress, anda perlu menguasai HTML, CSS, dan PHP. HTML digunakan untuk membina struktur halaman, CSS untuk reka bentuk dan susun atur, manakala PHP merupakan komponen utama yang menggerakkan kandungan dinamik dalam WordPress. Selain itu, pengetahuan asas tentang JavaScript akan membantu anda menambahkan ciri-ciri interaktif. Memahami konsep-konsep asas WordPress, seperti struktur templat, pengulangan (The Loop), hook (Hooks), dan fungsi (Functions), adalah penting untuk kejayaan dalam pembangunan tema.

Apa fungsi fail functions.php dalam tema tersebut?

functions.php Fail tersebut merupakan pusat fungsi untuk tema WordPress. Peran utamanya termasuk: menambahkan fail CSS dan JavaScript ke dalam barisan pemprosesan, mendaftarkan menu navigasi dan kawasan alat tambahan pada sisi halaman, menyatakan fungsi yang disokong oleh tema (seperti gambar kecil artikel, Logo yang boleh disesuaikan), mendefinisikan fungsi khusus, serta mengubah tingkah laku lalai WordPress melalui pengait tindakan (action hooks) dan pengait penapis (filter hooks). Dengan ini, anda dapat memperluas dan menyesuaikan fungsi tema dengan ketara tanpa perlu mengubah fail asas WordPress.

Bagaimana untuk menjadikan tema saya menyokong berbilang bahasa?

Untuk menjadikan sesuatu tema menyokong berbilang bahasa (internasionalisasi), terdapat dua langkah utama yang perlu diikuti. Pertama, style.css Untuk “Text Domain” dan semua tempat di mana fungsi terjemahan digunakan, gunakan domain teks yang konsisten, yang biasanya sama dengan nama folder tema. Selain itu, semasa menyediakan rentetan yang akan diterjemahkan, gunakan fungsi terjemahan WordPress. __()、_e() 或 _x()Kemudian, anda boleh menggunakan alat seperti Poedit untuk membuatnya. .pot Fail templat, dan jana yang bersesuaian dengannya. .po 和 .mo Terjemahkan fail tersebut. Letakkan fail terjemahan di dalam folder yang berkaitan dengan topik tersebut. /languages Dalam direktori tersebut, WordPress akan memuatkan fail-fail tersebut secara automatik berdasarkan tetapan bahasa laman web tersebut.

Apa kelebihan mencipta sub-topik berbanding dengan mengubah suai topik utama secara langsung?

Mencipta sub-topik merupakan amalan terbaik untuk memodifikasi atau memperluas fungsi sub-topik induk yang sedia ada. Kelebihan utamanya terletak pada aspek keselamatan: apabila sub-topik induk diperbaharui, anda boleh mengemaskini sub-topik tersebut dengan selamat, dan sebarang pengubahsuaian yang anda lakukan pada sub-topik (seperti gaya, fungsi, atau templat) tidak akan hilang. Sub-topik hanya memerlukan satu… style.css Dan satu yang boleh dipilih (optional). functions.php Fail tersebut boleh berfungsi dengan baik. Dalam sub-topik tersebut… style.css Dalam, melalui @import Atau gunakan kaedah pengaturan barisan (queueing) yang lebih baik untuk memasukkan gaya tema induk, kemudian tambahkan peraturan CSS anda sendiri untuk menutupi gaya tersebut. Subtema tersebut… functions.php Ia akan dimuat turun bersama-sama dengan fail dengan nama yang sama dalam tema induk, dan bukan menggantikannya. Ini membolehkan anda menambahkan ciri-ciri baru dengan selamat.