Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Panduan permulaan untuk pembangunan tema WordPress: Membina tema kustom pertama anda dari awal.

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

Konsep asas pembangunan tema WordPress

Sebelum mula menulis kod, adalah sangat penting untuk memahami komponen asas sebuah tema WordPress. Sebuah tema pada dasarnya merupakan sebuah folder yang mengandungi satu siri fail yang mengikut peraturan tertentu, dan fail-fail ini bersama-sama menentukan penampilan serta beberapa fungsi laman web tersebut. Konsep utamanya adalah “lapisan templat” (template hierarchy), di mana WordPress akan secara automatik memilih dan memuatkan fail templat yang sesuai berdasarkan jenis halaman yang sedang diakses (seperti halaman utama, halaman artikel, atau halaman khusus).

Setiap topik mesti mengandungi dua fail utama:style.css 和 index.php。style.css Tidak hanya menyediakan gaya (style), tetapi juga nota pada bahagian kepala fail (file header) mengandungi maklumat meta tentang tema tersebut, seperti nama tema, penulis, dan deskripsi. Inilah satu-satunya cara WordPress mengenal pasti sebuah tema.index.php Ia merupakan fail templat lalai, dan apabila templat yang lebih khusus tidak wujud, WordPress akan kembali menggunakan fail templat ini.

Topik berinteraksi dengan inti WordPress melalui Tag Templat (Template Tags). Ini adalah fungsi PHP yang digunakan untuk mendapatkan dan memaparkan kandungan secara dinamik daripada pangkalan data, sebagai contoh… the_title() Tajuk Artikel:the_content() Memahami dan menggunakan fungsi-fungsi ini dengan betul adalah kunci untuk penyampaian kandungan dinamik.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan lengkap untuk pembangunan tema WordPress: dari permulaan hingga mahir.。

Membina persekitaran pembangunan dan mencipta struktur tema

Sebuah persekitaran pembangunan yang cekap dan terpisah merupakan langkah pertama dalam pembangunan tema. Saya mengesyorkan penggunaan perisian pelayan tempatan seperti XAMPP, MAMP, atau Laragon, yang membolehkan anda membangunkan persekitaran PHP dan MySQL dengan cepat pada komputer anda. Pasang fail-fail asas WordPress ke dalam direktori akar pelayan tempatan (seperti…) htdocs 或 wwwDalam dokumen tersebut.

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

Seterusnya, dalam direktori pemasangan WordPress… wp-content/themes/ Di bawah laluan tersebut, buatlah sebuah folder untuk tema baru anda, contohnya dengan nama “NewTheme”. my-first-themeDalam folder ini, buatlah fail pertama yang diperlukan:style.cssKomen di bahagian atas mesti mengikut format berikut dengan ketat:

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

Setelah menyimpan fail tersebut, masuk ke halaman “Appearance” -> “Themes” di panel pentadbiran WordPress. Anda sepatutnya dapat melihat tema yang anda buat dan boleh mengaktifkannya.

Sekarang, buatlah fail kedua yang diperlukan:index.phpIni adalah fail templat utama untuk tema tersebut. Pada peringkat awal, anda hanya perlu memasukkan struktur HTML5 asas dan satu gelung (loop) yang mudah untuk tujuan ujian.

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>
    <header>
        <h1>My custom theme</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                ?>
                <article>
                    <h2><?php the_title(); ?></h2>
                    <div><?php the_content(); ?></div>
                </article>
                <?php
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>Maklumat di bahagian bawah laman web</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Penerangan Terperinci Fail Templat Inti dan Fungsi

Seiring dengan peningkatan kerumitan tema, anda perlu memisahkan kod untuk fungsi-fungsi yang berbeza ke dalam fail-fail templat yang khusus. Sistem hierarki templat WordPress akan secara automatik mencari dan memuatkan templat yang paling sesuai dengan halaman semasa.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Tutorial langkah demi langkah untuk membantu anda mencipta tema WordPress kustom yang kuat.。

Mencipta header.php Fail, akan index.php 中 <head> Sebahagian dan <header> Sebahagian kod telah dipotong dan dimasukkan ke dalamnya. Kemudian… index.php Gunakan di bahagian atas. get_header() Fungsi digunakan untuk memperkenalkannya. Dengan cara yang sama, cipta juga. footer.php Simpan maklumat di bahagian bawah, dan gunakannya. get_footer() Introduce. Create. sidebar.phpDan gunakan get_sidebar() Pengenalan: Ini membolehkan pengmodulan dan penggunaan semula kod.

Untuk jenis halaman yang berbeza, anda boleh membuat templat yang khusus:
* single.phpDigunakan untuk menunjukkan satu artikel sahaja.
* page.phpDigunakan untuk menunjukkan halaman yang berasingan.
* front-page.phpJika ia wujud, ia akan dijadikan halaman utama yang statik.
* home.phpDigunakan untuk menunjukkan indeks artikel blog (apabila halaman utama disetkan kepada “Artikel Terkini”).
* archive.phpDigunakan untuk menunjukkan kategori, tag, penulis, dan halaman arkib yang lain.
* 404.phpDigunakan untuk menunjukkan halaman ralat 404.

Dalam fail templat, struktur yang paling penting adalah “Lingkaran” (The Loop). Ia merupakan blok kod PHP yang digunakan oleh WordPress untuk mengambil dan memaparkan artikel dari pangkalan data. Struktur asasnya 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 
\n
    <!-- 在这里输出文章内容，使用 the_title(), the_content() 等函数 -->
<?php endwhile; else : ?>
    <p>Maaf, tiada kandungan yang ditemui.</p>
<?php endif; ?>

