Pengenalan Pembangunan Tema WordPress: Membina Tema Custom Pertama Anda Dari Kosong

Apabila anda mula belajar pengembangan WordPress, mencipta tema sendiri merupakan satu pencapaian yang sangat menggembirakan. Ia tidak hanya membolehkan anda mengawal sepenuhnya penampilan dan fungsi laman web, tetapi juga merupakan cara terbaik untuk memahami dengan lebih mendalam struktur asas WordPress. Artikel ini akan membimbing anda melalui proses penuh, daripada menyediakan persekitaran pembangunan hingga mencipta tema asas, membantu anda mengambil langkah pertama dalam menjadi seorang pengembang WordPress.

Pra-persiapan sebelum pembangunan

Sebelum mula menulis sebarang kod, adalah sangat penting untuk membina sebuah persekitaran pembangunan tempatan yang cekap. Ini akan membolehkan anda melakukan ujian dan penyelarasan tanpa mempengaruhi laman web yang berada dalam talian.

Membina persekitaran pembangunan tempatan.

Pertama sekali, kita perlu memasang perisian pelayan tempatan. Anda boleh memilih alat seperti XAMPP, MAMP, atau Local by Flywheel. Pakej perisian ini mengintegrasikan pelayan Apache, pangkalan data MySQL, dan PHP, yang merupakan syarat penting untuk menjalankan WordPress. Sebagai contoh, selepas memasang XAMPP dan mengaktifkan perkhidmatan Apache dan MySQL, komputer anda akan berfungsi sebagai pelayan tempatan.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pengenalan Pembangunan Tema WordPress: Bina Tema Custom Pertama Anda Dari Kosong。

Seterusnya, muat turun versi terkini WordPress dan extract (pecahkan fail) ke direktori akar laman web pada pelayan tempatan anda (contohnya, direktori XAMPP).htdocsKemudian, dengan mengakses…http://localhost/your-wordpress-folderUntuk menyelesaikan proses pemasangan yang terkenal ini (yang mengambil masa hanya lima minit), anda perlu membuat sebuah pangkalan data, serta menetapkan nama pengguna dan kata laluan pentadbir untuk 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

Menyediakan editor kod dan alat-alat yang diperlukan

Sebuah editor kod yang cemerlang dapat meningkatkan kecekapan pembangunan dengan ketara. Visual Studio Code,PhpStorm, atau Sublime Text semuanya merupakan pilihan yang baik. Terutamanya Visual Studio Code, yang mempunyai pelbagai tambahan (extensions) untuk WordPress dan PHP, seperti PHP Intelephense, yang menyediakan fungsi autocompletion kod yang pintar dan pemeriksaan sintaks.

Selain itu, disyorkan untuk memasang tambahan alat pembangun pelayar, seperti tambahan “Theme Check” yang disediakan oleh WordPress secara rasmi, untuk memeriksa sama ada tema tersebut memenuhi piawaian pada peringkat pembangunan yang lebih lanjut. Anda juga boleh menggunakan fungsi “Periksa Elemen” (Inspect Elements) dalam pelayar untuk melakukan penyelarasan HTML dan CSS secara masa nyata.

Memahami struktur asas tema WordPress

Sebuah tema WordPress yang paling disederhanakan hanya memerlukan dua fail, tetapi sebuah struktur yang lengkap dan memenuhi piawaian akan mengandungi beberapa fail khusus, di mana setiap fail mempunyai tanggungjawab yang berbeza.

Fail skrip gaya teras

Setiap tema WordPress mesti mempunyai satu…style.cssFail ini bukan sahaja merupakan fail CSS yang digunakan untuk mendefinisikan gaya tema, tetapi blok ulasan di bahagian kepala fail tersebut juga berfungsi sebagai “kad pengenalan” tema tersebut, yang mengandungi semua maklumat meta yang diperlukan oleh WordPress untuk mengenali tema tersebut. Contoh ulasan kepala yang asas adalah seperti berikut:

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

/*
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
*/

Di antaranya,Text DomainDigunakan untuk pengeinternasionalan, iaitu untuk panggilan berikutnya kepada fungsi terjemahan.__()或_e()Penunjuk yang digunakan pada masa itu.

Fail templat asas

Satu lagi fail yang diperlukan adalahindex.phpIa merupakan templat lalai untuk sesuatu tema, dan akan digunakan oleh WordPress apabila tidak dapat menemui fail templat yang lebih khusus (seperti…).single.php或page.phpApabila pengguna meminta halaman tersebut, maka ia akan digunakan untuk merender halaman tersebut.

Hanya dengan dua fail ini, tema anda sudah boleh muncul dalam senarai “Appearance” -> “Themes” di panel pentadbiran WordPress dan boleh diaktifkan. Tentu saja, pada masa ini ia masih hanyalah sebuah rangka kosong. Untuk memastikan tema berfungsi dengan betul, kita perlu membuat beberapa fail templat yang penting lagi.

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

Pertama sekali, buatlah satu.header.phpIa mengandungi bahagian kepala (header) dokumen HTML, seperti…<doctype>Pengisytiharan,<head>Kawasan (di mana harus digunakan)wp_head()Fungsi tersebut memperkenalkan skrip dan gaya asas WordPress, serta kod yang digunakan untuk membuat tajuk halaman (header) laman web.

Kemudian, buatlah yang kedua.footer.phpIa mengandungi kandungan kaki halaman (footer) laman web tersebut, dan akan dipanggil sebelum pengakhiran proses.wp_footer()Fungsi ini merupakan “hook” yang diperlukan oleh banyak plugin untuk menambahkan kod di bahagian bawah halaman.

Akhir sekali, ciptalah.functions.phpFail ini tidak wajib, tetapi ia merupakan “otak” bagi tema tersebut. Anda boleh menambahkan ciri-ciri sokongan tema, menu pendaftaran dan bar sisi, memasukkan fail gaya dan skrip, serta mendefinisikan pelbagai fungsi khusus di sini.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Bagaimana untuk memulakan pembangunan tema WordPress yang diperibadikan dari awal?。

Membina ciri-ciri utama sebuah tema

Setelah mempunyai fail asas, kita boleh mula memberikan “nyawa” kepada tema tersebut, agar ia mempunyai fungsi asas seperti sebuah laman web.

Mengimplementasikan menu navigasi

Laman web moden biasanya mempunyai menu navigasi. Pertama sekali, anda perlu…functions.phpGunakan dalam bahasa Cinaregister_nav_menus()Fungsi untuk mendaftar lokasi hidangan.

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

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Kod ini mendaftarkan dua lokasi menu: “Menu navigasi utama” dan “Menu kaki halaman”. Kemudian, di tempat dalam template di mana anda ingin menunjukkan menu tersebut (contohnya…header.php(Dalam bahasa Cina), gunakan...wp_nav_menu()Fungsi memanggilnya.

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

Pengguna kini boleh membuat menu dalam bahagian “Penampilan” -> “Menu” di panel pentadbiran WordPress, dan kemudian mengagihkannya ke kedudukan “Menu Utama”.

Aktifkan imej khas untuk artikel dan bar sisi.

Banyak tema menyokong gambar ringkasan (gambar khas) untuk artikel dan bar sisi untuk widget. Sama juga dengan...functions.php的my_first_theme_setupDalam fungsi tersebut, tambahkan kod berikut untuk mengaktifkan ciri-ciri ini:

add_theme_support( 'post-thumbnails' ); // 启用文章特色图像
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 启用HTML5标记支持

Untuk mendaftar kawasan alat tambahan (sidebar widget), gunakanregister_sidebar()Fungsi:

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' );

Selepas itu, dalam fail templat (seperti…)sidebar.php）digunakan dalamdynamic_sidebar( 'sidebar-1' )Untuk menunjukkan kawasan ini.

Mengintegrasikan templat dan menambah gaya

Sekarang, kita akan menyambungkan semua bahagian templat tersebut dan menambahkan gaya asas kepada mereka, supaya laman web tersebut mempunyai rupa yang boleh dilihat (visual).

Menggunakan templat untuk memasukkan fungsi

WordPress menyediakan beberapa fungsi asas untuk memasukkan fail templat lain, yang memastikan kod menjadi modular dan mudah diselenggara. Dalam kes anda…index.phpDalam struktur tersebut, ia sepatutnya berbentuk seperti berikut:

<?php get_header(); ?>

<main id="main" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation(); // 文章导航
    else :
        get_template_part( 'template-parts/content', 'none' ); // 没有找到内容时的模板
    endif;
    ?>
</main>

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

get_header(), get_sidebar(), get_footer()Fungsi-fungsi tersebut mengimport fail-fail templat yang bersesuaian masing-masing.get_template_part()Ia merupakan fungsi yang lebih fleksibel, yang menggalakkan anda untuk memisahkan blok kandungan yang digunakan berulang kali (seperti ringkasan artikel) ke dalam bahagian yang berasingan.template-partsDalam fail-fail yang berasingan di dalam folder tersebut, contohnya…content.php。

Menulis gaya asas dan reka bentuk responsif

Sekarang, bukalah.style.cssMari kita mula menambah gaya kepada tema anda. Pertama sekali, tetapkan beberapa gaya global, seperti model kotak (box model), jenis font, dan warna.

* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

Untuk mencapai reka bentuk yang responsif, gunakan kueri media (media queries) untuk menyesuaikan susun atur halaman mengikut saiz skrin yang berbeza. Sebagai contoh, biarkan bar sisi bergerak ke bawah kandungan utama pada skrin yang lebih kecil.

@media (max-width: 768px) {
    .site-main {
        width: 100%;
    }
    #sidebar {
        width: 100%;
        margin-top: 2rem;
    }
}

Jangan lupa untuk…header.php的<head>Beberapa meta tag viewport telah ditambahkan untuk memastikan skala yang betul pada peranti mudah alih:<meta name="viewport" content="width=device-width, initial-scale=1">。

RINGKASAN

Dari mencipta satu yang mengandungi…style.css和index.phpBermula dari pembuatan folder yang sesuai, hingga pembangunan tema WordPress yang lengkap dengan ciri navigasi, bar sisi, dan reka bentuk yang responsif, proses ini meliputi konsep-konsep asas dalam pembangunan tema WordPress. Anda telah belajar bagaimana untuk…functions.phpMengembangkan fungsi tema, bagaimana menggunakan sistem hierarki templat untuk mengatur kod, serta bagaimana mengubah reka bentuk menjadi kod HTML dan CSS untuk bahagian hadapan (frontend). Ini hanyalah titik permulaan; seterusnya, anda boleh meneroka fail templat yang lebih canggih (seperti…).single.php, page.php, archive.phpAnda juga boleh menggunakan jenis artikel yang disesuaikan, API untuk penyesuaian tema, serta rangka kerja seperti Sass dan JavaScript untuk membina tema yang lebih kompleks dan moden. Terus berlatih dan merujuk kepada dokumentasi pembangun rasmi merupakan cara terbaik untuk meningkatkan kemahiran anda.

FAQ - Soalan Lazim

Adakah pembangunan tema mesti menggunakan subtema?

Tidak semestinya. Mencipta tema yang berasingan dari awal adalah sesuatu yang boleh dilakukan, dan ia juga merupakan cara terbaik untuk mempelajari prinsip-prinsip asas. Penggunaan subtema biasanya merupakan amalan terbaik apabila perlu menyesuaikan dan mengubah suai tema induk yang sedia ada (seperti tema dari rangka kerja yang popular), kerana ia dapat memastikan bahawa pengubahsuaian yang anda buat tidak akan hilang apabila tema induk diperbaharui. Bagi projek pembangunan yang baru, membina tema yang berasingan dari awal adalah lebih biasa dilakukan.

Bagaimana untuk menjadikan tema saya menyokong berbilang bahasa?

Untuk menjadikan sesuatu tema menyokong pelbagai bahasa (internasionalisasi), terdapat dua langkah utama yang perlu diikuti. Pertama, pastikan bahawa…style.cssKepala danfunctions.phpSemua rentetan teks yang perlu diterjemahkan dalam bahasa lain telah dibungkus menggunakan fungsi terjemahan WordPress, seperti…__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )Kedua, anda perlu menggunakan alat seperti Poedit untuk membuatnya..potTerjemahkan fail template tersebut, kemudian buat versi yang sesuai untuk setiap bahasa..po和.moMengumpul semua dokumen dan meletakkannya di bawah topik yang relevan./languagesDalam direktori tersebut.

Bagaimana untuk menerbitkan projek pembangunan tema setelah ia selesai?

Sebelum menerbitkan tema anda, pastikan anda menguji tema tersebut dengan teliti menggunakan plugin “Theme Check” untuk memastikan ia memenuhi semua standard pengkodan dan keperluan keselamatan yang ditetapkan oleh direktori tema WordPress. Bersihkan semua kod pembangunan (debugging code) dan ulasan (comments) yang tidak diperlukan. Selepas itu, anda boleh memilih untuk menghantar tema tersebut ke direktori tema rasmi WordPress.org (yang memerlukan semakan), atau mengemasnya ke dalam fail ZIP untuk disediakan kepada pelanggan atau diedarkan di laman web anda sendiri. Jika anda mengedarkannya sendiri, pastikan anda menyediakan arahan pemasangan yang jelas dan dokumentasi yang lengkap.

Mengapa gaya kustom saya hilang setelah dikemaskini di belakang tabir?

Ini mungkin disebabkan oleh anda telah membuat perubahan secara langsung pada fail tema induk yang sedang digunakan. Apabila tema induk diperbaharui melalui panel pentadbiran WordPress, semua fail asas akan digantikan dengan versi baru, menyebabkan perubahan yang anda buat hilang. Itulah sebabnya, untuk sebarang pembangunan yang disesuaikan, penggunaan tema anak (sub-theme) sangat disyorkan. Gaya dan fungsi tema anak akan dimuatkan secara berasingan daripada tema induk, jadi walaupun tema induk diperbaharui, fail tema anak anda akan tetap memelihara semua kandungan yang disesuaikan.