Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Panduan Permulaan Pembangunan Tema WordPress: Membina Tema Pertama Anda Dari Kosong

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

Memasuki dunia WordPress dan mengembangkan tema sendiri merupakan satu pencapaian yang sangat menggembirakan. Ia bukan sahaja membolehkan anda mengawal sepenuhnya penampilan dan fungsi laman web anda, tetapi juga merupakan cara terbaik untuk memahami dengan lebih mendalam cara WordPress berfungsi secara asas. Panduan ini akan membimbing anda dari awal, untuk membina sebuah tema yang asas tetapi lengkap, meliputi setiap langkah penting daripada struktur fail hingga ke templat-templat asas.

Pembinaan persekitaran pembangunan dan struktur tema

Sebelum mula menulis kod, anda memerlukan persekitaran pembangunan yang sesuai. Saya mengesyorkan penggunaan perisian pelayan tempatan seperti XAMPP, WAMP, atau MAMP, yang membolehkan anda dengan cepat membina persekitaran yang merangkumi Apache, MySQL, dan PHP pada komputer anda sendiri. Selain itu, editor kod yang berkesan, seperti Visual Studio Code, Sublime Text, atau PHPStorm, juga sangat penting.

Sebuah tema WordPress yang paling asas memerlukan sekurang-kurangnya dua fail:style.css和index.php。style.cssIa bukan sekadar sebuah fail gaya (style sheet), tetapi juga merupakan “kad pengenalan” bagi tema tersebut. WordPress mengenal pasti tema yang anda gunakan dengan membaca maklumat komen yang terdapat di bahagian atas fail tersebut. Pertama sekali, anda perlu mencari fail tersebut dalam direktori pemasangan WordPress anda yang terletak di lokasi setempat.wp-content/themesDalam folder tersebut, buatlah sebuah folder baru, sebagai contoh…my-first-themeKemudian, cipta sebuah folder di dalam folder tersebut.style.cssDokumen.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai pembangunan tema WordPress: panduan lengkap dari nol hingga satu dan teknik-teknik praktikal.。

Definisi maklumat topik (Topic Information Definition)

在style.cssDi bahagian atas fail, anda perlu menambahkan blok ulasan khusus untuk mendefinisikan meta maklumat topik 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 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://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
*/

Di antaranya,Theme Name和Text DomainIni adalah item wajib. Medan teks digunakan untuk terjemahan antarabangsa, dan biasanya sama dengan nama folder tema.

Pembuatan fail templat teras

index.phpIni merupakan templat lalai untuk topik tersebut, dan juga templat sandaran yang paling penting. Apabila WordPress tidak dapat menemui fail templat yang lebih khusus (seperti…single.php, page.phpKetika diperlukan, ia akan digunakan. Anda boleh meletakkan struktur HTML yang paling asas dan beberapa fungsi WordPress di dalamnya untuk mendapatkan dan menunjukkan kandungan.

Core template file and loop

Sistem tema WordPress adalah berdasarkan penggunaan templat, di mana jenis-jenis halaman yang berbeza dikawal oleh fail-fail templat yang berbeza. Memahami dan membuat fail-fail templat asas ini adalah kunci dalam pembangunan tema.

Konsep yang paling penting adalah “WordPress Loop”. Ia merupakan struktur kod PHP yang digunakan untuk mengambil artikel (Posts) dari pangkalan data dan memaparkannya satu persatu. Hampir semua fail templat yang digunakan untuk memaparkan kandungan memerlukan penggunaan loop ini.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Cara Membuat Tema WordPress yang Profesional: Panduan Lengkap Dari Awal Hingga Siap Digunakan。

Pembinaan Templat Halaman Utama

index.phpFail tersebut sepatutnya mengandungi kerangka HTML yang lengkap serta kod yang digunakan untuk pengulangan (looping). Sebuah contoh yang mudah adalah seperti berikut:

<!DOCTYPE html>
<html no numeric noise key 1021>
<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 1018>
    <p>
    <header>
        <h1><a href="/ms/</?php echo esc_url( home_url( '/' ) ); ?>">\n</a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>
    <main>
        
                <article id="post-<?php the_ID(); ?>" no numeric noise key 1010>
                    <h2><a href="/ms/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="entry-content">
                        <?php the_excerpt(); ?>
                    </div>
                </article>
            
            <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
        <?php endif; ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Fail ini mendefinisikan struktur asas halaman web, dan menggunakan pengulangan untuk memaparkan senarai artikel di kawasan utama. Fungsi-fungsi seperti…the_title()、the_excerpt()Digunakan untuk mengeluarkan kandungan artikel.wp_head()和wp_footer()Ini adalah hook yang sangat penting, yang digunakan untuk membenarkan WordPress core, plugin, dan skrip lain untuk memasukkan kod yang diperlukan.

Artikel dan Templat Halaman

single.phpDigunakan untuk menunjukkan satu artikel sahaja.page.phpDigunakan untuk menunjukkan halaman individu. Strukturnya serupa, tetapi biasanya…single.phpIa akan mengandungi elemen-elemen seperti kategori dan tag, dan…page.phpJadi, lebih ringkas. Anda boleh mula dengan menyalin…index.phpMula membuatnya, kemudian gantikan kandungan di dalam gelung tersebut dengan…the_content()Untuk menunjukkan keseluruhan teks.

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

Mengintegrasikan gaya (styles) dan skrip (scripts)

Tema moden memerlukan reka bentuk yang menarik dan ciri interaktif yang baik. WordPress menyediakan fungsi standard untuk memasukkan fail CSS dan JavaScript dengan selamat, dan bukan dengan menggunakan kod secara langsung dalam HTML.<link>或<script>Tag.

Pembuatan dan Penggunaan Fail Fungsi

Anda perlu membuat satu yang bernamafunctions.phpFail ini bukanlah fail templat, tetapi merupakan fail “peningkatan fungsi” untuk tema tersebut, yang digunakan untuk menambahkan ciri-ciri baru, mengaktifkan fungsi tertentu, atau mengubah tingkah laku lalai WordPress. Kita akan mendaftarkan skrip dan fail gaya (style sheets) di sini.

Menyisipkan sumber dengan selamat

在functions.phpDi dalamnya, gunakanwp_enqueue_style()和wp_enqueue_script()fungsi. Satu amalan standard ialah mencipta satu fungsi, kemudian melaluiwp_enqueue_scriptsHook ini digunakan untuk memanggil fungsi tersebut.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Terakhir: Cara Membangunkan Tema WordPress Profesional Dari Kosong。

<?php
function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入自定义CSS文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 引入JavaScript文件
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Kod ini memastikan bahawa fail-fail CSS dan JS dimuat turun pada masa yang sesuai.get_stylesheet_uri()Fungsi tersebut akan mengembalikan tema yang berkaitan.style.cssLaluan fail.get_template_directory_uri()Maka, kembalikan URL direktori topik tersebut.

Komponen Templat dan Fungsi Tema

Apabila topik menjadi semakin kompleks, mengmodulkan segmen kod yang berulang merupakan amalan yang baik. WordPress menyediakan ciri-ciri “Template Parts” (Bahagian Templat) dan “Navigation Menus” (Menu Navigasi) untuk membantu ini.

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

Mencipta komponen templat yang boleh digunakan semula

Sebagai contoh, anda boleh memisahkan bahagian header dan footer laman web ke dalam fail-fail yang berasingan. Anda boleh membuatnya dengan mengikuti langkah-langkah yang sesuai.header.php和footer.phpFail, akanindex.phpPotong kod yang bersesuaian dari bahagian “Cina” dan letakkannya di sini. Kemudian, gunakan panggilan fungsi berikut di tempat asal untuk mengaktifkannya:

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

Anda juga boleh membuat komponen yang lebih serba guna, seperti…content.php或post-item.phpGunakan dalam gelung.get_template_part()Fungsi yang digunakan untuk memuatkan kandungan tersebut telah meningkatkan dengan ketara kebolehgunaan semula kod (reusability) kod tersebut.

Aktifkan menu navigasi yang disesuaikan

Sistem menu WordPress sangat berkuasa. Pertama sekali, anda perlu…functions.phpGunakan dalam bahasa Cinaregister_nav_menus()Fungsi untuk mendaftar lokasi hidangan.

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Kemudian, dalam fail templat (seperti…)header.phpJika anda ingin menunjukkan kedudukan menu dalam aplikasi anda, gunakanwp_nav_menu()Fungsi tersebut digunakan untuk mengeluarkan hasilnya.

<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
) );
?>

