Cara Membuat Tema WordPress Kustom dalam 5 Langkah Bebas Kode

Apakah Anda ingin membuat tema WordPress khusus untuk situs web Anda?

Membuat tema WordPress Anda sendiri dari awal biasanya melibatkan penulisan kode yang rumit atau menyewa pengembang tema untuk membuatkan tema untuk Anda. Namun berkat generator tema WordPress yang baru dan mudah digunakan, siapa pun dapat membuat tema WordPress kustom tanpa menulis kode.

Artikel ini akan menunjukkan kepada Anda cara membuat tema khusus di WordPress langkah demi langkah.

Apa Itu Tema WordPress?

Tema WordPress adalah file template yang ditulis dalam PHP, HTML, CSS, dan JavaScript. Setiap file bekerja sama untuk membuat desain dan fungsionalitas situs WordPress Anda.

Tema WordPress tipikal akan menyertakan beberapa, jika tidak semua, dari file tema berikut:

• footer.php
• header.php
• index.php
• halaman.php
• sidebar.php
• arsip.php

Tema WordPress juga menyertakan file functions.php dan file style.css.

Biasanya, Anda memerlukan pemahaman yang kuat tentang beberapa bahasa desain web atau pengembang web untuk membuat tema WordPress khusus.

Membuat Tema WordPress Kustom untuk Pemula

Jika Anda menyewa pengembang atau agen pengembangan web, biaya untuk membuat tema khusus dari awal bisa mencapai ribuan dolar. Karena banyak usaha kecil tidak mampu membayar biayanya, mereka memilih tema WordPress default yang disertakan dengan platform.

Namun, jika Anda adalah pemilik situs web yang tidak ingin menggunakan default, Anda dapat menggunakan kerangka kerja tema, seperti Genesis by StudioPress misalnya, atau plugin pembuat halaman WordPress untuk membuat tema khusus untuk situs WordPress Anda.

Kerangka kerja tema WordPress membuat pembuatan tema WordPress lebih mudah dengan secara otomatis menangani banyak desain dan fungsionalitas. Namun, mereka masih merupakan solusi yang agak rumit, membutuhkan tema anak misalnya, jadi mereka lebih baik untuk pengembang daripada pemilik situs web rata-rata.

Di sisi lain, pembuat halaman WordPress membuatnya sangat mudah untuk membuat tata letak halaman khusus menggunakan antarmuka seret dan lepas, tetapi mereka juga memiliki batasan. Pembuat halaman hanya mengizinkan Anda membuat tata letak, dan biasanya Anda tidak dapat menggunakannya untuk membuat tema khusus.

Hingga SeedProd, pembuat situs web WordPress terbaik untuk tema khusus memutuskan untuk menyelesaikan masalah ini dengan pembuat tema WordPress-nya.

Apa itu Pembuat Tema SeedProd?

SeedProd sudah menjadi pembuat halaman drag-and-drop yang kuat yang digunakan oleh lebih dari 1 juta pemilik situs web. Tetapi dengan pembuat temanya, setiap pengguna non-teknisi dapat membuat tema WordPress yang sepenuhnya dapat disesuaikan tanpa kode.

Alih-alih menyulap file konten wp, Anda dapat membuat tema dari awal hanya dengan beberapa klik. SeedProd bahkan akan membuat stylesheet Anda secara otomatis.

SeedProd hadir dengan:

• Antarmuka seret dan lepas visual
• Lebih dari 150+ templat Pro
• 2 juta stok foto
• Dukungan WooCommerce
• Dasbor manajemen pelanggan
• Integrasi pemasaran email

Dan begitu banyak fitur dan widget tambahan yang Anda butuhkan untuk membangun situs web kustom menggunakan WordPress dengan cepat.

Dengan mengingat hal itu, mari kita lihat cara membuat tema WordPress kustom tanpa menulis satu baris kode pun menggunakan SeedProd.

Cara Membuat Tema WordPress Kustom Tanpa Kode

