• Articles
• admin

Hvert WordPress-nettsted er annerledes. Dette er fordi alle velger et annet tema eller «look and feel» for deres nettsted. Å lage en header og toppnavigasjonsmeny I WordPress vil være en litt annen prosess for hvert nettsted.

her bruker Jeg Genesis theme framework For WordPress fordi jeg absolutt elsker det. Det vil imidlertid være viktige punkter i denne artikkelen som vil hjelpe alle med Et WordPress-nettsted.

Dette er en del av en serie artikler og videoer der jeg lager et nettsted fra bunnen av. Jeg forklarte først hvordan du lager et barntema For Genesis framework, og da skrev jeg om å begynne å style temaet ved å legge til bakgrunnen og logoen.

Legge Til Facebook-lenke, Twitter-lenke og annen informasjon i overskriften

etter å ha lagt til logoen øverst til venstre på nettstedets topptekst, vil vi nå legge til litt ekstra informasjon til høyre side av overskriften vår. I dette tilfellet vil vi legge Til Twitter og Facebook linker, etc., ved hjelp av en widget.

jeg må innrømme at jeg har gått en liten widget gal i det siste, etter å ha vært litt avvisende av dem tidligere. Hva er en widget? Vel, de er selvforsynte biter av et nettsted som du kan dra rundt og kontrollere via et brukervennlig widgetområde.

En Av De mange skjønnhetene I Genesis er at Det er uanstrengt evne til å widgetize ethvert område av nettstedet. Så:

• hvis du vil ha en annen rekkefølge av bokser på sidepanelet, kan du gjøre det om sekunder.
• hvis du vil ha et utvalgt innlegg her, 5 siste kategorioverskrifter med miniatyrbilder der på hjemmesiden, kan du gjøre det om sekunder.
• hvis du vil ha en søkefelt, sosial deling, Twitter feed, kalender, tag cloud, etc., her, der eller hvor som helst, kan du gjøre det i løpet av sekunder.

denne intuitive, brukervennlige back-end-funksjonaliteten er spesielt nyttig når du lager nettsteder for kunder som vil ha muligheten til å kontrollere alle områder på et nettsted, men mangler ferdighetene til å gjøre dette.

uansett, i dette tilfellet må vi lage vår egen tilpassede widget, og vi gjør det ved Å dra over En Tekst Widget Til Header Høyre område I Utseendet > Widgets grensesnitt I WordPress.

Og i Denne Teksten Widget kan du sette HTML. HER ER HTML jeg satt for dette nettstedet. Jeg har Bare En Facebook-side link, En Twitter link og et telefonnummer.

<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>

OG HER ER CSS til stil ovenfor:

#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;}

Her er det som vises på høyre side av hodet som et resultat:

Video av å legge til overskriftsinfo og navigasjonsmeny

i denne videoen viser jeg hvordan du legger til widgeten i overskriften og hvordan du stiler opp menyen I Genesis.

Opprette toppnavigasjonsmenyen

Toppnavigasjonsmenyer (eller «navbars») pleide å være bane av min eksistens, men nå, Med Genesis og WordPress menyer, har jeg utviklet et veldig enkelt system for å lage dem som tar sekunder i motsetning til timer.

Genesis har allerede på plass muligheten Til Å ha En Primær og Sekundær Navigasjonsmeny. For dette eksempelet, jeg ble kvitt Den Sekundære Navigasjonsmenyen Ved Hjelp Av Genesis Tema Innstillinger som klienten bare ønsket en.

i videoen ovenfor viser jeg hvordan jeg endrer CSS for å få menyen til å se ut som DEN I PSD visual jeg gjorde.

Ved Å bruke Chrome Utviklerverktøy eller Firebug-tillegget For Firefox, kan du se hvilke velgere I HTML som brukes I CSS for å style menyen.

#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; }

Som du kan se i videoen ovenfor, økte jeg radiusen til de avrundede hjørnene, la til en gradientbakgrunn og endret kantfargen på menyen. Så nå ser menyen ikke ut som den kjedelige grå du får med en vanilje Genesis-installasjon.

jeg har også lagt TIL FØLGENDE CSS for å endre fargen på teksten i menyen til hvit.

#nav li a {color: #fff; }

Det er også muligheten til å endre stilen på gjeldende side linker, hover linker, underside linker og sub-sub-side linker.

Med Genesis kan du enkelt ha rullegardinmenyer for undersider (eller barnesider) og deretter fly-ut linker for undersider (eller barnebarnssider). Du kan ha Disse På Både Primære Og Sekundære Navigasjonsmenyer.

Opprette sider, barnesider og barnebarnssider

Her er videoen min der jeg legger til nye sider I WordPress-menyen slik at de vises i navigasjonsmenyen som sider, barnesider (som drop-downs) og barnebarnssider (som flyouts).

du kan velge en side som skal være barne-eller barnebarnsside under Parent i sideredigering. Og når du ser på sidene (Under Sider > Alle Sider) er barne-og barnebarnssidene innrykket under foreldrene sine. Å gjøre dette vil også gi dem en logisk URL (for eksempel www.site.com/music/jazz/charlie-parker hvor siden «Charlie Parker» er et Barn Av «Jazz» som er Et Barn av «Musikk»).

Opprette en navigasjonsmeny med drop-downs og fly-outs

for å få disse sidene til å vises i navigasjonsmenyen riktig, må du bare dra og slippe dem inn i deres respektive posisjoner I Utseende > Menyer. Igjen er underordnede sider innrykket under foreldrene sine. Ikke glem å gi menyen et navn (som «navbar», for eksempel) og sett det til å være den primære navigasjonsmenyen.

så, arrangere sider I WordPress Utseende > Menyer område som dette…

… vil skape en rullegardinmeny med fly-outs som dette:

Vennligst se videoen ovenfor for en demonstrasjon av dette.

hva synes du?

hva synes du om denne metoden for å redigere overskriften og navigasjonsmenyen på et nettsted? Gjør du det på en annen måte?