Szakítsd át a sablon korlátait (II.)!

a java még hátravan…

Az előző részben sikeresen eltüntettük az oldasávot az új sablonunkról - sőt egy teszt-oldalt is elkészítettünk, amihez az új sablont hozzárendeltük, de egy apró szépséghiba akadt. Az oldal fő tartalma nem tölti ki a felszabadult helyet - az eltüntetett oldalsáv puccos helye még ott tátong üresen.

Épp itt az ideje azt a részt is rendbetenni.

Ha megnézzük a page.php forrását, akkor láthatjuk, hogy a headert egy main azonosítóval ellátott doboz követi (div id=“main”). Ebben a dobozban helyezkedik el a content azonosítóval ellátott doboz (div id=“content”), és az oldalsáv (include (TEMPLATEPATH . ‘/page-sidebar.php’);).

Lehet, hogy a te sablonodban az oldalsáv egyszerűen sidebat.php nevet kapott, keresd azt, ha nincs page-sidebar.php.

Nem akartam ide is betenni a kódot, de fontos hogy lásd - majdnem ugyanaz, mint az előző leckében, csak néhány megjegyzést tettem hozzá, hogy lásd - mi minek a része:

page.php

1. <?php get_header(); ?>
2. <div id=“main”>
3. <div id=“content”>
4. <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
5. <div class=“post” id=“post-<?php the_ID(); ?>”>
6. <div class=“entry”>
7. ... nem fontos ...
8. ... nem fontos ...
9. </div><!—az ENTRY doboz (6. sor) lezárása—>
10. </div><!—a POST doboz (5. sor) lezárása—>
11. <?php endwhile; endif; ?>
12. <?php edit_post_link(‘Edit this entry.’, ‘<p>’, ‘</p>’); ?>
13. </div><!—a CONTENT doboz (3. sor) lezárása—>
14. <?php include (TEMPLATEPATH . ‘/page-sidebar.php’); ?>
15. </div><!—a MAIN doboz (2. sor) lezárása—>
16. <?php get_footer(); ?>

A lényeg - vizuálisan:

Miért erőltetem ezt a struktúra-dolgot annyira? Ha ezt megérted, akkor bármire képes vagy az oldal arculatának kialakításakor.

Az ábrán már nagyon látványos: a rendelkezésre álló szélességet alapvetően a main doboz szélessége határozza meg. Ezen nem fogunk módosítani. Módosítanunk kell azonban a contet doboz szélességén - méghozzá pont a sidebar szélességével kell növelni (ha a dobozok közötti távolságot most nem vesszük figyelembe).

Igen ám, de ha most fixáljuk a content szélességét, az olyan széles marad azokon az oldalakon is, ahol egyébként van oldalsáv. Ennek következtében az oldalsáv lecsusszan a tartalom alá, mivel mellette már nincs szegénynek hely.

A megoldás: az osztályok alkalmazása. A content dobozhoz készítünk két osztályt. Az egyiket akkor rendeljük hozzá, amikor kell oldalsáv a tartalom mellé, a másikat pedig akkor, amikor nem. Hogy ezt hogyan tehetjük meg? Érdemes mindenképpen szétnézni a stílusok között.

És hogy mit keressünk? A #main, a #content és a #sidebar azonosítókat - illetve ha van, akkor még a #wrapper-t is. Lássuk, milyen stílus, egészen pontosan milyen szélesség van hozzájuk rendelve.

style.css

1. #wrapper {
2. width: 746px;
3. margin: 0 auto;
4. padding: 50px 0;
5. text-align: left;
6. font-size: 1.1em;
7. }
8.  
9. #main {
10. padding: 50px 0 0;
11. }
12.  
13. #content {
14. float:left;
15. width: 500px;
16. padding: 1px 0 60px;
17. border: 1px solid #fff;
18. }
19.  
20. #sidebar {
21. float: right;
22. width: 210px;
23. padding: 1px 0 60px;
24. border: 1px solid #fff;
25. }

A #main doboznak nincs szélessége - az addig nyúlhat, ameddig a takarója ér. Mi lesz a takaró? Hát a #wrapper, ami tulajdonképpen a weblap vászna. Mint a festőnek. Ez az a terület, ami felett rendelkezünk az arculat kialakításakor. Természetesen ennek a szélességét is mi szabhatnánk meg, de inkább ne játszunk itt vele.

Azért nem találkoztunk vele, mert még valahol a header.php-ben van megnyitva és a footer.php-ben van bezárva, ez ugyanis mindent magába foglal. Most ne foglalkozzunk vele, elég ha tudjuk, hogy az én sablonom szerint most 746px hely van a tartalomnak. Azt nyomozd ki, hogy nálad mekkora ez az érték.

A teljes szélességből a content nálam 500px, a sidebar pedig 210px. Ez összesen 710px, a 746px-ből fennmaradó rész pedig a tartalom és az oldalsáv közötti üres terület.

Ez sablononként szintén változó. Mivel most jelentős távolság van a tartalom és az oldalsáv között, nem elegendő az oldalsáv szélességével növelni a ratalom szélességét, én adok neki 730px-t.

Ezt a 730px-t egy osztályban deklaráljuk, amit aztán hozzárendelünk az oldalsablonon lévő content dobozunkhoz. A style.css-t tehát egészítsük ki ezzel:

style.css

26. ...
27. .wide{
28. width: 730px;
29. }
30. ...

Szükségünk lesz még egy osztályra, amihez az eredeti szélességet rendeljük hozzá:

style.css

30. ...
31. .normal{
32. width: 500px;
33. }
34. ...

Ha ezek megvannak, akkor a #content-hez rendelt szélességérték törölhető (én csak áthúztam, de te töröld ki!):

style.css

13. #content {
14. float:left;
15. width: 500px;
16. padding: 1px 0 60px;
17. border: 1px solid #fff;
18. }

Kész is lenne? Dehogy!

A stíluslap rendben van - de az új osztályokat hozzá kell rendeljük a tartalomhoz. Mely állományok érintettek a változásban? Mindegyik, amelyikben szerepel a <div id=”#content”> sor!

Nálam ezeket kellett szerkeszteni: archive.php, index.php, page.php, search.php és a single.php.

Lehet hogy neked van még néhány, vagy éppen ezek közül hiányzik állomány. A sablonod mappájában lévő valamennyi PHP kiterjesztésű fájlt nézd meg. annyiban könnyű a dolgod, hogy ez a sor valahol elöl kell hogy legyen, mindenképpen látnod kell a képernyődön miután megnyitottad a php forrást.

Minden egyes ilyen forrásban módosítanunk kell a fenti sort a következőre:
<div id=”#content” class=“normal”>

Na és persze ott van nekünk a page-nosidebar.php, ahol pedig így módosítunk:
<div id=”#content” class=“wide”>

Na most van kész - és arra kérlek, segíts újra!

Félek, hogy ez már túlságosan méylen technikai jellegű ismertető volt, és a többség a 14. sor olvasása után feladta. Szerinted? Szabad ilyen tartalommal itt foglalkozni, vagy inkább soft-osabb, könnyebb problémák megoldásai legyenek csak? A hozzászólásoknál várom a válaszod!

Balogh Attila

Attila blogger, trainer és WordPress fanatikus.

Tetszett a bejegyzés? Ne maradj le a frissítésekről sem!
Iratkozz fel a blog hírlevélre vagy az RSS értesítőre!

Címkék: wordpress, wordpress sablon, csináld magad, sablonszerkesztés

A bejegyzés trackback címe:

Trackback:

Még nincs...