Ebben a tutorialban tulajdonképpen a WordPressben való fejléces menü készítését mutatom be, plusz a fejlécen welcome üzenet is meg fog jelenni, valamint a legfrissebb bejegyzések. Tarts velem, ha érdekel, hogyan készül :)

 

FIGYELEM! Haladó szintű kódolás ismeretet igényel.

 

Ezt fogjuk kialakítani:

 

Ehhez először is kell a kész fejléc, amire ugyanúgy Photoshoppal rakjuk rá a dobozokat, valamint a menü csíkot. Ezt mindenképpen csináld meg előre. Ha megvan a kész végeredmény, akkor pedig le kell vágni a fejlécből annyi részt, ahova kerülni fog a tartalom. Az én esetemben a fejléc felső részéből 570 pixel nagyságot tartok meg, és ezt lementem. De minden fejléc esetében más lesz, ne eszerint mérd. Az a lényeg, hogy a feliratok (Welcome Message, News On The web) még megmaradnak. Természetesen a fejléc teljes másolatát is tartsd meg, ugyanis az lesz a háttér, amire a dolgok kerülni fognak.

A következőkben be kell állítanod a háttereket, fejléc, illetve a teljes hátteret. A megfelelő helyükre illeszd be a CSS-ben, valamint a header blokk stílusa is helyet fog kapni, ha még nincs! (ha tőlem töltötted le a wordpress kódot, akkor alapból is van, a másodikat nem kell beillesztened. Ellenkező esetben ellenőrizd, hogy tartalmazza-e a CSS-ed)

body{
margin-top: 0px;
background: url(images/headerback.png), url(images/background.png);
background-position: center top, center;
background-repeat: repeat-x, repeat;
color: #ffffff;
font-family: tahoma;
font-size: 12px;
font-weigth: none;
}

#header{
margin: 0px auto;
-webkit-margin-before: px;
background-color: transparent;
width: 1000px;
}

Ha eddig megvagy, akkor az oldalon meg is jelenik a háttérben. A Fejrészben pedig mostantól a header blokkban fogunk végig dolgozni, illetve a CSS-ben. De először is, illeszd be a fejléc kódját a következőképpen:

<div id="header">
<div align="center"><IMG SRC="<?php bloginfo('template_directory'); ?>/images/header.png"></div>
</div>

(Ha alapból header.png néven mentetted, akkor csak másold be a worpress témádba. Elérés: public.html/wp-content/themes/témaneve/images/header.png)

 

Továbbra is a header blokkban fogunk dolgozni, az utolsó <div> tag elé fogjuk írni a kód többi részét. Most táblázat kódokra lesz szükség az elkészítéséhez. A következő ábra fogja szemlélteni a táblázatok megoszlását. Én 2 táblázatot alkalmazok, de lehetne egyet is, neked így sokkal átláthatóbb.

A képen már a különböző cellák CSS stílusának a nevét is ábrázoltam. Tehát kell egy két cellás táblázat, illetve egy egy cellás. A méretek a design-odtól függenek, próbálgatni kell, hogy illeszkedjen. Ha a border=”0″ részt ideiglenesen átírod 1-re, akkor az oldalad befrissítve megláthatod, pontosan hol vannak a keretek. Ez sokat segít. De a végén írd vissza 1-re!

<div align="center">
<table cellpadding="0" cellspacing="0" border="0" width="850" height="160">
<td width="425" class="doboz01" valign="top">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.
</td>
<td class="doboz02" width="425" valign="top">
Legfrissebb bejegyzések!!
</td>
</table>
</div>

Tehát ez volt a dupla cellás táblázat. Az első cella tartalmazza a welcome üzenetet, a második lesz a legfrissebb bejegyzések helye. Ahhoz be kell állítani pár dolgot. Menj a Megjenéps/Widgetekre a WordPress vezérlőpultodban. Itt szépen a kép alapján ki kell törölni az összes blokkot, kivétel egyet: a legutóbbi bejegyzéseket.

