Laman utama/Pengetahuan/WordPress/Butir-butir kandungan

Tutorial langkah demi langkah untuk membantu anda mencipta tema WordPress kustom yang kuat.

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

Mengapa memilih untuk membina tema WordPress dari awal?

Dalam dunia sumber terbuka, terdapat banyak tema WordPress percuma dan berbayar, yang menyebabkan banyak pengguna cenderung untuk memuat turun dan menggunakannya secara langsung. Namun, memilih untuk membina tema khusus dari awal boleh memberikan kelebihan yang tidak dapat ditandingi. Pertama sekali, ia memberi pembangun kawalan penuh terhadap rupa, fungsi, dan prestasi laman web. Anda boleh membuang semua kod dan fungsi yang tidak perlu, dan mencipta penyelesaian yang ringan yang sepenuhnya memenuhi keperluan projek, lalu meningkatkan kelajuan loading laman web dan pengalaman pengguna secara ketara.

Kedua, tema khusus tidak akan menghadapi konflik keserasian dengan fungsi teras atau plugin yang dipasang semasa dikemaskini, seperti beberapa tema pihak ketiga. Anda juga boleh mengikuti amalan terbaik dan garis panduan keselamatan pembangunan teras WordPress untuk memastikan keselamatan dan kebolehrangkaian kod jangka panjang, yang sangat penting untuk projek komersial. Akhir sekali, ini merupakan proses pembelajaran yang sangat baik, yang membolehkan anda memahami secara mendalam struktur templat WordPress.WP_QueryApi Pengatur Tema dan pengaitnya (actions 和 filters) dan konsep-konsep teras yang lain, pengetahuan ini sangat penting bagi mana-mana pembangun WordPress.

Persiapan termasuk beberapa langkah penting: memastikan anda mempunyai persekitaran pembangunan WordPress tempatan atau dalam talian; editor kod yang mudah digunakan, seperti VS Code atau PhpStorm; dan pengetahuan asas tentang HTML, CSS, PHP dan JavaScript. Sekarang, mari kita mula mencipta fail tema pertama.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan lengkap untuk pembangunan tema WordPress: daripada pemula hingga mahir dalam membina tema kustomisasi.。

Membina struktur asas dan fail-fail utama tema

Sebuah tema WordPress yang berkesan memerlukan sekurang-kurangnya dua fail teras:index.php 和 style.cssYang terakhir bukan sahaja menyediakan gaya, tetapi juga mengandungi maklumat meta yang menggambarkan tema tersebut kepada WordPress. Mari bermula dengan mencipta direktori tema.

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

Mencipta katalog topik dan jadual gaya.

Pertama sekali, di dalam direktori pemasangan WordPress anda: wp-content/themes/ Di dalam folder tersebut, cipta sebuah direktori baharu, seperti my-custom-themeSemua fail tema akan diletakkan di sini.

Selanjutnya, cipta style.css Mengedit fail dan menambahkan blok komen yang diperlukan pada bahagian atas fail. Komen-komen ini diperlukan oleh WordPress untuk mengenali tema tersebut.

/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 一个为学习和实践而打造的强大自定义主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Text Domain Ini digunakan untuk pengantarabangsaan, dan perlu digunakan kemudian apabila memanggil fungsi terjemahan.

Membina templat indeks asas.

index.php Ini adalah templat lalai untuk topik tersebut, dan juga merupakan jalan keluar terakhir dalam hierarki templat. Ia sangat asas. index.php Ini akan memastikan laman web dapat memaparkan kandungan dalam sebarang keadaan.

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

<!DOCTYPE html>
<html no numeric noise key 1009>
<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 1006>
    <p>

<header>
        <h1><a href="/ms/</?php echo esc_url( home_url( '/' ) ); ?>">\n</a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                // 循环内容将在这里展示
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无内容。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>© Hak Cipta ...</p>
    </footer>

<?php wp_footer(); ?>
</body>
</html>

Pada ketika ini, letakkan kedua-dua fail dalam direktori tema dan anda akan dapat melihat dan mengaktifkan tema anda dalam “Rupa” -> “Tema” di backend WordPress. Walaupun ia kelihatan sangat ringkas, namun ia sudah merupakan tema yang lengkap dengan semua fungsi. Selanjutnya, kita perlu memperkenalkan modularisasi dan peningkatan fungsi.

Mencapai hierarki templat dan reka bentuk modular.

Untuk keterbacaan dan keboleh-maintainan kod, semua struktur HTML tidak sepatutnya disumbat dalam . index.php Di WordPress, sistem hierarki templat membenarkan kita untuk mencipta fail templat khusus untuk pelbagai jenis halaman.

Memisahkan header, footer, dan sidebar.

Mencipta header.php、footer.php 和 sidebar.php Ini merupakan langkah pertama untuk modularisasi.

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

将 index.php 中 <head> 到 <main> Bagian sebelumnya dipindahkan ke header.php. Akan <footer> Dan bahagian-bahagian berikutnya dipindahkan ke footer.phpKemudian, dalam index.php Gunakan dalam bahasa Cina get_header() 和 get_footer() Fungsi memperkenalkan mereka.

