Cara Membuat Tema Anak Divi

Diterbitkan: 2024-06-28

Ada ribuan (benar, ribuan!) tema WordPress yang tersedia untuk Anda pilih saat membangun situs. Namun, sebagian besar desainer web menemukan bahwa meskipun tema WordPress adalah tempat awal yang bagus, mereka menginginkan lebih banyak penyesuaian, dan membuat tema anak adalah cara terbaik untuk melakukannya.

Tema anak dibuat dari tema induk dan memungkinkan Anda menambah atau menghapus kode Anda sendiri. Jika Anda ingin benar-benar menyesuaikan situs WordPress Anda, menggunakan tema anak adalah cara terbaik dan Divi adalah salah satu pilihan terbaik.

Alasan terbesar materi iklan membuat tema anak Divi adalah agar ketika tema induk diperbarui, tidak ada kerusakan di situs Anda. Membuat tema anak dari Divi pada dasarnya bertindak sebagai jaring pengaman, selalu ada untuk menangkap situs Anda sebelum rusak! Tapi, saya terlalu terburu-buru, jadi mari kita mulai dari dasar.

Dalam artikel ini, saya akan membahas:

Apa itu Divi dan apa saja fiturnya?
Cara membuat tema anak Divi (+ unduhan anak gratis!)
Cara menguji apakah tema anak Divi Anda berfungsi

Mari selami.

Apa itu Divi dan Apa Saja Fiturnya?

Divi adalah tema WordPress dari Elegant Themes yang memungkinkan Anda membuat halaman menggunakan elemen struktural berbeda dari awal. Ini berarti Anda memiliki kendali penuh atas segala sesuatu di situs yang Anda buat karena editor visualnya yang unggul.

Itu juga dilengkapi dengan ratusan desain siap pakai, jadi jika Anda tidak memiliki pengalaman membuat dan menyesuaikan tema, jangan khawatir! Baik Anda seorang pemula yang ingin menyesuaikan situs pertama Anda atau pengembang berpengalaman, Divi memberi Anda alat untuk mewujudkan ide Anda.

Divi memiliki dua antarmuka pembuat: Editor visual di front-end WordPress dan pembuat back-end. Pada editor visual, pembuatan situs untuk klien 10x lebih mudah, cepat, dan menyenangkan karena Anda dapat mengedit di halaman itu sendiri dan melihat hasil edit Anda secara langsung. Di bagian belakang, Anda sedang mengedit representasi berbasis blok di dalam postingan. Namun, Anda masih dapat menambahkan modul baru dan melakukan semua hal seperti yang Anda lakukan di editor visual. Anda juga dapat berpindah-pindah editor dengan mudah, bergantung pada preferensi Anda.

Divi juga memiliki tiga elemen struktural utama yang dapat Anda manfaatkan apa adanya, atau sesuaikan dengan spesifikasi Anda: bagian, baris, dan modul.

Bagian: Ini adalah blok bangunan terbesar di pembuat Divi. Anda dapat menganggapnya sebagai blok susun horizontal yang dapat mengelompokkan konten Anda ke dalam area yang dapat dibedakan secara visual. Segala sesuatu yang Anda bangun dimulai dengan satu bagian.

Baris: Baris adalah berbagai tata letak kolom yang dapat ditempatkan di dalam bagian. Mereka memiliki berbagai pengaturan yang dapat diakses dengan mengklik ikon pengaturan di kiri atas baris dan dapat digunakan untuk meningkatkan variasi tata letak yang dibuat dengan Divi Builder karena mereka menciptakan struktur tempat modul Anda ditempatkan.

Modul: Modul berisi elemen konten yang berbeda seperti gambar, konten, bilah geser, galeri, formulir kontak, CTA, blog, formulir, testimonial, dll. Ada lebih dari 40 modul yang dapat Anda pilih dan kemudian sesuaikan sesuai keinginan Anda.

Sekarang setelah Anda memahami Divi sedikit lebih baik, mari selami cara membuat tema anak.

Cara Membuat Tema Anak Divi

