Cara membuat dan menyesuaikan tema anak di WordPress

Apa itu tema anak-anak dan mengapa itu sangat penting?

Dalam posting ini, kami akan memberi Anda jawaban atas pertanyaan-pertanyaan ini dan menunjukkan kepada Anda langkah demi langkah cara membuat dan menyesuaikan tema anak Anda sendiri menggunakan plugin atau kode.

Jika Anda ingin buat perubahan pada tema situs WordPress Anda,Anda mungkin pernah melihat orang menyuruh Anda menggunakan tema anak.

Tapi apa itu tema anak, dan mengapa tema anak begitu penting?

Dalam posting ini, kami akan memberi Anda jawaban atas pertanyaan-pertanyaan ini bersama dengan pengantar tema anak dan bagaimana tema itu sempurna untuk Anda.

Kemudian kami akan menunjukkan kepada Anda langkah demi langkah cara membuat dan menyesuaikan tema anak Anda sendiri menggunakan plugin atau kode.

Tetapi, jika Anda belum pernah menginstal WordPress, temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda

Dan kemudian mari kita kembali ke tujuan kita di sini.

Apa itu tema WordPress anak?

Tema anak bukanlah tema yang berdiri sendiri. Ini adalah "anak" dari tema induk yang ada, karena itulah namanya.

Anda akan menginstalnya di samping tema induk Anda, tetapi ini memberi Anda kesempatan untuk membuat perubahan dengan aman pada tema induk Anda tanpa perlu mengedit tema induk itu sendiri.

Tema anak akan mendapatkan sebagian besar / semua pengaturan desainnya dari tema induk. Namun, dalam situasi di mana Anda mengubah tema anak, perubahan ini akan menggantikan pengaturan tema induk.

Manfaat tema anak

Pada titik ini, Anda mungkin bertanya-tanya: mengapa Anda tidak bisa langsung membuat perubahan ke tema induk?

Alasan utama ini bukanlah ide yang bagus Pembaruan tema WordPress.

Jika Anda ingin situs WordPress Anda tetap aman dan berfungsi, Anda perlu menerapkan pembaruan dengan cepat saat diluncurkan, termasuk pembaruan pada tema WordPress Anda.

Jika Anda menyesuaikan situs web dengan langsung memodifikasi tema Anda (tanpa tema anak), artinya Anda akan menimpa semua perubahan Anda setiap kali Anda memperbarui tema WordPress.

Artinya Anda:

Perbarui tema WordPress Anda dan kehilangan pekerjaan Anda. Bukan pengalaman yang sangat menyenangkan, bukan?
Jangan perbarui tema WordPress Anda agar tidak kehilangan pekerjaan Anda ... yang tidak baik untuk keamanan dan pengoperasian situs WordPress Anda.

Dengan tema anak, Anda dapat membuat semua perubahan Anda pada tema anak. Kemudian Anda akan dapat memperbarui tema induk tanpa kehilangan pekerjaan Anda.

Selain membantu Anda memperbarui dengan aman, menggunakan tema anak juga secara umum berguna untuk membuat penyesuaian. Karena ini memisahkan semua perubahan Anda di satu tempat, mudah untuk melacak semua perubahan Anda dan mengubahnya sesuai kebutuhan.

Ini juga mudah untuk terbalik. Misalnya, jika Anda ingin berhenti menggunakan perubahan Anda dan kembali ke tema induk, cukup nonaktifkan tema anak.

Beberapa Tema WordPress bahkan menggunakan pendekatan induk/anak default ini. Misalnya, jika Anda ingin menggunakan kerangka kerja Genesis, Anda memerlukan tema induk (kerangka dasar) dan tema anak untuk mengontrol desain.

Kapan menggunakan tema anak

Terlepas dari beberapa pengecualian yang akan kami sebutkan di bawah ini, Anda harus toujours gunakan tema anak jika Anda berencana membuat modifikasi sendiri pada tema WordPress yang sudah ada.

Saat Anda tidak perlu menggunakan tema anak

Secara umum, menggunakan tema anak adalah praktik yang baik setiap kali Anda menyesuaikan tema WordPress Anda.

Namun, ada beberapa pengecualian pada aturan yang mungkin ada opsi yang lebih baik daripada menggunakan tema anak.

Pertama, jika Anda hanya ingin melakukan sedikit tweaking CSS, mungkin berlebihan untuk membuat tema anak hanya untuk beberapa tweak.

Sebagai gantinya, Anda dapat menambahkan CSS khusus Anda menggunakan fitur tersebut CSS tambahan terintegrasi ke dalam Penyesuai WordPress. Atau, Anda bisa menggunakan plugin WordPress gratis seperti Simple CSS.

