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

Preparasi dan pembinaan persekitaran.

Sebelum anda mula menulis kod, anda memerlukan sebuah persekitaran pembangunan tempatan yang stabil dan profesional. Saya sangat menasihati anda untuk tidak membuat perubahan terus pada fail tema di pelayan dalam talian, kerana persekitaran pembangunan tempatan membenarkan anda menguji kod dengan bebas tanpa mempengaruhi akses normal ke laman web. Anda boleh memilih perisian persekitaran terintegrasi seperti XAMPP, MAMP (untuk Mac), atau Laragon (untuk Windows), yang membolehkan anda memasang dan mengkonfigurasi Apache, MySQL, dan PHP dengan satu klik sahaja.

WordPress itu sendiri juga perlu dipasang dalam persekitaran lokal anda. Kunjungi laman web rasmi WordPress untuk memuat turun paket pemasangan terkini, kemudian extract (buka dan ekstrak) fail tersebut ke dalam direktori akar laman web pada pelayan lokal anda (contohnya, direktori XAMPP). htdocs Selepas itu, akseslah folder tersebut melalui pelayar web dan lengkapkan proses pemasangan yang terkenal sebagai “Pemasangan Lima Minit”. Semasa proses pemasangan, ingatlah maklumat data yang telah anda tetapkan.

Akhir sekali, anda memerlukan sebuah editor kod yang mudah digunakan atau persekitaran pembangunan terintegrasi (Integrated Development Environment/IDE) yang sesuai. Visual Studio Code,PhpStorm, atau Sublime Text semuanya merupakan pilihan yang cemerlang, kerana ia menyediakan ciri-ciri seperti penyorotan sintaks, cadangan kod, dan pengurusan fail, yang dapat meningkatkan kecekapan pembangunan dengan ketara.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pelajari pembangunan tema WordPress secara bertahap: bina tema kustom dari awal.。

Memahami struktur asas tema WordPress

Sebuah tema WordPress pada dasarnya adalah sebuah fail yang terletak di direktori tema WordPress. /wp-content/themes/ Folder dalam direktori tersebut mengandungi satu siri fail dan direktori yang mengikut peraturan tertentu. Fail-fail ini bekerjasama untuk memberitahu WordPress bagaimana untuk menunjukkan rupa dan kandungan laman web 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.

Lawati halaman

Mekanisme terasnya adalah “lapisan templat” (template hierarchy). WordPress akan memilih fail templat yang sesuai secara automatik berdasarkan jenis halaman yang sedang diakses untuk menampilkan kandungan tersebut. Sebagai contoh, apabila seseorang mengakses sebuah artikel blog, WordPress akan mencari fail templat yang berkaitan terlebih dahulu. single.phpKetika mengakses halaman utama blog, pencarian akan dilakukan… home.php 或 index.phpMekanisme ini memberikan kebebasan yang sangat besar kepada topik tersebut.

Setiap topik mesti mengandungi dua fail asas:style.css 和 index.php。style.css Fungsi fail tema bukan sahaja untuk menyediakan gaya (style), tetapi juga blok ulasan di bahagian atas fail tersebut berfungsi sebagai “kad pengenalan” tema tersebut. Ia digunakan untuk memberitahu WordPress tentang nama tema, pengarang, deskripsi, dan maklumat meta lainnya.index.php Ia merupakan lapisan keselamatan terakhir; jika fail templat yang lebih khusus tidak wujud, WordPress akan menggunakan fail tersebut.

Sebuah ulasan kepala tema yang tipikal adalah seperti berikut:

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

Text Domain Digunakan untuk pengekstrakan data yang perlu diterjemahkan, ia merupakan penunjuk (identifier) yang akan digunakan semasa memanggil fungsi terjemahan seterusnya.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Membina laman web profesional: Panduan lengkap untuk mencipta tema WordPress khusus daripada awal.。

Selain daripada dua fail ini, sebuah tema yang lengkap dengan fungsi-fungsinya biasanya juga akan mengandungi:header.php(Top of the web page)footer.php(Di bahagian bawah halaman web),sidebar.php(Sidebar) dan juga functions.php(Berkaitan peningkatan fungsi tema.) Dengan memahami struktur asas ini, anda akan mempunyai pemahaman yang jelas tentang kerangka pembangunan tema.

Membuat fail templat asas

Sekarang, mari kita mulakan dengan mencipta tema pertama. Di dalam… /wp-content/themes/ Dalam direktori tersebut, buatlah sebuah folder baru, dan berikan nama kepada folder tersebut, sebagai contoh… my-first-themeKemudian, cipta fail yang paling asas di dalam folder tersebut.

Pertama sekali, buatlah satu. style.cssDan tambahkan ulasan kepala topik yang disebutkan dalam bahagian sebelumnya. Kemudian, cipta… index.phpIni adalah fail templat pertama anda. Ia merupakan yang paling ringkas. index.php Boleh hanya mengandungi gelung yang memanggil tajuk dan kandungan artikel:

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