Majd következő kép szerint pedig beírsz akkora számot, ahány friss címet szeretnél megjeleníteni. Én 3-at írok, úgyis lehet rajta változtatni. Fontos, hogy a címhz pedig egy szóközt rakj, hogy ne jelenjen meg semmi! (ha üresen hagyod, az alapértelmezett cím fog megjelenni)

Most pedig vissza fogunk térni a CSS-hez, ugyanis a widgetekhez alkalmazható CSS-t kell beírni: (ne változtass semmin!)

#widgetfejlec {
font-size: 1pt;
height: auto;
width: auto;
width: 350px;}

#widgettext {
}

#widgettext:hover {
}

Ha megvan, akkor most a listaelemkre vonatkozó stílust fogjuk beállítani.

ul, li{ /*alap lista megjelenés*/
margin-bottom: 3px;
line-height: 14px;
margin-left: -5px;
}

Most pedig a bejegyzések megjelenésére összpontosítunk. Úgy fog megjelenni, ahogy elrendezed (nyilván CSS alapismeret is kell hozzá)

li{
list-style-type: none;
margin: 1; /*hagyd így*/
background: url(háttérurlje); /*háttér, a zárójelek közé másold az url-t*/
height: 25px; /*magasság*/
margin-left: -20px;
padding-left: 10px;
padding-top: 8px;
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-o-transition:.5s ease-out;
width: 420px; /*szélesség megadása*/
font-size: 11px; /*betűméret*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

li:hover{
list-style-type: none;
margin: 1;
background: url(képurlje); /*háttér, ha ráviszed az egeret*/
}

Csupán már csak egy dolgot kell megcsinálni a bejegyzések megjelenítéséhez:

Emlékszel még a táblázatkódra? Volt egy ilyen sor: Legfrissebb bejegyzések! Annak a helyére kell a következőt beillesztened:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>

És ha mindent a leírtak során csináltál, és nem hibáztál, akkor jónak kell lennie. Persze az elrendezésben még csorba lehet, sőt, biztos is. Nekem ugyanis most így néz ki:

Még a dobozokat is meg kéne formálni. Emlékszel a jelölésekre? doboz01 és doboz02. Nem véletlenül jelöltem be a képen. A CSS-be kell beraknunk ezt a kódot:

.doboz01{
padding-top: 20px; /*a cella tetejétől való távolság*/
padding-left: 10px; /*a cella bal oldalától való távolság*/
padding-right: 10px; /*a cella jobb oldalától való távolság*/
text-align: justify;
}

.doboz02{
padding-top: 20px; /*a cella tetejétől való távolság*/
padding-left: 50px; /*a cella bal oldalától való távolság*/
}

Persze a neked megfelelő módon kell beírni, valószínűleg sokat kell próbálkoznod, de ha sikerül, meglesz az eredménye ;) Igazából így a két dobozt meg is oldottuk. Most jön az utolsó rész, az alsó menü. Ehhez újabb táblázatra lesz szükségünk. Ebbe fognak kerülni a menük. Az előző táblázatkód alá kell illeszteni a következő kódot:

<div align="center"><table cellpadding="0" cellspacing="0" border="0" width="850" height="80">
<tr>
<td class="menu" valign="top">
Menü Menü Menü Menü Menü Menü Menü
</td>
</tr>
</table>
</div>

A menükhöz kell belinkelve beilleszteni majd a linkeket értelemszerűen. Ha betetted, így fog kinézni:

Ha még nem találtad volna ki, ennek az elhelyezéséhez is fog kelleni CSS stílus:

.menu{
padding-top: 30px;
padding-left: 80px;
font-size: 16px;
text-transform: uppercase;
}

És ha minden sikeres, akkor meg is kell jelennie jól az oldalon. Nekem ez lett a végeredmény:

Természetesen nem lepődöm meg, ha először nehéznek látszik, nem is kezdő kódolóknak való, de azért érdemes próbálkozni vele. Összetett, de megoldható ;)

 


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









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

Ellenőrző kód *