Kedua, jika Anda membuat perubahan apa pun yang Anda inginkan agar tema tidak bergantung, tema anak mungkin bukan pilihan terbaik.

Misalnya, jika Anda mendaftarkan taksonomi khusus atau file jenis posting kustom, Anda mungkin tidak ingin menggunakan file tersebut functions.php tema anak Anda (karena Anda ingin menyimpannya meskipun Anda mengubah tema). Sebagai gantinya, Anda sebaiknya menambahkan kode di luar tema Anda dengan plugin seperti code Snippets atau plugin kustom Anda sendiri.

Cara membuat tema anak di WordPress

Sekarang setelah Anda tahu mengapa tema anak itu penting, mari kita bahas bagaimana Anda benar-benar dapat membuat tema anak untuk situs WordPress Anda.

Pertama, jika Anda menggunakan Halo Elementor tema, kami telah membuatkan tema anak untuk Anda - Anda tidak perlu melakukannya sendiri. Kamu bisa ambil tema anak Hello Elementor dari WordPress.org. Anda dapat menginstalnya seperti tema WordPress lainnya (kami juga akan menunjukkan cara menginstal tema anak nanti di posting ini).

Jika Anda menggunakan tema WordPress yang berbeda, sebaiknya lihat Google sekilas untuk melihat apakah pengembang tema WordPress Anda menyediakan tema anak. Misalnya, Astra, GeneratePress, dan OceanWP semuanya memiliki alat / file untuk membantu Anda mengunduh tema anak.

Jika tema WordPress Anda belum memiliki tema anak, Anda dapat membuat tema anak untuk tema WordPress apa pun:

Gunakan a WordPress Plugin generator tema anak gratis.
Buat tema anak Anda sendiri secara manual.

Kami akan menunjukkan kepada Anda bagaimana melakukan kedua metode tersebut.

Cara menggunakan plugin WordPress tema anak

Plugin generator tema anak memungkinkan Anda membuat tema anak tanpa meninggalkan dasbor WordPress Anda.

Opsi paling populer di sini adalah plugin konfigurator tema anak gratis, yang aktif di lebih dari 300.000 situs web.

Child Theme Configurator tidak hanya membantu Anda membuat file tema anak, tetapi juga akan menganalisis tema yang Anda gunakan dan tema serta lembar gaya font sesuai kebutuhan.

Ini juga mencakup fitur berguna lainnya jika Anda mencoba membuat tema anak di situs web di mana Anda telah menambahkan konten. Misalnya, ini dapat menyalin widget yang ada dan opsi penyesuai ke tema anak.

Namun, jika Anda berencana untuk menggunakan Plugin di situs webopérationnel, kami menyarankan Anda untuk membuat cadangan lengkap sebelum melanjutkan. Atau, idealnya, atur semuanya di situs web demo.

Setelah Anda menyiapkan pencadangan, mulailah dengan menginstal dan mengaktifkan plugin Child Theme Configurator gratis dari WordPress.org. Lalu pergi ke menu Alat → Tema Anak untuk membuat tema anak Anda.

Dalam daftar Pilih satu drop-down tema induk, pilih tema yang ingin Anda buatkan tema anak Anda. Kemudian klik Menganalisa:

Plugin kemudian akan menganalisis tema induk untuk setiap dependensi.

Setelah selesai, Anda akan melihat beberapa opsi lagi untuk mengonfigurasi cara membuat tema anak Anda. Jika Anda tidak yakin apa arti pengaturan tertentu, Anda dapat membiarkannya sebagai default:

Setelah Anda selesai membuat pilihan, klik tombol di bagian bawah untuk untuk membuat tema anak baru.

Dan itu saja! Plugin kemudian akan membuatkan tema anak untuk Anda. Namun, itu tidak akan aktif pas tema anak ini.

Untuk mengaktifkannya:

Aller à Penampilan → Tema.
Pratinjau tampilan situs web Anda dengan tema anak ini (untuk memastikannya berfungsi - jika situs web Anda terlihat aneh, mungkin karena masalah CSS).
Aktifkan tema anak Anda seperti yang Anda lakukan pada tema WordPress lainnya. Namun, pastikan untuk membiarkan tema induk Anda terpasang.

Setelah Anda mengaktifkan tema anak Anda, plugin Konfigurasi Tema Anak juga menawarkan alat berguna lainnya untuk membantu Anda mengelola tema anak. Misalnya, jika Anda membuka tab File dari pengaturan plugin, Anda dapat melihat semua file terkait dalam tema induk dan tema anak.

