Mengintegrasikan Layouts Grid CSS Mudah ke WordPress

Mendapatkan susun atur grid yang mantap ke WordPress boleh menjadi proses yang tidak menyakitkan jika anda menggunakan alat yang betul. Dalam tutorial ini, anda akan belajar langkah demi langkah bagaimana dengan cepat membuat sistem grid di WordPress yang sangat ringan dan mudah diubah suai. Kami akan menyimpan reka bentuk mudah supaya kami boleh memberi tumpuan kepada menggunakan alat yang tepat untuk menetapkan grid anda, tetapi perlu diingat bahawa anda boleh gaya grid sendiri jika diperlukan.

Saya akan menggunakan tema Pool default di WordPress untuk tutorial ini untuk menunjukkan kepada anda pendekatan "mula dari awal" untuk mendapatkan grid tepat.

Langkah 1: Tentukan Lebar Grid Anda

Sebelum memulakan, anda perlu menentukan betapa luasnya grid anda perlu. Untuk laman WordPress saya, saya dapat melihat lebar lajur utama saya adalah 450px dengan menggunakan ciri "Periksa Elemen" Google Chrome apabila anda klik kanan pada objek. Ini adalah cara terpantas yang saya dapati dengan cepat menentukan lebar dan ketinggian sesuatu objek pada halaman web.

Langkah 2: Pereka Grid

Daripada membina tangan sebuah grid, yang boleh anda lakukan jika anda mahu, saya cadangkan pergi dengan salah satu alat penjana grid yang tersedia. Untuk tutorial ini, saya akan menggunakan penjana grid oleh MindPlay. Ia penjana grid yang sangat mudah dan ringan.

Saya mahukan paparan tiga lajur dan saya perlu memastikan piksel saya adalah 450. Oleh itu, selarilah dan leret ke "Eksport" tab. Kami tidak akan pergi ke atas * tipografi ciri-ciri dalam tutorial ini, walaupun ini sememangnya bernilai meneroka sendiri.

Dalam tab Eksport, gunakan bingkai "Bilah Gaya Utama" dan tatal ke bawah sehingga anda melihat komen "Grid". Anda akan menyalin semuanya dari ulasan ke bahagian bawah bingkai ini. Ia hanya perlu kira-kira 30 baris

Langkah 3: Mengemas kini Lembaran Gaya WordPress anda

Masuk ke laman WordPress anda dan pergi ke Penampilan> Editor.

Di sebelah kanan bawah panel Editor, anda akan melihat Styles.css fail (atau sesuatu yang serupa, bergantung pada tema anda). Klik ini untuk membukanya.

Tatal ke bahagian bawah helaian dan tampal pra anda dari MindPlay.dk:

Langkah 4: Melaksanakan Grid

Untuk menggunakan grid, anda hanya mencipta

dengan kelas "grid". Setiap kawasan grid ditentukan dalam CSS. Buka halaman atau pos baharu. Pergi ke tab HTML untuk mula membina grid anda.

Berikut adalah beberapa contoh pre yang anda boleh paste ke tempat untuk memulakan anda:

   Lajur Kiri
  Tengah Tengah
  Column kanan

Inilah yang sepertinya di WordPress:

Simpan / Kemas kini halaman dan lihat hasilnya. Dalam kes saya, ini adalah halaman utama untuk laman web ini:

Seperti yang anda dapat lihat dari pukulan skrin di atas, kami mempunyai tiga tiang dan semuanya adalah betul di mana kami mengharapkannya. Anda boleh menambah seberapa banyak baris yang anda mahu dengan hanya bermula dengan yang berikut

    Lajur Kiri
  Tengah Tengah
  Column kanan
    Baris Kiri # 2
  Middle Row # 2
  Baris Kanan # 2

Inilah caranya sekarang:

Sekarang anda boleh menambah imej atau teks, dan gaya setiap baris sama seperti yang anda mahu.

Petua untuk Tweaking

Anda mungkin menghadapi masalah dalam sesetengah penyemak imbas apabila anda mempunyai lebih daripada satu baris. Untuk mengatasi masalah ini, anda perlu membuat margin di sebelah kanan (.grid-m4, dalam kes kami) hingga ketinggian yang anda mahu setiap baris. Jika anda menggunakan imej yang 250px dengan 250px, kemudian buat ketinggian baris dalam .grid-m4 menjadi 250px:

.grid-m4 float: left; lebar: 20px; ketinggian: 250px;

Ini akan memastikan anda .grid-m1 di sebelah kiri baris seterusnya tidak terapung ke baris di atasnya.

Jika anda ingin gaya latar belakang grid keseluruhan, anda perlu menyesuaikan ketinggian .grid kelas. Oleh itu, katakan anda mempunyai empat baris pada grid anda, masing-masing pada 250px. Anda akan mahu menambah ketinggian ke kelas grgr di 1000px jadi sebarang elemen gaya yang anda tambahkan akan meliputi reka bentuk grid keseluruhan.

.grid width: 450px; ketinggian: 1000px; margin: auto;

Bergantung kepada versi penjana grid MindPlay.dk yang anda gunakan, laman web ini mungkin tidak menjana ".grid-m4" dan sebaliknya anda perlu menggunakan .grid-m1 selepas .grid-c3 untuk memastikan grid anda meluas ke tempat yang betul:

  Lajur Kiri
  Tengah Tengah
  Column kanan

Keputusan Akhir

Inilah hasil akhir saya dengan dua baris dan beberapa grafik mudah:

Bersenang-senang mereka bentuk dan ingat bahawa anda boleh gaya grid anda dalam apa-apa cara yang anda inginkan.

Nota editor: Jawatan ini ditulis oleh Tara Hornor untuk Hongkiat.com. Tara mempunyai ijazah dalam bahasa Inggeris dan menulis tentang pemasaran, pengiklanan, penjenamaan, reka bentuk grafik, dan penerbitan desktop. Selain kerjaya menulisnya, Tara juga menikmati menghabiskan masa bersama suami dan dua anaknya.