Most tulajdonképpen arról lesz szó, hogy WordPress-ben hogyan készíthettek két sidebart (oldalsó modulsávot). Nem lesz hozzá szükség egy újabb .php fájlra, ugyanis ez is a sidebar.php-ban fog helyet foglalni egy kisebb trükkel. 

 

Először is, szükséges megemlíteni, hogy ebben az esetben az én oldalsó moduljaim 350-350 pixel szélesek, a frissmodul pedig 650 px széles. Ez azért fontos, mert meg kell adnunk az oldal pontos szélességét. Ebben az esetben 350+350+650+30=1380 (azért kell plusz 30-at hozzáadni, hogy legyen a modulok között egy kicsit hely). Először is, írd át az oldal szélességét ehhez hasonlóan:

#site{
width: 1380px;
margin: 0px auto;
}

Most pedig készítünk egy második sidebar meghatározást CSS-ben az elsőhöz hasonlóan (megduplázzuk, majd átnevezzük) és a második sidebar kódba beleillesztjük a jobbra helyezést, tehát float: right;

#sidebar{
width: 350px;
margin-left: 0px;
float: left;
margin-top: 0px;
}

#sidebar2{
width: 350px;
margin-left: 0px;
float: right;
margin-top: 0px;
}

Ezután pedig nagyon kell figyelneted, ugyanis a plusz sidebar miatt elcsúszna az oldalad, ezért a #content résznek paddingot kell adni. Pont annyit, amennyit, amilyen széles a modulod, + a pluszban kihagyott hely fele (hogy középen legyen a frissmodul) Tehát: 350+15=365pixel. Emelett pedig a float: center; lesz.

#content{
width: 650px;
float: center;
padding-left: 365px;
}

Így tulajdonképpen a CSS résszel készen is lennénk, most az Oldalsáv (sidebar.php) részt kell megnyitnod, és ott beleírni a megfelelő modulrészletet. Itt láthatod, hogy ezzel kezdődik a kód: <div id=”sidebar”> ez így jó is, ez az első sidebar. Ahhoz, hogy megjelenjen a második sidebar-od is, le kell zárni az elsőt. Miután eltervezted, hány modul lesz bal oldalon, zárd le a modulsort egy </div> taggel. Most megnyithatod a következő modult, azt pedig eképpen: <div id=”sidebar2″> a végén nem kell lezárnod, ha nem törölted ki a kódod legvégéről a </div>-et. Bemutatom, hogy néz ki nekem összerakva:

<div id="sidebar">

<div id="modul">
<div class="header1">Első modulsor első modulja</div>
<div class="middle1">
<img src="<?php bloginfo('template_directory'); ?>/images/icon.png"align="left" class="linkes" width="80">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <b>tempor incididunt ut labore</b> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat <i>non proident</i>, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <b>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</b> nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint occaecat cupidatat</i> non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="footer1"></div>
</div>

</div>
<div id="sidebar2">
<div id="modul">
<div class="header1">Második modulsor első modulja</div>
<div class="middle1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <b>tempor incididunt ut labore</b> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>
<table cellpagging="0" cellspacing="0" border="0"><tr><td><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?></td></tr></table>
</div>
<div class="footer1"></div>
</div>

</div>

Körülbelül ennyi, ha mindent jól csináltál, akkor szépen egymás mellett kell elhelyezkednie a moduloknak úgy, ahogy lenniük kell. Ugye, nem is volt olyan bonyolult?


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *