Cara Membuat Tema WordPress Custom Tanpa Kode

Apakah kamu ingin membuat tema WordPress custom sendiri dari awal? Jika iya, sekarang berada di halaman yang tepat.

Dulu ketika seseorang memutuskan untuk membangun custom tema WordPress sendiri, harus mengikuti pedoman codex WordPress dan memiliki pengetahuan pengkodean. Namun, saat ini berkat building tema baru, siapa pun dapat membuat tema WordPress yang sepenuhnya dapat di sesuaikan dalam beberapa saat dan tanpa pengetahuan kode.

Pada artikel ini, kami akan menunjukkan cara membuat tema WordPress custom tanpa menggunakan kode apa pun.

Membuat Tema WordPress Custom

Tidak seperti situs HTML statis, tema WordPress adalah kumpulan file template yang di tulis dalam PHP, HTML, CSS, dan JavaScript. Untuk melakukan semua itu, kamu harus memiliki pemahaman yang baik tentang desain web atau menggunakan jasa orang lain untuk membuat tema WordPress.

Jika kamu memutuskan untuk menyewa jasa pengembang, maka biaya dalam pembuatan tema WordPress ini bisa menjadi sangat mahal.

Karena sudah banyak usaha kecil yang ingin mengenalkan bisnis mereka melalui dunia digital. Maka bisa jadi mereka tidak akan mampu membayar dengan biaya tinggi hanya untuk membuat tema. Alhasil banyak dari mereka menggunakan tema default yang di sertakan oleh WordPress.

Tetapi untuk yang menginginkan penyesuaian dengan tampilan website, dapat menggunakan WordPress builder sehingga nantinya tinggal mendrag & drop. Atau bisa juga menggunakan theme framework untuk membuat custom tema.

Theme framework ini biasa di gunakan oleh pengembang untuk membangun tema WordPress menjadi lebih mudah, dan ini adalah solusi bagi para pengembang.

Di sisi lain, plugin juga berperan penting dalam pembuatan halaman WordPress. Ini bisa menjadi sangat mudah ketika membuat tata letak halaman khusus menggunakan antarmuka drag & drop, tetapi hanya terbatas pada tata letak saja.

Seperti contohnya adalah plugin Beaver Builder, salah satu plugin WordPress page builder yang bertujuan menyelesaikan masalah dengan add-ons mereka yang bernama Beaver Themes.

Beaver Builder adalah plugin site builder yang memungkinkan kamu membuat tata letak tema khusus menggunakan antarmuka drag and drop tanpa menggunakan kode.

Sekarang, mari kita lihat bagaimana cara menggunakan Beaver Builder untuk membuat tema WordPress dengan mudah.

Menyiapkan Beaver untuk Membangun Custom Themes

Beaver Themer adalah plugin tambahan untuk Beaver Builder, jadi kamu memerlukan kedua plugin untuk meneruskan artikel ini.

Pertama, kamu perlu menginstal dan mengaktifkan plugin Beaver Builder dan Beaver Themer. Untuk detail lebih lanjut, lihat panduan kami tentang cara memasang plugin WordPress.

Beaver Themer memungkinkan kamu membuat tema khusus, tetapi kamu masih memerlukan tema default untuk memulainya. Sebaiknya gunakan tema ringan yang menyertakan template halaman lebar penuh untuk di manfaatkan sebagai tema awalan.

Kamu dapat menemukan banyak tema seperti itu di direktori tema WordPress. Sebagian tema WordPress modern menyertakan template full-width. Berikut adalah rekomendasi tema yang dapat kamu gunakan:

• Astra : Tema WordPress yang ringan dan gratis, hadir dengan dukungan bawaan Beaver Builder.
• OceanWP : Tema multi fungsi gratis yang juga mendukung halaman penuh.
• StudioPress : Semua tema mereka kompatibel dengan Beaver Builder.

Pada tutorial ini, kami akan menggunakan Astra yang ringan dan mudah untuk di sesuaikan.

Menyiapkan Tema untuk Beaver Themer

Saat membangun tema WordPress custom dengan Beaver Themer, penting untuk memastikan bahwa Beaver Themer memiliki akses ke seluruh halaman.

Ini adalah tata letak Astra default. Seperti yang kamu lihat, tata letak ini menyertakan sidebar yang mungkin sulit di gunakan saat menggunakan Beaver Themer.

Kamu dapat mengubahnya dengan mengunjungi dashboard admin website dan membuka halaman Appearance > Customize. Setelah itu kamu perlu mengklik pada Sidebar > Default Layout.