Kemudian Anda dapat menyalin file dari tema induk ke tema anak.

Misalnya, jika Anda ingin membuat beberapa perubahan single.php, Anda dapat menyalin file ini ke tema anak sehingga Anda dapat mengeditnya dengan aman:

Anda juga akan menemukan banyak alat lain untuk membantu Anda bekerja dengan CSS.

Kami akan menjelaskan mengapa alat ini berguna nanti.

Cara membuat tema anak secara manual

Untuk bagian ini, kami menganggap Anda tahu lebih banyak tentang PHP dan CSS. Jika Anda merasa kewalahan dengan instruksi di sini, kami sarankan untuk menggunakan plugin gratis dari bagian sebelumnya.

Untuk membuat tema anak secara manual, Anda perlu membuat dua file (ini adalah minimum yang ketat untuk tema anak):

style.css - pada awalnya yang perlu Anda tambahkan hanyalah kode pelat panas.

functions.php - ini memungkinkan Anda memuat lembar gaya dari tema induk. Tanpanya, tema anak Anda tidak akan dapat menerapkan CSS dari tema induk Anda, membuat situs web Anda sangat jelek!

style.css

Pertama, buat file bernama style.css dan tambahkan kode berikut:

/*

Nama Tema: Halo Elementor Anak

URI Tema: https://github.com/elementor/hello-theme/

Deskripsi: Hello Elementor Child adalah anak tema dari Hello Elementor, dibuat oleh tim Elementor

Penulis: Elementor Team

URI Penulis: https://elementor.com/

Template: halo-elementor

Versi: 1.0.1

Domain Teks: hello-elementor-child

Lisensi: GNU General Public License v3 atau yang lebih baru.

URI Lisensi: https://www.gnu.org/licenses/gpl-3.0.html

*/

Pastikan untuk mengganti apa pun yang berada setelah titik dua dengan informasi Anda yang sebenarnya:

Nama tema - nama tema anak Anda.

Tema URI - situs web tema Anda dan dokumentasinya.

Deskripsi Produk - deskripsi singkat tentang tema.

Auteur - nama penulis tema.

URI Penulis: - situs web penulis tema.

Contoh - nama folder tema induk Anda (seperti yang disebutkan di dalam folder wp-content / themes Anda). Ini adalah baris terpenting; tema anak Anda tidak akan berfungsi tanpanya.

Versi - nomor versi tema anak Anda.

Bidang teks - ini digunakan untuk internasionalisasi. Anda tinggal menambahkan "anak" di akhir nama template.

lisensi - biarkan ini sebagai default.

Lisensi URI - biarkan ini sebagai default.

Tidak termasuk baris Templat, tidak masalah apa yang Anda masukkan, jadi jangan terlalu stres. Pastikan Anda memasukkan nama folder tema induk dengan benar untuk file Template.

Jika Anda ingin menambahkan gaya kustom Anda sendiri di masa mendatang, Anda dapat menambahkannya ke stylesheet ini di bawah kode boilplate.

functions.php

Maka Anda perlu membuat file tersebut functions.php untuk tema anak Anda. Sekali lagi, inilah yang memungkinkan Anda memuat lembar gaya CSS lengkap tema induk Anda.

Di dalam file fungsi.php, tambahkan kode berikut:

<?php

/ * Berfungsi untuk mengantrekan lembar gaya dari tema induk * /

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

Unggah file ke situs WordPress

Setelah Anda memiliki file Anda style.css et functions.php, Anda perlu mengunggahnya ke situs web WordPress Anda sebagai tema baru.

Untuk melakukan ini, hubungkan ke situs WordPress Anda menggunakan FTP.

Lalu pergi ke direktori tema situs web Anda (wp-konten / tema)dan buat folder baru untuk tema anak Anda.

Misalnya, jika folder tema induk Anda adalah halo-elementor, Anda dapat memberi nama folder tema anak halo-eletor-anak untuk membantu Anda mengingatnya.

Kemudian unggah file Anda style.css et functions.php di dalam folder ini:

Setelah Anda mengunduh kedua file, Anda dapat pergi ke Penampilan → Tema dan aktifkan tema anak Anda seperti yang Anda lakukan pada tema WordPress lainnya.

Cara memasang tema WordPress anak

Kami telah membahas beberapa aspek di atas dalam Metode Khusus, tetapi kami akan membahas cara memasang tema anak WordPress sekali lagi.

Ini juga akan berguna jika Anda mengunduh tema anak dari situs web pengembang tema Anda, daripada membuatnya sendiri.

Anda dapat menginstal tema anak WordPress seperti yang Anda lakukan pada tema WordPress lainnya:

Akses ke Penampilan → Tema di dashboard WordPress Anda.
Klik Tambah baru.
Unggah file ZIP tema anak.

Selama proses instalasi, WordPress mendeteksi bahwa Anda mengunduh tema anak dan memverifikasi bahwa tema induk ada:

Setelah Anda mengunduh file, pastikan untuk aktifkan itu.

Ingat, agar tema anak Anda berfungsi, Anda perlu menginstal di waktu itutema induk dan tema anak.

Tema anak Anda harus menjadi tema aktif Anda, tetapi Anda tetap harus memasang tema induk.

Seperti inilah tampilannya:

Tema anak adalah tema aktif
Tema induk masih terpasang, tetapi tidak aktif

Cara menyesuaikan tema anak

Sama seperti kustomisasi tema WordPress biasa, Anda memiliki beberapa opsi untuk "menyesuaikan" tema anak.

Lebih tepatnya, Anda tidak benar-benar menyesuaikan tema anak - Anda menggunakan tema anak untuk menyesuaikan tema (induk) yang ada.

Pertama, kami akan menunjukkan beberapa cara Anda dapat menggunakan kode untuk menyesuaikan tema anak Anda. Selanjutnya, kami akan membagikan cara yang lebih mudah untuk mempersonalisasi berbagai hal Pembuat Tema Elementor.

Sesuaikan tema anak dengan kode

Jika Anda ingin menyesuaikan tema anak Anda dengan kode, Anda harus memiliki pengetahuan yang baik tentang CSS, HTML, dan PHP.

Berikut beberapa hal yang dapat Anda lakukan:

Tambahkan CSS khusus

Untuk menyesuaikan tema anak Anda dengan CSS, Anda dapat menambahkannya langsung ke file style.css tema anak Anda.

Tambahkan CSS di bawah kode yang ada di bagian atas file.

CSS apa pun yang Anda tambahkan ke tema anak Anda akan menggantikan tema induk Anda selama Anda menggunakan pemilih yang sama.

Ganti template yang ada

Jika Anda ingin mengganti templat tema induk Anda, Anda dapat:

Salin file template dari tema induk Anda ke tema anak.
Edit file template di tema anak Anda.

Misalnya, jika Anda ingin berubah tunggal.php, Anda menyalin file terlebih dahulu single.php dari tema induk Anda ke tema anak (pastikan untuk menjaga struktur yang sama).

Kemudian Anda dapat mengedit kode dalam versi tema anak Anda single.php.

Catatan: WordPress akan menggunakan template tema anak Anda selama memiliki nama yang sama. Karena itu, Anda cukup banyak menyembunyikan template yang ada di tema induk.

Jika Anda menggunakan plugin Child Theme Configurator yang kami sebutkan di atas, ini dapat membantu Anda menyalin file ke child theme tanpa meninggalkan dashboard WordPress Anda.

Tambahkan template baru

Selain menyalin dan mengubah templat yang ada dari tema induk, Anda juga dapat membuat templat khusus baru di tema anak.

Misalnya, jika Anda ingin membuat template untuk jenis posting kustom yang Anda tambahkan, Anda dapat menambahkan template tersebut di tema anak Anda.

Sesuaikan tema anak dengan generator tema Elementor

Jika Anda tidak terbiasa, Pembuat Tema Elementormemungkinkan Anda menyesuaikan sebagian atau seluruh tema WordPress Anda menggunakan antarmuka visual.

Dengan Elementor Pro dan Pembuat Tema, Anda dapat membuat templat khusus untuk templat situs web Anda:

Header
Footer
Tunggal (misalnya satu posting blog atau halaman)
Arsip (misalnya halaman yang mencantumkan semua posting blog Anda)

Template ini akan berfungsi dengan tema anak dan tema induk.

Dengan Elementor Theme Builder, Anda tidak perlu bekerja dengan kode secara langsung. Tidak ada penambahan CSS khusus atau menyalin file template PHP Anda - Anda melakukan semuanya dengan drag-and-drop.

Misalnya, Anda ingin menyesuaikan header untuk tema anak Anda. Daripada perlu menyalin file Anda header.php pada tema anak Anda dan kemudian ubah PHP, Anda cukup mendesain tajuk baru menggunakan antarmuka visual dan seret dan lepas Elementor. Kemudian Anda dapat menerapkan tajuk ini di mana saja di situs web Anda atau hanya di bagian tertentu situs web Anda.

