Cara Membuat Tema Anak di WordPress (Langkah demi Langkah)

Pernahkah Anda memperbarui tema WordPress hanya untuk menemukan bahwa semua perubahan khusus yang Anda buat pada tema itu sendiri telah hilang? Tema Anak WordPress adalah solusi untuk menghindari masalah ini dan dalam artikel ini kami akan menunjukkan kepada Anda cara membuatnya.

Mari kita pergi!

Apa itu Tema Anak WordPress

Tema anak WordPress tidak dianggap sebagai tema lengkap seperti yang dapat ditemukan di direktori tema WordPress. Sebaliknya, itu sepenuhnya tergantung pada tema lain (disebut Tema Induk) agar dapat diaktifkan dan berfungsi dengan baik.

Saat diaktifkan, ia mewarisi semua fungsi, fitur, dan kode tema induknya tanpa membuat perubahan apa pun pada file tema induk.

WordPress akan menyajikan kode tema induk kecuali bagian yang ditimpa oleh tema anak yang akan disajikan dari folder tema anak. Hasil ini berarti bahwa ketika tema induk diperbarui, setiap modifikasi/tambahan dan sebagainya yang dibuat pada tema anak tidak hilang.

Membuat tema Anak (Langkah-demi-Langkah)

Sebelum melanjutkan, pastikan:

• Anda memiliki akses ke file situs web Anda melalui klien FTP (seperti WinSCP atau Filezilla)
• Anda memiliki editor teks yang tersedia (seperti notepad++) .

Untuk memulai, kita akan mengaktifkan tema default yang juga disebut sebagai Tema Induk. Dalam contoh ini, itu akan menjadi tema Dua Puluh Dua Puluh. Jika kita menuju ke ujung depan situs web kita, kita akan melihat sesuatu seperti ini:

Sekarang mari kita buat dan aktifkan tema anak 'Dua Puluh Dua Puluh'.

Tambahkan Direktori

Pertama, kita harus membuat direktori 'dua puluh dua puluh anak' baru di dalam /wp-content/themes. Perhatikan bahwa folder anak dapat diberi nama apa pun yang Anda suka selama Anda tidak menggunakan spasi atau tanda baca.

Tambahkan file style.css

Selanjutnya, kita harus membuat file style.css dan menambahkan header tema yang sesuai. Sebelum melanjutkan mari kita lihat style.css dari parent theme.

Mari kita lihat di mana informasi ini tercermin di area admin.

Pertama, buka detail tema pada Appearance > Themes dan lihat lebih dekat pada kolom kanan.

Jika kita membandingkan ini dengan stylesheet, kita akan melihat dari mana berbagai elemen informasi ini diambil.

Kita perlu mulai menambahkan beberapa informasi ini ke lembar gaya tema anak kita. Informasi minimum yang diperlukan yang harus dimasukkan sebagai header adalah 'Nama Tema' dan 'Templat'.

 /* Theme Name: Twenty Twenty - Child Template: twentytwenty */

• Nama Tema: Nama yang diinginkan dari Tema Anak Anda yang akan ditampilkan di bagian belakang WordPress.
• Templat: Ini harus identik dengan nama direktori tema induk. Ini adalah tajuk paling penting untuk tema anak karena sebenarnya memberi tahu WordPress apa tema induknya dan dengan demikian mendefinisikan ketergantungan. Tanpa itu, tema anak Anda tidak akan berfungsi.

Setelah tema anak diaktifkan, yang akan Anda lihat di backend adalah ini:

Anda juga dapat memasukkan informasi opsional berikut:

• Versi (versi tema)
• Membutuhkan setidaknya (versi WP minimum yang diperlukan agar tema berfungsi dengan baik)
• Membutuhkan PHP (versi WP PHP minimum agar tema berfungsi dengan baik)
• Description (detail terkait tema)
• Tag (tag tema)
• Penulis (Nama pengembang tema)
• dll.

Pada titik ini, jika Anda membuka bagian depan situs web Anda, Anda mungkin menemukannya rusak dan terlihat seperti ini:

Ini sepenuhnya normal karena stylesheet (style.css) yang sekarang dirujuk oleh WordPress sekarang berasal dari tema anak dan stylesheet ini kosong, bar informasi yang Anda masukkan di atas. Anda dapat memulai gaya Anda sendiri dari awal atau memuat gaya tema induk dan mulai dari sana. Jika Anda ingin mengimpor lembar gaya tema induk, Anda dapat melakukannya dengan salah satu dari dua cara.

Opsi Satu: Impor lembar Gaya Induk dengan Cara Klasik

Yang harus Anda lakukan hanyalah menambahkan baris ini ke file style.css tema anak Anda:

 @import url('../twentytwenty/style.css');

Perintah ini memberi tahu WordPress ke mana harus mencari untuk mengambil file CSS asli. Sekarang jika Anda me-refresh beranda Anda, sepertinya kembali normal. Apa pun yang Anda tambahkan sekarang di style.css akan menimpa gaya induk yang diimpor. Coba misalnya untuk menambahkan ukuran font yang berbeda untuk judul h2 "Halo dunia!".

Segarkan halaman dan lihat pemeriksa elemen dari tab pengembang.

Anda akan melihat bahwa nilai tambah dihitung dan default (gaya induk) "ukuran font: 6.4rem;" telah ditimpa.

Apa yang harus Anda pertimbangkan adalah bahwa menggunakan metode ini memiliki pengaruh negatif pada kecepatan situs Anda karena file dipaksa untuk memuat satu demi satu dan tidak secara paralel. Lebih khusus lagi, browser harus mengunduh, mengurai, dan mengeksekusi file pertama sebelum "diberitahu" bahwa ia perlu mengunduh file kedua.

Karena alasan ini, mengimpor file parent style.css dengan cara ini tidak lagi disarankan.

Opsi Dua: Impor Lembar Gaya Induk dengan Cara yang Benar

Untuk mengimpor file parent style.css 'dengan cara yang benar' kita perlu menambahkan file functions.php kosong di dalam folder tema anak Anda.

Setelah Anda selesai melakukannya, buka dengan editor Anda dan tambahkan tag PHP pembuka (<?php), setelah itu Anda dapat menambahkan kode PHP berikut:

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

Jika Anda memeriksa alat pengembang browser Anda sekarang, Anda akan melihat bahwa hasilnya sama dengan cara 'tradisional' yang diuraikan dalam Opsi Satu di atas, kecuali sekarang jauh lebih cepat.

Beberapa catatan lebih lanjut tentang kode PHP:

• 'parent-theme-style' adalah nama pegangan dan harus unik
• get_template_directory_uri() . '/style.css' get_template_directory_uri() . '/style.css' memberi tahu WordPress lokasi sumber dari lokasi induk style.css
• get_template_directory_uri() mengambil direktori template URI untuk tema induk kita. Dalam kasus kami ini menghasilkan 'http://mywebsite.onpressidium.com/wp-content/themes/twentytwenty'

Tambahkan Fungsionalitas ke Tema Anak Anda

Sekarang Anda telah membuat Tema Anak, Anda dapat mulai menambahkan beberapa fungsi tambahan. Pertama-tama mari kita lihat bagaimana Anda akan mengedit file functions.php di tema anak Anda dan bagaimana ini bekerja dalam praktiknya.

Fungsi Tema Anak.php

Berbeda dengan file style.css , ketika Anda meletakkan functions.php di tema anak, kode functions.php tema induk akan tetap berjalan. Apa pun yang Anda tambahkan di functions.php anak akan dieksekusi di samping konten functions.php induknya.

Misalnya, mari kita lihat bagaimana kita dapat mengubah Teks "Baca Selengkapnya" untuk tampilan posting:

Langkah Satu: Buat kategori posting tes:

Langkah Kedua: Buat dua posting baru di bawah kategori ini. Mari tambahkan beberapa contoh konten. Pada titik ini, Jika Anda mengunjungi halaman kategori, Anda akan melihat ini:

Dalam contoh ini, kami ingin mengubah teks 'Lanjutkan Membaca' yang ditampilkan di tombol yang memuat postingan lengkap.

Mari kita mundur sejenak untuk memahami bagaimana teks ini ditampilkan. Di WordPress, untuk memodifikasi fungsi tertentu, kami menggunakan filter.

Dalam contoh ini untuk mendapatkan apa yang kita inginkan, kita harus menyesuaikan filter 'the_content_more_link' yang awalnya diperkenalkan di file inti wp-includes/post-template.php pada baris 369 seperti ini:

 $output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink( $_post ) . "#more-{$_post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );

Ini saat ini ditimpa oleh tema induk dua puluh dua puluh dalam file function.php (baris 571) dengan potongan kode ini:

 function twentytwenty_read_more_tag( $html ) { return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html ); } add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );

Jadi, jika Anda ingin mengubah teks 'Lanjutkan Membaca' di tombol, ini dapat diganti di functions.php tema anak Anda jika Anda menambahkan potongan kode ini:

 function modify_read_more_link() { return '<a class="more-link" href="' . get_permalink() . '">My Custom Read More text</a>'; } add_filter( 'the_content_more_link', 'modify_read_more_link' );

Kait ''the_content_more_link'' umum di antara file-file itu di mana kait anak selalu berlaku.

Kemudian segarkan halaman dan voila:

Bagaimana Menyesuaikan Template PHP

Tangkapan layar di atas menunjukkan konten templat tema dua puluh dua puluh untuk tampilan kategori kiriman. Jadi, bagaimana kita bisa mengubah desainnya atau menambah/menghapus informasi menggunakan tema anak?

Berikut adalah bagaimana Anda dapat melakukan ini:

1. Temukan file php terkait
2. Salin file yang sesuai ke folder tema anak dan edit
3. Sesuaikan sesuai keinginan Anda

Masalah pertama dan paling umum di sini adalah kita harus menemukan file php mana yang berisi output yang ingin kita edit. Sesuatu yang pasti akan membantu Anda menemukan jalan keluarnya adalah hierarki template WordPress.

Singkatnya, satu-satunya file yang benar-benar dibutuhkan oleh tema WordPress adalah file index.php dan style.css. File dan folder tambahan sebenarnya adalah file yang dipanggil dari dalam index.php . Mereka adalah fragmen dari apa yang pada akhirnya akan Anda lihat sebagai output dari file index.php .

Berkenaan dengan tema Twenty Twenty, jika kita melihat file index.php -nya, kita dapat melihat pada baris 79 bahwa, ketika kontennya adalah satu atau lebih posting, maka file php di direktori template-parts/ digunakan.

 if ( have_posts() ) { $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

Dalam kasus kita, kita harus menyalin file content.ph p dari dalam subfolder tema template-parts.

Juga, pastikan Anda hanya menyalin file PHP yang ingin Anda sesuaikan. Jangan menyalin setiap file PHP dalam tema induk.

CATATAN: Struktur folder harus sama di tema anak agar perubahan terlihat di ujung depan.

Jadi, pertama-tama kita buat subfolder 'template-parts' dan taruh salinan content.php di dalamnya.

Anda sekarang dapat membuka file di editor Anda dan menyesuaikannya.

Coba ubah sesuatu yang sepele pada awalnya untuk memastikan semuanya berfungsi dengan baik, misalnya, ubah kelas div dan segarkan frontend Anda untuk memeriksa hasilnya.

Sesuaikan Templat Kategori Posting

Kami sudah memiliki dua pos di bawah kategori 'kategori uji'. Anda sekarang dapat membuat menu item “'Kategori Posting”' dan menautkannya ke 'kategori uji'. Jika Anda mengklik item menu baru, Anda akan melihat halaman tampilan kategori posting.

Sekarang Anda dapat memodifikasi file content.php lebih lanjut dan mengubah tampilan kategori posting ke gaya Anda sendiri. Sebagai petunjuk, temukan referensi dari file tambahan yang disertakan seperti pada baris 23:

 get_template_part( 'template-parts/featured-image' );

Ini berarti bahwa file yang menampilkan gambar unggulan adalah template-parts/featured-image.php

Jadi, Anda dapat menyalin file di direktori tema anak Anda dan mengeditnya. Fantastis!

Kesimpulan

Tema anak memungkinkan pengguna untuk mengubah tata letak, gaya, dan fungsionalitas tema induk tanpa kehilangan kemampuan untuk memperbarui tema induk. Seringkali, desainer web enggan memperbarui tema situs web mereka karena mereka tahu jika mereka melakukannya, mereka akan kehilangan perubahan yang dibuat langsung di tema induk. Ini adalah masalah serius karena sama pentingnya untuk menjaga tema Anda tetap up-to-date seperti halnya plugin dan inti WordPress Anda. Bekerja dengan tema anak sejak awal menghilangkan masalah ini dan memungkinkan Anda memperbarui tema induk sesuai kebutuhan tanpa takut menimpa semua suntingan yang telah Anda buat pada tema secara keseluruhan.