Sekarang, cukup pilih No Sidebar dari menu dropdown dan klik tombol Publish untuk menyimpan perubahan.

Tema kamu akan menggunakan tata letak tanpa sidebar. Ini adalah tata letak terbaik yang dapat di gunakan untuk Beaver Builder.

Saat ini sebagian besar tema WordPress menyertakan file template untuk halaman lebar penuh. Jika menggunakan tema lain, kamu mungkin menemukan opsi untuk menghapus sidebar di pengaturan tema.

Setelah mengatur tema ke tata letak lebar penuh, sekarang kamu siap untuk membuat tema WordPress custom menggunakan plugin Beaver Themer.

Hal Dasar Tentang Beaver Themer

Beaver Themer bekerja di atas Beaver Builder. Sebagai plugin page builder, Beaver Builder memungkinkan kamu mendrag & drop item ke halaman untuk membuat custom layouts.

Plugin ini memiliki item berikut yang dapat kamu gunakan dalam membuat tata letak:

• Template : Kumpulan kolom baris, dan modul yang membentuk keseluruhan tata letak halaman.
• Columns : Modul tata letak vertikal yang membantu menyelaraskan konten secara horizontal.
• Rows : Koleksi horizontal beberapa modul.
• Modules : Item yang menampilkan informasi spesifik seperti judul, teks blok, tabel, galeri, dll.

Cukup edit halaman di Beaver Builder lalu klik tombol Tambah di sudut kanan atas. Kemudian kamu dapat menarik dan melepaskan kolom, baris, modul, ke halaman dan mulai mengeditnya.

Atau, jika kamu tidak ingin memulai dari awal, pilih dari daftar template yang telah di buat sebelumnya.

Beaver Builder juga memungkinkan kamu untuk menyimpan tata letak dan kemudian menggunakannya nanti sebagai template.

Namun, kami tidak hanya ingin membuat tata letak halaman. Kami di sini ingin membuat tama custom yang lengkap.

Inilah saatnya menggunakan Beaver Themer.

Themer layout memungkinkan kamu membuat tata letak khusus untuk header, footer, konten area, halaman 404, dan bagian template lainnya.

Ini adalah building block dari semua tema WordPress dan dengan menggunakannya kamu akan dapat membuat tema khusus yang sesuai dengan kebutuhan.

Menggunakan Beaver Themer Template untuk Membuat Tema WordPress Custom

Mari kita mulai dengan bagian header website. Header merupakan komponen penting dari tema dan membuatnya bisa sangat rumit jika menggunakan metode tradisional.

Untungnya Beaver Themer memiliki fitur header bawaan. Kamu dapat menggunakan template yang telah di buat sebelumnya atau menggunakan menu dan modul gambar dengan tata letak dua kolom.

Agar bisa membuat header ini, kamu perlu mengatur tata letak header di Beaver Themer. Caranya, kunjungi halaman Beaver Builder > Add New dan berikan judul untuk header kamu.

Setelah itu, pilih “Themer Layout” sebagai jenis dan “Header” sebagai opsi layout. Setelah selesai, klik tombol Add Themer Layout untuk melanjutkan.

Ini akan membawa kamu ke halaman pengaturan tata letak. Dari sini kamu harus memilih “Entire Site” sebagai lokasi di mana template header akan di tampilkan.

Selanjutnya, klik tombol Launch Beaver Builder untuk membuka antarmuka builder.

Beaver Builder akan terbuka dengan satu kolom dasar dan tata letak header dua baris sebagai titik awal.

Kamu dapat menggunakan alat drag & drop Beaver Builder yang sama untuk mengubah background, warna, teks, dll. Kamu juga dapat menambahkan modul lain, memuat template yang telah di buat sebelumnya, dan menambahkan baris / kolom dengan mengklik tombol Tambah di kanan atas.

Setelah cukup puas dengan desainnya, klik tombol Done untuk menyimpan atau mempublikasikan layout.

Kamu sekarang dapat mengunjungi website untuk melihat header tema custom yang kamu buat. Seperti yang kamu lihat, kami telah menerapkan layout header ke tema custom kami.

Selain header, kamu belum akan menampilkan konten apa pun, dan kamu mungkin akan melihat area footer tema dasar.

Membangun Footer Custom untuk Tema

Kamu dapat membuat custom footer untuk tema menggunakan Beaver Themer sama seperti saat membuat custom header.

