Cara Membuat Tema WordPress Kustom (Tanpa Kod)

Adakah anda ingin membuat tema WordPress tersuai dari awal?


Pada masa lalu, anda harus mengikuti kodx WordPress dan mempunyai pengetahuan pengekodan yang baik untuk membina tema WordPress tersuai. Tetapi terima kasih kepada penjana tema WordPress yang baru, kini sesiapa sahaja dapat membuat tema WordPress yang sepenuhnya disesuaikan dalam satu jam (tidak perlu pengetahuan pengekodan).

Dalam artikel ini, kami akan menunjukkan kepada anda cara membuat tema WordPress khusus tanpa menulis kod.

Membuat tema WordPress tersuai tanpa menulis kod apa pun

Membuat Tema WordPress Khusus untuk Pemula

Tidak seperti laman HTML statik, tema WordPress adalah sekumpulan fail templat yang ditulis dalam PHP, HTML, CSS, dan JavaScript. Biasanya, anda perlu mempunyai pemahaman yang baik tentang semua bahasa reka bentuk web ini atau menyewa pembangun web untuk membuat tema WordPress tersuai.

Sekiranya anda mengupah pembangun atau agensi, maka kos tema WordPress tersuai boleh mencecah ribuan dolar.

Oleh kerana banyak pemilik perniagaan kecil tidak dapat menanggung kos tinggi tema WordPress tersuai, banyak dari mereka hanya memilih tema lalai yang disertakan dengan WordPress.

Mereka yang tidak mahu menyelesaikan dan mahukan penyesuaian menggunakan seretan & jatuhkan pembangun halaman WordPress, atau mereka menggunakan kerangka tema untuk membina tema tersuai.

Walaupun kerangka tema WordPress menjadikan pembinaan tema WordPress lebih mudah, mereka adalah penyelesaian untuk pembangun, bukan pemilik laman web rata-rata.

Sebaliknya, plugin pembangun halaman WordPress menjadikannya sangat mudah untuk membuat susun atur halaman tersuai dengan menggunakan seretan & jatuhkan antara muka, tetapi ia hanya terhad pada susun atur sahaja. Anda tidak dapat membina tema tersuai dengannya.

Sehingga Beaver Builder, salah satu plugin pembangun halaman WordPress terbaik memutuskan untuk menyelesaikan masalah ini dengan tambahan mereka yang disebut Beaver Themer.

Pemalam pembangun halaman WordPress Beaver Builder terbaik

Beaver Themer adalah add-on pembangun laman web yang membolehkan anda membuat susun atur tema tersuai menggunakan antara muka seret dan lepas dan tanpa belajar membuat kod.

Mari kita lihat bagaimana menggunakan Beaver Themer untuk membuat tema WordPress dengan mudah.

Tutorial Video

Langgan WPBeginner

Sekiranya anda tidak menyukai video atau memerlukan lebih banyak arahan, teruskan membaca.

Menetapkan Beaver Themer untuk Membangun Tema Tersuai

Beaver Themer adalah pemalam tambahan untuk Beaver Builder, jadi anda memerlukan kedua-dua pemalam untuk artikel ini.

Pertama, anda perlu memasang dan mengaktifkan pemalam Beaver Builder dan Beaver Themer. Untuk maklumat lebih lanjut, lihat panduan langkah demi langkah kami mengenai cara memasang pemalam WordPress.

Beaver Themer membolehkan anda membuat tema tersuai, tetapi anda masih memerlukan tema untuk memulakannya. Kami mengesyorkan menggunakan tema ringan yang merangkumi templat halaman lebar penuh untuk bertindak sebagai tema permulaan anda.

Anda boleh menemui banyak tema seperti itu di direktori tema WordPress.org. Sebilangan besar tema WordPress moden merangkumi templat lebar penuh. Pilihan utama kami adalah:

  • Astra – Tema WordPress serba guna ringan percuma yang disertakan dengan sokongan terbina dalam untuk Beaver Builder.
  • OeanWP – Satu lagi tema WordPress pelbagai guna percuma yang popular dengan sokongan pembina halaman penuh.
  • Tema StudioPress – Semua tema mereka serasi dengan Beaver Builder dan akan berfungsi dengan baik dengan Beaver Themer.

