Hogyan készíts oszlopos kinézetű sablon oldalakat wordpressben

Régen főként html táblázatokkal <table> <tr> <td> elemekkel készültek táblázatos elemek egy honlapra.

Ez a módszer meglehetősen sok kóddal járt és a határok is sokszor korlátoltak voltak.

A <table> elemet jó ideje felváltotta a <div> html címke (tag), melynek használatával sokkal gyorsabban, kevesebb kódbűvöléssel lehet elegáns megoldásokat létrehozni.

A <div> címke segít többek között abban, hogy szépen rendezett hasábokat, oszlopokat alakítsunk ki az oldalunkon.

Egy wordpress sablon több-kevesebb oldaltípust tartalmazhat. Lehethogy találsz közöttük egy, kettő, három, négy hasábos tartalom elhelyezésére szolgáló oldaltípust, de lehethogy nem.

Ebben az esetben sem kell kétségbe esned, mert mutatok pár trükköt, amivel Te magad is el tudod készíteni a saját, személyre szabott oldaltípusodat.

Ebben lesz segítségünkre a <div> címke.

Amit először is tudni kell, a legtöbb html címkét le kell zárni, tehát van egy kezdő és egy záró tag (címke). <div> … </div>

Amennyiben nem zárod le a nyitó <div> címkédet, pillanatok alatt szétcincálhatod az oldaladat! Tehát, ha egyszer <div> (nyitó címkét) használtál, valahol mindenképpen legyen meg a </div> (záró címke) párja.

Hát akkor csapjunk bele.

Ha belépsz a wordpress admin felületedre, akkor legyen szó egy új oldalról, vagy egy új bejegyzésről, html nézetre kell váltanod ahhoz, hogy html kódot tudj használni a tartalmad kódokkal történő formázására.

Tehát, válaszd ki a html nézet fület (design nézet, html nézet), majd nézzük meg, hogyan készíthetünk ilyen, 2 oszlopos tartalmat:

div_2_oszlop

Íme a hozzá tartozó html kód:

div_2_oszlop_kodja

Tehát mindkét oszlopnak csináltam külön-külön egy-egy div-et, nyitó és záró elemű div számít egynek, valamint a kettő között fellelhető tartalom.

Megadtam, hogy mindkét oszlop, egyenként, maximum (a sablon által fixen megadott szélességből) 20% helyet foglalhat el. Erre szolgál a width: 20%;

A padding-left és padding-right elemek a két oszlop közötti „üres hely” nagyságát adják meg, a 20%-os szélesség határon belül. Illusztrálom vonalakkal.

Ennek alapján létre tudsz hozni több-kevesebb oszlopból álló, és százalékokban eltérő méretezésű sablonokat is, kerettel vagy anélkül.

Egy keretes verzió:

keretes_2_oszlop_border

Kódja:

keretes_2_oszlop_border_kod

A border jelzi, hogy keretet adunk neki. 1px széles keret lesz, solid – tehát folyamatos keret és #aaa színű lesz (szürkés árnyalat).

3 oszlopos, 40% – 20% – 20% arányban felosztva: 3_oszlop_40-20-20_kep

Kódja:

3_oszlop_40-20-20

Tehát az oszlopokat úgy variálod, és méretezed, ahogy azt Neked szimpatikus, és ahogy a tartalmadat szeretnéd szépen, egyedi megjelenítésben tálalni.

Ha azonban úgy döntesz, nem szeretnél a kódokkal bíbelődni, vagy félsz, hogy valamit nagyon eltolsz és esetleg romba döntöd az oldalad, akkor még mindig választhatsz több lehetőség közül:

  1. szólsz nekem, hogy segítsek 🙂
  2. kipróbálod, hogy bővítménnyel boldogulsz-e.

Itt van néhány bővítmény, amivel spéci elemeket, mint pl. az oszlopokat is könnyen kivitelezed:

https://wordpress.org/plugins/shortcodes-ultimate/

https://wordpress.org/plugins/synved-shortcodes/

https://wordpress.org/plugins/easy-bootstrap-shortcodes/

https://wordpress.org/plugins/shortcoder/

https://wordpress.org/plugins/smpl-shortcodes/

Dobd fel a kódjaidat és kápráztasd el a környezetedet! 🙂

Szeretnél azonnal értesülni a friss blogbejegyzésekről email-ben? Iratkozz fel: ITT!

Amennyiben hasznosnak találtad a cikket, kérlek oszd meg ismerőseiddel is, a cikk alján található gombok valamelyikével! Köszönöm!

 

Jó munkát kívánok!

Posted on: 2015-01-30, by :