Buka Beaver Builder > Add New dan berikan judul untuk footer layout. Selanjutnya, pilih “Themer Layout” sebagai jenis dan “Footer” sebagai opsi layout.

Klik tombol Add Themer Layout untuk melanjutkan.

Sama seperti sebelumnya, ini akan membawa kamu ke halaman pengaturan tata letak. Dari sini kamu harus memilih “Entire Site” sebagai lokasi template akan di tampilkan.

Setelah itu, klik tombol Launch Beaver Builder untuk membuka antarmuka builder.

Sekarang Beaver Builder akan di luncurkan dengan footer layout menggunakan tiga kolom. Nantinya kamu bisa menggunakan layout ini sebagai titik awal dan mulai mengedit.

Kamu dapat menambahkan modul, block teks, atau apa pun yang kamu inginkan. Kamu selalu dapat mengubah warna, font, menambahkan background image, dan banyak lagi.

Setelah puas dengan desainnya, klik tombol Done untuk menyimpan atau mempublikasikan layout.

Membuat Konten Area untuk Postingan dan Halaman

Sekarang, setelah membuat layout header dan footer, saatnya untuk membuat postingan dan halaman atau konten area.

Kita akan mulai dengan cara yang sama seperti sebelumnya, tetapi pada bagian layout kamu perlu memilih “Singular”.

Selanjutnya, kamu harus memilih tempat untuk menampilkan layout ini. Kamu dapat memilih “All Singular” untuk menggunakannya di semua postingan dan halaman tunggal, bahkan kamu bisa memilih postingan atau hanya halaman.

Kemudian klik tombol Launch Beaver Builder untuk membuka antarmuka builder.

Beaver Builder akan memuat contoh tata letak tunggal dengan judul postingan atau halaman di bagian atas, di ikuti oleh konten, author box, dan komentar.

Kamu dapat mengarahkan dan mengklik untuk mengedit item ini atau menambahkan modul, kolom, dan baris baru sesuai kebutuhan.

Setelah kamu puas dengan tata letak, klik tombol Done untuk menyimpan atau mempublikasikan perubahan.

Kamu sekarang dapat mengunjungi website untuk melihat tampilannya.

Membuat Arsip Layout untuk Tema Custom

Sekarang setelah custom tema kamu sudah mulai terbentuk, maka langkah selanjutnya adalah membuat tata letak untuk bagian lain dari website. Contohnya adalah halaman arsip, nantinya halaman ini akan menampilkan kategori, tag, penulis, dan arsip bulanan.

Saatnya kita membuat tata letak halaman arsip di custom tema.

Kamu harus mulai dengan membuka halaman Beaver Builder > Add New dan memberikan judul untuk arsip layout.

Setelah itu, pilih “Themer Layout” sebagai tipe dan “Archive” sebagai opsi layout. Jika sudah klik tombol Add Themer Layout untuk melanjutkan.

Ini akan membawa kamu ke halaman pengaturan layout. Dari sini kamu harus memilih “All Archives” sebagai lokasi template akan di tampilkan. Kamu juga dapat membuat layout yang terpisah untuk setiap jenis arsip individual seperti tanggal, hasil pencarian, kategori, tag, dll.

Setelah itu klik tombol Launch Beaver Builder untuk membuka antarmuka builder.

Beaver Builder akan di luncurkan dengan layout arsip kolom tunggal. Ini akan menampilkan judul arsip di bagian atas, yang di ikuti oleh postingan.

Kamu dapat mengarahkan dan mengklik item apa saja untuk mengedit propertinya. Kamu juga dapat menambahkan modul, baris, dan kolom baru sesuai kebutuhan.

Setelah selesai, klik tombol Done untuk menyimpan atau mempublikasikan perubahan.

Membuat Layout Lain untuk Tema Custom

Beaver Builder juga memungkinkan kamu membuat layout untuk halaman lain misalnya halaman 404, bagian template, halaman hasil pencarian, dan banyak lagi.

Dengan menggunakan fungsionalitas drag & drop Beaver Builder, kamu dapat dengan mudah membuat tema WordPress custom sendiri dari awal tanpa menulis kode. Ini merupakan metode pengembangan tema WordPress paling cocok untuk pemula.

Kami harap artikel ini membantu kamu mempelajari cara membuat tema WordPress custom tanpa kode.

Semoga panduan di atas bermanfaat. Jika kamu memiliki pertanyaan tinggalkan pada kolom komentar di bawah.