Sebelum Anda mulai menyesuaikan berbagai hal, pastikan Anda telah menginstal dan mengaktifkan Divi. Ada dua cara untuk melakukan hal ini:

Opsi 1: Gunakan Flywheel + Divi untuk instalasi yang cepat dan mudah.

Pilihan 2: Cara manual (ikuti dua langkah berikut)

Langkah 1: Daftar dan unduh Divi di sini. Setelah Anda membuat akun dan masuk, Anda akan diarahkan ke area anggota dan menuju ke sisi kiri dan menemukan tab “Unduhan”. Temukan Divi dan klik "Unduh". Ini mengirimkan unduhan Divi dalam file zip ke folder Unduhan Anda.

Langkah 2: Saatnya masuk ke situs WordPress Anda. Buka Penampilan > Tema. Klik Tambahkan baru atau Tambahkan tema baru di sisi kanan. Klik tombol “Unggah tema” di kiri atas. Pilih file dan temukan file zip Divi itu. Catatan: Simpan dalam file zip (jangan di-unzip). Klik Instal. Setelah selesai menginstal, klik "Aktifkan" dan itu diinstal dan diaktifkan di situs Anda! ?

Sekarang, Anda siap membuat tema anak Divi! Ada tiga cara utama untuk membuat tema anak Divi: unduh tema anak gratis, gunakan plugin, atau kodekan secara manual.

Opsi 1: Unduh File Tema Anak Divi Gratis

Salah satu cara tercepat (dan termudah!) untuk membuat tema anak adalah dengan mengunduh tema anak Divi gratis ini. Ia memiliki semua kebutuhan untuk memulai, serta ruang bagi Anda untuk menyesuaikan sesuai keinginan Anda! Unduh tema anak Divi gratis Anda di bawah.

Setelah diunduh, instal Divi, aktifkan, dan Anda siap berangkat! Semudah itu. Jika Anda lebih suka cara lain untuk membuat tema anak Divi, Anda selalu dapat mencoba plugin.

Opsi 2: Buat Tema Anak Divi dengan Menggunakan Plugin

Ada sejumlah plugin yang tersedia untuk membantu Anda membuat tema anak Divi. Berikut adalah beberapa favorit pribadi saya:

Anak-anak Divi
Konfigurator Tema Anak
Pencipta Tema Anak oleh Orbisius

dua tangan memegang tali dengan plugin di ujungnya

Anak-anak Divi

Divi Children adalah plugin gratis yang khusus dikembangkan untuk pengguna Divi. Ini secara otomatis melakukan kerja keras untuk Anda, jadi Anda bisa fokus pada sisi kreatif! Setiap tema anak yang dibuat oleh Divi Children hadir dengan banyak fitur penyesuaian melalui WP Customizer. Pelajari cara menginstal plugin ini di sini.

Konfigurator Tema Anak

Plugin ini dirancang untuk pengguna WordPress yang ingin dapat mengkustomisasi stylesheet tema anak secara langsung. Dengan plugin ini, Anda dapat dengan mudah mengidentifikasi dan mengganti atribut CSS yang ingin Anda sesuaikan dan penganalisis memindai tema yang dirender dan secara otomatis mengonfigurasi tema anak Anda. Pelajari lebih lanjut tentang plugin ini dan cara menginstalnya di sini.

Pencipta Tema Anak oleh Orbisius

Plugin ini memungkinkan Anda dengan cepat membuat tema anak dari tema apa pun yang saat ini Anda instal di situs Anda. Dengan plugin ini, Anda dapat membuat tema anak dalam jumlah tak terbatas dari tema induk Anda sehingga pilihannya tidak terbatas. Ini menampilkan dua editor dan Anda dapat memilih cuplikan dari satu tema dan menempelkannya ke tema lain. Bicara tentang penyesuaian! Pelajari lebih lanjut tentang menginstal plugin ini di sini.

Terakhir, jika plugin bukan untuk Anda, selalu ada opsi untuk membuat tema anak Divi secara manual!

Opsi 3: Buat Tema Anak Divi Secara Manual

Jika Anda seorang pengembang WordPress atau hanya menyukai tantangan yang bagus, ini adalah cara yang bagus bagi Anda untuk membuat tema anak Divi.

seorang pengembang mencari alat baru untuk membantu situsnya.

Langkah 1: Buat file style.CSS

Seperti yang mungkin Anda ketahui, file style.css adalah untuk memberi tahu WordPress detail tema anak Anda dan dapat digunakan untuk menambahkan CSS khusus! Untuk melakukan ini, buat folder di komputer Anda dan beri nama (sesuatu yang memberi tahu Anda bahwa ini untuk tema anak Divi). Dari sana, buat file di folder itu dan beri nama style.css.

Catatan: Pastikan Anda memiliki alat editor teks atau kode, jika tidak, akan sulit memberi nama file tersebut!

Langkah 2: Tambahkan ini ke file style.css:

 /*
 Nama Tema: Tema Anak Divi
 URI Tema: https://www.elegantthemes.com/gallery/divi/
 Deskripsi: Tema Anak untuk Divi
 Penulis: Nama Anda
 URI Penulis: https://getflywheel.com/
 Templat: Divi
 Versi: 1.0.0
*/

Nama tema, URI tema, deskripsi, penulis, URI penulis, dan versi semuanya dapat diedit. Pertahankan nama templat apa adanya! Untuk penyesuaian lebih lanjut (dan untuk memastikan tema anak Divi Anda berfungsi), tambahkan CSS khusus apa pun di sini.

Langkah 3: Buat file function.php

Buat file lain di folder yang sudah Anda buat dan beri nama function.php

Kemudian, tambahkan kode ini ke file baru Anda dan tambahkan fungsi khusus apa pun yang Anda inginkan di bawah baris terakhir:

 <?php
fungsi divi__child_theme_enqueue_styles() {
    wp_enqueue_style( 'gaya induk', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'divi__child_theme_enqueue_styles' );

Langkah 4: Buat tangkapan layar

Ini adalah langkah penting agar situs Anda tidak memiliki ruang kosong di mana gambar seharusnya berada di halaman tema WordPress, jadi mengambil tangkapan layar cepat adalah langkah penting di sini! Setelah Anda mengambil tangkapan layar, lanjutkan dan pastikan dimensinya 880x660px, apakah itu .png atau .jpeg (bisa berfungsi!), dan namanya adalah [screenshot.png] atau [screenshot.jpeg]. Kemudian, Anda akan menambahkan gambar tangkapan layar Anda ke folder utama.

Langkah 5: Kompres folder dan unggah

Terakhir, kompres folder tersebut menjadi jenis file zip dan unggah ke WordPress! Anda akan pergi ke Appearance > Themes > Upload dan kemudian klik Activate.

Voila! Anda telah berhasil membuat tema anak Divi dan Anda siap menyesuaikannya dengan keinginan hati Anda.

Cara Menguji apakah Tema Anak Divi Anda Berfungsi

Untuk menguji apakah tema anak Anda berfungsi dengan benar, tambahkan beberapa CSS di file style.css tema anak Anda dan simpan perubahan Anda. Anda akan melihat perubahan tersebut di situs langsung dan dengan begitu Anda akan mengetahui bahwa perubahan tersebut berhasil!

Catatan: Anda mungkin harus membuka halaman Anda di browser pribadi jika halaman tersebut di-cache.

Ingat: Anda tidak boleh membuat perubahan pada situs aktif Anda jika ada sesuatu yang rusak! Gunakan Lokal, aplikasi pengembangan lokal gratis sehingga Anda dapat berhenti melakukan debug pada lingkungan lokal dan menghabiskan lebih banyak waktu untuk meluncurkan situs WordPress yang indah. Pelajari lebih lanjut tentang Lokal di sini.

Kesimpulan

Kustomisasi adalah salah satu bagian terbaik dalam membuat situs menggunakan WordPress dan meskipun tema adalah titik awal yang bagus, menyenangkan untuk memiliki tema anak, seperti Divi, yang dapat Anda gunakan.