• Articles
• admin

minden WordPress oldal más. Ez azért van, mert mindenki más témát vagy “megjelenést” választ a webhelyére. A fejléc és a felső navigációs menü létrehozása a WordPress – ben kissé eltérő folyamat lesz az egyes webhelyeknél.

itt használom a Genesis theme framework for WordPress-t, mert nagyon szeretem. Ebben a cikkben azonban fontos pontok lesznek, amelyek segítenek bárkinek, aki rendelkezik egy WordPress weboldallal.

ez egy cikk-és videósorozat része, ahol a semmiből készítek egy weboldalt. Először elmagyaráztam, hogyan lehet gyermek témát készíteni a Genesis keretrendszerhez, majd írtam a téma stílusának megkezdéséről a háttér és a logó hozzáadásával.

Facebook link, Twitter link és egyéb információk hozzáadása a fejléchez

miután már hozzáadtuk a logót webhelyünk fejlécének bal felső sarkához, most hozzáadunk néhány extra információt a fejléc jobb oldalához. Ebben az esetben hozzáadunk Twitter és Facebook linkeket stb., egy widget útján.

be kell vallanom, hogy az utóbbi időben egy kicsit őrült voltam, mivel a múltban kissé elutasítottam őket. Mi az a widget? Nos, ezek egy weboldal önálló bitjei, amelyeket egy könnyen használható widget területen keresztül húzhat és vezérelhet.

az egyik a sok szépségek Genesis ez könnyed képessége widgetize bármely területén a honlapon. Tehát:

• ha azt szeretnénk, hogy egy másik sorrendben dobozok az oldalsávon meg tudod csinálni másodpercek alatt.
• ha szeretne egy kiemelt bejegyzést itt, 5 legújabb kategória fejlécek miniatűrök ott a honlapon, meg tudod csinálni másodpercek alatt.
• ha keresősávot, közösségi megosztást, Twitter-hírcsatornát, naptárat, címkefelhőt stb., itt, ott vagy bárhol, másodpercek alatt megteheti.

ez az intuitív, könnyen használható háttérfunkció különösen akkor hasznos, ha olyan ügyfelek számára hoz létre weboldalakat, akik a webhely minden területét ellenőrizni akarják, de ehhez nincsenek készségeik.

mindenesetre ebben az esetben létre kell hoznunk a saját egyéni widgetünket, és ezt úgy tesszük, hogy egy szöveges widgetet áthúzunk a fejléc jobb oldalára a megjelenés > widgetek felületén a WordPress-ben.

ebben a szöveges Widgetben HTML-t is elhelyezhet. Itt van a HTML tettem az adott oldalon. Csak egy Facebook oldal link, egy Twitter link és egy telefonszám.

<div>
<ul>
<li><a href=""><img src="http://site.com/images/facebook.jpg" style="border:0;" /></a></li>
<li><a href=""><img src="http://site.com/images/twitter.jpg" style="border:0;" /></a></li>
</ul>
<p><strong>Tel:</strong> +44 20 xxxx xxxx</p>
</div>

itt van a CSS A fentiek stílusához:

#connect {float: right;}
#connect ul {float: right;}
#connect ul li {list-style: none; display: inline;}
#connect p#tel {margin-top: 33px; font-size: 18px; color: #66504e;}

ennek eredményeként megjelenik a fej jobb oldalán:

Videó hozzáadása címsor info és navigációs menü

ebben a videóban azt mutatják, hogyan kell hozzáadni a widget a fejléc és hogyan kell stílus fel a menüt a Genesis.

a felső navigációs menü létrehozása

a felső navigációs menük (vagy “navbars”) korábban létem átka volt, de most, a Genesis és a WordPress menükkel, kifejlesztettem egy nagyon egyszerű rendszert, amely másodperceket vesz igénybe, nem pedig órákat.

a Genesis már rendelkezik elsődleges és másodlagos navigációs menüvel. Ebben a konkrét példában a Genesis téma beállításaival megszabadultam a másodlagos navigációs menüből, mivel az ügyfél csak egyet akart.

a fenti videóban bemutatom, hogyan módosítom a CSS-t, hogy a menü úgy nézzen ki, mint a PSD visual-ban.

a Chrome Developer Tools vagy a Firebug Add-On for Firefox használatával meg tudja mondani, hogy a HTML mely szelektorait használja a CSS A menü stílusához.

#nav {-khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
background: #745d5c url(images/nav.gif) repeat-x ;
border: 1px solid #745d5c;
width: 958px; }

amint az a fenti videóból látható, megnöveltem a lekerekített sarkok sugarát, hozzáadtam egy gradiens hátteret és megváltoztattam a menü szegélyszínét. Tehát most a menü nem úgy néz ki, mint az unalmas szürke, amelyet a vanilla Genesis telepítésével kap.

a következő CSS-t is hozzáadtam, hogy a menü szövegének színét fehérre változtassam.

#nav li a {color: #fff; }

lehetőség van az aktuális oldal linkek, a hover linkek, az aloldal linkek és az aloldal linkek stílusának megváltoztatására is.

a Genesis, akkor könnyen legördülő menük aloldalak (vagy gyermek oldalak), majd fly-out linkeket al-aloldalak (vagy unoka oldalak). Ezek mind az elsődleges, mind a másodlagos navigációs menüben megtalálhatók.

oldalak, gyermekoldalak és unokaoldalak létrehozása

itt van a videóm, ahol új oldalakat adok hozzá a WordPress menübe, hogy azok a navigációs menüben oldalakként, gyermekoldalakként (legördülő listákként) és unokaoldalakként (kifutókként) jelenjenek meg.

az oldalszerkesztőben a szülő alatt kiválaszthat egy gyermek-vagy unokaoldalt. És amikor megnézi az oldalakat (az oldalak > összes oldal alatt), a gyermek és az unoka oldalai behúzódnak a szülőjük alá. Ezzel logikus URL-t is kapnak (például www.site.com/music/jazz/charlie-parker ahol a “Charlie Parker” oldal a “Jazz” gyermeke, amely a “zene”gyermeke).

navigációs menü létrehozása legördülő menüvel

ahhoz, hogy ezek az oldalak helyesen jelenjenek meg a navigációs menüben, csak át kell húznia őket a megfelelő pozícióba a megjelenés > menükben. Újra, a gyermekoldalak behúzva vannak a szülőjük alatt. Ne felejtsen el nevet adni a menünek (például “navbar”), és állítsa be az elsődleges navigációs menünek.

tehát az oldalak elrendezése a WordPress megjelenés > menük területén, mint ez…

… létrehoz egy legördülő menüt a fly-out, mint ez:

kérjük, olvassa el a fenti videót ennek bemutatására.

mit gondolsz?

mit gondol egy weboldal fejlécének és navigációs menüjének szerkesztéséről? Másképp csinálod?