Editor Blok WordPress dapat diperluas tanpa batas. Misalnya, Anda dapat membangun blok khusus yang sesuai dengan kebutuhan Anda atau membuat pola blok untuk pembangunan halaman yang lebih cepat. Tapi itu hanya bagian dari apa yang mungkin.
Anda juga dapat membuat variasi gaya khusus Blok WordPressmenambah apa yang termasuk dalam instalasi default. Fitur ini membuat Anda mengendalikan desain blok dan membantu membangun tampilan yang konsisten. Ini juga berarti Anda tidak harus puas saat menggunakan blok inti.
Selain itu, gaya khusus dapat digunakan sebanyak atau sesedikit yang Anda suka. Anda bahkan dapat menjadikannya default ketika blok ditambahkan ke halaman. Dengan demikian, gaya blok khusus sesuai untuk berbagai kasus penggunaan. Mereka berfungsi sebagai sentuhan akhir untuk proyek situs web Anda.
Hari ini, kami akan menunjukkan kepada Anda cara menambahkan gaya khusus ke blok WordPress. Panduan ini akan membawa Anda dari konsep hingga selesai. Setelah selesai, kami akan memiliki contoh dunia nyata untuk digunakan sebagai dasar untuk ide-ide Anda. Mari kita mulai!
Apa yang Anda perlukan untuk membuat variasi gaya blok khusus
Pertama, kita akan mulai dengan bahan -bahan dasar untuk membuat gaya blok khusus. Anda akan membutuhkan:
- Situs web WordPress (lebih disukai pementasan atau lingkungan lokal).
- Tema dengan a
functions.phpfile atau plugin khusus untuk menampung kode Anda.
Anda juga ingin meninjau pejabat tersebut Gaya blok dokumentasi. Ini mencakup beberapa metode untuk mengimplementasikannya di situs Anda.
Kami akan menggunakan situs lokal untuk pengembangan dengan versi terbaru WordPress dan dua puluh lima tema default. Contoh kami akan menggunakan register_block_style() Berfungsi di plugin khusus, menjaga hal -hal tetap rapi dan memungkinkan kami untuk berkembang di masa depan.
Contoh: Tambahkan variasi gaya khusus untuk blok tombol
Dalam contoh ini, kami akan membuat variasi gaya khusus untuk Blok tombol. Tema dua puluh lima hadir dengan dua variasi untuk blok: isi dan garis besar. Mereka agak jelas, jadi mari kita jazz!
Variasi gaya kami akan disebut “unicorn.” Ini akan menampilkan tipografi tebal dan latar belakang yang penuh warna.
Langkah 1: Buat Wireframe Plugin WordPress Kustom
Kami akan menyimpan variasi blok kami di wireframe plugin WordPress khusus. Itu satu file dengan fungsi yang disebut mcbv_register_block_styles() untuk memasukkan gaya.
Langkah 2: Tambahkan register_block_style() Fungsi untuk mendaftar dan mendefinisikan gaya blok
Langkah selanjutnya melibatkan penambahan register_block_style() Fungsi ke plugin kami. Fungsi ini menyediakan beberapa cara untuk mendefinisikan gaya blok kami melalui properti berikut:
inline_style: Menambahkan inline CSS melalui fungsi PHP.style_handle: Memanggil file stylesheet yang ada yang berisi gaya.style_data: Menambahkan serangkaian gaya ke fungsi PHP. Ini juga membuat gaya khusus kompatibel dengan editor situs WordPress.
Kami menyukai kemampuan untuk mengedit variasi gaya dalam editor situs, jadi kami akan memilih style_data pilihan. Untuk informasi lebih lanjut, lihat Dokumentasi Blokir Gaya.
Kami mendefinisikan gaya khusus untuk perbatasan, warna, dan tipografi tombol. Opsi lain tersedia dan bergantung pada blok yang Anda tata. Lihat Referensi Blok Inti untuk lebih jelasnya.
Anda juga dapat menemukan contoh variasi gaya blok dalam dua puluh lima tema. Pergi ke folder tema dan navigasikan ke: /styles/blocks/
Langkah 3: Pasang dan aktifkan plugin khusus
Saatnya menginstal dan mengaktifkan plugin khusus yang telah kami bangun. Simpan file plugin (my-custom-block-variations.php) ke: /wp-content/plugins/
Kemudian, kunjungi dasbor WordPress dan navigasikan Plugin> Plugin Terpasang. Menemukan “Variasi blok kustom saya”Dalam daftar dan aktifkan.
Jika semuanya berjalan dengan baik, Anda dapat mulai menggunakan variasi gaya blok.
Langkah 4: Uji variasi gaya blok
Akhirnya, mari kita lihat bagaimana variasi gaya blok kami terlihat. Apakah itu sepenuhnya mewakili kilauan unicorn?
- Buat halaman WordPress baru di situs pengujian Anda dan tambahkan blok tombol.
- Klik pada tombol untuk memilihnya.
- Arahkan ke tab Gaya di kolom kanan.
- Sekarang ada opsi yang disebut “Unicorn”Di bawah judul gaya. Melayang di atas opsi akan menunjukkan pratinjau.
- Klik pada Unicorndan gaya tombol akan diterapkan.
- Simpan halaman dan lihat di situs web Anda. Anda harus melihat tombol berwarna -warni.
Hasilnya menakjubkan. Kami sekarang siap untuk menyebarkan kegembiraan visual kepada pengunjung situs kami!
Selain itu, variasi juga tersedia di editor situs jika Anda menggunakan tema blok:
- Navigasikan ke Penampilan> Editor.
- Klik pada gaya di panel kiri.
- Klik pada blok di panel tengah.
- Temukan Blok tombol dan klik di atasnya.
- Klik pada Variasi gaya unicorn dan mulailah menyesuaikan.
Tambahkan sentuhan pribadi ke blok WordPress
Variasi gaya adalah cara yang menyenangkan untuk menambah kepribadian ke situs web WordPress Anda. Anda dapat menggunakannya untuk membuat apa pun dari tampilan perusahaan yang diturunkan tombol hingga sesuatu yang lebih bersemangat. Mereka juga merupakan tambahan yang bagus pengembang tema Ingin memberikan lebih banyak opsi gaya.
Plus, ada beberapa metode untuk mengimplementasikan gaya khusus ini. Mereka dapat ditambahkan melalui Json atau PHP untuk mencocokkan alur kerja Anda. Anda dapat menambahkannya ke tema yang ada atau membangun plugin baru, seperti yang kami lakukan di atas.
Ada begitu banyak kemungkinan! Eksperimen dengan variasi gaya blok dan lihat bagaimana mereka dapat meningkatkan proyek Anda berikutnya.
Atas
