Cara Membuat Blok WordPress Kustom (Cara Mudah)

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 kepada Anda cara mudah untuk membuat blok Gutenberg khusus untuk situs WordPress Anda.

Mengapa Membuat Blok WordPress Kustom?

WordPress hadir dengan editor blok intuitif yang memungkinkan Anda membuat postingan dan halaman dengan mudah dengan menambahkan elemen konten dan tata letak sebagai blok.

Secara default, WordPress dikirimkan dengan beberapa blok yang umum digunakan. Plugin WordPress juga dapat menambahkan blok mereka sendiri yang dapat Anda gunakan.

Namun, terkadang Anda mungkin ingin membuat blok kustom Anda sendiri untuk melakukan sesuatu yang spesifik, dan tidak dapat menemukan plugin blok yang sesuai untuk Anda.

Dalam tutorial ini, kami akan menunjukkan cara membuat blok kustom sepenuhnya.

Catatan : Artikel ini untuk pengguna menengah. Anda harus terbiasa dengan HTML dan CSS untuk membuat blok Gutenberg khusus.

Langkah 1: Mulailah dengan Blok Kustom Pertama Anda

Pertama, Anda perlu menginstal dan mengaktifkan plugin Genesis Custom Blocks. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara menginstal plugin WordPress.

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.

Anda dapat menambahkan berbagai jenis bidang seperti teks, angka, alamat email, URL, warna, gambar, kotak centang, tombol radio, dan banyak lagi.

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.

• Label Bidang : Anda dapat menggunakan nama pilihan Anda untuk label bidang. Beri nama bidang pertama kami 'Gambar Reviewer'.
• Nama Bidang : Nama bidang akan dibuat secara otomatis berdasarkan label bidang. Kami akan menggunakan nama bidang ini di langkah berikutnya, jadi pastikan itu unik untuk setiap bidang.
• Jenis Bidang : Di sini Anda dapat memilih jenis bidang. Kami ingin bidang pertama kami menjadi gambar, jadi kami akan memilih Gambar dari menu tarik-turun.
• Lokasi Bidang : Anda dapat memutuskan apakah Anda ingin menambahkan bidang ke editor atau inspektur.
• Teks Bantuan : Anda dapat menambahkan beberapa teks untuk menjelaskan bidang tersebut. Ini tidak diperlukan jika Anda membuat blok ini untuk penggunaan pribadi Anda, tetapi mungkin berguna untuk blog multi-penulis.

Anda juga bisa mendapatkan beberapa opsi tambahan berdasarkan jenis bidang yang Anda pilih. Misalnya, jika Anda memilih bidang teks, 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.

Langkah 2: Buat Template Blok Kustom

Meskipun Anda telah membuat blok WordPress khusus pada langkah terakhir, itu tidak akan berfungsi sampai Anda membuat template blok.

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 keluaran blok Anda dalam HTML/CSS, maka Anda dapat menggunakan editor templat 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.

<div class="testimonial-item">
<img src="reviewer-image" class="reviewer-image">
<h4 class="reviewer-name">reviewer-name</h4>
<div class="testimonial-text">testimonial-text</div>
</div>

Setelah itu, alihkan ke tab CSS untuk menata markup keluaran blok Anda.

Berikut adalah contoh CSS yang kami gunakan untuk blok kustom kami.

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

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.

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

Perhatikan bagaimana kita menggunakan fungsi block_field() 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.css di 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.

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

Jangan lupa untuk menyimpan perubahan Anda.

Folder template blok Anda sekarang akan memiliki dua file template di dalamnya.

Setelah itu, Anda perlu mengunggah folder blok Anda ke situs web Anda menggunakan klien FTP atau aplikasi File Manager di dalam panel kontrol akun hosting WordPress Anda.

Setelah terhubung, navigasikan ke folder /wp-content/themes/your-current-theme/ .

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 ke folder blok.

Itu saja! Anda telah berhasil membuat file template manual untuk blok kustom Anda.

Langkah 3. Pratinjau 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.

Anda sekarang dapat beralih ke tab Pratinjau Front-end untuk melihat bagaimana blok Anda akan terlihat di front-end (area publik situs WordPress Anda).

Jika semuanya terlihat baik bagi Anda, maka Anda dapat memperbarui blok Anda untuk menyimpan perubahan yang belum disimpan.

Langkah 4. Menggunakan Blok Kustom Anda di WordPress

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.

Beginilah 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.

Anda mungkin juga ingin melihat panduan kami tentang cara membuat tema WordPress kustom dari awal, atau lihat pilihan ahli kami tentang plugin WordPress yang harus dimiliki untuk situs web Anda.

Jika Anda menyukai artikel ini, silakan berlangganan Saluran YouTube kami untuk tutorial video WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.