<p>

<main>
    <p>Jika ada siaran:</p> <p>Sementara ada siaran:</p> <p>Siarkan siaran tersebut;</p> <p>Siarkan tajuknya ('<h2>', '</h2>');</p> <p>Siarkan kandungannya;</p> <p>Akhir siaran;</p> <p>Jika tidak ada siaran:</p> <p>Tampilkan mesej 'Tidak ada kandungan.'</p> <p>Akhir kod.</p>
</main>

<?php get_sidebar(); ?> <!-- 如果创建了侧边栏文件 -->
<?php get_footer(); ?>

Mencipta templat kandungan artikel.

Untuk memaparkan kandungan artikel, amalan terbaik ialah mencipta bahagian templat yang berdiri sendiri. Cipta content.php 或 template-parts/content.phpMengalihkan logik paparan di dalam gelung ke dalamnya. Kemudian dalam index.php Di dalam lingkaran, gunakan get_template_part() Panggil ia.

// 在 index.php 的循环中替换为：
while ( have_posts() ) :
    the_post();
    get_template_part( 'template-parts/content', get_post_format() );
endwhile;

Fungsi ini akan terlebih dahulu mencari seperti content-video.php Untuk templat format khusus seperti ini, jika tidak ditemui, maka kembali kepada content.php。

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pembangunan Tema WordPress dari Pemula hingga Pakar: Panduan Utama untuk Membina Laman Web Kustom。

Mengintegrasikan fungsi teras WordPress dengan penyesuaian tema

Sebuah tema yang kuat mesti berintegrasi secara mendalam dengan fungsi teras WordPress, seperti menu, widget, gambar pratonton artikel, dan penyesuai tema.

Mengaktifkan menu navigasi dan kawasan widget

Dalam topik ini, functions.php Dalam dokumen tersebut, penggunaan register_nav_menus() Lokasi unit pendaftan.

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 
function my_custom_theme_setup() {
    // 注册主菜单
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-custom-theme' ),
        'footer'  => esc_html__( '页脚菜单', 'my-custom-theme' ),
    ) );

// 添加文章缩略图支持
    add_theme_support( 'post-thumbnails' );

// 添加自定义Logo支持
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Selain itu, kita boleh mendaftar kawasan alat-alat kecil (侧边栏).

function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; esc_html__( 'Sidebar utama', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; esc_html__( 'Tambahkan widget di sini.', 'my-custom-theme' ),
        'before_widget' =&gt; ' <ms> Fungsi my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; esc_html__( 'Sidebar utama', 'my-custom-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; esc_html__( 'Tambahkan widget di sini.', 'my-custom-theme' ),
        'before_widget' =&gt; ' <ms> Fungsi my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; esc_html__( 'Sidebar utama', 'my-custom-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; esc_html__( 'Tambahkan widget di sini.', 'my-custom-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', 'my_custom_theme_widgets_init' );

在 header.php Atau dalam fail templat, gunakan wp_nav_menu() Menunjukkan menu.

Tambahkan pilihan kepada penyesuai tema

Pengaturcara Tema membenarkan pengguna untuk melihat pratonton dan mengubah suai tetapan-tetapan tema dalam masa nyata. Kita boleh melakukan ini dengan menggunakan WP_Customize_Manager Tambahkan pilihan objek.

function my_custom_theme_customize_register( $wp_customize ) {
    // 添加一个“主题选项”板块
    $wp_customize->add_section( 'theme_options', array(
        'title'    => __( '主题选项', 'my-custom-theme' ),
        'priority' => 130,
    ) );

// 添加一个页脚版权文本设置
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 Your Company',
        'sanitize_callback' => 'sanitize_text_field',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

$wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'my-custom-theme' ),
        'section'  => 'theme_options',
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'my_custom_theme_customize_register' );

Kemudian, dalam footer.php Di dalamnya, gunakan get_theme_mod() Outputkan nilai ini.

<p>\n</p>

Mengoptimumkan prestasi dan keselamatan tema

Langkah terakhir yang penting dalam membina tema adalah memastikannya cepat dan selamat.

Memuatkan skrip dan gaya dengan betul.

Ia mesti digunakan. wp_enqueue_scripts Pengait digunakan untuk memuat fail CSS dan JavaScript, yang memastikan hubungan antara mereka ditangani dengan betul dan mengelakkan pemuatan berulang.

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 加载Google Fonts
    wp_enqueue_style( 'my-custom-theme-fonts', 'https://fonts.googleapis.com/css2?family=...' );

// 加载主JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 为评论回复脚本添加条件加载
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Mengimplementasikan langkah-langkah keselamatan asas.

Jangan pernah percaya output asli pengguna atau pangkalan data. Lakukan escaping untuk semua kandungan dinamik.

  • Gunakan esc_html(), esc_attr(), esc_url() Menyunting teks yang di outputkan ke atribut atau kandungan HTML.
  • Sebelum memasukkan data ke dalam pangkalan data, gunakan sanitize_text_field() Menunggu untuk membersihkannya.
  • Gunakan dalam templat. the_title(), the_content() Seperti fungsi-fungsi tersebut, sebahagian daripada penggantian telah pun terbina. Untuk medan tersuai, gunakan echo esc_html( get_post_meta( $post->ID, 'key', true ) );。

