Sorszámozott (ordered list: <ol>) és nem sorszámozott (unordered list: <ul>) listákat illik szépen elválasztani CSS segítséggel. A WordPresshez látványos és jól áttekintető megoldások garmadát lehet a Neten fellelni.
Igen ám, de gyakori igény, hogy a lista utolsó sora (vagy első, vagy akárhányadik) másképpen nézzen ki, mint a többi. Azaz szembesülünk azzal, hogy a WP LOOP-olt megoldásai nem mindig egyszerűsítik le a dolgunkat. Persze erre is van pár soros megoldás…
A CSS szinte mindent tud, de ezt beállítanom nem sikerült igazán. Lelkileg összetörve a pszichológusom és az alkohol helyett egy php-számlálóhoz nyúltam, és legyártottam egy végtelenül primitív számlálót, melynek feladata a <li> sorok számlálása a LOOP-ban. Ha eléri a megadott sorszámot, akkor egy eltérő stíluslapot ír ki az adott sorhoz.
Innen már minden csak “egyszerű” CSS.
Lássuk tehát (kicsit vacakul műxik a wp-codebox, ezért szkripteket baromi rondán jeleníti meg… bocsánat érte, de a lényeg jól látható):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div>
<ul>
< ?php
$szamlalo = 1;
$sorokszama = 4;
?>
< ?php query_posts('showposts='.$sorokszama.'&offset=0'); ?>
< ?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!---LOOP--->
<li class="<?php if ($szamlalo++ == $sorokszama) print 'utolsosor' ;?>">
...
</li>
<!---/LOOP--->
< ?php endwhile; else: ?>
< ?php endif; ?>
</ul>
</div> |
És most jön a CSS az előbbi cucchoz:
1 2 | li{ border-bottom:1px dotted #333} li.utolsosor{border-bottom:none;} |
A fentiekből tehát az következik, hogy van egy lekérdezésünk, mely a legutóbbi négy bejegyzést adja eredményül.
A loop miatt mind a 4 sor tökéletesen egyféle formázással jelenik meg (csak a szöveges tartalma más), ezért nehéz egyszerű css segítségével különálló formázást használni.
Itt azt oldom meg, hogy az utolsó sorban elhelyezett “utolsosor” osztállyal el tudjam tüntetni az 1 pixeles alsó vonalat.
Két paraméter segít a dologban: a $szamlalo = 1 és a $sorokszama = 4. A $szamlalo = 1 esetén egytől kezdünk számolni felfelé, míg a $sorokszama = ? határozza meg, hogy a loopból hány sor fog keletkezni. Jelen esetben ugyebár négy sort kapunk.
Ha a sorok száma és a számláló állása megegyezik (ez kizárólag az utolsó sornál történhet meg), akkor a megfelelő osztályt írja ki nekünk: print ‘utolsosor’.
Innen már a stíluslaphoz nyúlva kikapcsoljuk (border-bottom:none) az utolsó sorhoz tartozó alsó csíkot.
Természetesen a szkriptet továbbgondolva sokkal összetettebb feladatok is megvalósíthatók.
0 válasz to “Lista, kicsit másképp: WP loop CSS+PHP”