WordPress sablonok: footer hibák

Manapság már egyre nagyobb forgalmat produkálnak a weboldalak statisztikáiban a mobiltelefonokról érkező megkeresések. Nem is csoda ha mindenki kifejezetten reszponzív alapú WordPress sablonnal szeretné megalapozni blog oldala arculatát. Ez valójában azt jelenti, vagy azt kellene jelentenie, hogy a weboldal olyan tartalmi elemekből épül fel, amely a képernyő  szélességére reagáló, rugalmasan változó grafikai megjelenésű élményt nyújt. Itt valójában a trükk a HTML és az ahhoz kapcsolódó CSS osztályokban rejlik, amit együttesen, például egy WordPress sablonhoz (theme) tartozó fájlba leginkább style.css néven szoktak lementeni.

Tipikus hiba: a footer szélesebb mint a tartalom!

A legtöbb WordPress sablonnal megtörténhet, hogy a footer rész mobil telefonon valójában sokkal szélesebb mint a mobil képernyője, ezért egy nagyon kellemetlen vízszintes irányú görgetősáv jelenik meg, vagy ha a sáv nem is, de a weboldal görgethetővé válik, amely kifejezetten rossz felhasználói élményt nyújt. Mivel az idő túlnyomó részét, főleg azok akik blogolással, vagy valamilyen webfejlesztéssel foglalkoznak, asztali számítógép előtt töltik, így sokszor észre sem veszik ezeket a hibákat, csak amikor már mondjuk a Google Console (más néven Google Webmester Center) szolgáltatása felhívja erre a figyelmet.

Roppant egyszerű a megoldás!

Sablonunkban meg kell keresnünk a footer.php nevű fájlt. Az esetek többségében ezt a nevet adják neki, vagy ha pontosan nem is ez az elnevezése, de a footer szó általában megtalálható a fájl nevében.

WordPress sablonunk fájljait értelemszerűen a sablonszerkesztővel tudjuk szerkeszteni. Mindenféle mahinálás előtt, azért nem árt ha készítünk egy biztonsági másolatot. 

Szinte biztos, hogy blogunk footer (alsó részét) a HTML lehetőségei közül a DIV paranccsal oldották meg. Több mint valószínű, hogy probléma van, azzal az osztállyal (CLASS) amit a DIV meghív, s aminek szerepelnie kell a style.css fájlban is. Ezt vagy kikeressük és végrehajtjuk a szükséges módosítást, vagy egészen egyszerűen ebbe a style.css fájlba bejegyzünk egy saját osztályt, amire aztán hivatkozni fogunk.

Ezzel a bejegyzéssel annyit mondtunk, hogy legyen egy DIV-en keresztül meghívható footer osztályunk ami a DIV-nek fehér háttér színt állít be, valamint meghatározza, hogy a szélesség a 100% lehet. Azaz addig fog nyújtózkodni, amíg az adott eszközön a takarója ér 😀 A lényeg viszont, hogy mindegyik kütyün ugyanúgy fog kinézni. Ha a fenti sorok mentésre kerültek a style.css-ben akkor például a sablon footer.php fájljában már lehet hivatkozni rá, mondjuk az alábbi szerint.

<div class=”footer”>

ide meg bevisszük mindazokat a HTML sorokat, vagy PHP kódokat amiket szerepeltetni szeretnénk a footerben!

</div>

A responsinator.com segítségével megnézhetjük, hogy weboldalunk a különböző eszközökön miként jelenik meg.