Desain Blok Gutenberg Lebar WordPress

Editor blok Gutenberg untuk WordPress telah mengubah cara kami membuat konten di CMS. Tapi itu juga membuka beberapa peluang baru di frontend.

Salah satu perkembangan paling menarik di bidang ini adalah kemampuan untuk menambahkan blok “seluruh” atau “lebar” ke halaman atau posting. Fitur ini memungkinkan blok Gutenberg menyimpang dari lebar default konten tema, yang hampir tidak mungkin dilakukan di Editor Klasik lama.

Ada beberapa kemungkinan penggunaan untuk blok penuh atau lebar. Misalnya, Anda dapat memperkenalkan bagian halaman baru dengan blok sampul penuh yang melapisi teks di atas latar belakang gambar. Atau Anda dapat memanfaatkan fitur ini untuk membuat area panggilan yang tidak dapat dipindahkan. Hampir semua jenis konten dapat ditambahkan di sini, yang merupakan bagian dari daya tarik.

Namun, ada peringatan kecil: Tema Anda harus mendukung blok penuh yang ditargetkan. Untungnya, itu cukup mudah dilakukan. Berikut ini adalah panduan cepat untuk menambahkan dukungan penyesuaian luas ke tema dan blok desain WordPress Anda melalui CSS.

Tambahkan dukungan tema

Langkah pertama adalah menambahkan satu baris kode ke file feature.php di tema aktif Anda. Unduh file ini dari situs Anda jika Anda belum melakukannya (dapat ditemukan di folder /wp-content/themes/yourtheme/ dan ganti “yourtheme” dengan nama folder yang sebenarnya). Kemudian salin dan tempel cuplikan PHP berikut:

add_theme_support(‘align-wide’);

Setelah Anda menambahkan kode, Anda memuat file Fungsi yang dimodifikasi kembali ke direktori tema Anda.

Kode ini berarti Anda ingin mengaktifkan blok yang disesuaikan penuh dan lebar. Saat Anda masuk ke WordPress dan membuka editor halaman/posting, Anda akan melihat bahwa beberapa (tidak semua) blok memiliki opsi penyesuaian “Penuh” dan “Lebar” yang baru.

Apakah Anda menggunakan tema komersial atau standar?

Jika Anda menggunakan WordPress standar atau tema bisnis, pastikan Anda menggunakan tema anak. Ini memungkinkan Anda untuk mengubah tema tanpa berpotensi kehilangannya setelah pembaruan.

Jenis blok dasar

Merancang balok lebar atau pas bisa sedikit rumit. Dan ada sejumlah teknik berbeda yang beredar. Yang akan kita gunakan di sini berasal dari contoh ini di CodePen.

@media screen dan (min-width: 960px) {.align Worldwide, .alignfull {width: 100vw; lebar maks: 100vw; margin kiri: kalk (50% – 50vw); }}

Perhatikan bahwa kami menggunakan pertanyaan media CSS untuk menyematkan gaya ini hanya jika ukuran layar 960 piksel atau lebih. Itu karena kita tidak selalu menginginkan efek ini pada layar yang lebih kecil.

Dalam hal ini, kami menggunakan gaya yang sama untuk kedua penyesuaian blok. Tentu saja, sangat mungkin untuk mendesainnya secara terpisah sehingga masing-masing memberikan tampilan yang unik di bagian depan.

Perlu juga diperhatikan kemungkinan kerugiannya: bilah gulir horizontal mungkin muncul di beberapa desain saat menggunakan teknik ini. Itu dapat diperbaiki melalui CSS dengan yang berikut ditambahkan ke elemen body:

tubuh { overflow-x: tersembunyi; }

hasil

Sekarang kami telah mengaktifkan fungsionalitas blok penuh dan penargetan, saatnya untuk menguji semuanya. Di sini kami telah membuat halaman dengan blok sampul, dengan penyesuaian lebar.

Saat Anda melihat ujung depan situs, blok penjaga berfungsi sebagaimana dimaksud. Elemen mencakup seluruh lebar halaman, sedangkan konten yang mendasarinya tetap dalam standar lebar 960 piksel tema.

Hanya dengan gaya standar, elemen ini sangat menonjol. Masih ada banyak kesempatan untuk berbuat lebih banyak dengan desain.

Dengan menambahkan kelas CSS tambahan atau menargetkan blok tertentu, kami memiliki gudang opsi desain yang lengkap. Hal-hal seperti latar belakang, batas, atau potongan dapat memberikan sentuhan unik.

Ekspansi dengan tema WordPress

Dalam instalasi standar, Gutenberg tidak menyediakan semua fitur plugin pembuat halaman. Tetapi penyesuaian pemblokiran memungkinkan kami menjelajah ke wilayah itu.

Ini bagus, karena desain web telah berkembang sejak saat Editor Klasik pertama kali muncul. Pada saat itu, halaman web selalu menggunakan lebar konten yang seragam.

Saat ini, suku cadang dengan lebar penuh adalah salah satu pilihan desain yang paling populer dan berguna. Kemampuan untuk memanfaatkan ini tanpa plugin atau peretasan tema menjadikan WordPress lebih baik bagi para desainer.