RINGKASAN

Dengan langkah-langkah di atas, kami telah menyelesaikan pembinaan rangka untuk tema WordPress kustom yang berfungsi dengan baik. Kami telah bermula dengan mencipta yang paling asas. style.css 和 index.php Pada mulanya, kami secara bertahap memperkenalkan hierarki templat dan konsep reka bentuk modular, serta memisahkan bahagian header dan footer. Kemudian, kami melakukannya melalui functions.php Ia mengintegrasikan fungsi teras WordPress, seperti menu navigasi, widget, dan gambar kecil artikel, serta menyediakan antara muka pengaturan yang mesra kepada pengguna melalui penyesuaian tema. Akhir sekali, kami menekankan penggunaan wp_enqueue_scripts Pentingnya mengoptimumkan pemuatan sumber dan melaksanakan langkah-langkah keselamatan seperti pengekodan output.

Walaupun topik ini agak asas, namun ia mempunyai struktur yang jelas dan mengikuti amalan terbaik, lalu mewujudkan asas yang kukuh untuk menambahkan sebarang fungsi kompleks di masa hadapan (seperti jenis artikel khusus, pilihan tema lanjutan, pemuatan AJAX, dll.). Teruskan meneroka WordPress Codex dan sumber-sumber pembangun, dan anda akan dapat mengembangkan keupayaannya secara berterusan.

FAQ - Soalan Lazim

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

Untuk membina tema WordPress yang lengkap, anda perlu menguasai PHP, HTML, CSS, dan JavaScript. PHP digunakan untuk mengendalikan logik pelayan dan berinteraksi dengan teras WordPress; HTML membentuk rangka halaman; CSS bertanggungjawab untuk gaya dan susun atur; manakala JavaScript digunakan untuk melaksanakan interaksi dan kesan dinamik di bahagian depan. Pengetahuan asas tentang SQL juga akan membantu anda memahami pertanyaan data dalam WordPress.

Apa fungsi khusus fail functions.php bagi tema ini?

functions.php File tersebut merupakan “pusat fungsi” tema dan memainkan peranan penting. Ia bukan merupakan plugin yang diintegrasikan setiap kali halaman dimuat, tetapi merupakan sebahagian daripada tema. Kod yang anda tambahkan ke dalam fail ini boleh mengubah tingkah laku lalai tema, mendaftar fungsi baru (seperti menu, kawasan widget), menambah sokongan tema (seperti gambar kecil artikel), mengatur skrip dan gaya, serta mentakrifkan pelbagai fungsi khusus. Ia merupakan jambatan yang menghubungkan tema anda dengan fungsi teras WordPress.

Bagaimana untuk membuat tema WordPress yang saya cipta menyokong pelbagai bahasa?

Membuat topik menyokong pelbagai bahasa (penterjemahan antarabangsa i18n dan penterjemahan tempatan l10n) terutamanya melibatkan dua langkah. Pertama, dalam style.css Gunakan simbol seperti < untuk menandakan permulaan komen dan semua rentetan teks yang perlu diterjemahkan. __（'Text', 'text-domain'） 或 _e（'Text', 'text-domain'） Pertama, terjemahkan fungsi tersebut. Kemudian, gunakan alat seperti Poedit untuk mengimbas fail tema dan menjana terjemahan. .pot Mula dengan mencipta fail templat, dan kemudian mencipta versi yang sesuai untuk setiap bahasa. .po Dan selepas dikompilasi. .mo Mengumpul semua dokumen dan meletakkannya di bawah topik yang relevan. /languages/ Di bawah Katalog. Pengguna boleh menguruskan terjemahan ini melalui plugin seperti Loco Translate.

Bagaimana harus memilih tema khusus dan subtema (Tema Anak)?

Ini bergantung pada matlamat dan model pembangunan khusus anda. Jika anda membina reka bentuk dan fungsi unik untuk projek tertentu daripada awal, dan tidak berhasrat untuk bergantung pada gaya dan templat tema induk lain, maka mencipta tema kustom adalah sesuai. Kelebihannya ialah kod sepenuhnya autonomi, tanpa pengulangan.

Subtema digunakan untuk mengubah suai atau mengembangkan tema induk yang sedia ada. Anda perlu menggunakan subtema jika ingin menyesuaikan tema popular (seperti Astra, GeneratePress) tetapi ingin mengemaskini tema induk dengan selamat tanpa kehilangan perubahan khusus. Subtema hanya mengandungi fail-fail khusus anda (seperti style.css, functions.php Dan (dengan fail-fail template yang diliputi), ia mewarisi semua fungsi tema induk. Ini adalah kaedah penyesuaian yang disyorkan oleh WordPress, yang memastikan keserasian dengan kemaskini setinggi mungkin.

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: