Cara mudah membuat tema WordPress khusus (tanpa kode)

Apakah Anda ingin membuat tema WordPress khusus dari awal?

Sebelumnya, Anda harus mengikuti WordPress Codex dan memiliki keterampilan pengkodean yang cukup untuk membuat tema WordPress kustom. Berkat generator tema WordPress yang baru, siapa pun dapat membuat tema WordPress yang sepenuhnya dapat disesuaikan dalam satu jam (tidak diperlukan keterampilan pemrograman).

Pada artikel ini, kami akan menunjukkan kepada Anda cara mudah membuat tata letak WordPress khusus tanpa menulis kode.

Buat tema WordPress khusus untuk pemula

Tidak seperti situs HTML statis, tema WordPress adalah sekumpulan file template yang ditulis dalam PHP, HTML, CSS, dan JavaScript. Biasanya, Anda harus memahami semua bahasa desain web ini atau menyewa pengembang web untuk membuat tema WordPress khusus.

Jika Anda menyewa pengembang atau agensi, harga tema WordPress khusus dapat mencapai ribuan dolar.

Karena banyak pemilik usaha kecil tidak mampu membayar mahal tema WordPress kustom, banyak dari mereka hanya memilih tema default yang datang dengan WordPress.

Mereka yang tidak ingin melakukan dan menginginkan penyesuaian menggunakan WordPress drag-and-drop page builder atau bingkai tema untuk membuat tema khusus.

Sementara kerangka kerja tema WordPress memudahkan untuk membuat tema WordPress, mereka adalah solusi pengembang dan bukan pemilik situs biasa.

Di sisi lain, plugin WordPress membuatnya sangat mudah bagi pembuat halaman untuk membuat tata letak halaman kustom menggunakan antarmuka drag and drop, tetapi mereka hanya terbatas pada tata letak. Anda tidak dapat membuat tema khusus dengannya.

Bahkan Beaver Builder, salah satu plugin terbaik untuk pembangun situs WordPress, telah memutuskan untuk memperbaiki masalah ini dengan plugin yang disebut Beaver Themer.

Beaver Themer adalah plugin pembuatan situs yang memungkinkan Anda membuat tata letak khusus menggunakan antarmuka seret dan lepas tanpa harus belajar coding.

Mari kita lihat cara mudah membuat tema WordPress dengan Beaver Themer.

Video tutorial

Berlangganan WPBeginner

Jika Anda tidak menyukai video atau memerlukan instruksi lebih lanjut, baca terus.

Konfigurasikan Beaver Themer untuk membuat tema khusus

Beaver Themer adalah plugin tambahan untuk Beaver Builder, jadi Anda perlu kedua plugin untuk artikel ini.

Pertama, instal dan aktifkan plugin Beaver Builder dan Beaver Themer. Untuk informasi lebih lanjut, lihat panduan langkah demi langkah kami untuk menginstal plugin WordPress.

Dengan Beaver Themer Anda dapat membuat tema khusus, tetapi Anda masih membutuhkan tema untuk memulai. Kami sarankan untuk menggunakan tema ringan yang menyertakan templat halaman berukuran penuh untuk dijadikan sebagai tema awal.

Anda dapat menemukan banyak dari tema ini di direktori tema WordPress.org. Sebagian besar tema WordPress modern menyertakan templat lebar penuh. Pilihan terbaik kami adalah:

  • Astra – Tema WordPress gratis dan mudah untuk tujuan apa pun dengan dukungan bawaan untuk Beaver Builder.

  • OeanWP – Tema serbaguna serbaguna WordPress gratis lainnya yang menyediakan dukungan penuh untuk pembuatan halaman.

  • StudioPress Layout – Semua layout Anda adalah Beaver Builder yang kompatibel dan bekerja dengan baik dengan Beaver Themer.

Untuk tutorial ini, kami menggunakan Astra, tema WordPress yang ringan dan mudah disesuaikan.

Siapkan tema Anda untuk Beaver Themer

Saat membuat tema WordPress khusus dengan Beaver Themer, penting untuk memastikan bahwa Beaver Themer memiliki akses ke seluruh badan halaman (dari ujung ke ujung).

Ini adalah desain standar Astra. Seperti yang Anda lihat, desain ini mencakup bilah sisi yang mungkin sulit dikerjakan saat menggunakan Beaver Themer.

Desain tata letak standar dengan bilah samping

Anda dapat mengubah ini dengan mengunjungi panel admin situs Anda dan kemudian menjelajah Penampilan »Kustomisasi Sisi Dari sini Anda harus berubah Desain »palang samping Berat

Nonaktifkan sidebar untuk tema Anda

Cukup pilih "Tidak ada panel halaman" di opsi tata letak default dan klik tombol "Terbitkan" untuk menyimpan perubahan.

Tema Anda sekarang menggunakan desain tanpa bilah samping. Ini adalah desain terbaik untuk Beaver Themer.

Desain bertema tanpa bilah samping.

