Pola blok WordPress adalah salah satu fitur desainnya yang paling serbaguna. Mereka menyediakan tata letak siap pakai untuk segala macam penggunaan. Dan sepertinya kemungkinan mereka tidak ada habisnya.
Ingin menambahkan tabel harga? Memeriksa. Bagaimana dengan galeri foto khusus? Memeriksa. Bagaimana jika Anda menginginkan halaman Tentang Kami secara keseluruhan? Memeriksa. Kami hanya menggores permukaannya saja di sini.
Pola blok juga terus mengalami perbaikan. Misalnya, mereka dulunya hanya disertakan dalam tema dan plugin. Kemudian muncullah Direktori Pola Blok, yang menerbitkan pola untuk digunakan siapa saja.
Baiklah, pegang topimu. Segalanya menjadi lebih baik. WordPress kini memiliki cara untuk membuat, mengelola, dan berbagi pola blok – semuanya dari dalam Editor Blok.
Ingin melihat cara kerjanya? Lihat panduan singkat kami untuk membuat dan mengelola pola blok di WordPress.
Mengapa Membuat Pola Blok?
Sebelum kita menggali tutorialnya, mari kita tentukan untuk siapa fitur ini. Membuat pola blok masuk akal bagi mereka yang ingin menggunakan kelompok blok yang sama beberapa kali.
Antarmuka ajakan bertindak (CTA) adalah salah satu contohnya. Katakanlah Anda ingin menempatkannya di berbagai area situs web Anda. Pola blok akan membantu Anda mempertahankan tampilan yang konsisten di seluruh situs Anda. Oleh karena itu, tidak perlu menemukan kembali roda untuk setiap penggunaan.
- Anda juga dapat memilih apakah akan “menyinkronkan” pola blok. Anda akan mengedit a pola yang disinkronkan dari lokasi tunggal. Perubahan tersebut akan berlaku di mana pun pola tersebut digunakan. Jadi, ubah warna latar belakang CTA satu kali dan lihat semuanya terpantul.
- Pola yang tidak disinkronkan menyediakan kerangka tata letak dasar. Anda akan mengedit setiap contoh pola – memberinya konten unik. Dalam hal ini, CTA kita mungkin memiliki tata letak yang sama – tetapi dengan teks, warna, dan gambar yang berbeda. Pola yang tidak disinkronkan berfungsi sebagai titik awal.
Anda mungkin juga ingin membuat pola blok tata letak satu halaman penuh. Gunakan itu sebagai dasar untuk halaman berikutnya. Atau gunakan sebagai cadangan. Anda tahu, kalau-kalau ada yang merusak halaman Anda yang dibuat dengan cermat.
Garis bawah? Buat pola blok untuk apa pun yang mungkin ingin Anda gunakan lagi.
Contoh: Pola Blok Profil Produk
Mari beralih ke contoh dasar. Situs web fiksi kami akan memiliki halaman “Produk”. Kami akan menggunakannya untuk memamerkan setiap produk yang dijual klien kami.
Setiap produk dalam daftar akan menggunakan tata letak yang sama. Jadi mengapa tidak membuat pola blok yang tidak disinkronkan? Ini akan memberikan cara yang lebih efisien untuk membangun halaman kita.
Selain itu, menambahkan produk di masa mendatang akan lebih mudah – meskipun kami memutuskan untuk memberikan halaman terpisah pada setiap produk.
Langkah 1: Buat Tata Letak
Langkah pertama adalah membuat layout di Block Editor WordPress. Di sini, kami telah membuat contoh tampilan setiap produk. Dan kami telah melakukannya langsung di halaman Produk.
Setiap produk akan menampilkan judul, deskripsi, dan gambar. Dari sana, kami akan menambahkan tombol yang mengarah ke sumber daya terkait.
Catatan: Kami menggunakan versi gratis HasilkanBlok untuk membuat beberapa elemen tata letak. Namun, Anda dapat membuat pola menggunakan balok apa pun yang Anda suka.
Langkah 2: Pilih Blok yang Kita Inginkan dalam Pola Kita
Selanjutnya, kita perlu memilih blok untuk dimasukkan ke dalam pola kita. Kami akan menggunakan Tampilan Daftar fitur untuk membuat pilihan kita.
Langkah 3: Buat Pola
Sekarang saatnya membuat pola blok kita. Kami akan mengklik block options
tombol untuk membuka menu. Lalu, kita akan mengkliknya Create pattern
pintu masuk.
Kotak dialog meminta kita memberi nama pada pola kita. Perhatikan juga tombol untuk menyinkronkan pola. Anda juga dapat menetapkan pola blok Anda ke suatu kategori.
Kami akan menyebut pola kami “Profil Produk” dan memilih bukan untuk menyinkronkannya.
Hanya itu saja! Kami sekarang memiliki pola blok yang tidak disinkronkan untuk menambahkan produk ke halaman kami.
Langkah 4: Lihat di dalamnya Action
Kami telah menyiapkan produk pertama kami. Sekarang, mari gunakan pola blok baru kita untuk menambahkan pola blok lainnya.
Kami akan menempatkan kursor kami di bawah produk pertama. Lalu, kita akan menambahkan pola kita. Kita dapat mencarinya berdasarkan nama atau memilihnya dari My patterns
kategori.
Itu tadi cepat! Sekarang, kami akan melakukan pengeditan yang diperlukan. Kami mengubah judul, deskripsi, dan gambar agar sesuai dengan produk baru kami. Kami juga mengubah warna tombol.
Cara Mengedit Pola Blok Anda
Jadi, bagaimana jika Anda ingin mengubah pola blok Anda? WordPress menyediakan area untuk melakukan hal tersebut – namun agak tersembunyi.
Berikut cara menemukannya:
- Melalui Editor Blok WordPress: Klik
Options
menu di kanan atas layar. Lalu, pilihManage patterns
. - Melalui Editor Situs WordPress: Perhatikan bahwa ini akan berlaku bagi mereka yang menggunakan tema blok. Akses Editor Situs dengan membuka
Appearance > Editor
di dasbor WordPress. - Klik
Manage all of my patterns
di bagian bawah bilah sisi menu.
Layar Pola
Layar Pola menampung pola blok khusus Anda. Tampilannya mirip dengan halaman lain dan daftar postingan. Namun, ada beberapa hal yang ingin kami perhatikan.
- Pertama, dimungkinkan untuk mengekspor pola blok Anda. Arahkan kursor ke pola Anda dan klik
Export as JSON
tautan. - Seperti yang diharapkan, Anda juga dapat mengimpor pola ini. Menggunakan
Import from JSON
tombol di bagian atas layar. Anda akan dapat mengunggah file JSON yang berisi pola Anda.
Fungsi ini menyediakan jalur untuk membagikan pola Anda ke beberapa situs web.
Membuat Perubahan
Katakanlah kita ingin mengedit pola blok Profil Produk kita. Kita dapat melakukannya dalam antarmuka Block Editor yang sama.
Di sini, kami telah mengubah judul teks dan membuat gambar lebih kecil.
Sebagai pengingat, ini adalah pola yang tidak disinkronkan. Oleh karena itu, perubahan kami hanya akan terlihat saat menambahkan instance baru.
Pola yang disinkronkan akan segera menampilkan perubahan di seluruh situs web. Namun, kami tidak dapat mengedit konten satu per satu. Isinya akan sama di mana pun polanya digunakan.
Terlepas dari kenyataan ini, kami tidak terjebak. Kita dapat membuat pola blok baru jika kita melampaui pola blok saat ini. Namun, ada baiknya mengetahui perbedaan antara pola yang disinkronkan dan tidak disinkronkan.
Catatan: Fitur baru di WordPress 6.5, penggantian pola yang disinkronkan, akan memungkinkan perubahan untuk setiap contoh. Lihat tutorial ini untuk detailnya.
Gunakan Pola Blok Kustom untuk Meningkatkan Konsistensi & Efisiensi
Pola blok terus menjadi lebih baik. Dan membuat serta mengelolanya di WordPress menambah lapisan kenyamanan lainnya.
Memiliki arsip pola per situs akan sangat berguna. Ini bisa sangat menghemat waktu. Mereka dapat mempercepat proses pembangunan. Selain itu, mereka akan mempermudah pembaruan konten.
Jika Anda ingin membagikan karya Anda, hal itu mudah dilakukan melalui fitur ekspor dan impor. Anda dapat memasang pola di situs tambahan atau mengirimkannya ke Direktori Pola.
Luangkan waktu untuk bereksperimen dengan membuat pola blok khusus. Anda mungkin terkejut dengan apa yang bisa Anda capai!