• Articles
• admin

elke WordPress site is anders. Dit komt omdat iedereen kiest een ander thema of” look and feel ” voor hun site. Het creëren van een header en top navigatie menu in WordPress zal een iets ander proces voor elke site.

hier gebruik ik het Genesis theme framework voor WordPress omdat ik het absoluut geweldig vind. Echter, er zullen belangrijke punten in dit artikel dat zal helpen iedereen met een WordPress website.

dit is onderdeel van een serie artikelen en video ‘ s waarin ik een website vanaf nul maak. Ik legde eerst uit hoe je een kind thema te maken voor de Genesis kader en toen schreef ik over het beginnen met het thema stijl door het toevoegen van de achtergrond en logo.

Facebook-link, Twitter-link en andere informatie toevoegen aan de header

nadat het logo al linksboven in de header van onze site is toegevoegd, voegen we nu wat extra informatie toe aan de rechterkant van onze header. In dit geval zullen we Twitter en Facebook links toe te voegen, enz., door middel van een widget.

ik moet toegeven dat ik ben gegaan een beetje widget gek de laatste tijd, een beetje afwijzend van hen in het verleden. Wat is een widget? Nou, ze zijn op zichzelf staande stukjes van een website die u kunt slepen en controle via een eenvoudig te gebruiken widget gebied.

een van de vele schoonheden van Genesis is het moeiteloos vermogen om elk deel van de website te widgetiseren. Dus:

• als u een andere volgorde van vakken op de zijbalk wilt kunt u dit in seconden doen.
• als u hier een aanbevolen bericht wilt, 5 Laatste categoriekoppen met miniaturen op de homepage, kunt u dit in seconden doen.
• als u een zoekbalk, social sharing, Twitter-feed, agenda, tag cloud, enz. hier, daar of waar dan ook, je kunt het in seconden doen.

deze intuïtieve, eenvoudig te gebruiken back-end functionaliteit is bijzonder nuttig bij het maken van websites voor klanten die de mogelijkheid willen om alle delen van een website te beheren, maar niet de vaardigheden hebben om dit te doen.

hoe dan ook, in dit geval moeten we onze eigen aangepaste widget te maken en we doen dat door te slepen over een tekst Widget naar de kop rechts gebied in het uiterlijk > Widgets interface in WordPress.

en in deze tekst Widget kunt u HTML. Hier is de HTML die ik voor deze specifieke site heb gezet. Ik heb gewoon een Facebook-pagina link, Een Twitter link en een telefoonnummer.

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

En hier is de CSS stijl voor de hierboven:

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

Hier is wat er verschijnt aan de rechterkant van het hoofd als gevolg:

Video van het toevoegen van de rubriek info en navigatie menu

In deze video laat ik zien hoe je de widget toevoegen aan de koptekst en hoe om de stijl van het menu in Genesis.

het bovenste navigatiemenu aanmaken

het bovenste navigatiemenu (of “navbars”) was vroeger de vloek van mijn bestaan, maar nu, met Genesis en WordPress menu ‘ s, heb ik een heel eenvoudig systeem ontwikkeld om ze te maken dat seconden in plaats van uren duurt.

Genesis heeft al de mogelijkheid om een primair en secundair navigatiemenu te hebben. Voor dit specifieke voorbeeld, Ik kreeg ontdoen van de secundaire navigatie Menu met behulp van de Genesis Thema-instellingen als de client wilde alleen een.

in de video hierboven laat ik zien hoe ik de CSS aanpas om het menu eruit te laten zien zoals in de PSD visual die ik heb gedaan.

door gebruik te maken van Chrome Developer Tools of de Firebug add-on voor Firefox, kunt u zien welke selectors in de HTML worden gebruikt in de CSS om het menu op te stylen.

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

zoals je kunt zien in de bovenstaande video, heb ik de straal van de afgeronde hoeken vergroot, een gradiëntachtergrond toegevoegd en de randkleur van het menu gewijzigd. Dus nu ziet het menu er niet uit als de saaie grijze die je krijgt met een vanilla Genesis installatie.

ik heb ook de volgende CSS toegevoegd om de kleur van de tekst in het menu te veranderen in Wit.

#nav li a {color: #fff; }

er is ook de mogelijkheid om de stijl van de huidige pagina links, de hover links, de sub-pagina links en de sub-sub-pagina links te veranderen.

met Genesis kunt u gemakkelijk drop-down menu ’s voor subpagina’ s (of dochterpagina ‘s) en vervolgens fly-out links voor sub-subpagina’ s (of kleinkindpagina ‘ s). U kunt deze op zowel de primaire en secundaire navigatie menu ‘ s.

pagina ‘s, kindpagina’ s en kleinkindpagina ’s aanmaken

hier is mijn video waarin ik nieuwe pagina’ s aan het WordPress-menu toevoeg zodat ze in het navigatiemenu verschijnen als pagina ‘s, kindpagina’ s (als drop-downs) en kleinkindpagina ‘ s (als flyouts).

u kunt een pagina kiezen om een kind-of kleinkindpagina te zijn onder ouder in de pagina-editor. En als je kijkt naar de pagina ’s (Onder pagina’ s > alle pagina ‘s) worden de kind-en kleinkindpagina’ s ingesprongen onder hun ouder. Door dit te doen krijgen ze ook een logische URL (bijvoorbeeld www.site.com/music/jazz/charlie-parker waar de pagina “Charlie Parker “een kind is van” Jazz “wat een kind is van”muziek”).

een navigatiemenu aanmaken met drop-downs en fly-outs

om deze pagina ’s correct in het navigatiemenu te laten verschijnen, hoeft u ze alleen maar naar hun respectievelijke positie te slepen in de menu’ s uiterlijk >. Ook hier worden onderliggende pagina ‘ s ingesprongen onder hun ouder. Vergeet niet om het menu een naam te geven (zoals “navbar”, bijvoorbeeld) en stel het in als het primaire navigatiemenu.

dus, pagina ‘ s rangschikken in het WordPress-uiterlijk > Menusgebied als volgt…

… zal een drop-down menu aanmaken met fly-outs zoals deze:

zie de video hierboven voor een demonstratie hiervan.

Wat vindt u?

Wat vindt u van deze methode om de header en het navigatiemenu van een website te bewerken? Doe je het op een andere manier?