Egyszerű CSS Grid elrendezések integrálása a WordPress-be

Ha a megfelelő eszközöket használjuk, a következetes, szilárd rács-elrendezés megszerzése a WordPress-be fájdalommentes folyamat lehet. Ebben a bemutatóban lépésről lépésre megtanulhatja, hogyan kell gyorsan létrehozni egy rácsrendszert a WordPress-ben, amely nagyon könnyű és könnyen módosítható. Egyszerűen megtartjuk a tervezést, hogy a megfelelő eszközök használatával összpontosíthassunk a hálózat beállításához, de ne feledje, hogy szükség esetén a rácsot saját stílusban is megtervezheti.

Az alapértelmezett Pool témát fogom használni a WordPress-ben, hogy ez a bemutató csak megmutassa neked egy "kezdet a semmiből" megközelítést a rácsok jobb megszerzéséhez.

1. lépés: Határozza meg a rács szélességét

Mielőtt elkezdené, meg kell határoznia, hogy a hálózatnak milyen szélesnek kell lennie. A WordPress webhelyemben látom, hogy a fő oszlopom szélessége 450px a Google Chrome "Ellenőrző elem" funkciójának használatával, amikor jobb egérgombbal rákattint egy objektumra. Ez a leggyorsabb módja annak, hogy gyorsan meghatározhatom egy objektum szélességét és magasságát egy weboldalon.

2. lépés: Grid Designer

A rács létrehozása helyett, amit megtehetsz, javaslom, hogy a rendelkezésre álló rácsgenerátor-eszközök egyikével folytassam. Ehhez a bemutatóhoz a MindPlay a grid generátort használja. Ez egy nagyon egyszerű és könnyű rácsgenerátor.

Háromoszlopos kijelzőt akarok, és meg kell győződnöm róla, hogy a pixelem 450-en van. Ennek megfelelően állítsd be, és ugorj a "Export" fülre. Mi nem megyünk át *tipográfia A bemutató funkciói, bár ez természetesen érdemes önmagában megvizsgálni.

Az Export lapon használja a legmagasabb "Stíluslap" keretet, és görgessen lefelé, amíg meg nem jelenik a "Grid" megjegyzés. Mindent átmásol a megjegyzésekből a keret aljára. Csak kb. 30 sor

.
 
 
 
3. lépés: A WordPress stíluslap frissítése
 
Jelentkezzen be a WordPress webhelyére, és lépjen a Megjelenés> Szerkesztő elemre.
 
 
 
A Szerkesztő panel jobb alsó sarkában látható a styles.css fájl (vagy valami hasonló, a témától függően). Kattintson erre a megnyitásához.
 
 
 
Görgessen a lap aljára, és illessze be az előbbit a MindPlay.dk webhelyről:
 
 
 
4. lépés: A rács megvalósítása
 
A rács használatához egyszerűen hozza létre a 
 a "grid" osztályban. A rács minden területét a CSS határozza meg. Nyisson meg egy új oldalt vagy bejegyzést. Menjen a HTML lapra, hogy elkezdhesse a hálózat létrehozását.
 
 
 
Íme néhány előzetes minta, amelyet beilleszthet a helyére, hogy elindítsa:
 
 
  
Bal oszlop
  
Középső oszlop
  
Jobb oszlop
  
 
 
Úgy néz ki, mint a WordPressben:
 
 
 
Mentse / frissítse az oldalt, és nézze meg az eredményeket. Esetemben ez az oldal kezdőlapja:
 
 
 
Amint a fenti képernyőről látszik, három oszlopunk van, és minden rendben van, ahol azt várjuk. Az alábbi sorokkal kezdve annyi sort adhat hozzá, amennyit csak akar 
:
 
 
   
Bal oszlop
  
Középső oszlop
  
Jobb oszlop
    
Bal 2. sor
  
Középső sor # 2
  
# 2. sor jobbra
  
 
Íme, hogyan néz ki eddig:
 
 
 
Most hozzáadhat képeket vagy szöveget, és az egyes sorokat pontosan úgy tervezheti, ahogyan szeretné.
 
Tippek a csípéshez
 
Bizonyos böngészőkben baj lehet, ha egynél több sor van. Ahhoz, hogy ezt a problémát megkeresse, meg kell tennie a jobb oldali margót (.rács-m4, a mi esetünkben) olyan magasságra, amelyet minden sornak meg kell adnia. Ha 250 képponttal 250 képpontos képeket használ, akkor a sor magasságát a .rács-m4 250x-esnek kell lennie:
 
.grid-m4 float: balra; szélesség: 20px; magasság: 250px; 
 
Ez biztosítja, hogy Ön .rács-M1 a következő sor bal oldalán nem lebeg a felette lévő sorig.
 
Ha a teljes rács hátterét szeretné megtervezni, be kell állítania a .rács osztály. Tehát mondjuk, hogy négy sora van a rácson, mindegyik 250db. 1000px-es magasságot szeretne hozzáadni a .grid osztályhoz, így minden hozzáadott stílustartalom lefedi a teljes rácstervezetet.
 
.rács szélesség: 450px; magasság: 1000px; margó: auto; 
 
A használt MindPlay.dk rácsgenerátor verziójától függően előfordulhat, hogy a webhely nem generálja a ".grid-m4" -t, és helyette használnia kell. .rács-M1 után .rács-c3 annak biztosítása érdekében, hogy a rács a megfelelő helyre nyúljon:
 
  
Bal oszlop
  
Középső oszlop
  
Jobb oszlop
  
 
Végső eredmények 
 
Íme a végeredményem két sorban és néhány egyszerű grafikával:
 
 
 
Jó szórakozást tervezz, és ne feledd, hogy tetszés szerint tetszés szerint tetszeni fogsz.
 
A szerkesztő megjegyzése: Ezt a bejegyzést írta Tara Hornor Hongkiat.com részére. A Tara rendelkezik angol nyelvtudással és marketing, reklám, márkaépítés, grafikai tervezés és asztali kiadványokról. Az író karrierje mellett Tara férjével és két gyermekével együtt tölt.