Bagaimana cara membuat subtema WordPress?

Baca dalam 2 menit.
Jiangsu
2025-08-22
2025-10-29
2,869
Saya mendapatkan komisi ketika Anda berbelanja melalui tautan di bawah ini, tanpa biaya tambahan untuk Anda.

Ingin menyesuaikan tema WordPress Anda tetapi ingin sangat aman? Tidak perlu khawatir. Kami sudah siap untuk Anda. Baca artikel berikut, dan Anda akan dapat menyesuaikan tema WordPress Anda menggunakan subtema WordPress. Fungsi subtema WordPress adalah menyimpan kustomisasi Anda di folder yang berbeda, sehingga memperbarui tema induk Anda tidak akan merusaknya.

Apa arti subtopik?

Pada dasarnya, subtema mencerminkan tema apa pun. Konsepnya adalah, apa pun perubahan yang Anda lakukan pada subtema, tema induk Anda tidak akan terpengaruh, tetapi setiap perubahan pada tema induk akan tercermin dalam subtema.

Apakah perlu menggunakan subtopik?

Tanpa ragu, menggunakan subtema adalah cara paling aman untuk memodifikasi tema. Bagian terbaiknya adalah, meskipun tema induk Anda diperbarui, perubahan Anda tidak akan dihapus. Jika Anda mengalami masalah saat memodifikasi subtema, Anda dapat dengan mudah menghapusnya untuk kembali ke tema induk.

\nMengatur subtema WordPress.

Anda dapat mengatur subtema WordPress secara manual atau dengan bantuan plugin.

Hal yang perlu Anda ingat adalah bahwa tema induk Anda tidak akan berfungsi sampai muncul di halaman “Tema” di bawah “Penampilan”.

Metode 1: Membuat subtopik secara manual.

#1Pertama, Anda harus membuat folder baru dan memberikannya nama sesuai keinginan Anda, misalnya “twentytwentyfour-child”.

#2:Selanjutnya, Anda harus membuat file dan memberikannya nama “style.css”. Perhatikan bahwa file ini wajib ada.

#3Sekarang Anda perlu membuka file yang baru saja Anda buat dan memasukkan informasi berikut di dalamnya.

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://example.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

Penjelasan parameter kunci:

  • Theme Name:\n(Wajib diisi)Nama subtopik Anda.
  • Template:\n(Wajib diisi)Ini adalahYang paling penting.Sebuah baris dari\n. Itu harusSepenuhnya sesuai.Nama direktori dari tema induk. Misalnya, tema induknya adalah twentytwentyfourDi sini, isi saja. twentytwentyfour; Topik utamanya adalah DiviDi sini, isi saja. Divi.Harus menggunakan huruf kapital dan huruf kecil yang konsisten.
  • Description\n: Deskripsi singkat dari subtopik tersebut.
  • AuthorNamamu.
  • Author URIAlamat situs web Anda.
  • Version\n: Nomor versi subtopik.

Meskipun CSS sub-topik akan dimuat secara otomatis, tetapiIni tidak akan secara otomatis mewarisi semua gaya dari tema induk.Untuk memberi subtopik Anda awal yang lengkap dan dapat diandalkan, praktik yang sangat umum dan direkomendasikan adalah:Pertama, impor seluruh stylesheet dari tema induk.

Kamu bisa melakukannya di CSS kustomisasi milikmu.Sebelumnya, menggunakan @import Aturan digunakan untuk mencapai hal ini.

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://www.likacloud.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

/* 导入父主题的样式以确保设计基础一致 */
@import url("../twentytwentyfour/style.css");

/* 自定义样式从这里开始 */

/* 1. 更改文章标题颜色 */
.wp-block-post-title {
    color: #1a4f6e;
    font-weight: 700;
}

/* 2. 更改网站背景色 */
body {
    background-color: #f8f9fa;
}

/* 3. 更改主内容区域的宽度 */
.wp-block-group.alignwide {
    max-width: 1280px;
}

/* 4. 自定义链接颜色 */
a {
    color: #d14545;
}
a:hover {
    color: #a23434;
    text-decoration: none;
}

Perhatikan.

Meskipun demikian, @import Ini adalah metode yang paling sederhana, tetapi dari segi kinerja, ini bukan yang terbaik (karena akan mencegah pemuatan paralel). Metode yang lebih canggih adalah menggunakan wp_enqueue_style() Fungsi dalam subtopik functions.php Di dalam file, lembar gaya untuk tema induk ditambahkan ke antrean. Namun, bagi pemula, gunakan @import Itu sepenuhnya layak dan mudah dipahami.

Contohnya seperti ini:

<?php
// 确保在正确的钩子上加载样式
add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles');