Sekarang, pengguna boleh membuat menu dalam bahagian “Appearance” -> “Menus” di panel pentadbiran WordPress, dan mengaitkannya ke kedudukan “Primary Menu”.

RINGKASAN

Dengan panduan ini, anda telah menyelesaikan keseluruhan proses daripada sebuah folder kosong ke sebuah tema WordPress yang mempunyai fungsi asas. Anda telah belajar cara membuat fail-fail yang diperlukan.style.css和index.phpSaya telah memahami fungsi utama pengulangan (loop) dalam WordPress, dan telah membina sesuatu berdasarkan pemahaman tersebut.single.php和page.phpAnda juga telah mempelajari cara untuk…functions.phpMenambah gaya dan skrip dengan selamat, serta cara menggunakan komponen templat dan sistem menu navigasi untuk mengatur kod dan meningkatkan fungsi tema. Ini hanyalah satu permulaan; seterusnya, anda boleh meneroka ciri-ciri yang lebih canggih seperti bar sisi, kawasan alat tambahan, jenis artikel yang boleh disesuaikan, dan API penyesuaian tema, untuk terus memperkaya dan menyempurnakan tema anda.

FAQ - Soalan Lazim

Adakah pembangunan tema mesti bermula dari kosong?

Tidak semestinya. Bagi pemula, memulakan dari kosong adalah cara terbaik untuk belajar. Namun, dalam projek sebenar, anda boleh memilih untuk menggunakan tema kosong rasmi (seperti Underscores), rangka kerja (seperti Genesis) atau tema asas (seperti _s) sebagai titik permulaan. Tema-tema ini telah disediakan dengan struktur kod asas yang kukuh, membolehkan anda lebih fokus pada pembangunan reka bentuk dan logik perniagaan.

Adakah fail index.php penting?

Ya,index.phpIni adalah fail templat yang diperlukan untuk tema WordPress. Ia merupakan barisan pertahanan terakhir dalam hierarki templat; sekiranya fail templat yang lebih khusus (seperti…)archive.php, search.phpJika entiti tersebut tidak wujud, WordPress akan menggunakan alternatif yang tersedia.index.phpUntuk menunjukkan halaman tersebut, pastikan bahawa laman web sentiasa mempunyai kandungan yang dipaparkan.

Bagaimana untuk membaiki masalah yang timbul semasa pembangunan tema saya?

Pertama sekali, pastikan bahawa anda telah…wp-config.phpMod WP_DEBUG telah diaktifkan dalam fail tersebut.define( ‘WP_DEBUG’, true );Baris ini ditetapkan kepada “true”. Ini akan memastikan ralat PHP dan amaran WordPress dipaparkan terus di halaman web, memudahkan anda untuk mengenal pasti masalah. Pada masa yang sama, menggunakan alat pembangun dalam pelayar (buka dengan menekan F12) untuk memeriksa ralat CSS dan JavaScript juga merupakan langkah yang sangat penting.

Bolehkah saya melakukan apa-apa yang saya mahu dalam fail functions.php untuk tema tersebut?

Secara teori, ia boleh dilakukan, tetapi amalan terbaik adalah hanya menambahkan kod yang berkaitan secara langsung dengan penampilan dan fungsi tema tersebut. Fungsi-fungsi yang kompleks yang berkaitan dengan logik perniagaan asas atau operasi data sebaiknya dibangunkan sebagai plugin yang berasingan. Kelebihan daripada ini adalah apabila pengguna menukar tema, fungsi-fungsi tersebut tidak akan hilang, yang meningkatkan kemudahan penyelenggaraan dan kebolehgunaan semula kod.

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: