Cara membuat tema anak WordPress

Biasanya, hampir tidak mungkin menemukan tema yang sempurna; selalu ada beberapa modifikasi yang perlu dilakukan. Jadi, mengapa tidak mengambil tema default WordPress yang bagus, seperti Twenty Fifteen, dan menjadikannya milik Anda sendiri sehingga terlihat dan berfungsi seperti yang Anda inginkan? Membuat tema anak akan menghemat banyak waktu dan sakit kepala (percayalah).

Saya dapat berbicara dari pengalaman langsung. Saya “mewarisi” situs WordPress di mana pengembang baru saja meretas tema induknya, dan saya masih ingat betapa frustasinya saya karena saya tidak dapat benar-benar memperbarui tema karena takut mengesampingkan penyesuaian yang memberi situs fungsionalitasnya. Saya tidak tahu apa itu kode asli dan apa yang khusus, jadi begitulah, tanpa kemungkinan untuk pembaruan.

Ceritanya memang memiliki akhir yang bahagia. Saya masih baru di WordPress pada saat itu, jadi itu mengajari saya sejak awal bahwa mengubah tema induk bukanlah ide yang baik. Ketika situs akhirnya didesain ulang, item bisnis pertama adalah mengambil penyesuaian dan menempatkannya dalam tema anak.

Tema anak memungkinkan Anda bekerja di tempat terpisah tanpa pekerjaan Anda ditimpa oleh pembaruan tema induk di masa mendatang. Secara teknis, saat Anda membuat tema anak, Anda membuat kumpulan file terpisah yang dapat Anda gunakan untuk menyesuaikan tema tanpa memengaruhi tema induk asli. Jika Anda membuat perubahan pada file tema induk, perubahan tersebut akan ditimpa saat Anda memperbarui tema berikutnya. Ini adalah masalah besar karena pembaruan dapat mencakup modifikasi fitur, perbaikan bug, dan langkah-langkah keamanan penting. Sangat penting untuk selalu memperbarui tema induk dan menggunakan tema anak untuk penyesuaian apa pun.

Dasar-dasar tema anak

Tema anak adalah tema terpisah yang Anda buat yang mengandalkan tema induk untuk fungsionalitas dasarnya. Saat Anda menggunakan tema anak, WordPress tahu untuk mereferensikannya dan mencari fungsionalitas apa pun yang disertakan. Ini bagus karena memungkinkan Anda untuk memodifikasi hanya bagian dari tema induk yang perlu Anda ubah, menjadikannya cara yang sangat efisien untuk menambahkan penyesuaian ke situs WordPress Anda.

Untuk menggali lebih dalam, inilah cara kerja tema anak pada tingkat file. WordPress memeriksa untuk melihat apakah file yang diperlukan disertakan dalam tema anak. Jika disertakan, file tema anak itu dimuat. Jika tidak ada satu pun di tema anak, file dalam tema induk akan dimuat. Satu-satunya pengecualian untuk ini adalah file functions.php, di mana versi induk dan anak dimuat. Biasanya, ada informasi penting dalam file functions.php. Jika WordPress hanya memuat versi tema anak (kecuali Anda menyalin semuanya), situs tidak akan berfungsi dengan baik. Untungnya, WordPress memuat kedua file, jadi Anda tidak perlu khawatir menyalin seluruh file functions.php ke tema anak Anda.

Ingat, Anda selalu dapat mematikan tema anak Anda dan kembali ke aslinya jika diperlukan. Ini adalah jalan satu arah; Anda tidak dapat mematikan induk dan mengandalkan tema anak.

Jika Anda menambahkan penyesuaian ke tema WordPress, sebaiknya gunakan tema anak. Siap untuk membuat Anda sendiri? Sekarang kita akan melalui prosesnya, langkah demi langkah.

Membuat tema anak

Ini tidak serumit kedengarannya untuk membuatnya. Sebenarnya, secara teknis yang Anda butuhkan hanyalah dua file: file style.css dan file functions.php . Sebagian besar tema anak memiliki lebih dari itu, tetapi secara teknis, itu hanya dua yang diperlukan.

Untuk membuat tema anak, Anda harus menginstal WordPress bersama dengan tema induk yang ingin Anda gunakan.

Buat direktori tema

Pertama, buka direktori tema Anda dan buat folder untuk tema baru Anda. Beri nama yang mudah dikenali. Untuk contoh ini, saya akan memberi nama child-example tema saya agar mudah ditemukan.

Buat lembar gaya tema anak

Langkah berikutnya yang sangat penting adalah membuat lembar gaya tema anak. Buat file style.css . Perlu diingat, itu harus diberi nama style.css agar semuanya berfungsi dengan baik.

Selanjutnya, Anda perlu memasukkan beberapa informasi tentang tema Anda.

Salin dan tempel ini ke style.css file :

/*
 Theme Name:   Child Example
 Theme URI:    http://example.com/child-exxample/
 Description:  Child Example Twenty Fifteen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twenty-fifteen-child
*/

Ini mungkin terlihat seperti banyak, tetapi sebenarnya hanya ada dua yang diperlukan, yaitu Theme Name dan Template . Theme Name memberi tahu WordPress nama tema anak. Template memberi tahu WordPress tema mana yang harus dipertimbangkan sebagai tema induk, yang sangat penting.

Sebagian besar yang lain cukup jelas, tetapi ada beberapa yang mungkin memerlukan klarifikasi lebih lanjut. Text Domain dan Tags bisa sedikit membingungkan. Text Domain digunakan untuk menerjemahkan string untuk tujuan internasionalisasi. Ini unik untuk tema Anda dan harus digunakan kapan pun Anda menggunakan fungsi terjemahan. Ada lebih banyak informasi di Codex dan dapat ditemukan di topik I18n untuk Pengembang WordPress. Bagian Tags adalah daftar tag yang spesifik untuk tema WordPress. Untuk contoh ini, saya melihat Twenty Fifteen parent style.css , mengambil tag dari sana, dan meletakkannya di tema anak.

Gunakan gaya orang tua

Ingat bagaimana WordPress mencari file tema anak terlebih dahulu? Saat ini, tema anak berfungsi, tetapi tidak terlihat sangat halus karena Anda belum melakukan penataan gaya apa pun. Jika Anda mengaktifkannya dan memuat ulang halaman, itu akan terlihat sedikit berantakan. Mungkin akan terlihat seperti ini:

Mari kita perbaiki ini sehingga kembali ke tema induk dan setidaknya akan ada beberapa gaya yang diterapkan. Anda masih akan menggunakan tema anak Anda untuk gaya kustom Anda, tetapi pertama-tama, mari tampilkan gaya induknya.

Untuk memastikan Anda memuat lembar gaya file induk, kita perlu mengantrekannya di tema anak. Anda memerlukan file functions.php di tema anak untuk memasukkan cuplikan berikut.

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Membuat kustomisasi CSS

Sekarang setelah gaya induk ditampilkan, mari ubah beberapa CSS untuk penyesuaian tema anak Anda. Untuk contoh ini, menata elemen latar belakang untuk konten halaman adalah cara yang baik untuk melihat aksi tema anak. Ini telah ditata putih di CSS tema induk, tetapi mari kita ubah menjadi biru di tema anak Anda. Ingat, gaya induk dimuat terlebih dahulu, dan penyesuaian Anda akan dimuat setelahnya sehingga itulah yang akan kita lihat.

Jika Anda pengguna Chrome, Alat Pengembang sangat membantu untuk melihat gaya dan eksperimen di browser. Buka View > Developer > View Source dan pilih elemen halaman. Gaya akan ditampilkan di sebelah kanan. Saya memeriksa artikel yang memiliki kelas .hentry yang memiliki latar belakang putih. Saya menempelkan nilai hex untuk mengujinya terlebih dahulu di browser.

Untuk melakukan perubahan ini, buka file CSS di tema anak dan tambahkan informasi CSS.

Seperti yang Anda lihat, perubahan gaya dapat dengan mudah dilakukan di tema anak.

Memodifikasi fungsionalitas tema anak Anda

Menyesuaikan gaya cukup mudah, tetapi bagaimana dengan hal-hal lain seperti header, footer, sidebar, dll.? Katakanlah ada beberapa modifikasi yang harus dilakukan di footer. Salin dan tempel footer dari tema induk ke anak. File footer.php dapat dibuka di editor teks pilihan Anda dan dimodifikasi. Saya telah memutuskan untuk menghapus baris “Proudly powered by WordPress”, jadi saya menghapus ini dari file di tema anak saya. Ini sekarang file yang akan dimuat WordPress terlebih dahulu, sehingga baris teks tidak akan ditampilkan.

Membuat tema anak adalah kebiasaan yang baik untuk dilakukan saat membuat tema WordPress. Hanya dengan beberapa langkah sederhana, mereka mudah dibuat dan dipelihara. Menjaga kustomisasi terpisah dari tema induk baik untuk tujuan organisasi dan menjaga semuanya tetap diperbarui, yang akan menghemat banyak sakit kepala di jalan.