3 Cara untuk Meningkatkan Tata Letak Kustom dengan Editor Blok WordPress

3 Cara untuk Meningkatkan Tata Letak Kustom dengan Editor Blok WordPress

Dengan Editor Blok Gutenberg, WordPress menyediakan cara untuk membangun tata letak khusus yang dimasukkan ke dalam perangkat lunak inti. Anda tidak lagi memerlukan plugin pembuat halaman untuk membuat beberapa kolom, menyematkan media, atau menambahkan kisi postingan blog.

Meskipun itu mewakili kemajuan relatif terhadap Editor Klasik lama, Anda masih memerlukan sedikit bantuan jika Anda ingin melakukan sesuatu selain mengedit warna atau ukuran font. Pada versi 6.0, gaya lanjutan untuk blok individual tidak tersedia di instalasi default WordPress.

Namun, ada beberapa solusi yang cukup sederhana. Hari ini, kami akan memperkenalkan tiga cara untuk menyempurnakan tata letak kustom Anda dengan editor blok WordPress. Mereka akan membantu Anda mengubah sesuatu yang mendasar menjadi pengaturan yang sangat disesuaikan.

Opsi #1: Tulis CSS Kustom

Jika Anda merasa nyaman menulis kode, Anda dapat menyesuaikan hampir semua aspek tata letak editor blok Anda melalui CSS. Ini sempurna untuk mereka yang sudah membangun tema WordPress khusus dan ingin membuktikan pekerjaan mereka kepada klien.

Bagaimana Anda melakukan proses tergantung pada seberapa luas Anda ingin gaya diterapkan. Dalam contoh ini, kami mencari solusi satu kali. Oleh karena itu, metode termudah adalah menambahkan kelas CSS khusus ke blok.

Panel pengaturan editor blok memiliki area hanya untuk tujuan ini:

  1. Klik di blok Anda ingin bergaya;
  2. Klik Canggih panel di area pengaturan di sebelah kanan;
  3. Tambahkan nama kelas CSS khusus Anda ke Kelas CSS tambahan bidang;
  4. Menyimpan kerjamu;

Di sini, kami telah menambahkan kelas khusus rounded-corners ke blok gambar.

Menambahkan kelas CSS ke blok WordPress adalah cara mudah untuk membuat gaya kustom.

Selanjutnya, kita akan menambahkan kelas itu ke CSS tema kita dan mendefinisikan beberapa gaya. Jika tema Anda menggunakan Penyesuai WordPresskode juga dapat ditempatkan ke dalam CSS tambahan panel.

.rounded-corners {
     border-radius: 10px;
}

Perhatikan bahwa Anda juga ingin menambahkan kode ini ke tema Anda editor-style.css file (jika ada) untuk melihat gaya kustom Anda tercermin dalam editor blok.

Melihat bagian depan, gambar kami sekarang menampilkan beberapa sudut membulat yang indah!

CSS sekarang ada di tempatnya, gambar contoh kita sekarang memiliki sudut membulat.

Opsi #2: Setel Gaya Default melalui Theme.json

Di antara kelemahan awal editor blok adalah kesulitan dalam menerapkan gaya yang konsisten. Anda harus menargetkan beberapa kelas CSS yang ditentukan dalam perangkat lunak inti.

Munculnya theme.json file sangat menyederhanakan proses. Alih-alih mencari-cari semua CSS yang relevan, Anda dapat menentukan gaya blok secara langsung dalam satu file. Dan Anda memiliki fleksibilitas untuk menargetkan blok seluas atau sesempit yang Anda inginkan.

Tata letak dan aspek desain seperti palet warna khusus, tipografi, dan jarak dapat ditentukan melalui theme.json. Yang terbaik dari semuanya, fitur ini kompatibel dengan semua tema WordPress.

Jika Anda sudah menggunakan tema blok bermodel baru di situs web Anda, Anda dapat mengeditnya theme.json file di dalam folder root tema (simpan cadangan yang asli – untuk berjaga-jaga). WordPress menyediakan beberapa dokumentasi dengan contoh untuk membimbing Anda.

Bagi mereka yang menggunakan tema klasik atau membangun dari awal, alat seperti TemaGen memungkinkan Anda untuk membangun secara visual theme.json mengajukan. Pilih gaya Anda, ekspor theme.json file dan letakkan di folder root tema Anda. WordPress akan mengenali file dan menerapkan gaya. Ia bahkan menulis CSS untuk Anda!

Alat ThemeGen membantu Anda membuat file theme.json khusus.

Opsi #3: Gunakan Plugin Editor Plus

Mencari solusi tanpa kode dan tidak ingin berurusan dengan theme.json? Itu Editor Plus plugin telah Anda liput. Ini memungkinkan penataan tata letak blok lanjutan langsung dari dalam editor.

Aktifkan plugin, dan area pengaturan editor blok default akan mendapatkan berbagai panel baru. Dari sana, Anda dapat mengatur bantalan khusus, margin, batas, ukuran, dan banyak lagi. Jika Anda ingin kontrol visual atas setiap aspek tata letak situs Anda, Editor Plus menawarkan solusi langsung.

Plugin ini juga menambahkan pilihan blok khusus yang praktis. Fitur seperti UI akordeon, ikon, dan bilah kemajuan menawarkan sedikit lebih banyak gaya dan fleksibilitas konten.

Akan tetapi, menempuh rute ini memang membutuhkan komitmen jangka panjang. Menonaktifkan plugin akan mengakibatkan hilangnya gaya kustom yang telah Anda buat. Oleh karena itu, ada baiknya mempertimbangkan keuntungan dan kerugian sebelum mengambil keputusan.

Plugin Editor Plus menambahkan opsi gaya khusus ke blok.

Bawa Tata Letak Halaman WordPress Anda ke Tingkat Selanjutnya

Dalam beberapa hal, masuk akal untuk menganggap editor blok sebagai titik awal. Dengan itu, kita dapat membuat segala macam tata letak khusus. Tetapi sampai ada lebih banyak opsi konfigurasi yang ditambahkan ke inti WordPress, diperlukan upaya ekstra untuk menyesuaikan gaya sepenuhnya.

Tiga opsi di atas menyediakan jalur untuk menaikkan level gaya tata letak blok Anda. Baik Anda ingin meningkatkan satu elemen atau fitur di seluruh situs, ada metode untuk melakukannya.

Semua hal dipertimbangkan, theme.json mungkin merupakan solusi jangka panjang terbaik. Itu dimasukkan ke dalam inti WordPress, dan semuanya terkandung dalam satu file. Dari perspektif pemeliharaan, ini lebih disukai daripada opsi lain.

Namun, ada banyak alasan untuk memilih CSS khusus atau bahkan plugin. Pada akhirnya, ini tentang menemukan yang paling sesuai dengan kebutuhan dan alur kerja Anda.

Kabar baiknya adalah Anda tidak harus puas dengan gaya editor blok default. Gunakan alat favorit Anda dan mulailah membangun!

Hit play on your imagination