Dari awal: Memahami struktur asas tema WordPress.

Dari awal: Memahami struktur asas tema WordPress.

Sebuah tema WordPress yang standard merupakan sebuah folder yang mengandungi fail-fail dan direktori-direktori tertentu. Fail-fail ini bersama-sama menentukan rupa dan fungsi laman web tersebut. Tema yang paling asas hanya memerlukan dua fail untuk berfungsi, namun sebuah tema yang lengkap dengan ciri-ciri dan memenuhi standard pembangunan moden akan mengandungi lebih banyak kandungan.

Fail utama adalah…style.css和index.phpDi antaranya,style.cssBukan sahaja merupakan fail gaya (style sheet), tetapi juga merupakan “kad pengenalan” bagi tema tersebut. Blok ulasan di bahagian atas fail tersebut mengandungi maklumat meta tentang tema, seperti nama tema, pengarang, deskripsi, nombor versi, dan sebagainya. WordPress menggunakan maklumat ini untuk mengenal pasti dan memaparkan tema yang sesuai di latar belakang pentadbirannya (backend).

Satu lagi fail yang diperlukan adalahindex.phpIa merupakan fail templat utama untuk tema tersebut. Apabila WordPress tidak dapat mencari fail templat yang lebih khusus (seperti…single.php或page.phpApabila ia digunakan, ia akan digunakan secara lalai untuk merender halaman tersebut.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai Pembangunan Tema WordPress: Dari Penyesuaian Peribadi Hingga Pelaksanaan Fungsi Lanjutan。

Selain daripada dua fail ini, sebuah tema yang teratur biasanya juga mengandungi direktori dan fail-fail berikut:
* 模板文件：如用于渲染单篇文章的single.phpDigunakan untuk merender halaman.page.php, serta yang digunakan untuk senarai artikelarchive.phpDan halaman utamahome.php或front-page.php。
* 模板部件：存放于/template-parts/Dalam direktori tersebut, terdapat segmen kod yang boleh digunakan semula, seperti ringkasan artikel.content.phpHeader, Footerheader.php) dan kaki halaman (footer.php）。
* 函数文件：functions.phpIa merupakan inti fungsi tema tersebut. Ia digunakan untuk menambahkan ciri-ciri yang menyokong tema, menu pendaftaran dan bar sisi, memasukkan skrip dan fail gaya (style sheets), serta mendefinisikan pelbagai fungsi khusus (custom functions).
* 资源目录：通常包括/assets/Senarai, di bawahnya terdapat lagi…/css/、/js/、/images/Subdirektori ini digunakan untuk menyimpan sumber statik dengan cara yang teratur.

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

Fail templat teras dan hierarki templat

WordPress menggunakan sistem pintar yang dipanggil “Template Hierarchy” untuk menentukan fail templat mana yang perlu digunakan untuk merender setiap permintaan halaman tertentu. Memahami peraturan hierarki ini adalah kunci dalam pembangunan tema (theme development).

Prinsip kerjanya adalah seperti berikut: Apabila pengguna mengakses sebuah URL, WordPress akan menentukan terlebih dahulu jenis halaman yang sedang dipaparkan (seperti halaman utama, artikel individu, halaman arkib kategori, dan sebagainya), kemudian mencari fail templat yang sesuai mengikut senarai keutamaan yang telah ditetapkan. Jika fail yang paling sesuai ditemui, ia akan digunakan; jika tidak, proses pencarian akan diteruskan sehingga fail templat gantian ditemui.index.php。

Pemecahan fail templat yang sering digunakan

Sebagai contoh, pada halaman artikel yang berasingan, urutan carian dalam WordPress biasanya adalah:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.phpIni bermakna anda boleh membuat templat khusus untuk jenis artikel tertentu, atau bahkan untuk artikel tertentu yang berada dalam kategori tersebut.

Satu lagi fail yang penting adalahfunctions.phpWalaupun ia bukan sebahagian daripada hierarki templat, ia menyediakan sokongan latar belakang untuk semua templat. Anda boleh menggunakannya.add_theme_support()Fungsi ini digunakan untuk menyatakan ciri-ciri yang disokong oleh tema tersebut, seperti imej khas untuk artikel, logo yang boleh disesuaikan, format artikel, dan lain-lain.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Lengkap untuk Membangunkan Laman Web WordPress: Dari Asas hingga Pakar dalam Penggunaan Praktikal.。

// 在 functions.php 中添加主题支持
function mytheme_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_action( 'after_setup_theme', 'mytheme_setup' );

Penggunaan ciri-ciri tema dan sistem hook

Kekuatan dan kebolehluasan WordPress sebahagian besarnya disebabkan oleh sistem “hook” (pautan) yang terdapat di dalamnya. Terdapat dua jenis hook: hook tindakan (action hooks) dan hook penapis (filter hooks). Hook tindakan membenarkan anda menyisipkan kod khusus pada titik-titik tertentu semasa pelaksanaan program, manakala hook penapis membenarkan anda mengubah data yang dihantar sepanjang proses tersebut.

Gunakan pengait tindakan untuk menambah fungsi

Action hooks are created by…do_action()Pembuatan dan penggunaan fungsiadd_action()Fungsi tersebut akan memuatkan fungsi panggilan balik (callback function) ke pada “hook”. Dalam pembangunan tema, “action hook” sering digunakan untuk memasukkan kandungan pada lokasi tertentu atau untuk melaksanakan operasi pada masa yang sesuai.

Sebagai contoh,wp_enqueue_scriptsIni merupakan hook tindakan kritikal yang digunakan untuk mendaftarkan dan mengatur senarai gaya (style sheets) serta fail JavaScript dengan selamat. Anda sentiasa harus memuatkan sumber-sumber frontend di sini, dan bukan menulisnya terus dalam fail template.或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

// 在 functions.php 中正确引入样式和脚本
function mytheme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Menggunakan pengait penapis untuk mengubah output

Filter hooks are created by…apply_filters()Pembuatan dan penggunaan fungsiadd_filter()Fungsi tersebut membenarkan penggunaan fungsi panggilan balik (callback functions) semasa proses pemasangan (mounting). Sebagai contoh, anda boleh mengubah panjang ringkasan artikel, atau menambahkan awalan kepada semua tajuk artikel.

// 修改摘要字数长度
function mytheme_excerpt_length( $length ) {
    return 30; // 将摘要字数限制为30字
}
add_filter( 'excerpt_length', 'mytheme_excerpt_length' );

Mengimplementasikan reka bentuk responsif dan ciri-ciri yang diperibadikan

Tema WordPress moden harus bersifat responsif, iaitu mampu menyesuaikan diri dengan pelbagai saiz skrin daripada desktop hingga telefon bimbit. Ini terutamanya dicapai melalui penggunaan kueri media (media queries) dalam CSS. Selain itu, dengan menggabungkan ciri-ciri kustom WordPress, pengguna dapat memperoleh pilihan tetapan yang mesra pengguna di bahagian pentadbiran (backend).

Membina reka bentuk yang responsif

Satu amalan yang biasa digunakan adalah dengan menerapkan strategi CSS yang mengutamakan peranti mudah alih (mobile-first). Pertama sekali, gaya asas ditulis untuk peranti mudah alih, dan kemudian penggunaan kueri media (media queries) digunakan untuk menambah atau menggantikan gaya tersebut bagi skrin yang lebih besar.

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

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 10px;
}