<p>
<main>
  \n
      <article>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
      </article>
    
    <p>Tiada kandungan untuk sekarang.</p>
  <?php endif; ?>
</main>
\n

Kod ini menggunakan tag templat. get_header(), get_sidebar(), get_footer(), the_title() 和 the_content()Untuk menjadikannya berfungsi, anda perlu membuat fail-fail header, sidebar, dan footer yang sesuai.

Mencipta header.phpIa sepatutnya mengandungi bahagian permulaan dokumen HTML, sehingga kawasan kandungan utama bermula:

<!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>

Di sini,wp_head() Ia merupakan fungsi yang sangat penting, kerana ia membenarkan bahagian inti WordPress, plugin, dan tema untuk memasukkan kod yang diperlukan ke dalam bahagian atas halaman (seperti pautan ke fail gaya).body_class() Fungsi tersebut akan menghasilkan senarai nama kelas CSS yang bermakna (semantically meaningful), yang memudahkan anda untuk mengawal gaya (style) dengan lebih terperinci.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Arkitektur Asas dan Cara Kerja WordPress。

Mencipta footer.php Untuk menutup tag yang telah dibuka:

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

Perhatikan,wp_footer() Itu adalah dengan wp_head() Hook pada bahagian belakang yang bersifat relatif juga sangat penting dan tidak boleh diabaikan.

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

Mencipta sidebar.phpUntuk sementara waktu, anda boleh hanya menggunakan satu panggilan kawalan yang mudah:

<aside>
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>
</aside>

Pada masa ini, tema anda sudah mempunyai fungsi asas “templat” yang boleh diaktifkan dan dilihat dalam mod pratonton (preview) di bahagian belakang (backend). Walaupun ia masih agak asas, ia mengikut struktur asas WordPress.

Meningkatkan fungsi tema melalui Functions.php

functions.php Fail tersebut merupakan “pusat kawalan” untuk tema anda. Ia bukanlah fail templat, sebaliknya merupakan fail PHP yang dimuat secara automatik semasa tema tersebut diinisialisasikan, dan berfungsi untuk menambahkan ciri-ciri baru, mendaftarkan komponen, serta menghubungkan fungsi tersebut dengan pelbagai API yang disediakan oleh WordPress. Ini merupakan kunci untuk menjadikan tema anda lebih profesional dan berfungsi dengan lebih baik.

Anda perlu membuat fail ini dalam direktori utama tema. Pertama sekali, mari kita tambahkan fail gaya (stylesheet) dan skrip (script) ke dalam tema. Cara yang betul adalah dengan menggunakan fungsi yang disediakan oleh WordPress untuk menguruskan pengaturan tema, bukan dengan menulisnya terus dalam kod HTML. <link> Tag.

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

// 添加一个自定义样式表
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 添加一个 JavaScript 文件
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Di sini,wp_enqueue_style() 和 wp_enqueue_script() Ia adalah fungsi yang digunakan untuk menambah sumber dengan selamat.get_stylesheet_uri() Mengarah kepada topik style.css。add_action() Mount our function to wp_enqueue_scripts Pastikan bahawa fungsi yang terikat pada ganjir ini dilaksanakan pada masa yang sesuai.

Seterusnya, daftarkan menu navigasi dan bar sisi (kawasan alat tambahan):

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );

// 为“文章”类型启用文章格式支持
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 添加对 HTML5 标记格式的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 启用标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() Pastikan bahawa antara muka “Penampilan” -> “Menu” di bahagian belakang (backend) menunjukkan pilihan lokasi untuk menu.add_theme_support() Fungsi tersebut digunakan untuk mengaktifkan pelbagai ciri atau fungsi tema, dan ini merupakan amalan standard dalam pembangunan tema moden. Sebagai contoh, untuk mengaktifkan… title-tag Selepas itu, anda tidak perlu lagi… header.php Pengeluaran manual dalam bahasa Cina: <title> Tag telah ditambah.

Akhir sekali, daftarkan kawasan alat tambahan (sidebar tool) tersebut:

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'my-first-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_first_theme_widgets_init' );

Setakat ini, tema anda telah memiliki keseluruhan rangkaian proses dari penyampaian asas hingga peningkatan fungsi. Dengan menggunakan menu tetapan di bahagian belakang (backend) dan menambahkan alat tambahan (tools), anda dapat melihat perubahan dinamik pada tema tersebut.

RINGKASAN

Dari mencipta satu yang mengandungi… style.css 和 index.php Bermula dari folder tersebut, proses pembinaan komponen templat yang terpisah dilakukan.header.php, footer.php), dan seterusnya melalui keupayaan yang kuat… functions.php Menu pendaftaran fail, bar sisi, dan pengambilan sumber secara selamat – anda telah melalui keseluruhan proses pembuatan tema WordPress yang disesuaikan. Inti dari proses ini adalah memahami dan mengikuti hierarki templat serta sistem hook dalam WordPress.