Jika Anda baru mengenal CSS, HTML, dan PHP, pendekatan tanpa kode ini memungkinkan Anda menyesuaikan tema anak Anda. Dan bahkan jika Anda melakukannya, pendekatan visual ini masih dapat menghemat banyak waktu dibandingkan dengan PHP di file template Anda.

Saat Anda membuat template baru dengan Elementor Theme Builder, Anda akan dapat memilih jenis template. Misalnya, tajuk.

Kemudian Anda dapat memulai dari papan tulis kosong atau memilih salah satu model Elementor Pro:

Dari sana, Anda dapat menggunakan opsi seret dan lepas bilah sisi untuk mengontrol tampilan tajuk Anda:

Setelah selesai, Anda dapat memilih dengan tepat di mana Anda ingin menggunakan template header ini:

Cara menghapus tema anak di WordPress

Jika Anda ingin berhenti menggunakan tema anak Anda, Anda dapat mematikannya seperti yang Anda lakukan dengan tema WordPress biasa.

Ini adalah :

Aller à Penampilan → Tema.
Aktifkan tema lain. Entah tema induk atau tema WordPress baru.

Ingatlah bahwa jika Anda menonaktifkan tema anak dan beralih kembali ke tema induk, setiap perubahan yang Anda tambahkan melalui tema anak Anda tidak akan ada lagi.

Sebaliknya, Anda akan kembali mendesain tema induk Anda.

Mulai gunakan tema anak WordPress

Tema anak membantu Anda membuat perubahan pada tema WordPress dengan aman.

Tema anak Anda akan mewarisi semua gayanya dari tema induk Anda, tetapi setiap perubahan yang Anda buat pada tema anak akan menggantikan tema induk. Ini berarti Anda dapat memperbarui tema induk dengan aman tanpa kehilangan perubahan apa pun yang Anda buat pada tema anak.

Untuk memulai tema anak WordPress, Anda dapat:

Periksa apakah pengembang tema Anda sudah menawarkan tema anak. Jika Anda menggunakan Hello Elementor, Anda bisa unduh tema anak untuk itu dari GitHub.
Gunakan plugin konfigurator tema anak gratis.
Buat tema anak Anda secara manual.

Dari sana, Anda dapat menyesuaikan tema anak Anda menggunakan CSS, HTML, dan PHP. Anda juga dapat melewati kode dan menggunakan Elementor Theme Builder untuk menyesuaikan tema Anda menggunakan antarmuka seret dan lepas visual.

Temukan juga beberapa tema dan plugin WordPress premium

Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. Tabel Harga AP

Tabel Harga AP adalah WordPress Plugin premium yang memudahkan untuk membuat daftar harga yang kaya fitur dengan antarmuka yang intuitif. Ini menawarkan 35 templat yang telah ditentukan sebelumnya dan jumlah opsi yang tidak terbatas.

dengan ini WordPress Plugin mudah digunakan, mendesain tabel harga yang menakjubkan hanya dengan beberapa klik akan sangat mudah. Ini memungkinkan Anda untuk membuat kisi harga tak terbatas dengan menyediakan kemampuan untuk menambahkan baris dan kolom, mengatur batas kolom, ruang kolom, lebar kolom, dan banyak lagi.

Plugin ini juga memungkinkan Anda tambahkan konten audio, video, dan Google Map.

Download| Demo | Hébergement Web

2.wp Pembuat halaman

WordPress Page Builder adalah pembuat utama untuk situs web WordPress Anda yang dilengkapi dengan alat hebat untuk menghasilkan posting khusus, taksonomi khusus, atau metabox khusus.

Sebagai fitur yang dimilikinya antara lain: jenis posting khususCPT, taksonomi pribadi, bidang khusus lanjutan, fungsionalitas seret dan lepas, lokasi Google Map yang didukung, bidang yang dapat diulang juga dan banyak lagi.

Download | Demo | Hébergement Web

3. Rankie

Rankie adalah modul WordPress yang sangat berguna yang dirancang dengan tujuan untuk secara teratur memeriksa peringkat WordPress di Google sambil memonitor posisi setiap kata kunci.

Sebagai plugin pelacak peringkat, Rankie akan memperbarui posisi kata kunci setiap hari dan menghasilkan laporan yang akurat.

Ini juga menggabungkan alat penelitian canggih yang menghasilkan daftar kata kunci yang berharga. Google sudah menggunakannya untuk penelitian.

Download | Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.

Kesimpulan

Sini! Itu saja untuk tutorial ini. Masih ada pertanyaan tentang kegunaan child theme di WordPress? Beri tahu kami di bagian komentar dan kami akan mencoba membantu!

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.

Jangan sungkan berbagi dengan teman-teman Anda di jejaring sosial favorit Anda.

...