function enqueue_parent_and_child_styles() {
    // 加载父主题样式
    wp_enqueue_style('parent-style', get_template_directory_uri() . 'https://www.likacloud.com/style.css');
    
    // 加载子主题样式,并指定依赖于父主题样式
    // 这样可以确保子主题样式在父主题样式之后加载,保证样式覆盖生效
    wp_enqueue_style('child-style', 
                     get_stylesheet_directory_uri() . 'https://www.likacloud.com/style.css',
                     array('parent-style'), // 依赖关系
                     wp_get_theme()->get('Version') // 版本号,可选
                    );
}

Penjelasan kode:

  1. add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles'): Mengaitkan fungsi kustom ke hook pemuatan gaya WordPress.
  2. get_template_directory_uri()\n: Dapatkan URL dari direktori tema induk.
  3. get_stylesheet_directory_uri(): Dapatkan URL direktori sub-topik (saat sub-topik aktif)
  4. array('parent-style')Gaya sub-tema dalam deklarasi tergantung pada gaya tema induk, pastikan urutan pemuatan yang benar.

Metode ini, dibandingkan dengan @import Lebih efisien, karena memungkinkan browser memuat lembar gaya secara paralel dan mengelola ketergantungan antar gaya dengan lebih baik.

Anda hanya perlu menambahkan kode ini ke subtema. functions.php Di dalam file (jika file tersebut tidak ada, maka akan dibuat), sambil mempertahankan subtopik yang sudah Anda miliki. style.css Cukup tambahkan informasi anotasi di bagian atas.

Semua detail lainnya dapat diubah sesuai keinginan Anda.

Setelah menyelesaikan tugas ini, Anda harus pergi ke “Tampilan >> Tema” dan memeriksa apakah subtema Anda telah dibuat. Jika ya, selamat, Anda dapat mengaktifkannya untuk menguji apakah itu mewarisi desain dari tema induk.

Metode 2: Menggunakan plugin untuk membuat subtema.

Jika melakukan ini secara manual tidak menarik bagi Anda, Anda dapat menggunakan plugin WordPress gratis untuk menyelesaikan pekerjaan ini untuk Anda. Ada banyak plugin gratis yang dapat membuat subtema untuk Anda dan membebaskan Anda dari melakukan semua ini secara manual. Kami akan menggunakanKonfigurator sub-topik.Plugin, tetapi Anda bebas menggunakan plugin apa pun yang tersedia.

Bagaimana Cara Membuat Subtema WordPress - LikaCloud

#1: Pertama, Anda perlu mengunduhnya. Konfigurator Tema Anak. Plugin.

#2: Sekarang, masuk ke situs web Anda dan kunjungi dasbor Anda.

#3: Navigasi ke Plugins, lalu pilih opsi Add New.

#4:Sekarang, Anda harus mengunggah plugin yang baru saja Anda unduh dengan mengklik opsi “Unggah Plugin”, lalu mengaktifkannya.

#5:Memastikan tema yang ingin Anda buat subtema-nya sudah aktif sangat penting.

#6: Hal ini dapat dilakukan dengan cara menavigasi ke bagian “Alat” dan mengklik subtopiknya.

#7: Sekarang klik tombol Analisis dan buat subtema Anda sesuai dengan pengaturan yang disebutkan oleh plugin.

#8: Sekarang Anda harus mengklik opsi “Buat Subtopik Baru”.

Edit file template lainnya.

Anda harus menulis fungsi tersebut di subtopik, jika Anda ingin menambahkan fungsi kustom apa pun ke dalamnya. Silakan gunakan subtopik untuk membuat perubahan struktur atau tata letak pada topik induk.

Asumsikan Anda telah membuat twentytwentyfour Untuk sub-tema ini, Anda ingin mengubah cara menampilkan halaman tunggalnya. Lokasi halaman tunggalnya adalah twentytwentyfour-child/template-parts/content-single.php.

#1:Di dalam folder sub-tema, buat file content-single.php. Anda perlu sangat berhati-hati dengan nama dan strukturnya. Mereka harus sama dengan tema induk agar dapat menggantikannya.

#2: Selanjutnya, Anda perlu membuat folder baru dan memasukkan file ini ke dalamnya, tetapi pastikan terlebih dahulu jalurnya dan pastikan itu terlihat sama persis dengan jalur tema induknya.

#3: Itu saja. Pada langkah ini, yang perlu Anda lakukan adalah menulis kode yang Anda inginkan di content-single.php, yang akan menggantikan file induk.

Hati-hati: Pastikan nama file dan jalur folder harus sama.

Kami harap Anda sekarang dapat dengan mudah membuat subtopik. Jika Anda memiliki pertanyaan, silakan tambahkanGrup QQ 1398231Discuss.

\nLihat penyedia layanan hosting cloud WordPress yang direkomendasikan.