Untuk membuat tema WordPress khusus dengan SeedProd, Anda memerlukan situs web WordPress terlebih dahulu untuk menginstal plugin SeedProd. Jika Anda belum memiliki instalasi WordPress, Anda dapat mengikuti langkah-langkah ini untuk mempelajari cara membuat situs web WordPress.

Situs web Anda juga harus memiliki tema WordPress sederhana yang diinstal. Anda dapat menemukan banyak solusi gratis di direktori tema WordPress. Anda tidak perlu khawatir tentang tampilan tema karena SeedProd akan menimpanya saat Anda memublikasikan penyesuaian Anda.

Ini juga merupakan ide yang baik untuk menggunakan lingkungan pengembangan saat mengubah tema WordPress Anda untuk menghindari kerusakan situs web Anda secara tidak sengaja. Perusahaan hosting WordPress populer seperti BlueHost menawarkan lingkungan pengujian secara default.

Anda juga harus membuat cadangan situs web Anda sebelum membuat perubahan penting. Berikut adalah daftar plugin cadangan WordPress terbaik yang dapat Anda gunakan.

Setelah situs WordPress Anda siap, ikuti langkah-langkah di bawah ini untuk membuat tema WordPress kustom tanpa kode.

Langkah 1. Instal dan Aktifkan SeedProd

Langkah pertama adalah menginstal dan mengaktifkan plugin pembuat situs web SeedProd. Untuk mengakses fitur pembuat tema, Anda memerlukan lisensi SeedProd Pro atau Elite.

Setelah mengunduh file zip plugin SeedProd ke komputer Anda, unggah, instal, dan aktifkan di dasbor WordPress Anda. Jika Anda memerlukan bantuan dengan langkah ini, ikuti panduan ini untuk menginstal plugin WordPress.

Setelah menginstal SeedProd, navigasikan ke SeedProd Pengaturan dari area admin WordPress Anda dan masukkan kunci lisensi SeedProd Anda.

Anda dapat menemukan kunci lisensi Anda dengan mengunjungi area akun SeedProd Anda dan menyalinnya dari tab Unduhan.

Sekarang Anda dapat membuka SeedProd Pembuat Tema dan melihat ikhtisar Pembuat Tema. Di sinilah Anda dapat membuat hierarki template untuk tema WordPress Anda.

Dengan kata lain, ini adalah tempat Anda dapat membuat semua bagian individual yang membentuk tema Anda, seperti berikut ini:

• tajuk
• catatan kaki
• Postingan Tunggal
• Halaman tunggal
• Arsip (Halaman Blog)
• Halaman Beranda
• Bilah samping

Anda dapat membuat masing-masing bagian tema ini satu per satu dengan mengklik tombol Tambahkan Template Tema Baru .

Tetapi jika itu terdengar terlalu berlebihan untuk percobaan pertama Anda, ada cara lain untuk membuat tema Anda.

Anda dapat menggunakan template tema premade SeedProd untuk membuat kerangka dasar untuk tema Anda dengan cepat dan menyesuaikannya agar sesuai dengan kebutuhan desain Anda, tanpa kode. Karena solusi ini sangat mudah untuk pemula, itulah yang akan kami fokuskan untuk tutorial ini.

Catatan: SeedProd juga menawarkan ratusan templat halaman arahan responsif untuk membantu Anda membuat halaman arahan khusus.

Langkah 2. Pilih Template Tema

Pembuat tema SeedProd sudah memiliki beberapa tema yang dibuat untuk Anda. Untuk menemukannya, klik tombol Tema .

Pada saat penulisan panduan ini, ada 9 template tema, termasuk:

1. Tema Pemula
2. Bisnis Modern
3. Agen Pemasaran
4. Tema Desain Produk
5. Perusahaan Perawatan Hewan Peliharaan
6. Tema Strategi Digital
7. Tema Musik Langsung
8. Tema Pialang Hipotek
9. Tema Restoran

Untuk memilih template tema untuk situs web Anda, arahkan mouse ke gambar mini dan klik ikon tanda centang. Untuk panduan ini, kami akan menggunakan Tema Pemula SeedProd.