Anda bukan lagi sekadar pengguna tema tersebut, tetapi juga penciptanya. Setelah memahami asas-asas ini, anda boleh meneruskan pembelajaran anda untuk memahami fail templat yang lebih kompleks. single.php、page.php、archive.phpTeroka lebih banyak kemungkinan penggunaan gelung (loop) dalam WordPress, dan manfaatkan tag-tag bersyarat (conditional tags) seperti… is_page(), is_single()Untuk mencapai kawalan halaman yang lebih terperinci, dunia pembangunan tema adalah luas dan menarik; ini hanyalah satu titik permulaan yang kukuh.

FAQ - Soalan Lazim

Adakah pembangunan tema WordPress memerlukan kemahiran yang tinggi dalam PHP?

需要具备 PHP 的基础知识，但无需达到精通的水平。你至少需要理解变量、数组、条件语句（if/else）、循环（while/foreach）以及函数的基本概念。因为 WordPress 主题开发大量使用了其内置的 PHP 函数（模板标签）和钩子系统，所以学习重点在于理解 WordPress 特有的 PHP 函数如何使用，而非从头编写复杂的 PHP 算法。

Mengapa kita mesti menggunakan fungsi wp_head() dan wp_footer()?

Kedua-dua fungsi ini merupakan hook teras (core hooks) dalam WordPress.wp_head() Terletak di </head> Sebelum tag tersebut, ia membenarkan WordPress core, plugin, dan tema anda sendiri untuk memasukkan kod yang diperlukan ke dalam bahagian atas halaman (header), seperti pautan ke fail gaya CSS, meta tag, pemboleh ubah JavaScript, dan sebagainya.wp_footer() Terletak di </body> Tag tersebut biasanya digunakan untuk memasukkan kod analisis atau fail JavaScript yang dimuat turun secara beransur-ansur (delayed loading). Jika tag-tag ini tidak ada, banyak plugin tidak akan berfungsi dengan betul, dan beberapa ciri dalam WordPress sendiri juga mungkin mengalami masalah.

Bagaimana untuk menambahkan templat halaman kepada tema saya?

Buatlah sebuah fail PHP yang baru, contohnya: page-fullwidth.phpDi bahagian atas fail ini, anda perlu menambahkan blok komen dengan nama template yang khusus. Sebagai contoh:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的页面模板
 */

Kemudian, anda boleh menulis kod yang berbeza dalam fail ini. page.php Struktur HTML, seperti yang dihilangkan… get_sidebar() Setelah menyimpan perubahan tersebut, semasa anda mengedit halaman di panel pentadbiran WordPress, pilihan “Halaman Lebar Penuh” akan muncul dalam senarai drop-down “Templat” di bawah bahagian “Properti Halaman” untuk anda pilih.

Bagaimanakah cara yang terbaik untuk mengurus CSS dan JavaScript semasa pembangunan tema?

Amalan terbaik adalah menggunakan ciri-ciri yang disediakan oleh WordPress. wp_enqueue_style() 和 wp_enqueue_script() Fungsi, dalam… functions.php Dipasang pada… wp_enqueue_scripts Gunakan kait untuk menambahkan sumber. Cara ini membolehkan: 1) menguruskan perhubungan dengan betul (sebagai contoh, skrip anda bergantung pada jQuery); 2) mengelakkan memuatkan sumber yang sama berulang kali; 3) memudahkan pengurusan plugin dan kod tema lain; 4) mematuhi standard pengekodan WordPress. Pastikan untuk tidak menggunakan secara langsung dalam fail templat. <link> 或 <script> Sumber yang dikodkan secara keras dalam tag.

Bagaimanakah saya boleh menjadikan tema saya menyokong berbilang bahasa (internasionalisasi)?

Anda perlu melakukan dua perkara. Pertama, style.css Gunakan “Domain Tekst” (Text Domain) yang betul semasa menterjemahkan kandungan ulasan kepala (header comments) dan kod yang memanggil teks tersebut. Seperti yang dinyatakan dalam panduan, definisikan dengan betul. Text Domain: my-first-themeKedua, dalam... functions.php Dalam semua fail templat, semua teks antara muka pengguna yang perlu diterjemahkan harus dibungkus menggunakan fungsi terjemahan WordPress. Yang paling sering digunakan adalah… __()(Kembali ke rentetan terjemahan) dan _e()(Directly display the translated string.) Contohnya:<?php _e( ‘Hello World’, ‘my-first-theme’ ); ?>Selepas itu, anda boleh menggunakan alat seperti Poedit untuk menghasilkannya. .pot Fail templat, untuk pembantu terjemahan membuat terjemahan dalam bahasa yang berbeza. .po 和 .mo Dokumen.