Panduan Pengantar Pengembangan Tema WordPress: Membangun Subtema Pertama Anda Dari Nol

WordPress, sebagai sistem manajemen konten (Content Management System/CMS) yang paling populer di dunia, memiliki tingkat kustomisasi yang sangat tinggi, yang sebagian besar berasal dari sistem tema (theme system)-nya. Bagi para pengembang yang ingin mempersonalisasi tampilan situs web mereka tanpa perlu menyentuh kode inti (core code), Child Theme merupakan solusi yang sempurna. Child Theme memungkinkan Anda untuk secara aman mewarisi semua fitur dari Theme induk (parent theme), sambil hanya melakukan modifikasi yang diperlukan untuk mencapai tampilan yang diinginkan, sehingga pembaruan pada Theme induk tidak akan menghapus atau mengubah hasil kustomisasi yang telah Anda buat. Artikel ini akan membimbing Anda dari awal hingga Anda berhasil membuat Child Theme WordPress yang lengkap dan siap digunakan.

Apa itu subtopik dan keunggulan utamanya?

Subtema merupakan tema WordPress yang independen, namun memerlukan tema lain (yang disebut tema induk/parent theme) untuk dapat berfungsi dengan baik. Konsep utama dari subtema adalah “pewarisan (inheritance) dan penggantian (overwriting)” fitur-fitur dari tema induk. Subtema biasanya hanya terdiri dari satu file gaya (style sheet) dan satu file fungsi (function file), namun dengan menggunakan kedua file tersebut, subtema dapat disesuaikan secara mendalam dengan kebutuhan pengguna.

Menggunakan subtema dalam pengembangan memiliki beberapa keunggulan yang tidak dapat digantikan. Yang pertama adalah aspek keamanan saat melakukan pembaruan. Ini merupakan keuntungan terpenting. Jika Anda langsung mengedit file tema induk, maka setiap perubahan kustom yang Anda lakukan akan terhapus saat tema induk diperbarui, yang dapat menyebabkan masalah dengan tampilan situs web atau fungsi-fungsinya yang tidak berjalan dengan benar. Dengan menggunakan subtema, perubahan Anda akan disimpan dalam direktori subtema, sehingga pembaruan tema induk dapat dilakukan tanpa mempengaruhi perubahan yang telah Anda buat. Kedua hal tersebut dapat berjalan secara terpisah dan tidak saling mengganggu.

推荐阅读 Panduan Memulai Plugin WooCommerce: Membangun Toko Online Anda dari Nol.。

Selanjutnya adalah aspek efisiensi pengembangan. Anda tidak perlu membangun semua file template dari awal untuk sebuah tema; cukup buat bagian dari tema tersebut yang perlu Anda modifikasi di dalam subtema. Misalnya, jika Anda hanya ingin mengubah bagian header situs web, maka Anda hanya perlu membuat perubahan di dalam subtema tersebut. header.php File, semua template lainnya (seperti…) single.php、page.phpSemua elemen tersebut akan secara otomatis menggunakan versi dari tema induk. Hal ini sangat meningkatkan efisiensi pengembangan.

UltaHost – Hosting untuk WordPress

Jaminan pengembalian uang dalam 30 hari, bandwidth dan basis data yang tidak terbatas, perlindungan DDoS gratis, diskon 50% untuk pembelian selama 3 tahun (dari harga normal: 50%).

halaman akses

Terakhir adalah struktur yang jelas dan kemudahan untuk dipindahkan (portabilitas). Semua kode kustom terdapat dalam sebuah folder tema yang terpisah, sehingga strukturnya mudah dipahami. Ketika Anda perlu memindahkan situs web ke server baru atau berbagi modifikasi yang Anda buat dengan anggota tim, Anda hanya perlu menyalin folder tema tersebut, yang sangat memudahkan proses pengelolaannya.

Buatlah direktori subtopik pertama Anda dan berikan nama file di dalamnya.

Membangun sebuah sub-topik secara teknis sangat sederhana; Anda hanya perlu mengikuti struktur file dan aturan penamaan yang telah ditentukan. Pertama-tama, Anda perlu berada di direktori tema WordPress. /wp-content/themes/ Buatlah folder baru. Nama folder tersebut sebaiknya sama dengan nama subtopik Anda. Disarankan untuk menggunakan huruf kecil, garis tengah, dan angka, misalnya: my-first-child-theme。

