Panduan Lengkap untuk Pemula dalam Pembangunan Tema WordPress: Membina Tema Pertama Anda dari Kosong

Pengurusan Persekitaran dan Konsep Asas

Sebelum anda mula menulis kod, anda memerlukan persekitaran pembangunan tempatan yang sesuai. Disyorkan untuk menggunakan pakej perisian pelayan tempatan yang terintegrasi, seperti Local by Flywheel, XAMPP, atau MAMP. Di laman web tempatan anda, fail-fail asas WordPress seharusnya telah dipasang dengan lengkap.

Setiap tema WordPress mesti mengandungi dua fail asas:style.css 和 index.php。style.css Ia bukan sahaja merupakan sebuah fail gaya (style sheet), tetapi juga “kad pengenalan” bagi sebuah tema, yang menyatakan maklumat tema tersebut kepada WordPress melalui kepala fail khas (Theme Header). Pada masa yang sama,index.php Ia merupakan fail templat lalai untuk topik tersebut, dan bertanggungjawab untuk mengendalikan semua permintaan halaman yang tidak mempunyai templat khusus yang ditentukan.

Sebuah tema yang tipikal akan mengikuti struktur hierarki yang jelas dalam direktori. Fail templat utama biasanya terletak terus di dalam direktori akar tema, manakala sumber CSS, JavaScript, dan gambar disimpan di direktori yang berasingan. /css、/js 和 /images Dalam subdirektori seperti ini, untuk topik yang lebih kompleks, anda mungkin juga akan melihat… /template-parts Direktori digunakan untuk menyimpan segmen templat yang boleh digunakan semula./inc Direktori digunakan untuk menyimpan fail-fail yang memperbaiki atau meningkatkan fungsi aplikasi.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Terakhir Pembangunan Tema WordPress: Membina Tema Custom Dari Kosong。

Mengerti hierarki templat WordPress

WordPress menggunakan sistem pintar yang dipanggil “Template Hierarchy” (Hierarki Templat) untuk menentukan fail templat mana yang perlu digunakan pada sesuatu halaman. Sistem ini merupakan logik asas dalam pembangunan tema (themes).

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

Sebagai contoh, apabila pengguna mengakses halaman utama blog, WordPress akan mencari terlebih dahulu sama ada terdapat sebuah fail dengan nama… front-page.php Fail tersebut. Jika tidak ditemui, ia akan terus mencari. home.phpJika masih tidak berfungsi, ia akhirnya akan kembali ke penggunaan tetapan lalai. index.phpUntuk sebuah artikel yang berasingan, urutan pencarian dalam WordPress adalah:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。

Memahami dan menggunakan hierarki templat dengan baik membolehkan anda mencipta reka bentuk dan penampilan yang sangat disesuaikan untuk pelbagai jenis halaman (seperti artikel blog, halaman statik, arkib kategori, halaman hasil carian, dll.) tanpa perlu menulis logik pengesahan yang kompleks.

Declarasi maklumat topik

style.css Pada awal fail, mesti terdapat segmen maklumat kepala dalam format ulasan CSS yang digunakan untuk mendefinisikan metadata tema. Berikut adalah contoh yang minimum:

