Cara Membuat Tema Blok WordPress (Dalam 3 Langkah)
Diterbitkan: 2022-10-13Sebagai pemula WordPress, Anda mungkin menghindari membangun tema khusus di masa lalu, karena berpikir itu memerlukan proses pengkodean yang rumit. Sekarang Anda dapat menyesuaikan seluruh situs web Anda dengan Pengeditan Situs Penuh (FSE), tetapi masih ada masalah dalam mengekspor desain khusus Anda.
Untungnya, Anda dapat dengan mudah membuat tema blok dengan plugin Create Block Theme. Setelah menyesuaikan tema Anda dengan Editor Situs, Anda dapat mengekspornya sebagai tema blok khusus. Kemudian, Anda dapat menginstalnya di situs web lain daripada harus membangun kembali desain Anda dari awal.
Dalam posting ini, kami akan menjelaskan apa itu tema blok dan bagaimana Anda dapat menggunakan alat Buat Tema Blok untuk membuatnya. Kemudian, kami akan menunjukkan cara melakukannya dalam tiga langkah sederhana. Mari kita mulai!
Apa itu Tema Blok WordPress?
Ketika Gutenberg diluncurkan sebagai bagian dari WordPress 5.0, itu benar-benar mengubah pengalaman pembuatan konten. Itu karena Editor Blok barunya memungkinkan Anda untuk menyesuaikan posting dan halaman dengan menambahkan blok konten yang berbeda:

Pada tahun 2021, WordPress memperluas fitur ini lebih jauh. Pembaruan 5.8 meluncurkan Pengeditan Situs Penuh, memungkinkan Anda membangun seluruh situs web menggunakan sistem berbasis blok. Dengan Editor Situs, Anda dapat menambahkan blok tema ke situs web Anda, membuat templat blok, dan banyak lagi:

Namun, untuk mulai menggunakan Pengeditan Situs Lengkap, Anda harus memasang tema blok. Sederhananya, ini adalah tema yang dibangun dengan blok Gutenberg.
Berikut adalah beberapa fungsi yang akan Anda peroleh saat memasang tema blok WordPress:
- Edit bagian mana pun dari situs web Anda tanpa kode
- Sesuaikan warna dan tipografi dengan Global Styles
- Tingkatkan kecepatan situs dengan hanya memuat gaya untuk blok yang dirender di halaman
- Tambahkan fitur aksesibilitas seperti tombol Lewati ke konten dan navigasi keyboard
Menggunakan tema blok, Anda dapat memiliki kontrol penuh atas desain situs Anda. Sebelumnya, akan sulit untuk mengedit file tema tanpa keterampilan coding. Namun, sekarang siapa pun dapat menyesuaikan situs web hanya dengan membuat dan mengedit tata letak blok.
Pengantar Plugin Buat Blok Tema
Dalam banyak kasus, pemilik dan pengembang situs web membuat tema anak khusus untuk membantu mereka mempersonalisasi situs web. Tema anak hanyalah sebuah tema yang mewarisi tampilan dan fungsionalitas dari tema induknya. Dengan menggunakan tema anak, Anda dapat mengedit tema blok dengan aman tanpa kehilangan perubahan dengan pembaruan perangkat lunak baru.
Anda dapat membangun tema anak dengan membuat folder tema baru dan lembar gaya dengan pengkodean tema induk. Kedengarannya cukup sederhana, tetapi sering kali melibatkan penggunaan teknik rumit yang bisa jadi sulit bagi pemula.
Untungnya, para pengembang di WordPress membuat plugin Create Block Theme untuk mengatasi masalah ini. Berkat alat baru ini, Anda dapat dengan mudah mengekspor tema blok yang diedit:

Itu berarti, Anda dapat membuat tema blok khusus dan kemudian menggunakannya di situs web lain. Setelah membuat perubahan dengan Editor Situs, Anda dapat mengunduh desain baru Anda sebagai tema anak, kloning, atau variasi gaya dari tema induk. Ini dapat menyederhanakan desain situs web dan membuatnya lebih mudah diakses oleh pengguna dari semua tingkatan.
Cara Membuat Tema Blok WordPress (Dalam 3 Langkah)
Sekarang setelah Anda mengetahui tema blok dan kelebihannya, mari kita bahas cara membuatnya di WordPress. Dengan cara ini, Anda tidak perlu mengedit file tema setiap kali Anda perlu membuat tema blok baru.
Langkah 1: Instal Tema Blok WordPress
Untuk membuat tema blok pertama, Anda harus memulai dengan tema blok induk. Dengan menggunakan Direktori Tema WordPress, Anda dapat memilih lebih dari seratus opsi berbeda. Di sini, cukup klik pada tab Blokir Tema untuk menambahkan filter Pengeditan Situs Lengkap :

Setelah Anda menemukan tema blok yang Anda sukai, Anda dapat mengunduhnya. Lalu, buka Appearance > Themes di dashboard WordPress Anda untuk menginstal dan mengaktifkan tema baru. Untuk tutorial ini, kita akan menggunakan Twenty Twenty-Two:

Sekarang Anda harus memilih Plugins > Add New dan cari 'Create Block Theme'. Selanjutnya, instal dan aktifkan plugin:

Sebelum mulai mengedit tema, Anda juga harus memiliki plugin Gutenberg versi terbaru. Jika Anda belum melakukannya, pastikan alat ini juga diinstal, diaktifkan, dan diperbarui.

Langkah 2: Sesuaikan Tema Anda Dengan Editor Situs
Selanjutnya, Anda dapat membuka Editor Situs dan memodifikasi tema blok Anda. Untuk melakukan ini, navigasikan ke Appearance > Editor (beta) :

Ini akan membuka Editor Situs Lengkap. Di sini, Anda dapat mengklik elemen tertentu seperti header atau footer untuk mengubah pengaturan blok:

Dengan mengklik ikon lingkaran duotone di sudut kanan atas, Anda dapat memperbarui tipografi, warna, dan tata letak. Anda bahkan dapat memilih salah satu kombinasi gaya tema default:

Jika Anda perlu menambahkan blok baru, Anda dapat memilih tombol +. Dari daftar opsi ini, Anda cukup menarik dan melepas elemen ke halaman:

Untuk melihat template tema Anda, klik logo WordPress di sudut kiri atas. Di sini, Anda dapat memilih Template atau Bagian Template :

Bergantung pada tujuan desain Anda, Anda mungkin ingin menambahkan template baru. Atau, Anda dapat mengedit opsi default yang tersedia:

Setelah memilih template, Anda akan membuka editor template. Anda dapat mengedit halaman ini dengan menambahkan blok baru, pola blok, atau bagian template:

Pada akhirnya, ada banyak cara untuk mendesain tema blok Anda. Setelah Anda melakukan semua pengeditan yang diperlukan, simpan perubahan Anda.
Langkah 3: Ekspor Tema Blok Anda
Untuk menggunakan kembali tema blok ini di situs web lain, navigasikan ke Appearance > Create Block Theme . Ini akan memungkinkan Anda untuk mengekspor tema blok baru Anda dalam beberapa cara berbeda:

Jika Anda ingin mengekspor tema dengan perubahan yang baru saja Anda buat, pilih Ekspor . Namun, berikut adalah opsi ekspor alternatif yang tersedia dengan plugin Buat Blokir Tema:
- Buat tema anak : Mengunduh tema anak baru menggunakan tema yang diaktifkan sebagai induk.
- Mengkloning tema saat ini : Mengkloning tema yang diaktifkan, termasuk semua aset dan perubahan penggunanya.
- Timpa file tema : Menyimpan hasil edit saat tema berubah, lalu menghapus perubahan pengguna.
- Hasilkan tema kosong : Membuat tema boilerplate dalam direktori tema situs Anda.
- Buat variasi gaya : Menyimpan perubahan sebagai variasi Gaya Global dari tema yang diaktifkan.
Jika Anda memilih Ekspor atau Timpa , Anda cukup mengunduh file tema Anda. Untuk opsi lainnya, Anda harus memberikan nama tema, deskripsi, URI tema, penulis, dan URI penulis:

Satu-satunya pengecualian adalah variasi gaya. Ini hanya membutuhkan Nama Variasi :

Setelah Anda memilih salah satu opsi ini, klik Buat tema . Ini akan mengunduh tema blok khusus Anda sebagai file .zip, yang berisi semua file tema yang diedit. Anda kemudian dapat menginstal tema ini di situs lain untuk mempercepat proses pengembangan.
Kesimpulan
Sebelum Pengeditan Situs Penuh dan memblokir tema, membuat desain situs web unik Anda sendiri adalah proses yang rumit. Jika Anda seorang pemula WordPress, Anda mungkin tidak memiliki keterampilan pengkodean yang diperlukan untuk pekerjaan itu. Namun, sekarang, Editor Situs dan plugin Buat Blok Tema dapat bekerja sama untuk menyederhanakan tugas yang sebelumnya rumit ini secara radikal.
Untuk rekap, berikut cara membuat tema blok WordPress:
- Instal tema blok WordPress.
- Sesuaikan tema Anda dengan Editor Situs.
- Ekspor tema blok Anda dengan Buat Tema Blok.
Apakah Anda memiliki pertanyaan tentang membuat tema blok pertama Anda di WordPress? Beri tahu kami di bagian komentar di bawah!