fungsi bloginfo() 或 get_bloginfo() Digunakan untuk mendapatkan maklumat asas tentang laman web, seperti bloginfo( 'name' ) Tajuk laman web:bloginfo( 'stylesheet_url' ) Keluarkan URL untuk jadual gaya tema.

Pembesaran Ciri-Ciri Gaya, Skrip, dan Tema

Untuk memastikan gaya tema dimuat dengan betul dan mengelakkan konflik, anda perlu menggunakan fungsi yang disediakan oleh WordPress untuk menambahkan fail gaya dan skrip ke dalam barisan tunggu (queue), bukan dengan menulisnya terus dalam kod HTML. <link> 或 <script> Tag. Ini adalah melalui tema. functions.php Dilaksanakan melalui fail.

Mencipta functions.php Fail ini digunakan untuk menambah ciri-ciri khusus tema, mengubah tingkah laku lalai, atau mendaftarkan gaya skrip. wp_enqueue_style() 和 wp_enqueue_script() Fungsi:

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan lengkap untuk pembangunan tema WordPress: Membina tema kustomisasi berprestasi tinggi dari awal.。

<?php
function my_first_theme_scripts() {
    // 注册并排入主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 注册并排入一个自定义 CSS 文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );

// 注册并排入一个 JavaScript 文件，依赖于 jQuery
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

在 functions.php Di dalamnya, juga boleh digunakan… add_theme_support() Fungsi ini digunakan untuk menyatakan ciri-ciri yang disokong oleh tema tersebut, seperti imej khas untuk artikel, logo yang boleh disesuaikan, format artikel, dan lain-lain.

// 支持文章特色图像
add_theme_support( 'post-thumbnails' );

// 支持自定义 Logo
add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
) );

// 在文章编辑器中添加编辑器样式
add_editor_style( 'editor-style.css' );

Gaya akhir sesuatu tema biasanya ditulis dalam… style.css Atau dalam fail CSS lain yang dimuat melalui fungsi. WordPress akan secara automatik menambahkan banyak kelas CSS yang berguna untuk elemen `body` dan artikel, seperti… home, single, page-id-{ID} Dan lain-lain, anda boleh menggunakan nama kelas ini untuk menulis gaya yang disasarkan.

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

RINGKASAN

Dengan mengikuti langkah-langkah dalam artikel ini, anda kini telah memahami proses asas untuk membina sebuah tema kustom WordPress dari awal. Bermula dari memahami konsep asas tema dan hierarki template, membina persekitaran yang sesuai, mencipta fail-fail yang diperlukan, kemudian menganalisis template utama, memahami penggunaan loop dan tag template, dan akhirnya belajar cara untuk… functions.php Menambahkan gaya, skrip, dan ciri-ciri tema dengan betul adalah langkah asas dalam pembangunan tema. Proses ini walaupun kelihatan mudah, tetapi ia meliputi struktur asas pembangunan tema. Selepas ini, anda boleh meneroka lebih lanjut konsep seperti pembangunan sub-tema, penyesuaian jenis artikel, pilihan tema yang lebih canggih, serta integrasi dengan platform e-dagang seperti WooCommerce, untuk terus memperkaya dan memperbaiki kemahiran pembangunan tema anda.

FAQ - Soalan Lazim

Adakah pemahaman tentang PHP diperlukan untuk mengembangkan tema (themes)??

Ya, PHP merupakan bahasa pengaturcaraan utama untuk WordPress. Fail tema pada dasarnya adalah fail PHP yang menggabungkan kod HTML dengan fungsi PHP khusus untuk WordPress (tag templat) untuk menjana halaman secara dinamik. Walaupun menggunakan alat pembina halaman (page builder), pemahaman tentang PHP masih diperlukan untuk menyesuaikan ciri-ciri lanjutan dan menyelesaikan masalah yang timbul.

Bolehkah fail style.css untuk tema tersebut diubah namanya?

Tidak boleh.style.css Ini adalah fail yang wajib ada untuk WordPress mengenali sebuah tema, dan namanya adalah tetap. Semua maklumat meta tentang tema (seperti nama, pengarang) ditentukan dalam ulasan di bahagian atas fail tersebut. Namun, anda masih boleh membuat perubahan pada maklumat tersebut. functions.php Fungsi tersebut bertanggungjawab untuk mendaftarkan dan memuatkan fail CSS dengan nama yang berbeza untuk melengkapi gaya (style) yang diperlukan.

Bagaimana untuk menjadikan tema tersebut menyokong bahasa Cina atau terjemahan?

Pertama sekali, style.css Set the header comments correctly in the document. Text Domain(Sebagai contoh) my-first-theme), dan gunakannya dalam semua rentetan teks yang perlu diterjemahkan. __() 或 _e() Fungsi tersebut kemudian dibungkus (wrapped). Selepas itu, alat seperti Poedit digunakan untuk memindai tema tersebut dan menghasilkan kandungan yang diperlukan. .pot Fail templat, dan buat bahasa yang sesuai (seperti…) zh_CN.poFail terjemahan untuk (…) kemudian dikompilasi menjadi .mo Fail tersebut diletakkan dalam folder yang berkaitan dengan topik tersebut. languages Dalam folder tersebut.

Bagaimana untuk menambahkan fungsi menu pada tema yang dibuat sendiri?

Pertama sekali, dalam topik ini… functions.php Dokumen tersebut menggunakan register_nav_menus() Tempat pendaftaran fungsi. Kemudian, dalam fail templat (seperti…) header.phpDi tempat-tempat dalam dokumen tersebut di mana anda ingin menunjukkan menu, gunakan kod berikut: wp_nav_menu() Fungsi tersebut telah mendaftarkan menu yang tersedia, dan pengguna kini boleh mengkonfigurasi kandungan menu untuk lokasi-lokasi tersebut dalam panel “Appearance” -> “Menus” di bahagian pentadbiran 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: