Apakah Anda ingin membuat WordPress Plugin blok Gutenberg sederhana?
Bukankah kita semua menyukai WordPress? Platform ini telah melihat kesuksesan besar sejak awal, dengan pengembang terus menambahkan fitur baru. Salah satu fitur menonjol akhir-akhir ini adalah Editor Blok WordPress, nama kode Gutenberg.
Gutenberg menawarkan kepada pengguna WordPress cara baru yang menarik untuk mempublikasikan konten dan menyesuaikan situs web mereka. Ini sangat mudah digunakan, yang merupakan berita bagus untuk pemula dan pengembang. Jika Anda menggunakan WordPress versi terbaru, Anda sudah akrab dengan editor blok dan konsep blok.
Secara default, editor blok WordPress dilengkapi dengan beberapa blok yang memungkinkan Anda memasukkan teks, gambar, kutipan, audio, video, penyematan, dll. Selain itu, ada banyak pengaya Gutenberg yang memungkinkan Anda memperluas editor tanpa merusak keringat.
Namun, Anda mungkin memiliki kebutuhan khusus yang meminta Anda untuk membuat blok kustom Anda sendiri. Pada artikel ini, kami akan menunjukkan kepada Anda dalam beberapa paragraf, cara membuat blok Gutenberg khusus untuk memenuhi kebutuhan spesifik Anda.
Tanpa basa-basi lagi, mari kita mulai karena banyak yang harus dipelajari.
Tetapi sebelumnya, jika Anda belum pernah menginstal WordPress temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda
Lalu kembali ke mengapa kita ada di sini.
Apa itu blok?
Blok memperlakukan paragraf, judul, media, dan penyematan sebagai komponen yang, ketika dirangkai bersama, membentuk konten yang disimpan di database WordPress, menggantikan konsep teks tradisional dengan media dan menyematkan kode pendek bawaan.
Di masa lalu, pengguna WordPress mengandalkan teks dan kode pendek untuk menambahkan konten. Gutenberg menggunakan blok. Editor baru memungkinkan Anda menggunakan unit blok untuk membuat tata letak yang kaya dan fleksibel yang mudah dikelola. Saat ini, Anda dapat menggunakan editor blok untuk posting dan halaman, tetapi ada rencana aktif untuk diambil mendukung pengeditan situs penuh di masa mendatang.
Bekerja dengan blok membuat pembuatan konten di WordPress cukup menyegarkan. Selain itu, banyak plugin yang ada mendukung editor baru dan dilengkapi dengan blok siap pakai yang memudahkan untuk menambahkan konten dari plugin tersebut. Editor memungkinkan Anda menyeret dan melepaskan blok ke halaman sehingga Anda dapat menekan tombol terbitkan lebih cepat.
Sama seperti pembuat halaman yang terintegrasi langsung ke WordPress.
Jika Anda sudah familiar dengan pembuat halaman seperti Elementor, Anda mungkin akrab dengan konsep pembuatan laman seret dan lepas. Gutenberg adalah upaya untuk sepenuhnya mengintegrasikan pembuatan situs web drag-and-drop ke dalam inti WordPress.
Jadi mari kita ke bagian terbaik dari artikel hari ini. Mari belajar cara membuat blok sederhana. Anda dapat melakukan ini secara manual atau menggunakan plugin seperti Blok Kustom Genesis (sebelumnya BlockLab), Blok Malas ou ACF. Membuat blok khusus sedikit teknis, jadi untuk tujuan artikel hari ini, kita akan menggunakan plugin.
Cara membuat custom block (menggunakan genesis Custom Blocks)
Lebih mudah untuk menggunakan rute plugin karena membuat blok Gutenberg khusus dari awal membutuhkan pemahaman yang baik tentang HTML, CSS, PHP, dan yang paling penting, javaScript. Anda juga perlu memahami React.
Untuk bagian selanjutnya, kita akan menggunakan Genesis Custom Blocks. Versi gratisnya tersedia di repositori resmi WordPress, yang berarti kita dapat menginstalnya di dasbor admin WordPress.
Instal Genesis Custom Blocks
Masuk ke dasbor admin WordPress Anda dan navigasikan ke Ekstensi> Tambahkan, seperti yang ditunjukkan di bawah ini.
Lalu masuk" Blok Kustom Genesis di kotak pencarian kata kunci dan klik pada tombol install sekarang
Setelah itu, mengaktifkan plugin untuk membantu Anda memulai
Selanjutnya, mari buat blok kustom baru. Untuk tujuan ilustrasi, mari buat ajakan bertindak (CTA) khusus yang akan kita tambahkan di akhir setiap artikel yang kita terbitkan. Bagian terbaiknya adalah Anda dapat menggunakan kembali balok untuk menyelamatkan Anda dari membuat balok yang sama berulang-ulang.
Di menu admin WordPress Anda, navigasikan ke Blok Kustom > Tambah Baru, seperti yang kami soroti di bawah ini.
Ini akan membawa Anda ke halaman berikutnya di mana Anda akan menemukan semua opsi untuk membuat blok khusus (dalam kasus kami, CTA):
Berikut adalah beberapa kata untuk menjelaskan apa yang Anda lihat pada tangkapan layar di atas. Mulai dari atas, Anda memilikinya.
Area pengeditan utama:
- Pembangun – Anda mungkin akan menghabiskan banyak waktu di sini merancang blok khusus Anda. itu Constructeur memungkinkan Anda menambahkan judul, bidang, siput, kata kunci, kategori, dan melihat pratinjau blok khusus Anda. Anda akan belajar cara menambahkan bidang.
- Editor Template – Setelah mendesain blok khusus Anda (yaitu menambahkan berbagai bidang), Anda perlu membuat templat blok (baca, tambahkan beberapa kode) di editor model. Kita akan belajar lebih banyak ketika kita mendesain CTA.
- Pratinjau Editor – Ini memungkinkan Anda untuk melihat pratinjau blok khusus di editor blok WordPress.
- Pratinjau Ujung Depan – Di sini Anda dapat melihat pratinjau bagaimana blok khusus akan terlihat di situs web Anda.
- EditorField – Akan menampilkan bidang di area edit utama dari sebuah posting atau halaman (Anda tahu, sama seperti Anda melihat posting biasa Anda di editor WordPress)
- Lapangan Inspektur – Menampilkan bidang di bilah sisi kanan di bawah Pemeriksa Blok.
Opsi bilah sisi
- Siput – Itu diisi secara otomatis berdasarkan judul yang Anda berikan ke blok khusus Anda. Ini penting saat membuat model blok.
- icon – Opsi ini memungkinkan Anda untuk menambahkan ikon ke blok khusus Anda.
- Kategori – Ini memungkinkan Anda untuk menetapkan kategori ke blok khusus Anda. Anda dapat mengkategorikan blok khusus Anda menggunakan salah satu kategori bawaan, atau Anda dapat membuat kategori yang sama sekali baru.
- Kata kunci – Tambahkan hingga tiga kata kunci terkait ke blok khusus Anda sehingga orang dapat dengan mudah menemukannya di pemilih blok.
- Buka bidang blok dalam modal alih-alih merender di tempat – Aktifkan jika Anda ingin membuka bidang dalam modal. Ini berguna jika Anda memiliki blok khusus dengan banyak bidang.
- Pasca Jenis – Centang kotak untuk memungkinkan blok khusus Anda ditampilkan pada setiap jenis posting. Misalnya, jika Anda menghapus centang pada Postingan, blokir tersebut tidak akan muncul di postingan mana pun.
Buat blok khusus
Sekarang setelah Anda memiliki pemahaman yang lebih baik tentang antarmuka pengguna dan apa yang dilakukan setiap bagian, mari kita mulai bekerja.
di Pembangun- Pembangun –, berikan blok khusus Anda judul yang sesuai. Kami akan memilih CTA untuk yang satu ini seperti yang ditunjukkan di bawah ini.
Sebelum menambahkan bidang baru, mari tambahkan ikon, kata kunci, dan pilih kategori untuk blok khusus seperti yang ditunjukkan di bawah ini.
Untuk itu, mari tambahkan beberapa bidang ke blok khusus kita. Untuk contoh blok CTA kami, kami hanya akan menambahkan tiga bidang dalam urutan berikut: gambar, beberapa teks, dan bidang file yang memungkinkan orang mengunduh ebook.
Baca juga: Plugin 5 WooCommerce untuk mengedit produk Anda secara massal
Menambahkan Bidang Blok
Di bagian Bidang editorklik ikon Plus (+) untuk menambahkan bidang pertama seperti yang ditunjukkan di bawah ini.
Selanjutnya, mari tambahkan bidang gambar. Di bilah sisi, atur Jenis bidang aktif Gambar dan atur opsi lainnya. Juga, pertimbangkan slug karena kita akan menggunakannya saat membuat model blok.
Setelah itu, tambahkan bidang teks dan file dengan cara yang sama.
Beralih ke Editor Template > Markup.
Di sini kami akan merancang bagaimana blok khusus kami akan terlihat di situs web Anda. Editor model menerima HTML, CSS, dan siput bidang (yang harus Anda tempatkan di antara 2 tanda kurung siku). Jika Anda perlu menggunakan bahasa PHP, Anda dapat membuat template menggunakan metode pemodelan PHP
Jangan khawatir, itu mudah.
di editor model, dibawah tab markup, tambahkan kode berikut:
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>Saat Anda menulis kode Anda, Anda akan melihat bahwa editor model Siput bidang yang dilengkapi secara otomatis (mis. {{image-field}} ) untuk Anda.
Lalu pergi ke bagian CSS untuk menambahkan gaya sederhana dengan kode berikut:
.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}
.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;
}
Anda dapat menyesuaikan gaya ini sesuka Anda,
Klik menerbitkan :
Untuk melihat blok kustom baru Anda beraksi, kembali ke dasbor admin WordPress Anda dan buat posting seperti biasa, klik tombol Tanda tambah (+) untuk menambahkan blok baru dan memilih blok kustom baru Anda, seperti yang kami soroti di bawah ini.
Selanjutnya, isi blok kustom Anda seperti yang diinginkan dan posting pesan Anda:
Sekarang, jika kita memeriksa blok CTA kustom baru kita di front-end, inilah yang kita lihat.
CTA khusus kami ada di sana! Jangan khawatir tentang kemampuan desain kami – tentu saja, dalam skenario kehidupan nyata, Anda akan menghabiskan lebih banyak waktu untuk menyesuaikan blok Anda. Tapi kami harap Anda belajar sesuatu di sini.
Sumber daya lain yang direkomendasikan
Kami juga mengundang Anda untuk berkonsultasi dengan ressources di bawah ini untuk mengambil lebih banyak kepemilikan dan kendali atas situs web dan blog Anda.
- 10 Plugin WordPress Afiliasi untuk Membuat Program
- Cara Menambahkan Banyak Kolom di WordPress
- Cara Menambahkan Banyak Kolom di WordPress
- Menggunakan latar belakang yang berbeda WordPress
- Elementor: Cara membuat animasi di hover
Kesimpulan
Membangun blok khusus bukanlah tugas yang mudah. Tetapi dengan plugin WordPress seperti Genesis Custom Blocks dan Lazy Blocks antara lain, apakah Anda seorang pemula atau tidak Anda akan berhasil membuatnya. Dari yang paling dasar hingga yang kompleks tergantung kebutuhan Anda.
Itu saja untuk artikel ini yang menunjukkan kepada Anda cara menambahkan font khusus ke situs web WordPress. Kami mengundang Anda untuk mencoba. Jika Anda memiliki masalah atau saran, beri tahu kami di dalam komentar.
Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