Tata letak halaman penuh ini memungkinkan Beaver Themer untuk menggunakan setiap inci layar sehingga Anda dapat menciptakan pengalaman visual yang indah dari ujung ke ujung.

Sebagian besar tema WordPress termasuk template halaman lebar penuh. Jika Anda menggunakan tema yang berbeda, Anda akan menemukan opsi untuk menghapus bilah sisi di pengaturan tema Anda.

Jika Anda tidak dapat menemukannya, hubungi pengembang tema Anda untuk bantuan.

Setelah Anda mengatur tema Anda dalam tata letak lebar penuh, Anda dapat menggunakan Beaver Themer untuk membuat tema WordPress kustom Anda.

Dasar-dasar Quick Beaver Themer

Beaver Themer bekerja sama dengan Beaver Builder. Dengan Beaver Builder, sebagai add-on ke pembuat halaman, Anda dapat menarik dan melepas elemen ke halaman untuk membuat tata letak khusus.

Ini berisi elemen-elemen berikut yang dapat Anda gunakan dalam desain Anda:

  • Templat – Kumpulan kolom, baris, dan modul yang membentuk tata letak halaman penuh.
  • Kolom – modul tata letak vertikal yang memungkinkan konten masuk secara horizontal.
  • Baris: perakitan horizontal beberapa modul.
  • Modul: Elemen yang menghasilkan informasi tertentu seperti judul, blok teks, tabel, galeri, dll.

Cukup edit halaman di Beaver Builder dan kemudian klik tombol Add di sudut kanan atas. Kemudian Anda dapat menarik dan melepaskan kolom, baris, dan modul pada halaman Anda dan mulai mengedit segera.

Gunakan Beaver Builder

Jika Anda tidak ingin memulai dari awal, pilih dulu daftar templat yang disiapkan.

Templat pembangun Beaver

Beaver Builder juga memungkinkan Anda untuk menyimpan desain Anda dan menggunakannya nanti sebagai templat.

Untuk informasi lebih lanjut, lihat artikel kami tentang cara membuat tata letak halaman khusus dengan Beaver Builder.

Namun, kami tidak hanya ingin membuat tata letak halaman. Kami ingin membuat tema yang benar-benar pribadi.

Inilah saat Beaver Themer tiba.

Tambahkan elemen lain ke Beaver Builder yang disebut "Themer Layout".

Desain yang lebih baik

Layout Themer memungkinkan Anda untuk membuat layout kustom untuk header, footer, konten, halaman 404, dan bagian template lainnya.

Ini adalah blok bangunan semua tema WordPress. Anda dapat menggunakan blok bangunan ini untuk membuat tema khusus yang memenuhi kebutuhan Anda.

Gunakan template Beaver Themer untuk membuat tema WordPress khusus

Dalam instruksi di bawah ini, kami akan memandu Anda melalui langkah-langkah yang diperlukan untuk membuat elemen tema kustom paling populer. Setelah itu selesai, Anda telah sepenuhnya mengubah tema dasar Anda menjadi tema anak WordPress yang sepenuhnya dapat disesuaikan.

Buat tajuk khusus untuk tema Anda

Mari kita mulai dengan judul situs Anda. Header khusus adalah bagian integral dari sebuah tema dan mungkin sulit untuk membuat header menggunakan metode tradisional.

Untungnya, Beaver Themer memiliki fungsi header bawaan. Anda dapat menggunakan templat yang dilatih sebelumnya atau menggunakan menu dan modul gambar dengan tata letak dua kolom.

Untuk sampai ke area header ini, Anda harus terlebih dahulu mengatur tata letak header di Beaver Themer. kunjungi Beaver Builder »Tambah baru Halaman dan masukkan judul untuk tajuk Anda.

Buat tata letak tajuk khusus

Kemudian pilih "Design Themer" sebagai jenis dan "Header" sebagai opsi desain. Setelah selesai, klik tombol "Tambahkan tema tema" untuk melanjutkan.

Ini akan membawa Anda ke halaman konfigurasi tata letak. Dari sini, pilih "Situs Lengkap" sebagai lokasi templat judul.

Pengaturan tata letak

Kemudian klik tombol "Start Beaver Builder" untuk membuka antarmuka generator.

Beaver Builder dimulai dengan kolom dasar sederhana dan tata letak tajuk dua baris sebagai titik awal.

Desain tajuk

Anda dapat menggunakan alat seret dan jatuhkan yang sama dari Beaver Builder untuk mengubah latar belakang, warna, teks, dll. Anda juga dapat menambahkan modul lain, memuat templat premade, dan menambahkan baris / kolom dengan mengklik tombol Tambah di sudut kanan atas.

Ketika Anda puas dengan desain, klik tombol Selesai untuk menyimpan atau menerbitkan desain Anda.

Sekarang Anda dapat mengunjungi situs mereka untuk melihat judul tema khusus Anda dalam aksi. Seperti yang Anda lihat, kami menerapkan tata letak tajuk ke tema khusus kami.

Header khusus untuk tema khusus Anda

Belum ada konten selain judul, dan Anda mungkin akan melihat area footer dari topik dasar.

Mari kita ubah itu.

Buat footer khusus untuk tema Anda

Anda dapat menggunakan Beaver Themer untuk membuat footer khusus untuk tema Anda, seperti halnya Anda membuat header khusus.

Pergi ke Beaver Builder »Tambah baru Halaman dan masukkan judul untuk tata letak footer. Kemudian pilih "Layout Themer" sebagai jenis dan "Footer" sebagai opsi tata letak.

Tata letak footer

Klik tombol "Add Themer Design" untuk melanjutkan.

Ini akan membawa Anda ke halaman konfigurasi tata letak. Dari sini, pilih "Halaman Penuh" sebagai lokasi templat.

Pengaturan tata letak footer

Kemudian klik tombol "Start Beaver Builder" untuk membuka antarmuka generator.

Beaver Builder dimulai dengan tata letak footer tiga kolom. Anda dapat menggunakan desain ini sebagai titik awal dan mulai mengedit.

Edit tata letak footer Anda

Anda dapat menambahkan modul, blok teks, atau apa pun yang Anda inginkan. Anda dapat mengubah warna, font, menambahkan gambar latar belakang, dan lainnya kapan saja.

Ketika Anda puas dengan desain, klik tombol Selesai untuk menyimpan atau menerbitkan desain Anda.

Buat area konten untuk posting dan halaman

Setelah kami membuat header dan footer untuk setiap halaman dan konten di situs, sekarang saatnya untuk membuat posting atau isi pada halaman (area konten).

Kita mulai dengan cara yang sama seperti kita membuat header dan footer dan menambahkan tata letak Singular ke Tambah halaman baru.

Buat posting dan tata letak halaman

Kemudian pilih di mana desain ini akan muncul. Anda dapat memilih tunggal untuk semua posting dan halaman individual, atau memilih posting atau hanya halaman.

Konfigurasi desain yang unik

Kemudian klik tombol "Start Beaver Builder" untuk membuka antarmuka generator.

Edisi desain unik

Beaver Builder memuat tata letak sampel unik dengan judul artikel / halaman sebelumnya, diikuti oleh konten, penulis biobox, dan area komentar.

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

Ketika Anda puas dengan desain, klik tombol Selesai untuk menyimpan dan mempublikasikan perubahan Anda.

Anda sekarang dapat mengunjungi situs mereka untuk melihat mereka beraksi.

Desain bertema dengan konten.

Buat tata letak file untuk tema khusus Anda

Setelah tema khusus Anda terbentuk, Anda masih dapat membuat tata letak untuk bagian lain dari situs Anda. WordPress mencantumkan kategori, tag, penulis, dan file bulanan di halaman arsip.

Mari buat tata letak halaman arsip untuk tema khusus Anda.

Anda mulai dengan kunjungan Beaver Builder »Tambah baru Halaman dan masukkan judul untuk desain file Anda.

Buat tata letak file untuk tema khusus Anda

Kemudian pilih "Layout Themer" sebagai jenis dan "File" sebagai opsi tata letak. Klik tombol "Add Themer Design" untuk melanjutkan.

Ini akan membawa Anda ke halaman konfigurasi tata letak. Dari sini, pilih "Semua file" sebagai lokasi templat. Anda juga dapat membuat tata letak terpisah untuk setiap jenis file, mis. Tanggal, hasil pencarian, kategori, tag, dll.

Pengaturan tata letak file

Kemudian klik tombol "Start Beaver Builder" untuk membuka antarmuka generator.

Beaver Builder dimulai dengan tata letak kolom sederhana. Judul file muncul di bagian atas diikuti oleh pengiriman.

Edit tata letak file untuk tema Anda

Anda dapat mengarahkan dan mengklik item apa saja untuk mengedit propertinya. Anda juga dapat menambahkan modul, baris, dan kolom baru jika perlu.

Kemudian klik tombol "Selesai" untuk menyimpan dan mempublikasikan perubahan Anda.

Buat desain lain untuk tema WordPress khusus Anda

Dengan Beaver Themer, Anda juga dapat membuat tata letak untuk halaman lain dalam hierarki templat, mis. B. 404 halaman, templat bagian, halaman hasil pencarian dan banyak lagi.

Dengan fitur tarik dan letakkan bawaan Beaver Builder, Anda dapat dengan mudah membuat tata letak WordPress sendiri dari awal tanpa menulis kode. Ini benar-benar cara paling ramah pemula untuk mengembangkan tema WordPress.

Kami harap artikel ini membantu Anda mempelajari cara membuat tema WordPress khusus tanpa mempelajari cara membuat kode. Anda juga dapat membaca panduan kami tentang cara mempercepat situs WordPress Anda untuk pengalaman pengguna dan SEO yang lebih baik.

Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton video tutorial WordPress. Anda juga dapat menemukan kami di Twitter y Facebook.

Pos terkait

Back to top button