Komponen utama tema WordPress.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Dalam dunia maya yang sangat kompetitif hari ini, sebuah dokumen Word yang direka dengan baik dan mempunyai prestasi yang cemerlang…。

Header information for the theme style sheet

Topikstyle.cssBahagian kepala fail mesti mengandungi sebuah ulasan yang mematuhi format tertentu. WordPress menggunakan maklumat ini untuk mengenal pasti dan memaparkan tema tersebut di latar belakang.

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

/*
Theme Name: My Awesome Theme
Theme URI: https://example.com/my-awesome-theme/
Author: Your Name
Author URI: https://example.com/
Description: A modern, responsive WordPress theme built for speed and SEO.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
*/

Di antaranya, “Text Domain” digunakan untuk tujuan internasionalisasi, iaitu sebagai penunjuk yang digunakan semasa proses terjemahan bahasa. Biasanya, ia sama dengan nama folder tema yang berkaitan.

Operasi biasa untuk fail fungsi tema

functions.phpFail adalah “otak” bagi sesuatu topik. Satu operasi yang biasa dilakukan ialah menggunakan…add_theme_support()Fungsi ini digunakan untuk mengisytiharkan ciri-ciri yang disokong oleh tema tersebut. Sebagai contoh, mengaktifkan gambar khas untuk artikel, logo yang boleh disesuaikan, latar belakang yang boleh disesuaikan, dan lain-lain.

<?php
function my_awesome_theme_setup() {
    // 添加对文章特色图片的支持
    add_theme_support( 'post-thumbnails' );
    // 添加对自定义Logo的支持
    add_theme_support( 'custom-logo' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    // 添加对标题标签的支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );
?>

Kod ini menggunakan “hook” untuk melaksanakan fungsi tertentu.after_setup_themeBerfungsi setelah tema dimuat turun, ia mengaktifkan beberapa ciri teras WordPress dengan selamat.

Lapisan Templat dan Templat Diperibadi

WordPress menggunakan sistem pintar yang dipanggil “Template Hierarchy” untuk menentukan cara memaparkan pelbagai jenis halaman. Apabila pengguna mengakses sebuah halaman, WordPress akan mencari fail templat yang sesuai mengikut urutan keutamaan yang ditetapkan. Sebagai contoh, untuk sebuah artikel yang diklasifikasikan sebagai “Berita” (News), WordPress akan mencari fail templat berikut secara berurutan:single-post-news.php -> single-post.php -> single.php -> singular.php -> index.phpPembangun boleh menggunakan set peraturan ini untuk mengawal halaman dengan lebih terperinci dengan mencipta fail templat yang mempunyai nama tertentu.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pengenalan Pembangunan Tema WordPress: Membina Laman Web Diperibadikan Daripada Kosong。

Selain daripada templat yang ditetapkan oleh sistem, pembangun juga boleh membuat “templat halaman” (page templates). Ini merupakan templat khusus yang direka untuk halaman tertentu atau kategori halaman tertentu. Untuk membuat templat halaman, perlu dinyatakan dengan jelas dalam nota di bahagian atas fail templat tersebut.

Mencipta templat halaman khusus (custom page template)

Sebagai contoh, untuk membuat sebuah templat halaman yang memenuhi seluruh lebar skrin, anda boleh membuat satu yang baru dengan nama…template-fullwidth.phpFail tersebut, dan tambahkan ulasan berikut pada awal fail:

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

Selepas itu, semasa mengedit halaman di bahagian belakang WordPress (backend), anda boleh melihat dan memilih “Layout Halaman Penuh Lebar” (Full Width Page Layout) daripada senarai drop-down “Template” dalam “Properties Halaman” (Page Properties). Ini memberikan fleksibiliti yang tinggi dalam penampilan kandungan, dan anda tidak perlu mengubah fail asas tema untuk memenuhi keperluan reka letak yang khusus.

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

Menggunakan tag syarat untuk kawalan logik

Dalam fail templat, seringkali perlu menunjukkan kandungan yang berbeza berdasarkan keadaan yang berbeza. Pada masa ini, tag syarat (condition tags) WordPress diperlukan. Sebagai contoh,index.phpDalam kod tersebut, tag kondisional boleh digunakan untuk menentukan sama ada halaman tersebut merupakan halaman senarai artikel atau halaman artikel individu. Walau bagaimanapun, biasanya terdapat fail template yang lebih khusus yang bertanggungjawab untuk menguruskan perkara ini.

<?php if ( is_home() && ! is_front_page() ) : ?>
    <h1>Senarai Artikel Blog</h1>
<?php elseif ( is_search() ) : ?>
    <h1>搜索结果：</h1>
<?php endif; ?>

Tag-tag syarat yang sering digunakan termasuk…is_single()、is_page()、is_category()、is_archive()Dan lain-lain, ia merupakan asas untuk membina tema yang dinamik dan pintar.

Pengurusan Skrip dan Gaya Tema

Untuk memastikan kestabilan dan prestasi tema, semua fail JavaScript dan CSS harus dimuat turun secara berperingkat menggunakan kaedah yang disediakan oleh WordPress, dan bukan secara langsung dalam fail templat.或Tag. Ini adalah melalui…functions.php“Dalam…”wp_enqueue_scriptsIa dilaksanakan menggunakan “hook” (pautan/kaitan tertentu dalam kod).

Diperoleh daripada WEB\nDisyorkan untuk membaca. Fokus Praktikal: Dari Nol ke Satu, Kuasai Kemahiran Asas Pembangunan Tema WordPress Moden.。

Mendaftar dan mengatur barisan sumber dengan betul

Gunakanwp_register_script()和wp_enqueue_script()(Skrip) atau yang setara dengannyawp_register_style()和wp_enqueue_style()(Gaya) Fungsi ini membolehkan WordPress mengurus hubungan kebergantungan (dependencies) dan kawalan versi (version control) secara terpusat, serta mengelakkan daripada muat turun yang berulang-ulang.

<?php
function my_awesome_theme_scripts() {
    // 注册并排队主样式表（style.css）
    wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

    // 注册一个自定义JavaScript文件
    wp_register_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0.0', true );
    // 排队这个脚本（仅在需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );
?>

Dalam contoh di atas,get_stylesheet_uri()Mendapatkan tema semasastyle.cssJalan (Path)get_template_directory_uri()Dapatkan URI direktori topik. Tetapkan parameter terakhir skrip kepada…trueIa bermakna kandungan tersebut akan dimuatkan di bahagian kaki halaman (footer), yang membantu meningkatkan prestasi pengambilan halaman.

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

Tambahkan gaya atau skrip berterusan (inline style atau script).

Kadang-kadang, perlu menjana CSS atau JavaScript secara dinamik berdasarkan logik PHP. Pada masa itu, anda boleh menggunakan…wp_add_inline_style()和wp_add_inline_script()Fungsi-fungsi tersebut mesti bergantung pada sumber yang telah disusun dalam senarai tunggu (queue).

<?php
function my_dynamic_css() {
    $custom_css = "
        .site-header {
            background-color: #" . get_theme_mod('header_bg_color', 'ffffff') . ";
        }
    ";
    wp_add_inline_style( 'my-awesome-theme-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_dynamic_css' );
?>

Theme Customizer dan Ciri-Ciri Khusus (Custom Features)

WordPress Customizer menyediakan antara muka pra-tontonan masa nyata, yang membenarkan pengguna (admin) untuk menyesuaikan beberapa tetapan tema, seperti warna, Logo, imej latar belakang, dan lain-lain. Melalui API Customizer, pembangun boleh menambahkan pilihan yang boleh disesuaikan ke dalam tema dengan selamat.

Tambahkan satu tetapan dalam alat penyesuaian (customizer).

Pertama sekali, perlu ada…functions.phpGunakan dalam bahasa Cinacustomize_registerHook untuk mendaftar tetapan, kawalan, dan kawasan (regions).

<?php
function my_awesome_theme_customize_register( $wp_customize ) {
    // 添加一个“颜色”板块
    $wp_customize->add_section( 'theme_colors', array(
        'title'    => __( '主题颜色', 'my-awesome-theme' ),
        'priority' => 30,
    ) );

    // 添加一个“链接颜色”设置
    $wp_customize->add_setting( 'link_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

    // 为该设置添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
        'label'    => __( '链接颜色', 'my-awesome-theme' ),
        'section'  => 'theme_colors',
        'settings' => 'link_color',
    ) ) );
}
add_action( 'customize_register', 'my_awesome_theme_customize_register' );
?>

Output custom settings within the topic.

Selepas menambahkan tetapan tersebut, nilai tersebut perlu dipaparkan di bahagian hadapan tema (frontend). Biasanya, ini dilakukan melalui kod yang digunakan untuk mengatur penampilan halaman web.style.cssAtau melaluiwp_add_inline_style()Dalam CSS dinamik yang ditambahkan, penggunaan…get_theme_mod()Fungsi mendapatkan nilai.

<?php
function output_customizer_css() {
    $link_color = get_theme_mod( 'link_color', '#0073aa' ); // 第二个参数为默认值
    if ( $link_color !== '#0073aa' ) {
        $css = "
            a { color: {$link_color}; }
            a:hover { color: " . adjust_color( $link_color, -50 ) . "; }
        ";
        wp_add_inline_style( 'my-awesome-theme-style', $css );
    }
}
add_action( 'wp_enqueue_scripts', 'output_customizer_css' );
?>

Dengan cara ini, fungsi dan penampilan tema menjadi sangat boleh disesuaikan, sambil mengekalkan kekemasan dan keselamatan kod.

RINGKASAN

Membangunkan sebuah tema WordPress merupakan projek yang sistematik dan memerlukan pemahaman yang mendalam tentang struktur templat, fungsi asas, pengurusan sumber, serta API yang boleh disesuaikan. Bermula dengan membina asas yang paling asas…style.css和index.phpMula dengan membuat fail templat khusus untuk mengawal penampilan halaman yang berbeza, menggunakan…functions.phpMengembangkan fungsi-fungsi tema dan mengurus skrip serta gaya (styles) mengikut piawaian WordPress merupakan asas untuk mencipta tema yang kuat dan cekap. Selain itu, mengintegrasikan API penukaran tema (theme customizer) dapat memberikan pengalaman penukaran tema yang mesra pengguna dalam masa nyata. Memahami konsep-konsep dan kemahiran asas ini adalah kunci untuk menjadi seorang pengembang tema WordPress yang profesional.

FAQ - Soalan Lazim

Sebuah tema WordPress yang paling asas memerlukan sekurang-kurangnya beberapa fail.

Sebuah tema yang paling asas dan boleh dikenali oleh WordPress memerlukan sekurang-kurangnya dua fail:style.css和index.php。style.cssBahagian kepala (header) mesti mengandungi keterangan maklumat topik yang betul.index.phpIa merupakan fail penarikan balik (rollback) yang terakhir dalam hierarki templat, yang digunakan untuk menghasilkan kandungan yang paling asas.

Apa perbezaan antara sub-topik dan topik utama? Bagaimanakah untuk membuatnya?

Subtema mewarisi semua fungsi dan gaya daripada tema induk, tetapi membenarkan pembangun untuk membuat perubahan dan penyesuaian tanpa perlu mengubah fail tema induk. Ini memudahkan untuk mengekalkan pengubahsuaian yang telah dibuat semasa tema induk diperbaharui. Untuk membuat subtema, anda hanya perlu…/wp-content/themes/Buat sebuah folder baru dalam direktori tersebut, dan kemudian cipta satu fail di dalam folder baru itu.style.cssFail tersebut harus mempunyai nota di bahagian kepala (header) yang mengandungi maklumat yang diperlukan.Template:Gunakan baris ini untuk menentukan nama direktori tema induk.

Mengapa templat halaman kustom saya tidak dipaparkan dalam senarai drop-down di bahagian belakang (backend)?

Sila periksa fail templat halaman anda (seperti…)my-template.phpAdakah fail tersebut terletak di dalam direktori akar (root directory) topik tersebut, dan format blok ulasan (comment block) di awal fail mesti betul sepenuhnya? Blok ulasan tersebut mesti mengandungi…Template Name:Baris ini, diikuti terus dengan nama templat anda. Sebuah ruang kosong yang salah atau kekurangan tanda kolon (:) boleh menyebabkan WordPress tidak mengenalinya.

Bagaimana untuk membuat topik saya menyokong terjemahan pelbagai bahasa?

Ini terutamanya dilakukan melalui proses “internasionalisasi (i18n)” dan “localisasi (l10n)”. Pertama sekali,style.css“Text Domain” danfunctions.php的load_theme_textdomain()Semasa panggilan, gunakan bidang teks tema yang konsisten. Kemudian, di semua tempat di mana terdapat rentetan yang perlu diterjemahkan, gunakan…__()、_e()Pakailah fungsi-fungsi terjemahan tersebut untuk melakukan proses terjemahan. Akhirnya, gunakan alat seperti Poedit untuk menghasilkan kandungan terjemahan yang diinginkan..potFail templat, dan buat versi yang sesuai untuk bahasa yang diinginkan..po和.moFail tersebut, letakkan di dalam bahagian yang berkaitan dengan topik tersebut./languages/Dalam katalog.