Setelah memilih template Anda, SeedProd membuat semua bagian yang membentuk tema Anda secara otomatis.

Jika ada fitur tertentu yang tidak ingin Anda tampilkan di situs web Anda, Anda dapat mengeklik sakelar di bawah judul Terbitkan dan matikan bagian tema itu.

Jika Anda mengklik tautan ketentuan untuk setiap bagian Templat, Anda bisa mengubah nama, jenis, prioritas, dan memilih kapan dan di mana itu muncul di situs web Anda.

Langkah 3. Sesuaikan Bagian Tema WordPress Anda

Dengan blok pembangun dasar tema Anda, sekarang saatnya untuk mulai mengedit setiap bagian tema untuk membuat tema WordPress yang benar-benar kustom untuk situs Anda.

Untuk mengedit bagian tema apa pun, arahkan kursor ke atasnya dan klik tautan Edit Desain .

Kita akan mulai dengan mengedit header.

Header dan Footer

Saat Anda mengedit bagian tema di SeedProd, Anda akan menuju ke pembuat seret dan lepas visualnya. Anda dapat menyesuaikan tajuk tema Anda di layar ini hanya dengan mengarahkan dan mengklik.

Seperti yang Anda lihat, Starter Theme hadir dengan header 2 kolom yang memiliki logo dan menu navigasi. Anda dapat menyesuaikannya untuk menampilkan logo khusus Anda dengan mengklik logo pada pratinjau langsung.

Dari sana, Anda dapat menghapus logo placeholder di panel sebelah kiri dan mengunggah yang baru dari komputer atau perpustakaan media WordPress Anda.

Anda dapat menyesuaikan ukuran dan perataan logo Anda di panel yang sama dan menambahkan tautan khusus, seperti URL situs web utama Anda.

Jika Anda ingin mengubah warna latar belakang tajuk, arahkan kursor ke bagian tajuk hingga memiliki garis ungu, lalu klik untuk melihat pengaturan bagian di panel sebelah kiri. Dari sana, Anda dapat memberi header Anda warna latar belakang kustom, gambar, dan memilih lebar header.

Dan di tab Lanjutan , Anda dapat menyesuaikan bayangan header, spasi, batas, dan lainnya.

Saat Anda puas dengan header WordPress kustom Anda, klik tombol Simpan di sudut kanan atas dan keluar kembali ke pembuat tema.

Sekarang ulangi langkah-langkah tersebut untuk mengedit footer WordPress Anda. Klik Edit Desain untuk membukanya di editor visual, dan klik elemen apa pun untuk menyesuaikan konten, warna, tautan, dan lainnya.

Halaman Beranda

Selanjutnya, kami akan menyesuaikan beranda situs WordPress Anda, yang sering kali menjadi halaman pertama yang dilihat pengguna saat mengunjungi situs web Anda. Jadi buka bagian Beranda di editor visual.

Karena kami telah menyesuaikan desain header dan footer, Anda akan melihat desain baru di bagian atas dan bawah beranda. Tapi jangan khawatir, perubahan yang Anda buat di layar ini tidak akan memengaruhi header atau footer Anda; mereka hanya ada sebagai panduan visual.

Template Tema Pemula SeedProd memiliki semua fitur yang dibutuhkan sebagian besar situs web bisnis, termasuk:

• daerah pahlawan
• logo klien
• Fitur
• Testimonial
• bagian FAQ

Sama seperti header, Anda dapat menyesuaikan setiap inci untuk membuatnya unik. Mari kita mulai dengan mengubah area pahlawan.

Area pahlawan memiliki fitur berikut:

• Bagian
• Tata letak 2 kolom
• Gambar
• Menuju
• Teks
• Tombol

Untuk mengubah gambar default, cukup klik dan unggah gambar baru, seperti yang Anda lakukan dengan logo Anda.

Anda juga dapat mengedit judul dan deskripsi dengan mengeklik setiap blok dan mengganti konten dengan teks khusus Anda.

Jika Anda mengklik blok tombol, Anda dapat mengubah teks tombol, tautan, perataan, dan lainnya.