/* 平板设备及以上 */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 桌面设备 */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Mengintegrasikan alat penyesuaian khusus (customizer) untuk pra-tontonan masa nyata

WordPressCustomizerIa merupakan alat yang sangat berkuasa, yang membenarkan pentadbir laman web untuk melihat pratonton masa nyata dan mengubah suai beberapa tetapan tema. Anda boleh…functions.phpMelalui$wp_customizeObjek ditambah dengan tetapan dan kawalan.

Sebagai contoh, tambahkan pilihan untuk mengubah maklumat hak cipta pada bahagian kaki laman web:

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 mytheme_customize_register( $wp_customize ) {
    // 添加一个“版权文本”设置
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 我的网站。保留所有权利。',
        'sanitize_callback' => 'sanitize_text_field', // 对输入进行净化
        'transport'         => 'postMessage', // 支持实时预览
    ) );

    // 为上述设置添加一个文本框控件
    $wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'mytheme' ),
        'section'  => 'title_tagline', // 放在“站点身份”区域
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Kemudian, dalamfooter.phpDalam fail templat, gunakan…get_theme_mod()Fungsi mengeluarkan nilai ini:
echo esc_html( get_theme_mod( 'footer_copyright_text', '默认版权文本' ) );

RINGKASAN

Pembangunan tema WordPress merupakan kemahiran komprehensif yang menggabungkan pengetahuan tentang PHP, HTML, CSS, JavaScript, serta pemahaman terhadap struktur asas WordPress. Bermula dari pemahaman yang paling asas…style.css和index.phpDari memahami struktur lapisan templat yang kompleks dan sistem pengaitan (hooks), hingga ke pelaksanaan reka bentuk yang responsif (responsive design)...CustomizerPengintegrasian merupakan setiap langkah yang penting dalam membina sebuah tema yang profesional, cekap, dan mudah digunakan. Mengikuti struktur fail dan garis panduan pengkodan yang standard bukan sahaja akan memudahkan penyelenggaraan tema yang anda bangunkan, tetapi juga memastikan keserasian yang baik dengan ekosistem WordPress serta pelbagai plugin. Ingatlah, pembangunan tema yang berkualiti bermula dengan perhatian yang sama terhadap pengalaman pengguna dan pengembang.

FAQ - Soalan Lazim

Apakah fail-fail yang diperlukan untuk sebuah tema WordPress yang paling asas?

Satu tema WordPress yang paling ringkas, yang boleh diaktifkan dan digunakan, hanya memerlukan dua fail sahaja:style.css和index.php。style.cssBahagian kepala (header) mesti mengandungi blok komen maklumat topik yang betul.index.phpIa perlu mengandungi kitaran (loop) asas WordPress dan struktur HTML yang standard.

Bagaimana untuk menambah menu navigasi kepada tema saya?

Pertama sekali, anda perlu…functions.phpGunakan dalam bahasa Cinaregister_nav_menus()Fungsi ini digunakan untuk mendaftarkan satu atau lebih lokasi hidangan. Kemudian, maklumat tersebut akan digunakan dalam templat tema (biasanya...header.php(C) Tempat di mana anda ingin menu tersebut dipaparkan.wp_nav_menu()Fungsi ini digunakan untuk memanggil dan memaparkan menu yang telah didaftarkan.

Apa itu subtopik, dan mengapa ia perlu digunakan?

Subtopik adalah sebuah topik yang bergantung pada topik lain (topik induk). Ia membenarkan anda mengubah suai dan memperluas fungsi serta gaya topik induk tanpa perlu mengedit fail topik induk secara langsung. Kelebihan daripada pendekatan ini adalah apabila topik induk diperbaharui, pengubahsuaian peribadi anda (yang dilakukan dalam subtopik) tidak akan hilang, yang memastikan keselamatan dan kemudahan proses pembaruan.

Bagaimana untuk menjadikan tema saya menyokong berbilang bahasa?

Untuk membuat topik menyokong pelbagai bahasa (internasional), terutamanya melibatkan dua langkah. Pertama, semasa dalam pembikinan, gunakan semua rentetan karakter yang perlu diterjemahkan.__()或_e()Pertama, fungsi-fungsi terjemahan perlu dibungkus (wrapped) dengan cara yang sesuai. Kedua, gunakan alat seperti Poedit untuk mengekstrak rentetan-rentetan teks tersebut daripada kod dan menggunakannya untuk proses terjemahan..potFail, kemudian buat versi yang sesuai untuk setiap bahasa..po和.moAkhir sekali,functions.phpPanggilan dalam bahasa Cinaload_theme_textdomain()Fungsi untuk memuatkan terjemahan.