Jakten på den perfekta menyn ...
Detta är del 1 av handledning
Del 2 av denna tutorial lär hur man bygger en vertikal meny + mörk färgpalett för den horisontella en
Jag bestämde mig för att få Examensarbete tema , eftersom en av mina klienter informerat mig om kompatibilitetsproblem mellan avhandling och min wordpress medlemskap webbplats plugin MemberWing. Jag fixade det och sedan beslöt att ta en närmare titt på avhandlingen och faktiskt brydde sig om att titta på video på första sidan av huvudtes plats - Diythemes.com .
Det som imponerade mig mest är uppmärksamhet på detaljer, användarvänlighet och mest av allt - har SEO som är så väl tänkt på.
MemberWing medlemskap plugin utformades från grunden för medlemskap i klubben som skulle behöva dra så mycket SEO juice som möjligt. Så jag betalat massor av uppmärksamhet på många SEO förbättringar och fullkomlighet i MemberWing. Många av mina egna kunder frågar om olika teman att använda och har tema som var så bra SEO optimerad från djupt inne skulle vara en utmärkt plats för medlemskap portal företagare.
Kombinera SEO befogenheter MemberWing med SEO befogenheter Examensarbete tema skulle vara den bästa av rangordningen möjligheter att mina kunder. Så jag fick avhandling och lekte med det för en dag.
Det är ett utmärkt tema på alla sätt. Navigeringen del av det är dock lite begränsad i funktion. Från Examensarbete 1,5 + är det en nivå meny. Min vanliga önskan är att kunna anpassa navigering så mycket som behövs. Vissa har bara några få sidor, många andra har massor av statiska sidor + zillions av artiklar / tjänster + massor av kategorier.
Så i bästa av världar har en chans att skapa snygg hierarkiskt organiserad användarvänlig navigeringen är ett måste. Avhandling höger utanför bat har snygga navigering men jag märkte att alla Examensarbete-baserade webbplatser ser som tvillingar. Anpassa Examensarbete navigeringsmenyn egentligen inte är lätt så de flesta bara lämna det som det är. Det finns inget sätt att ändra ordning kategorier i menyn eller placera dem i mellan sidorna. Och återigen, är förmågan att skapa kapslade menyn strukturer saknas. Så jag bestämde mig för att se vad som kan göras åt det.
Efter att ha provat ungefär halv dussin meny / navigation relaterade plugins jag mitt val på Wordpress Navigation List Plugin NAVT .
NAVT plugin i huvudsak oordnad lista generator med super fint och lite svåra att siffran otraditionella admin-gränssnittet. Vad vilseledande om det är att det faktiskt inte skapar tycke ser menyerna av sig själv. Det gör den svåraste delen av jobbet men - ger dig en möjlighet att visuellt samla ihop, och generera oordnad lista - skelett av din meny-till-vara. Och du kan skapa många menyer också. Du kan dra alla typer av Wordpress saker i navigeringsmenyn: sidor, inlägg, artiklar, kategorier, användare, kodblock, externa länkar, avdelare, separatorer och mixa och matcha och boet och ordna och anpassa dem i valfri trädstruktur du vill.
NAVT genererar för dig gav HTML oordnad lista. Andra skönhet NAVT är att det hjälper dig att lägga till din nya meny i ditt tema via berömda JQuery baserad logik utan behöver ändra någon kod! NAVT kan du ange: "Ersätt denna # del med min nya NAVT menyn". # Faktor kan ett id eller klass av väg befintlig meny eller div-element tagg som genereras av din nuvarande tema. Så NAVT gör detta byte för dig utan att tvinga dig att gå in i temat kod och göra det mer rörigt än det redan är. Om att alla låter som rent nonsens - oroa dig inte - jag hjälper dig steg för steg snart. Den utmanande delen av NAVT för alla är att du måste komma med konkreta CSS + bilder + javascript koden för din meny själv. Och det är upp till dig att räkna ut var och hur man kan integrera dessa filer och göra det här ordentligt få sammankopplade.
Med vänliga hälsningar utan att veta JQuery + några PHP + CSS + med anständig erfarenhet av Wordpress - det här är svårt att dra.
Gärna Jag vet att det här lite så jag bestämde mig för att bita ihop och vägleda mänskligheten till frihet att bygga det bästa av det bästa navigeringsmenyer för Wordpress. Jag behövde bara ta reda på källorna för några fina horisontella CSS menyer. Jag plockade Dynamic Drive hemsida för deras bästa val, demos och källor.
Jag ägnat en dag för att studera avhandling och leka med NAVT plugg. I slutet skapade jag stolt anpassade, flexibla, SEO optimerad, multilevel, kapslade Nagivation struktur för min Wordpress + avhandling baserad webbplats.
Lista över funktioner i flera nivåer, nästlade Wordpress navigeringen för Examensarbete Tema
(Du måste älska den här material):
- Professional, rent utseende och känsla.
- Stöd för alla moderna webbläsare, inklusive MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome i både javascript och icke-javascript transportsätt.
- Graciöst downgradable för icke-javascript webbläsare. Du menyn kommer att vara användbart, visuell likhet och arbetar även för javascript funktionshindrade webbläsare (om än bara på högsta nivå navigering kommer att vara synlig och ingen flyouts händer naturligtvis eftersom de görs av javascript).
- SEO friendly funktioner - oordnad lista meny koden genereras inom HTML. Google och andra sök spindlar motor kommer att kunna indexera din navigering struktur och hitta länkar till inre sidor.
- Stöd för obegränsat häckande nivåer och sublevels.
- Stöd för varje order eller sidor, tjänster (via användardefinierade URI: er), kategorier, användare, anpassad kod block och externa länkar i menyn.
- Stöd för text-och bildbaserade menyn element. (Jag har ännu inte prova dessa dock).
- Meny struktur och innehåll är visuellt kan justeras via NAVT admin område.
- Kompakt: JQuery baserad flyouts för kapslade nivåer.
- Snabb: jQuery för menyn laddas från Googles servrar (Jag vill gärna Examensarbete sig att göra detsamma istället för att dra det lokalt). Detta skulle påskynda saker och ting lite.
- Skalbarhet - Den här typen av meny är redigerbara och konfigurerbar som helst via NAVT plugin inställningar utan behov av kodning någonstans.
Jag använde detta utmärkta meny från Dynamic Drive portal som bas. Jag var tvungen att anpassa javascript lite samt omfatta bit av PHP i custom_functions.php att få det att fungera med uppsats. Även antalet befintliga sidor, kategorier och inlägg från min sida har använts för att samla menystruktur. Din webbplats Specifikt kommer att skilja sig - men koncept kommer att vara densamma.
Så låt gå, ska vi?
Steg för steg-instruktioner för att installera NAVT -baserade kapslade, anpassningsbara, multilevel, SEO friendly
och helt enkelt göra sval sett navigeringen för Wordpress och Thesis Theme
- Gå till Wordpress admin panel. Plugins-> Lägg till ny, sök efter "navt". Insticksprogrammet kommer att visas. Klicka på [Install], [Installera nu], "Aktivera insticksprogram".
- Verktyg-> NAVT Listor, Inside "Navigering gruppen" område hitta "Gruppens namn" och skriver: "menu1" i fältet, tryck på [Create]-knappen. "Menu1" rektangel område fick skapas.
Denna "menu1" område kommer att vara den viktigaste lekplatsen för meny konstruktion. Du kommer att dra och släppa här din meny element. - I "tillgångar" område hitta "andra" listan och klicka på "Home" val. "Home" thingie visas inuti "otilldelad" område. Konstigt, va? Inga problem, så länge det fungerar - och det kommer för oss.
- Dra "Home" thingie från "tillgångar" området till "menu1" rektangel område. Det kommer att bli "Hem" i menyn.
- Upprepa steg 3-4 för några sidor ur "Sidor" område, samt för kategorierna i "kategorier" område. Dra alla andra objekt som du vill vara på din meny insidan "menu1" rektangel. Du kan klicka på sidor, kategorier, användare och vissa anpassade delar såsom "lista divider" och "kod block". Kodblock är cool sätt att lägga till egna utdrag inne i menyn.
- Du kan dra menyalternativ inuti "menu1" område att ändra sina beslut.
- Du kan justera hierarkisk position varje menyobjekt med "<" och ">" pilar.
- Genom att klicka på texten namnet på varje menyobjekt - öppnar sinnet boggling extra anpassning dialogrutan för denna artikel. Jag använde mestadels standard, men tekniskt kan man bli galen och börja göra bildbaserade menyval och tillsätt bitar av HTML-kod in i den. Fortsätt med försiktighet ändå.
- För linkless unclikable undermenyer som ska fungera som "föräldrar" för andra "sub-barn" Jag använde "Code block" typ. Till exempel när du anpassar en sådan post kodblock jag gick in för "Menyalternativ alias" = "MemberWing" och "Enter kodblock:" = "<a href='#'> MemberWing </ a>". Efter att ha href = "#" gör det inte klickbara utan fungerar som en giltig "förälder" menyvalet.
- Så här mitt NAVT "menu1" bygga struktur såg ut nästan färdig:
- Slutför ursprungliga byggnaden och klicka sedan på "redskap"-ikonen för att anpassa din meny struktur:
- Det kommer att öppna dialogrutan med fyra flikar: Alternativ, Visa, CSS, Tema.
- Gå till "Options"-fliken och kontrollera att allt är avmarkerad och "gruppnamn" säger: "menu1"
- Gå till "Visa"-fliken och se allting på "Visa navigering grupp på ..." område är markerad [x]. Låt vila på standard.
- Gå till "CSS" fliken och välj knappen (x) "Använd inte CSS-klasser".
- Gå till "Tema" fliken och fylla i på det sättet:
Sätt in i "Lägg till taggar före ..." område denna kod:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Sätt in i "Lägg till taggar efter ..." område denna kod:
<br style='clear: left' /></div> - Tryck på [Spara / stäng]-knappen
- På denna punkt meny byggnaden inifrån NAVT plugin alternativ är klar.
Nu är det dags att göra lite stämma upp för Examensarbete tema för att få den färdig. För att vi måste lägga till några egna filer - CSS och Javascript som hör till menyn och uppdatera avhandlingen custom_functions.php - Ladda ner den kompletta uppsättning filer här .
- Unzip arkivet. Om du har uppdaterat din custom_functions.php med anpassningar du - du måste slå samman dem med mina grejer. Jag lämnar det upp till dig.
Om du inte har berört det - känn dig fri att skriva över med mitt. Observera: Jag föredrar att placera menyn under rubriken webbplats (standard är ovan) - så min justeringen omfattade denna inställning också. - Ladda upp arkiv inklusive alla underkataloger och filer under din uppsats tema "anpassad" katalog, så här:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Jag har inte rört custom.css - Jag föredrar att hålla meny-specifik CSS under sina egna platser för att undvika att skapa oreda inuti custom.css - Vid detta tillfälle kan du ladda din webbplats och se nya vackra nya nivåer, nästlade, SEO optimerade menyn.
- Du kan alltid gå tillbaka till NAVT inställningar och anpassa din meny med fler val eller flytta något. Det kommer att återspeglas på den aktiva webbplatsen automatiskt.
Vägen framåt ...
Denna handledning ingår kreativa exempel på en typ av meny. Jag spelade med en annan - bara för att se hur mörkt färgade menyn skulle se ut:
Examensarbete tema - multilevel kapslade CSS meny - mörk paletten
Jag tycker det är ganska trevligt. Det finns många fler navigeringsinstrument prover finns på Dynamic Drive - alla av dem är möjligt att anpassa för examensarbeten och andra Wordpress teman med viss ansträngning:
Dynamic Drive Horisontella menyer
Jag hoppas du hittar den här guiden nyttiga och användbara. Som jag sa är det möjligt att anpassa någon av dessa menyer för examensarbete - det är få tid och lust att få det att hända.
Jag kunde göra detta åt dig på ett kontrakt. Välj bara menyn du vill kontakta mig så ska jag arbeta med kod och instruktioner för din webbplats.
$ 20
Och naturligtvis om du känner att bygga super SEO optimerad medlemskap Premium Wordpress portal - den bästa lösningen för detta:
Examensarbete Theme + MemberWing medlemskap plugin + egen värd Wordpress förstås.