Anda dapat menemukan semua elemen ini di panel blok sebelah kiri. Dengan begitu, Anda dapat menyeret blok dari kiri dan menjatuhkannya ke desain Anda untuk menambahkan lebih banyak konten ke tema Anda.

Ikuti proses ini untuk menyesuaikan sisa beranda Anda hingga mencerminkan bisnis Anda. Misalnya, Anda dapat menambahkan informasi tentang layanan perusahaan Anda atau menyoroti fitur produk Anda di bagian fitur.

Kemudian Anda dapat menggunakan blok Testimonial bawaan SeedProd untuk menambahkan bukti sosial positif dari klien dan pelanggan Anda yang sudah ada.

Kami juga mengubah warna latar belakang bagian ini agar sesuai dengan header tema kami dengan membuka pengaturan bagian dan memilih warna yang berbeda.

Setelah menyesuaikan beranda, Anda dapat mengeklik ikon pratinjau seluler untuk melihat tampilan desain Anda di perangkat seluler.

Jika ada yang tidak beres, Anda dapat memindahkan berbagai hal hingga layar ponsel Anda menawarkan pengalaman pengguna yang baik.

Saat Anda puas dengan tampilan beranda Anda, klik tombol Simpan dan kembali ke pembuat tema.

Halaman Blog, Posting Tunggal, dan Halaman

Kemungkinan Anda ingin menyertakan halaman khusus untuk posting blog di tema WordPress baru Anda. Kabar baiknya adalah SeedProd memiliki bagian tema yang dapat Anda sesuaikan secara khusus untuk tujuan itu.

Bagian itu disebut Indeks Blog, Arsip, Pencarian di pembuat tema. Ini memungkinkan Anda menyesuaikan halaman posting blog, arsip posting, dan halaman hasil pencarian agar sesuai dengan branding situs web Anda lainnya.

Jadi klik tautan Edit Desain untuk membuka bagian tema ini di pembuat seret dan lepas.

Di halaman ini, Tema Pemula menggunakan Tag Template untuk menarik informasi dinamis dari WordPress, termasuk judul Arsip dan Postingan. Saat Anda mengklik salah satu blok ini, Anda akan melihat pengaturannya di panel sebelah kiri.

Misalnya, ketika Anda mengklik tag template Posting, Anda dapat menampilkan postingan secara default, kustom (postingan, media, atau postingan kustom), atau manual dengan mengetikkan parameter kueri tertentu.

Anda juga dapat memilih jumlah kolom, posting per halaman, menampilkan atau menyembunyikan gambar unggulan, menampilkan kutipan, dan banyak lagi.

Setelah menyesuaikan arsip atau halaman blog Anda, kembali ke pembuat tema, dan edit bagian Single Posts .

Bagian tema ini menggunakan tag templat berikut untuk menarik informasi tentang masing-masing posting WordPress:

• Judul Posting
• Info Posting
• Posting Konten
• Kotak Penulis
• Kirim Komentar
• Navigasi Posting

Anda dapat mengedit setiap blok ini seperti yang Anda lakukan dengan blok SeedProd lainnya. Cukup klik elemen apa saja dan sesuaikan di panel pengaturan.

Misalnya, jika Anda mengklik blok Info Posting , Anda dapat menambahkan lebih banyak info meta, mengubah perataan, dan menyesuaikan warna ikon.

Bilah samping

Banyak situs WordPress masih menggunakan bilah sisi untuk menampilkan informasi penting kepada pengunjung seperti profil media sosial mereka, posting terbaru, dan kotak pendaftaran buletin. Tapi tidak seperti banyak tema WordPress premade, Anda dapat menggunakan SeedProd untuk membuat sidebar WordPress kustom dengan blok bangunan visualnya.

Untuk melakukannya, klik Edit Desain pada bagian Templat bilah sisi. Dari sana, Anda dapat menarik dan melepas konten apa pun yang Anda suka ke desain bilah sisi Anda.