Dalam folder tersebut, file pertama dan juga yang paling penting yang perlu Anda buat adalah file berformat lembar gaya (style sheet). style.cssFile ini tidak hanya berisi aturan gaya (style rules), tetapi juga komentar di bagian header file yang sangat penting bagi WordPress untuk mengenali subtema (sub-theme). Komentar tersebut harus mencakup informasi tertentu.

/*
 Theme Name:   My First Child Theme
 Theme URI:    https://example.com/my-first-child-theme/
 Description:  A child theme of the Twenty Twenty-Six theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentysix
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  my-first-child-theme
*/

Harap perhatikan,Template: Baris ini sangat penting; namanya harus sama persis dengan nama folder tema induk, dan perbedaan antara huruf besar dan kecil harus dihormati. Misalnya, jika Anda menggunakan tema default WordPress, yaitu Twenty Twenty-Six, nama foldernya adalah… twentytwentysixJadi, di sini harus ditulis… twentytwentysixMelalui pernyataan ini, WordPress membangun hubungan warisan (inheritance) antara sub tema (sub-theme) dan tema induk (parent theme).

推荐阅读 Panduan Utama untuk Pengembangan Tema WordPress: Membangun Tema Situs Web Profesional dari Nol hingga Satu.。

Untuk memastikan bahwa sub-topik dapat memuat gaya (style) dengan benar, Anda biasanya juga perlu membuat file inti kedua, yaitu file fungsional (functional file). functions.phpFungsi dari file ini sama dengan fungsi dari tema induknya. functions.php Lakukan pengunduhan (loading) secara paralel, bukan dengan menggantinya. Anda dapat menambahkan kode PHP kustom di dalamnya. Yang paling penting, gunakan kode tersebut untuk menambahkan file tabel gaya (style sheet) dari tema induk (parent theme) dan tema anak (child theme) ke dalam antrian (queue) dengan benar.

Mengunduh gaya (style) dengan benar melalui file fungsi (function file).

Dalam subtopik tersebut,functions.php Tugas utama dari sebuah file biasanya adalah mengelola proses pengunduhan (loading) dari file gaya (style sheet). Meskipun untuk sub-topik (sub-topic)… style.css Hal tersebut akan secara otomatis dikenali oleh WordPress, namun untuk memastikan bahwa gaya (style) dari tema induk (parent theme) diunduh terlebih dahulu dan dengan benar, praktik terbaik adalah menggunakan sebuah “WordPress action hook” untuk secara eksplisit mengelola proses pengunduhan tersebut.

Anda perlu melakukannya pada subtopik tersebut. functions.php Tulis sebuah fungsi dalam berkas, lalu gunakannya. wp_enqueue_scripts Hook a function to call it. This approach ensures that the style sheet is loaded correctly and efficiently in the header of the page.

hosting.com hosting bersama

Kinerja tinggi, dilengkapi dengan CPU AMD EPYC, penyimpanan SSD NVMe, dan LiteSpeed, dukungan internal ahli 24 jam sehari, langkah-langkah keamanan canggih termasuk SSL, brute force, malware, dan perlindungan DDoS, menghemat hingga 731 TB/bulan.

halaman akses

Berikut adalah contoh implementasi yang standar:

<?php
/**
 * Enqueue parent and child theme stylesheets.
 */
function my_first_child_theme_enqueue_styles() {
    // 首先加载父主题样式表
    wp_enqueue_style( 
        'parent-style', 
        get_template_directory_uri() . '/style.css' 
    );

// 然后加载子主题样式表
    wp_enqueue_style( 
        'child-style', 
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style'), // 声明依赖关系，确保父主题样式先加载
        wp_get_theme()->get('Version') // 使用主题版本号作为缓存破坏参数
    );
}
add_action( 'wp_enqueue_scripts', 'my_first_child_theme_enqueue_styles' );

Dalam kode di atas,get_template_directory_uri() Fungsi tersebut mengembalikan URI dari direktori tema induk. get_stylesheet_directory_uri() Fungsi tersebut mengembalikan URI direktori tema aktif saat ini (yaitu subtema). Dengan menyatakan bahwa tabel gaya subtema bergantung pada tabel gaya tema induk, kita memastikan bahwa urutan tumpukan (stacking) CSS berjalan dengan benar: gaya tema induk diterapkan terlebih dahulu, kemudian gaya subtema menimpa dan melengkapi gaya tersebut.

Mengimplementasikan penyesuaian tema anak (sub-theme) yang umum digunakan

Setelah struktur dasar selesai dibangun, Anda dapat mulai melakukan pekerjaan kustomisasi sesungguhnya. Kustomisasi yang paling umum terjadi pada dua tingkatan, yaitu file gaya (style) dan file template.

推荐阅读 Menganalisis secara mendalam pengembangan plugin WordPress: Membangun ekstensi fungsionalitas kustom dari nol.。

Untuk melakukan penyesuaian gaya (style customization), Anda hanya perlu melakukannya pada sub-topik (sub-topic) yang bersangkutan. style.css Tambahkan aturan CSS baru ke dalam file tersebut. Karena aturan ini akan diunduh setelah gaya tema induk (parent theme) diunduh, maka aturan ini akan memiliki prioritas yang lebih tinggi (asumsikan spesifisitas selektor (selector)nya sama). Misalnya, jika Anda ingin mengubah warna tautan di seluruh situs, Anda dapat menambahkan kode berikut:

/* 在子主题的 style.css 文件中 */
a {
    color: #3498db; /* 覆盖父主题的链接颜色 */
}

.site-header {
    background-color: #2c3e50; /* 修改页头背景色 */
}

Untuk perubahan tata letak atau fitur yang lebih kompleks, Anda perlu menyalin (mengganti isi) file template dari tema induk. Ini merupakan salah satu fitur paling kuat dari tema anak (sub-theme). Cara melakukannya adalah: ambil file template dari tema induk yang ingin Anda modifikasi… header.php、footer.php 或 page.phpSalin file tersebut ke dalam direktori subtema Anda. Setelah itu, WordPress akan secara otomatis menggunakan salinan tersebut yang berada di dalam direktori subtema, dan mengabaikan file asli yang ada di dalam direktori tema utama.

Hosting bersama InterServer.

Hosting bersama seharga $2,50 USD per bulan, diskon $0,1 USD untuk bulan pertama dengan kode promo tryinterserver, serta 461 skrip aplikasi cloud yang dapat diinstal dengan sekali klik.

halaman akses

Misalnya, untuk mengatur tampilan bagian kaki halaman (footer) secara khusus, Anda dapat mengubah kode yang terdapat pada tema induk (parent theme). footer.php Salin file tersebut ke folder sub-topik, lalu buka salinan tersebut untuk diedit. Anda dapat mengubah informasi hak cipta, menghapus atau menambahkan area utilitas (tools), dan sebagainya. Ingatlah bahwa Anda hanya perlu menyalin file-file yang perlu diubah, tidak perlu menyalin seluruh topik induknya.

Selain itu, Anda juga dapat melakukannya pada sub-topik (sub-topic). functions.php Fitur-fitur baru dapat ditambahkan ke dalam tema Anda. Misalnya, membuat area baru untuk widget sidebar, mendukung jenis artikel yang dapat disesuaikan, atau memuat skrip tambahan untuk halaman tertentu. Kode-kode tersebut akan aman disimpan dalam subtema (sub-theme) Anda.

Menyimpulkan.

Dengan mengikuti langkah-langkah dalam artikel ini, Anda telah memahami seluruh proses mulai dari membuat struktur direktori, menulis informasi header tabel gaya yang diperlukan, hingga memuat gaya tersebut dengan benar melalui file fungsi, serta melakukan penulisan ulang gaya dan template secara spesifik. Subtheme merupakan praktik terbaik yang mendasar dan sangat penting dalam pengembangan WordPress; praktik ini memisahkan pekerjaan kustomisasi Anda dari kode tema inti, sehingga memastikan keandalan dan keamanan situs web dalam jangka panjang. Baik Anda hanya ingin melakukan penyesuaian warna yang sederhana maupun melakukan rekonstruksi tata letak yang mendalam, memulai dengan subtheme merupakan pilihan yang paling bijaksana dan profesional.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah bisa membuat subtema untuk setiap tema WordPress?

Secara teoritis, setiap tema yang mematuhi standar penulisan kode WordPress dapat digunakan sebagai tema induk (parent theme) untuk membuat tema turunan (child theme). Anda hanya perlu memastikan bahwa… style.css 的 Template: Cukup isi nama folder topik induk dengan benar di dalam kolom yang tersedia.

Namun, beberapa tema dengan desain yang sangat sederhana atau struktur yang khusus (misalnya, tema yang gayanya tidak diunduh melalui cara yang standar) dapat menyebabkan subtema tidak berfungsi dengan baik. Saat memilih tema induk, lebih baik memilih tema yang populer, terus diperbarui, dan memiliki dokumentasi yang lengkap, karena hal tersebut merupakan pilihan yang lebih aman.

Apakah file functions.php dari subtema akan menggantikan yang dari tema induk?

Tidak. Ini adalah salah satu kesalahpahaman yang paling umum terkait subtopik. Subtopik… functions.php File tersebut tidak akan menimpa file dengan nama yang sama di dalam tema induk, melainkan akan ditempatkan di dalam struktur tema induk tersebut. functions.php Setelah itu, file tersebut diunduh (diload) ke dalam sistem.

Ini berarti kode yang terdapat di kedua file tersebut akan dieksekusi. Anda dapat melakukannya di sub-topik (sub-topic) yang relevan. functions.php Anda dapat menambahkan fitur baru atau menggunakan hook WordPress untuk mengubah perilaku yang sudah ada, tetapi Anda tidak dapat secara langsung “menggantikan” fungsi yang ada di tema induk dengan membuat fungsi dengan nama yang sama, karena hal tersebut dapat menyebabkan kesalahan fatal di PHP. Untuk mengubah perilaku fungsi di tema induk, umumnya Anda perlu menggunakan action hook atau filter hook.

Apa yang harus dilakukan jika tata letak situs web menjadi kacau setelah sub-topik diaktifkan?

Jika tampilan situs web menjadi sangat tidak normal setelah sub-topik diaktifkan, hal ini biasanya disebabkan oleh tidaknya tabel gaya (style sheet) yang terload dengan benar. Silakan periksa sesuai dengan langkah-langkah berikut:

Pertama-tama, periksa subtopiknya. style.css In the file header Template: Pastikan bahwa nilai tersebut sama persis dengan nama folder dari tema induk, termasuk perbedaan huruf besar dan kecil. Ini merupakan penyebab paling umum dari masalah tersebut.

Kedua, periksa halaman Anda… functions.php Kode yang terdapat dalam file tersebut, terutama… wp_enqueue_style Pastikan bahwa pemanggilan fungsi tersebut dilakukan dengan benar, dengan path (jalur) dan pengaturan ketergantungan (dependencies) yang sesuai, serta tidak ada kesalahan sintaks PHP. Anda dapat memeriksa adanya pesan kesalahan terkait di WordPress melalui menu “DASHBOARD -> ALAT -> Kesehatan Situs” (Dashboard -> Tools -> Site Health).

Terakhir, bersihkan semua cache dari situs web dan browser Anda, lalu perbarui halaman untuk melihat hasilnya.

Bagaimana cara menambahkan template halaman kustom dalam sub-topik?

Menambahkan template halaman kustom di dalam subtema sama persis dengan menambahkannya di dalam tema biasa. Anda hanya perlu membuat sebuah file PHP baru di dalam direktori subtema, lalu menambahkan blok komentar khusus di bagian awal file tersebut untuk menyatakan bahwa file tersebut merupakan sebuah template halaman.

Misalnya, untuk membuat sebuah yang bernama… my-full-width.php Untuk file tersebut, bagian awalnya harus mencakup:

<?php
/**
 * Template Name: 我的全宽页面
 * Description: 一个没有侧边栏的全宽页面模板。
 */

Setelah itu, Anda dapat menulis kode template Anda di dalam file tersebut. Setelah proses pembuatan selesai, saat membuat atau mengedit halaman di backend WordPress, Anda akan dapat melihat opsi “My Full-Width Page” dalam daftar drop-down “Template” di bagian “Halaman Properti”.