/*
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.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Di antaranya, “Text Domain” digunakan untuk tujuan internasionalisasi, dan merupakan penanda yang mesti digunakan semasa memanggil fungsi terjemahan seterusnya. Bahagian kepala fail ini merupakan satu-satunya asas bagi WordPress untuk mengenal pasti dan mengaktifkan tema anda.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pembangunan Tema WordPress: Panduan Asas Hingga Kemahiran Lanjutan: Panduan Utama Untuk Membina Laman Web Yang Diperibadikan。

Membina fail templat asas

Mari kita mulakan dengan membina fail templat yang paling penting. Pertama sekali, index.php Penulisan struktur asas dalam bahasa tertentu. Sebuah fail templat standard seharusnya mengandungi pemanggilan untuk bahagian kepala (header), kawasan kandungan utama (main content), bar sisi (sidebar), dan kaki halaman (footer).

Fail templat asas biasanya mengandungi panggilan fungsi teras WordPress berikut:get_header()、get_footer()、get_sidebar() dan get_template_part()Fungsi-fungsi ini akan memuatkan fail templat yang bersesuaian, seterusnya memodulkan struktur halaman tersebut.

Create a header template.

header.php Fail tersebut mengandungi kandungan yang akan dipaparkan di bahagian atas setiap halaman. Ia mesti sekurang-kurangnya mempunyai pengisytiharan jenis dokumen HTML5. <!DOCTYPE html>、<head> Kawasan dan bahagian utama halaman bermula di sini. <body> 及 <header> Tag.

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

在 <head> Dalam kawasan tersebut, yang sangat penting adalah untuk menggunakan… wp_head() “Hook.” Hook ini membenarkan bahagian inti WordPress, plugin, dan tema anda sendiri untuk menyisipkan kod yang diperlukan ke dalam bahagian kepala halaman (header), seperti pautan ke fail gaya (style sheet), meta tag, dan skrip. Berikut adalah contoh template kepala yang mudah:

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<p>
<header id="masthead" class="site-header">
    <h1 class="site-title"><a href="/ms/</?php echo esc_url( home_url( '/' ) ); ?>">\n</a></h1>
</header>

body_class() Fungsi tersebut akan mengeluarkan senarai nama kelas CSS yang berdasarkan jenis halaman semasa, yang menyediakan kemudahan yang sangat besar untuk kawalan gaya (style control).

Membina gelung utama dan penunjukkan kandungan

WordPress menggunakan “The Loop” untuk mengulangi dan menampilkan senarai artikel yang ditemui. The Loop merupakan bahagian yang paling penting dalam fail templat, dan biasanya terdapat di… index.php、single.php 或 archive.php China.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai Pembangunan Tema WordPress: Panduan Lengkap untuk Membina dan Menggunakannya Dari Awal.。

Sebuah struktur gelung utama yang tipikal adalah seperti berikut:

\n
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <h2><a href="/ms/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    <p> </p>  
 <p></p>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

Dalam bahagian gelung (loop), anda boleh menggunakan satu siri tag templat yang bermula dengan “the_”, seperti… the_title()、the_content()、the_excerpt() 和 the_post_thumbnail()Untuk mengeluarkan setiap bahagian artikel.

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

Menambah gaya dan fungsi

Penampilan visual sesuatu tema dikawal oleh CSS. Selain daripada… style.css Selain menulis gaya (style) secara langsung dalam kod, cara yang lebih profesional adalah dengan menggunakan alat atau pustaka yang khusus untuk pengurusan gaya. functions.php Fail-fail ini digunakan untuk mengatur senarai pemunggutan (queue) bagi memuatkan fail gaya (style sheets) dan skrip (scripts), bagi memastikan hubungan kebergantungan (dependencies) serta urutan pemuatannya adalah betul.

functions.php Fail tersebut merupakan “penguatkuasa fungsi” (function enhancer) untuk tema anda. Ia bukanlah fail templat, sebaliknya merupakan fail PHP yang dimuat secara automatik semasa tema dimulakan, dan berfungsi untuk mendefinisikan fungsi, kelas, hook (Hooks), dan filter (Filters).

Mengintegrasikan gaya (styles) dan skrip (scripts) dengan betul

Anda sepatutnya menggunakan… wp_enqueue_style() 和 wp_enqueue_script() Fungsi-fungsi ini digunakan untuk menambah sumber (resources). Fungsi-fungsi tersebut perlu dipasang (mounted) pada sistem yang sesuai. wp_enqueue_scripts Ini terletak pada “action hook”. Kelebihan daripada melakukan ini adalah WordPress dapat mengurus sumber dengan lebih teratur, mengelakkan daripada muat turun yang berulang-ulang dan konflik kebergantungan (dependencies).

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 加载一个自定义的 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Menu Pendaftaran & Bar Sisi

Menu dan sidebar (kawasan alat tambahan) di WordPress perlu disediakan terlebih dahulu. functions.php Anda perlu mendaftar terlebih dahulu, kemudian barulah anda boleh “menunjukkan” kandungan tersebut dalam fail templat yang bersesuaian.

Gunakan register_nav_menus() Fungsi untuk mendaftarkan 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 header.php Di dalamnya, anda boleh menggunakan… wp_nav_menu() Fungsi ini digunakan untuk menunjukkan menu utama.

Gunakan register_sidebar() Fungsi untuk mendaftar kawasan alat tambahan (widgets):

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Sidebar', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here.', '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' );

Kemudian, dalam sidebar.php Di dalamnya, gunakan dynamic_sidebar() Fungsi digunakan untuk memanggil kawasan ini.

Ujian Tema dan Pengeluaran

Setelah pembangunan selesai, ujian yang menyeluruh perlu dilakukan. Ini termasuk memeriksa kesan penampilan tema pada pelbagai pelayar (Chrome, Firefox, Safari, Edge) dan saiz peranti yang berbeza (desktop, tablet, telefon bimbit). Pastikan semua pautan berfungsi dengan baik, ciri-ciri borang beroperasi dengan normal, dan menu dapat berfungsi dengan betul pada skrin kecil.

Aktifkan mod pembangunan (debug mode).

Semasa proses pembangunan, sangat disyorkan untuk mengaktifkan mod pembangunan (debug mode) di WordPress. Ini akan membantu anda mengenal pasti ralat PHP, amaran, dan notis dengan cepat. wp-config.php Dalam fail tersebut, cari dan ubah baris berikut:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误

Buka WP_DEBUG_LOG Maklumat ralat boleh direkod ke dalam fail log, untuk mengelakkan maklumat sensitif daripada terdedah secara langsung kepada pengunjung laman web.

Semak standard topik.

Sebelum diterbitkan atau digunakan, tema anda harus sepatutnya mengikuti Garis Panduan Pembangunan Tema WordPress sebanyak mungkin. Ini termasuk, tetapi tidak terhad kepada: memastikan semua data yang dipaparkan di halaman telah di-escape dengan betul (menggunakan kaedah yang sesuai). esc_html()、esc_url() Fungsi-fungsi seperti (dan lain-lain), semua teks yang boleh diterjemahkan digunakan. __() 或 _e() Fungsi tersebut telah dipaketkan, dan kod tema tersebut tidak mengandungi sebarang URL yang dikodkan secara langsung (hard-coded URLs).

Anda boleh menggunakan plugin rasmi “Theme Check” untuk melakukan pemeriksaan kesesuaian secara automatik pada tema anda. Ia akan mengimbas kod anda dan menunjukkan masalah yang berpotensi, kelemahan keselamatan, atau ketidakpatuhan dengan standard yang ditetapkan.

Sedia untuk diterbitkan.

Apabila pembangunan, ujian, dan semakan tema telah selesai, anda boleh memilih untuk menerbitkannya ke direktori tema WordPress.org, atau mengemaskannya untuk kegunaan peribadi atau pelanggan. Paket penerbitan seharusnya hanya mengandungi folder dan fail yang diperlukan oleh tema, dan semua fail kawalan versi (seperti…) harus dihapuskan. .gitPengaturan alat pembangunan dan fail sandaran juga perlu diambil kira. Pada masa yang sama, pastikan… style.css Maklumat topik dalam dokumen tersebut adalah lengkap dan tepat, dan sebuah gambar yang jelas telah disediakan. screenshot.png(1200x900 piksel) digunakan sebagai gambar kecil (thumbnail) untuk tema tersebut.

RINGKASAN

Dari masa penciptaan yang mengandungi… style.css 和 index.php Bermula dari folder asas, memahami struktur templat, membina fail templat utama, menggunakan gelung utama untuk menampilkan kandungan, dan seterusnya… functions.php Menambahkan gaya, skrip, dan fungsi, diikuti dengan ujian yang ketat serta pemeriksaan standardisasi, itulah proses lengkap untuk membina sebuah tema WordPress asas. Proses ini bukan sahaja membolehkan anda mendapatkan sebuah tema yang boleh digunakan, tetapi yang lebih penting, ia juga membantu anda memahami dengan lebih mendalam struktur tema WordPress. Dengan titik permulaan ini, anda boleh meneruskan untuk meneroka tema yang lebih canggih, seperti jenis artikel yang boleh disesuaikan, API penukar tema (theme customizer), sokongan untuk editor blok (Gutenberg), dan sebagainya, dan secara beransur-ansur menjadi seorang pembangun tema WordPress yang profesional.

FAQ - Soalan Lazim

Berapa banyak fail yang diperlukan untuk sebuah tema WordPress?

Sebuah tema yang boleh dikenali dan diaktifkan oleh WordPress memerlukan sekurang-kurangnya dua fail:style.css 和 index.phpDi antaranya,style.css Kepentingan untuk memasukkan keterangan header tema yang betul tidak boleh diabaikan.

Mengapa gaya kustom saya tidak berfungsi?

Ini biasanya disebabkan oleh kekurangan keutamaan pada pemilih CSS (CSS selectors) atau fail gaya (style sheet) yang tidak dimuat dengan betul. Pertama sekali, periksa alat pembangun pelayar (browser developer tools) untuk memastikan fail gaya anda telah dimuat dengan jayanya, dan sama ada peraturan CSS anda tidak ditindih oleh peraturan lain yang mempunyai keutamaan yang lebih tinggi. Kedua, pastikan anda menggunakan kaedah yang betul untuk mengaplikasikan gaya tersebut. functions.php “Dalam…” wp_enqueue_style() Gunakan fungsi untuk memuatkan gaya (styles), bukan menulisnya terus dalam kod HTML. <link> Tag.

Bagaimana untuk menambahkan templat halaman khusus kepada sebuah tema?

Buatlah sebuah fail PHP yang baru, contohnya: page-fullwidth.phpDi bahagian atas fail tersebut, tambahkan ulasan PHP berikut untuk menyatakan nama templat:<?php /* Template Name: 全宽页面 */ ?>Kemudian, anda boleh menulis kod dalam fail ini yang berbeza daripada templat halaman lalai. page.php Reka bentuk dan kod halaman tersebut. Semasa membuat atau mengedit halaman, anda boleh memilih templat baru ini dalam modul “Properti Halaman”.

Apa perbezaan antara functions.php dan plugin?

functions.php Ia merupakan sebahagian daripada tema tersebut, dan fungsinya sangat berkait rapat dengan tema yang sedang digunakan. Jika anda menukar tema,functions.php Kod yang terdapat di dalam tersebut tidak akan lagi berfungsi. Fungsi yang disediakan oleh plugin adalah berasingan daripada tema; tidak kira tema mana yang digunakan, selagi plugin tersebut diaktifkan, fungsi tersebut akan tetap tersedia. Biasanya, fungsi-fungsi yang berkait rapat dengan penampilan visual laman web akan diletakkan dalam tema, manakala fungsi-fungsi yang umum dan berdiri sendiri lebih sesuai dijadikan plugin.

Bagaimana untuk menjadikan tema saya menyokong berbilang bahasa (internasionalisasi)?

Anda perlu melakukan dua perkara: menyediakan dan memuatkan fail terjemahan. Pertama, dalam kod, semua rentetan yang ditujukan untuk pengguna (seperti… ('Read More', 'my-first-theme')Semua mesti menggunakan kaedah seperti… () 或 _e() Paketkan fungsi terjemahan seperti ini, dan gunakan parameter kedua (kawasan teks) bersama-sama dengannya. style.css Ia harus konsisten dengan “Text Domain” yang dinyatakan dalam dokumen tersebut. Kemudian, gunakan alat seperti Poedit untuk membuatnya. .pot Fail templat, dan terjemahkan untuk menghasilkan yang setara. .po 和 .mo Dokumen. Akhirnya, dalam functions.php Gunakan dalam bahasa Cina load_theme_textdomain() Menggunakan fungsi untuk memuatkan fail terjemahan.