Tema Pemula mencakup kotak pencarian, ikon media sosial, dan kategori posting secara default. Tetapi Anda dapat menambahkan apa pun yang Anda suka di sini. Misalnya, Anda mungkin ingin menampilkan daftar posting blog terbaru atau gambar yang menautkan ke mitra afiliasi.

Anda juga dapat menggunakan blok formulir keikutsertaan SeedProd dan mengumpulkan alamat email untuk mengembangkan daftar Anda, tepat di bilah sisi Anda. Hal terbaiknya adalah, Anda tidak memerlukan pengetahuan teknis apa pun untuk mewujudkannya.

CSS global

Sekarang, Anda telah membangun sebagian besar tema WordPress kustom Anda tanpa kode. Tetapi ada satu bagian lagi yang harus Anda perhatikan untuk memastikan semuanya konsisten tepat di seluruh tema Anda.

Itu adalah CSS Global Anda, yang mengontrol gaya global, tipografi, warna, dan tata letak tema Anda. Jadi klik Edit Desain pada bagian tema itu untuk membukanya di editor halaman.

Seperti yang Anda lihat, halaman ini memberi Anda kendali atas banyak gaya tema Anda. Di panel sebelah kiri adalah bagian untuk:

• warna
• font
• Latar belakang
• tombol
• Formulir
• tata letak
• CSS khusus

Misalnya, Anda dapat membuka bagian Tombol dan memilih warna khusus. Kemudian warna itu akan muncul di setiap tombol di tema Anda.

Anda dapat melakukan hal yang sama di judul Font dan menetapkan warna khusus untuk setiap tautan di tema Anda.

Jadi lanjutkan dan ubah pengaturan ini hingga tema Anda terlihat persis seperti yang Anda inginkan, lalu klik tombol Simpan untuk menyimpan perubahan Anda.

Langkah 4. Hubungkan Layanan Pemasaran Email Anda

Jika salah satu tujuan bisnis Anda adalah untuk mengembangkan daftar email Anda, kemungkinan Anda telah menambahkan formulir pendaftaran di suatu tempat di desain tema WordPress Anda. Tetapi untuk menambahkan kontak baru ke daftar Anda secara otomatis, Anda harus menghubungkan formulir Anda ke layanan pemasaran email Anda.

SeedProd terintegrasi langsung dengan banyak layanan pemasaran email populer, seperti Kontak Konstan, Mailchimp, Drip, dll. Dan sangat mudah untuk menautkan ke akun Anda.

Cukup edit bagian tema mana pun dan klik tab Hubungkan di bagian atas layar.

Kemudian, klik integrasi apa pun dari daftar dan ikuti petunjuk di layar. Akibatnya, siapa pun yang mengisi formulir optin Anda akan secara otomatis ditambahkan ke daftar email Anda.

Langkah 5. Aktifkan Tema WordPress Kustom Anda

Langkah terakhir dalam membuat tema WordPress kustom dengan SeedProd adalah membuat tema tersebut hidup di situs web Anda. Untuk melakukannya, temukan heading Enable SeedProd Theme di pojok kanan atas dan alihkan sakelar ke posisi "on".

Tema baru Anda akan menggantikan tema default Anda, memungkinkan Anda untuk melihat penyesuaian Anda di bagian depan situs web Anda.

Itu dia! Tema WordPress kustom baru Anda sudah tayang di situs web Anda. Mari kita lihat bagaimana tampilannya.

Inilah beranda dengan header dan footer baru Anda:

Inilah halaman blog dengan sidebar WordPress kustom Anda:

Selamat!

Anda sekarang tahu cara membuat tema WordPress khusus tanpa kode.

Dengan pembuat tema WordPress yang mudah dan kuat dari SeedProd, Anda tidak memerlukan pengalaman teknis, pengembang WordPress, atau anggaran besar untuk membuat tema WordPress kustom.

Kekuatan dan fungsionalitas ada di tangan Anda saat Anda menginstal plugin.

Jadi tunggu apa lagi?

Terima kasih sudah membaca. Ikuti kami di YouTube, Twitter, dan Facebook untuk konten bermanfaat lainnya guna mengembangkan bisnis Anda.