buat blok khusus

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 tampilan yang intuitif editor blok 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 blok plugin yang bekerja 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 Blok Kustom Genesis pengaya. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara menginstal plugin WordPress. Dibuat oleh orang-orang di balik Kerangka Tema Genesis yang populer dan StudioPressplugin 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, pergilah ke Blok Kustom » Tambah Baru halaman dari sidebar 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 emailURL, 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 pada Tambahkan Bidang tombol 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 Lapangan: Anda dapat memutuskan apakah Anda ingin menambahkan bidang ke editor atau inspektur.Teks Bantuan: Anda dapat menambahkan beberapa teks untuk mendeskripsikan bidang. 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 Tambahkan Bidang tombol. 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 pada Menerbitkan tombol, 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 blok templat. 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. {{nama-pengulas}} {{teks-testimonial}} 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 { ukuran font: 14px; font-berat:tebal; transformasi teks:huruf besar; } .reviewer-image { float: kiri; bantalan: 0px; perbatasan: 5px solid #eee; lebar maksimum: 100 piksel; tinggi maksimum: 100 piksel; batas-radius: 50%; margin: 10 piksel; } .testimonial-text { ukuran font:14px; } .testimonial-item { margin:10px; border-bottom:1px solid #eee; bantalan: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.

buat blok khusus

Cara Membuat Blok WordPress Kustom (Cara Mudah)