• Articles
• admin

varje WordPress-webbplats är annorlunda. Detta beror på att alla väljer ett annat tema eller” utseende ” för sin webbplats. Att skapa en rubrik och toppnavigeringsmeny i WordPress kommer att vara en något annorlunda process för varje webbplats.

här använder jag Genesis theme framework för WordPress eftersom jag absolut älskar det. Det kommer dock att finnas viktiga punkter i den här artikeln som hjälper alla med en WordPress-webbplats.

detta är en del av en serie artiklar och videor där jag skapar en webbplats från grunden. Jag förklarade först hur man gör ett barntema för Genesis framework och sedan skrev jag om att börja utforma temat genom att lägga till bakgrunden och logotypen.

lägga till Facebook-länk, Twitter-Länk och annan information i rubriken

efter att ha lagt till logotypen längst upp till vänster på vår webbplats, lägger vi nu till lite extra information till höger om vår rubrik. I det här fallet lägger vi till Twitter-och Facebook-länkar etc., genom en widget.

jag måste erkänna att jag har blivit lite widget galen nyligen, efter att ha varit lite avvisande av dem tidigare. Vad är en widget? Tja, de är fristående bitar av en webbplats som du kan dra runt och styra via ett lättanvänt widgetområde.

en av de många skönheterna i Genesis är att det är enkelt att widgetize något område på webbplatsen. Så:

• om du vill ha en annan ordning av rutor på sidofältet kan du göra det på några sekunder.
• om du vill ha ett utvalt inlägg här, 5 senaste kategorirubriker med miniatyrer där på Hemsidan, kan du göra det på några sekunder.
• om du vill ha en sökfält, social delning, Twitter-flöde, kalender, taggmoln etc., här, där eller var som helst, du kan göra det på några sekunder.

denna intuitiva, lättanvända back-end-funktionalitet är särskilt användbar när du skapar webbplatser för kunder som vill ha möjlighet att kontrollera alla delar av en webbplats men saknar färdigheter att göra detta.

hur som helst, i det här fallet måste vi skapa vår egen anpassade widget och vi gör det genom att dra över en Text Widget till Header rätt område i utseendet > Widgets gränssnitt i WordPress.

och i den här Textwidgeten kan du lägga HTML. Här är HTML jag satte för just denna webbplats. Jag har bara en Facebook-sida Länk, en Twitter Länk och ett 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>

och här är CSS för att utforma ovanstående:

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

här är vad som visas på höger sida av huvudet som ett resultat:

Video för att lägga till rubrikinfo och navigeringsmeny

i den här videon visar jag hur man lägger till widgeten i rubriken och hur man utformar menyn i Genesis.

skapa toppnavigeringsmenyn

Toppnavigeringsmenyer (eller” navbars”) brukade vara banan i min existens men nu, med Genesis och WordPress-menyer, har jag utvecklat ett riktigt enkelt system för att skapa dem som tar sekunder i motsats till timmar.

Genesis har redan möjlighet att ha en primär och sekundär navigeringsmeny. För det här exemplet blev jag av med den sekundära navigeringsmenyn med hjälp av Genesis-temainställningarna, eftersom klienten bara ville ha en.

i videon ovan visar jag hur jag ändrar CSS för att få menyn att se ut som den i PSD-visuella jag gjorde.

genom att använda Chrome Developer Tools eller Firebug-tillägget för Firefox kan du se vilka väljare i HTML som används i CSS för att utforma menyn.

#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 ovanstående video ökade jag radien för de rundade hörnen, lade till en lutningsbakgrund och ändrade menyens kantfärg. Så nu ser menyn inte ut som den tråkiga grå du får med en vanilla Genesis-installation.

jag lade också till följande CSS för att ändra färgen på texten i menyn till vit.

#nav li a {color: #fff; }

det finns också möjlighet att ändra stilen på de aktuella sidlänkarna, svänglänkarna, undersidans länkar och undersidans länkar.

med Genesis kan du enkelt ha rullgardinsmenyer för undersidor (eller Barnsidor) och sedan flyga ut länkar för undersidor (eller barnbarnssidor). Du kan ha dessa på både primära och sekundära navigeringsmenyer.

skapa sidor, Barnsidor och barnbarnssidor

här är min video där jag lägger till nya sidor i WordPress-menyn så att de visas i navigeringsmenyn som sidor, Barnsidor (som rullgardiner) och barnbarnssidor (som flyouts).

du kan välja en sida som ska vara barn-eller barnbarnssida under förälder i sidredigeraren. Och när du tittar på sidorna (under sidorna > alla sidor) är barn-och barnbarnssidorna indragna under sin förälder. Att göra detta kommer också att ge dem en logisk URL (till exempel www.site.com/music/jazz/charlie-parker där sidan ”Charlie Parker” är ett barn av ”Jazz” som är ett barn av ”musik”).

skapa en navigeringsmeny med rullgardiner och fly-outs

för att få dessa sidor att visas i navigeringsmenyn korrekt måste du bara dra och släppa dem till sina respektive positioner i utseende > menyer. Återigen är Barnsidor indragna under sin förälder. Glöm inte att ge menyn ett namn (som ”navbar”, till exempel) och ställ in det som den primära navigeringsmenyn.

så, ordna sidor i WordPress utseende > menyer område så här…

… kommer att skapa en rullgardinsmeny med fly-outs så här:

se videon ovan för en demonstration av detta.

vad tycker du?

vad tycker du om den här metoden för att redigera sidhuvudet och navigeringsmenyn på en webbplats? Gör du det på ett annat sätt?