Membawa grid CSS ke susun atur WordPress

WordPress 5.0 (yang dikeluarkan pada 6 Disember 2018) telah merevolusikan platform, dengan jantungnya adalah editor blok (Gutenberg). Ini menandakan inovasi yang paling penting sejak pengenalan genre artikel tersuai dalam versi 3.0. Editor Blok menggantikan editor klasik, yang terlalu mudah dalam konsep reka bentuk untuk menjadi kompeten untuk keperluan susun atur web moden.

Editor klasik memberi tumpuan terutamanya pada penyuntingan teks, manakala editor blok menggunakan "blok" sebagai asas untuk memecahkan kandungan halaman ke dalam unit atom (perenggan teks, gambar, kandungan tertanam, dll.). Cara berstruktur organisasi kandungan adalah kelebihan paling penting dari editor blok.

Pelan Layout Sebelum Blok Editor

Sebelum editor Blok muncul, susun atur WordPress terutamanya bergantung pada dua kaedah:

1. Templat tersuai: Kod diperlukan, dan ambang adalah tinggi untuk kebanyakan pengguna.
2. PAGE BUILDER PLUT-IN: Menyediakan alat susun atur visual, tetapi biasanya terdapat masalah seperti kelajuan perlahan, pengalaman pengguna yang lemah, dan ekosistem tertutup.

Kelemahan plugin Page Builder adalah:

1. Isu Prestasi: Untuk mempunyai fungsi yang komprehensif dan jumlah kod yang besar, ia mempengaruhi kelajuan laman web.
2. Pengalaman Pengguna: Beberapa pengalaman penyuntingan plug-in adalah miskin.
3. Eco-Locking: Sukar untuk berhijrah ke platform atau alat lain.

Editor Blok direka untuk menyelesaikan masalah ini, memberikan pengguna pengalaman menulis yang lebih baik, dan menyediakan pemaju dengan API bersatu.

Sejarah ringkas susun atur CSS

CSS awal (1996) digunakan terutamanya untuk gaya teks dan penapisan elemen mudah. Oleh kerana kekurangan konsep dan kandungan campuran dan gaya HTML semantik, sejumlah besar jadual digunakan untuk susun atur, mengakibatkan redundansi kod dan kesukaran dalam mengekalkan.

Seterusnya, kempen Standard Web menganjurkan pemisahan kandungan dan gaya, dan menggunakan unsur -unsur div dan atribut terapung untuk susun atur. Walaupun lebih fleksibel daripada jadual, mekanisme penjelasan atribut terapung meningkatkan kerumitan.

Pada tahun 2012, pelepasan spesifikasi Flexbox menyelesaikan banyak masalah susun atur, dan sintaks ringkasnya sangat mengurangkan jumlah kod.

CSS Grid: Alat Layout 2019

Pada tahun 2017, modul susun atur grid CSS telah dikeluarkan secara rasmi. Berbanding dengan Flexbox, Grid menyokong susun atur dua dimensi, yang membolehkan lebih banyak fleksibiliti dalam mengawal kedudukan elemen pada halaman tanpa bergantung pada urutan tag HTML.

Prinsip asas grid adalah untuk membahagikan halaman ke dalam grid baris lajur dan diletakkan dengan menentukan lokasi elemen dalam grid. Ini sangat memudahkan kod dan tidak memerlukan mengubah struktur HTML apabila mengubah suai susun atur.

Contoh berikut menunjukkan penggunaan asas grid:

 <code>.my-container { display: grid; grid-template-columns: repeat( 3, 1fr ); grid-template-rows: repeat( 2, 1fr ); } .element-1 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; }</code>

Grid juga menyokong kawasan yang dinamakan menggunakan atribut grid-template-areas untuk memudahkan susun atur.

 <code>.container { display: grid; grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"; }</code>

Menggunakan grid CSS di WordPress

Untuk memudahkan penggunaan grid CSS di WordPress, kami telah membangunkan plugin Grids. Plugin ini menyediakan alat susun atur grid visual dalam editor blok, menggabungkan grid 12 × 6 dengan kawasan seret dan drop, di mana pengguna boleh menetapkan saiz, latar belakang, dan tingkah laku responsif melalui kawalan visual.

Kelebihan plugin grid adalah:

• Bersepadu dengan Editor Blok: Sambungkan editor blok dengan lancar untuk kegunaan mudah.
• Ringan: Tag HTML yang dihasilkan adalah ringkas dan mengelakkan kod berlebihan.
• Skalabiliti: Menyokong gaya tersuai dan fungsi lanjutan.

Gaya yang dihasilkan oleh plug-in Grids ditambahkan ke gaya header halaman untuk caching mudah.

Nantikan maklum balas anda!

Untuk mempromosikan aplikasi grid CSS, kami memerlukan lebih banyak alat susun atur automatik. Plug-in Grids direka untuk memudahkan susun atur grid CSS di WordPress, menantikan maklum balas pengguna dan peningkatan dan penambahbaikan yang berterusan.

Atas ialah kandungan terperinci Membawa grid CSS ke susun atur WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!