Apakah Anda ingin membuat blok Gutenberg khusus untuk situs WordPress Anda?
Meskipun WordPress hadir dengan banyak blok dasar untuk membuat konten, Anda mungkin memerlukan sesuatu yang lebih khusus untuk situs web Anda.
Pada artikel ini, kami akan menunjukkan cara mudah untuk membuat blok Gutenberg khusus untuk situs WordPress Anda.
Secara default, WordPress dikirimkan dengan beberapa blok yang umum digunakan. Plugin WordPress juga dapat menambahkan blok mereka sendiri yang dapat Anda gunakan.
Dalam tutorial ini, kami akan menunjukkan cara membuat blok kustom sepenuhnya.
Dibuat oleh orang-orang di balik Genesis Theme Framework dan StudioPress yang populer , plugin ini menyediakan alat yang mudah bagi pengembang untuk membuat blok khusus dengan cepat untuk proyek mereka.
Demi tutorial ini, kita akan membuat blok ‘testimonial’.
Pertama, buka Blok Kustom »Tambahkan halaman Baru dari bilah sisi kiri panel admin Anda.
Ini akan membawa Anda ke halaman Editor Blok.
Dari sini, Anda perlu memberi nama pada blok Anda.
Di sisi kanan halaman, Anda akan menemukan properti blok.
Di sini Anda dapat memilih ikon untuk blok Anda, menambahkan kategori, dan menambahkan kata kunci.
Siput akan terisi otomatis berdasarkan nama blok Anda, jadi Anda tidak perlu mengubahnya. Namun, Anda dapat menulis hingga 3 kata kunci di bidang teks Kata Kunci sehingga blok Anda dapat dengan mudah ditemukan.
Sekarang mari tambahkan beberapa bidang ke blok kita.
Kami akan menambahkan 3 bidang ke blok testimonial khusus kami: bidang gambar untuk gambar pengulas, kotak teks untuk nama pengulas, dan bidang area teks untuk teks kesaksian.
Klik tombol [+] Tambah Bidang untuk menyisipkan bidang pertama.
Ini akan membuka beberapa opsi untuk bidang tersebut. Mari kita lihat masing-masing.
Anda juga bisa mendapatkan beberapa opsi tambahan berdasarkan jenis bidang yang Anda pilih. Misalnya, jika Anda memilih bidang teks, maka Anda akan mendapatkan opsi tambahan seperti teks placeholder dan batas karakter.
Mengikuti proses di atas, mari tambahkan 2 bidang lain untuk blok testimonial kami dengan mengklik tombol [+] Tambah Bidang .
Jika Anda ingin menyusun ulang bidang, Anda dapat melakukannya dengan menyeretnya menggunakan pegangan di sisi kiri setiap label bidang.
Untuk mengedit atau menghapus bidang tertentu, Anda perlu mengklik label bidang dan mengedit opsi di kolom kanan.
Setelah selesai, klik tombol Terbitkan , yang ada di sisi kanan halaman, untuk menyimpan blok Gutenberg khusus Anda.
Template blok menentukan dengan tepat bagaimana informasi yang dimasukkan ke dalam blok ditampilkan di situs web Anda. Anda dapat memutuskan tampilannya dengan menggunakan HTML dan CSS, atau bahkan kode PHP jika Anda perlu menjalankan fungsi atau melakukan hal lanjutan lainnya dengan data.
Ada dua cara untuk membuat template blok. Jika output blok Anda dalam HTML/CSS, maka Anda dapat menggunakan editor template bawaan.
Di sisi lain, jika output blok Anda memerlukan beberapa PHP untuk berjalan di latar belakang, maka Anda harus membuat file template blok secara manual dan mengunggahnya ke folder tema Anda.
Metode 1. Menggunakan Editor Template Bawaan
Pada layar edit blok khusus cukup beralih ke tab Editor Template dan masukkan HTML Anda di bawah tab markup.
Anda dapat menulis HTML dan menggunakan tanda kurung kurawal ganda untuk menyisipkan nilai bidang blok.
Misalnya, kami menggunakan HTML berikut untuk blok sampel yang kami buat di atas.
Setelah itu, alihkan ke tab CSS untuk menata markup keluaran blok Anda.
Berikut adalah contoh CSS yang kami gunakan untuk blok kustom kami.
Metode 2. Mengunggah Template Blok Kustom secara Manual
Metode ini disarankan jika Anda perlu menggunakan PHP untuk berinteraksi dengan bidang blok khusus Anda.
Pada dasarnya Anda harus mengunggah template editor langsung ke tema Anda.
Pertama, Anda perlu membuat folder di komputer Anda, beri nama dengan siput nama blok khusus Anda. Misalnya, blok demo kami disebut Testimonial jadi kami akan membuat folder testimonial.
Selanjutnya, Anda perlu membuat file bernama block.php menggunakan editor teks biasa. Di sinilah Anda akan meletakkan bagian HTML / PHP dari template blok Anda.
Berikut adalah contoh template yang kami gunakan untuk contoh kami.
Perhatikan bagaimana kami menggunakan block_field()fungsi untuk mengambil data dari bidang blok.
Kami telah membungkus bidang blok kami dalam HTML yang ingin kami gunakan untuk menampilkan blok. Kami juga telah menambahkan kelas CSS sehingga kami dapat menata blok dengan benar.
Jangan lupa untuk menyimpan file di dalam folder yang Anda buat tadi.
Selanjutnya, Anda perlu membuat file lain menggunakan editor teks biasa di komputer Anda dan menyimpannya sebagai block.cssdi dalam folder yang Anda buat.
Kami akan menggunakan file ini untuk menambahkan CSS yang diperlukan untuk menata tampilan blok kami. Berikut adalah contoh CSS yang kami gunakan untuk contoh ini.
Jangan lupa untuk menyimpan perubahan Anda.
Folder template blok Anda sekarang akan memiliki dua file template di dalamnya.
Setelah terhubung, navigasikan ke /wp-content/themes/your-current-theme/ folder.
Jika folder tema Anda tidak memiliki blok nama folder, lanjutkan dan buat direktori baru dan beri nama blocks.
Sekarang masukkan folder blok dan unggah folder yang Anda buat di komputer Anda ke folder blok.
Itu saja! Anda telah berhasil membuat file template manual untuk blok kustom Anda.
Sekarang, sebelum Anda dapat melihat pratinjau HTML/CSS Anda, Anda perlu menyediakan beberapa data uji yang dapat digunakan untuk menampilkan contoh keluaran.
Di dalam area admin WordPress, edit blok Anda dan alihkan ke tab Pratinjau Editor. Di sini, Anda perlu memasukkan beberapa data dummy.
Jangan lupa untuk mengklik tombol Perbarui untuk menyimpan perubahan Anda sebelum Anda dapat melihat pratinjau.
Jika semuanya terlihat baik bagi Anda, maka Anda dapat memperbarui blok Anda untuk menyimpan perubahan yang belum disimpan.
Anda sekarang dapat menggunakan blok khusus Anda di WordPress seperti Anda menggunakan blok lainnya.
Cukup edit posting atau halaman mana pun yang Anda inginkan untuk menggunakan blok ini.
Klik tombol tambahkan blok baru dan cari blok Anda dengan mengetikkan nama atau kata kuncinya.
Setelah Anda memasukkan blok ke area konten, Anda akan melihat bidang blok yang Anda buat untuk blok khusus ini.
Anda dapat mengisi kolom blok sesuai kebutuhan.
Saat Anda berpindah dari blok ke blok lain, editor akan secara otomatis menampilkan pratinjau langsung dari blok Anda.
Anda sekarang dapat menyimpan posting dan halaman Anda dan mempratinjaunya untuk melihat blok kustom Anda beraksi di situs web Anda.
Berikut tampilan blok testimonial di situs pengujian kami.
Kami harap artikel ini membantu Anda mempelajari cara mudah membuat blok Gutenberg khusus untuk situs web WordPress Anda.
Hubungi Kami