Demi tutorial ini, kami akan menggunakan Astra, yang ringan dan mudah untuk menyesuaikan tema WordPress.

Menyiapkan Tema Anda untuk Beaver Themer

Semasa membina tema WordPress khusus dengan Beaver Themer, penting untuk memastikan bahawa Beaver Themer mempunyai akses ke seluruh halaman (dari tepi ke tepi).

Ini adalah susun atur Astra lalai. Seperti yang anda lihat bahawa susun atur ini merangkumi bar sisi yang sukar untuk digunakan ketika menggunakan Beaver Themer.

Susun atur tema lalai dengan bar sisi

Anda boleh mengubahnya dengan melayari panel pentadbir laman web anda dan kemudian pergi ke Rupa »Sesuaikan halaman. Dari sini, anda perlu beralih ke Susun atur »Sidebars tab.

Mematikan bar sisi dalam tema anda

Sesampai di sana, cukup pilih ‘No Sidebar’ di bawah pilihan susun atur lalai dan klik pada butang Publish untuk menyimpan perubahan anda.

Tema anda sekarang akan mula menggunakan susun atur tanpa bar sisi. Ini adalah susun atur terbaik untuk digunakan dengan Beaver Themer.

Susun atur tema tanpa bar sisi

Susun atur halaman penuh ini membolehkan Beaver Themer menggunakan setiap inci skrin, sehingga anda dapat membuat pengalaman visual hujung-ke-hujung yang indah.

Sebilangan besar tema WordPress merangkumi fail templat untuk halaman lebar penuh. Sekiranya anda menggunakan beberapa tema lain, maka anda mungkin mendapat pilihan untuk membuang bar sisi dalam tetapan tema anda.

Sekiranya anda tidak dapat menjumpainya, hubungi pembangun tema anda dan mereka mungkin dapat membantu anda dalam hal itu.

Setelah anda menetapkan tema anda ke susun atur lebar penuh, anda sudah bersedia untuk membuat tema WordPress tersuai anda menggunakan Beaver Themer.

Dasar-dasar Pantas Beaver Themer

Beaver Themer berfungsi di atas Beaver Builder. Sebagai plugin pembangun halaman, Beaver Builder membolehkan anda menyeret dan melepaskan item ke halaman untuk membuat susun atur tersuai.

Ia mempunyai item berikut yang dapat anda gunakan dalam susun atur anda:

  • Templat: Kumpulan baris lajur, dan modul yang membentuk keseluruhan susun atur halaman.
  • Lajur: Modul susun atur menegak yang membantu menyelaraskan kandungan secara mendatar.
  • Baris: Pengumpulan mendatar pelbagai modul
  • Modul: Item yang mengeluarkan maklumat tertentu seperti tajuk, blok teks, jadual, galeri, dll.

Cukup edit halaman di Beaver Builder dan kemudian klik pada butang tambah di sudut kanan atas. Anda kemudian boleh menyeret dan melepaskan lajur, baris, modul, ke halaman anda dan mula mengeditnya dengan segera.

Menggunakan Beaver Builder

Sekiranya anda tidak mahu bermula dari awal, pilih dari senarai templat yang telah dibuat untuk memulakannya.

Templat Beaver Builder

Beaver Builder juga membolehkan anda menyimpan susun atur anda dan kemudian menggunakannya nanti sebagai templat.

Untuk mengetahui lebih lanjut, lihat artikel kami tentang cara membuat susun atur halaman tersuai menggunakan Beaver Builder.

Namun, kami tidak hanya mahu membuat susun atur halaman. Kami ingin membuat tema tersuai yang lengkap.

Ini adalah ketika Beaver Themer masuk.

Ia menambah item lain ke Beaver Builder yang disebut ‘Themer Layout’.

Susun aturnya

Susun aturnya membolehkan anda membuat susun atur khusus untuk tajuk, footer, kawasan kandungan, halaman 404, dan bahagian templat lain.

Ini adalah asas pembinaan semua tema WordPress dan dengan menggunakannya, anda akan dapat membuat tema khusus yang sesuai dengan keperluan anda.

Menggunakan Templat Beaver Themer untuk Membuat Tema WordPress Tersuai

Dalam arahan berikut, kami akan memandu anda melalui langkah-langkah yang diperlukan untuk membina elemen tema tersuai yang paling popular. Pada masa anda selesai, anda akan mengubah tema asas anda menjadi tema kanak-kanak WordPress yang disesuaikan sepenuhnya.

Membina Header Tersuai untuk Tema Anda

Mari mulakan dengan tajuk utama laman web anda. Header tersuai adalah komponen penting dari tema dan membina sesuatu boleh menjadi rumit menggunakan kaedah tradisional.

Nasib baik, Beaver Themer mempunyai ciri header yang terpasang. Anda boleh menggunakan templat yang telah dibuat sebelumnya atau menggunakan menu dan modul gambar dengan susun atur dua lajur.

Untuk menuju ke kawasan tajuk ini, pertama, kita perlu menyediakan susun atur tajuk di Beaver Themer. Lawati Pembina Beaver »Tambah Baru halaman dan berikan tajuk untuk tajuk anda.

Membuat susun atur tajuk tersuai

Selepas itu, pilih ‘Themer Layout’ sebagai jenis dan ‘Header’ sebagai pilihan tata letak. Setelah selesai klik pada butang ‘Add Themer Layout’ untuk meneruskan.

Ini akan membawa anda ke halaman tetapan susun atur. Dari sini anda perlu memilih ‘Seluruh Laman’ sebagai lokasi templat tajuk akan dipaparkan.

Tetapan susun atur

Seterusnya, klik pada butang ‘Launch Beaver Builder’ untuk membuka antara muka pembangun.

Beaver Builder akan dilancarkan dengan susun atur lajur tunggal dan tajuk dua baris sebagai titik permulaan.

Susun atur tajuk

Anda boleh menggunakan alat seret dan lepas Beaver Builder yang sama untuk mengubah latar belakang, warna, teks, dll. Anda juga dapat menambahkan modul lain, memuat templat yang telah dibuat sebelumnya, dan menambahkan baris / lajur dengan mengklik butang tambah di kanan atas sudut.

Setelah anda berpuas hati dengan reka bentuknya, klik pada butang Selesai untuk menyimpan atau menerbitkan susun atur anda.

Anda kini boleh mengunjungi laman web anda untuk melihat tajuk tema tersuai anda dalam tindakan. Seperti yang anda lihat, kami telah menerapkan susun atur tajuk untuk tema tersuai kami.

Header tersuai dalam tema tersuai anda

Selain tajuk, anda tidak akan menunjukkan kandungan lagi, dan anda mungkin akan melihat kawasan footer tema asas anda.

Mari kita ubah ini.

Membina Footer Tersuai untuk Tema Anda

Anda boleh membuat footer khusus untuk tema anda menggunakan Beaver Themer sama seperti anda membuat header tersuai.

Kepala ke Pembina Beaver »Tambah Baru halaman dan berikan tajuk untuk susun atur footer anda. Seterusnya, pilih ‘Themer Layout’ sebagai jenis dan ‘Footer’ sebagai pilihan tata letak.

Susun atur footer

Klik butang ‘Add Themer Layout’ untuk meneruskan.

Ini akan membawa anda ke halaman tetapan susun atur. Dari sini anda perlu memilih ‘Seluruh Laman’ sebagai lokasi templat akan dipaparkan.

Tetapan susun atur footer

Selepas itu klik pada butang ‘Launch Beaver Builder’ untuk membuka antara muka pembangun.

Beaver Builder akan dilancarkan dengan susun atur footer menggunakan tiga lajur. Anda boleh menggunakan susun atur ini sebagai titik permulaan dan mula mengedit.

Mengedit susun atur kaki anda

Anda boleh menambah modul, blok teks, atau apa sahaja yang anda mahukan. Anda sentiasa boleh menukar warna, fon, menambah gambar latar dan banyak lagi.

Setelah anda berpuas hati dengan reka bentuknya, klik pada butang Selesai untuk menyimpan atau menerbitkan susun atur anda.

Kawasan Kandungan Bangunan untuk Pos dan Halaman

Sekarang kita telah membuat tajuk dan footer untuk setiap halaman dan posting di laman web, sudah waktunya untuk membina postingan atau badan halaman (kawasan kandungan).

Kita akan bermula dengan cara yang sama seperti kita membina header dan footer dengan menambahkan susun atur ‘Singular’ di halaman Add New.

Membuat catatan dan susun atur halaman

Seterusnya, anda akan memilih tempat untuk memaparkan susun atur ini. Anda boleh memilih tunggal untuk menggunakannya untuk semua catatan dan halaman tunggal, atau anda boleh memilih siaran atau hanya halaman.

Tetapan susun atur tunggal

Selepas itu klik pada butang ‘Launch Beaver Builder’ untuk membuka antara muka pembangun.

Menyunting susun atur tunggal

Beaver Builder akan memuatkan contoh susun atur tunggal dengan tajuk pos / halaman di bahagian atas, diikuti dengan kandungan, kotak bio pengarang, dan kawasan komen.

Anda boleh menunjukkan dan mengklik untuk mengedit salah satu item ini atau menambahkan modul, lajur, dan baris baru mengikut keperluan.

Setelah anda berpuas hati dengan susun atur, klik pada butang Selesai untuk menyimpan dan menerbitkan perubahan anda.

Anda kini boleh melayari laman web anda untuk melihatnya beraksi.

Susun atur tema dengan kandungan

Membuat Susun atur Arkib untuk Tema Tersuai Anda

Setelah tema tersuai anda mulai terbentuk, anda boleh terus membuat susun atur untuk bahagian lain di laman web anda. Halaman arkib adalah tempat WordPress memaparkan kategori, tag, pengarang, dan arkib bulanan anda.

Mari buat susun atur untuk halaman arkib dalam tema tersuai anda.

Anda akan bermula dengan melawat Pembina Beaver »Tambah Baru halaman dan memberikan tajuk untuk susun atur arkib anda.

Membuat susun atur arkib untuk tema tersuai anda

Selepas itu, pilih ‘Themer Layout’ sebagai jenis, dan ‘Archive’ sebagai pilihan susun atur. Klik butang ‘Add Themer Layout’ untuk meneruskan.

Ini akan membawa anda ke halaman tetapan susun atur. Dari sini anda perlu memilih ‘Semua Arkib’ sebagai lokasi templat akan dipaparkan. Anda juga boleh membuat susun atur yang berasingan untuk setiap jenis arkib individu seperti tarikh, hasil carian, kategori, tag, dll.

Tetapan susun atur arkib

Selepas itu klik pada butang ‘Launch Beaver Builder’ untuk membuka antara muka pembangun.

Beaver Builder akan dilancarkan dengan susun atur arkib lajur tunggal asas. Ia akan memaparkan tajuk arkib di bahagian atas, yang diikuti oleh catatan.

Mengedit susun atur Arkib untuk tema anda

Anda boleh menunjukkan dan mengklik mana-mana item untuk mengedit sifatnya. Anda juga dapat menambahkan modul, baris, dan lajur baru mengikut keperluan.

Selepas itu, klik pada butang ‘Selesai’ untuk menyimpan dan menerbitkan perubahan anda.

Membuat Tata Letak Lain untuk Tema WordPress Tersuai Anda

Beaver Themer juga membolehkan anda membuat susun atur untuk halaman lain dalam hierarki templat, misalnya halaman 404, bahagian templat, halaman hasil carian, dan banyak lagi.

Dengan menggunakan fungsi drag and drop bawaan Beaver Builder, anda boleh dengan mudah membuat tema WordPress tersuai anda sendiri dari awal tanpa menulis kod. Ini betul-betul kaedah pengembangan tema WordPress yang paling mesra pemula.

Kami harap artikel ini dapat membantu anda mempelajari cara membuat tema WordPress tersuai tanpa belajar membuat kod. Anda mungkin juga ingin melihat panduan kami tentang cara mempercepat laman web WordPress anda untuk pengalaman SEO dan pengguna yang lebih baik.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me