Cara Membuat & Mengelola Pola Blok di WordPress

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.

Tata letak khusus untuk halaman Produk kami.

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.

Blok yang termasuk dalam pola telah dipilih.

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.

Fitur "Buat pola" dapat ditemukan dalam menu opsi blok.

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.

Anda dapat menetapkan nama dan kategori pada pola blok Anda.  Anda juga dapat memilih apakah akan 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.

Kami telah menambahkan pola blok kami ke halaman Produk yang ada.

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.

Blok telah diedit untuk mencerminkan produk baru kami.

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, pilih Manage 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.

Layar Pola memungkinkan Anda mengimpor dan mengekspor pola blok.

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.

Perubahan pada pola kami yang tidak disinkronkan hanya akan ditampilkan saat menambahkan contoh baru.

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!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top