Jakten på den perfekta menyn ...
Detta är del 1 av handledning
Del 2 av den här guiden lär dig hur man bygger vertikala meny + mörk färgpalett för de horisontella ett
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 beslutat att ta en närmare titt på Avhandling och verkligen brytt sig om att titta på video på första sidan i huvudtes plats - Diythemes.com.
Det som imponerade mig mest är uppmärksamhet på detaljer, användarvänlighet och framför allt - SEO funktioner som är så bra tänkt.
MemberWing medlemskap plugin utformades från grunden för medlemskap i klubben som skulle behöva dra lika mycket SEO saft som möjligt. Så jag betalade massor av uppmärksamhet på många SEO förbättringar och fullkomlighet i MemberWing. Många av mina egna kunder ställer frågor om olika teman att använda och har tema som blev så bra SEO optimerad inifrån skulle vara en utmärkt plats för medlemskap portal företagare.
Kombinera SEO befogenheter MemberWing med SEO befogenheter Thesis tema skulle ge det bästa av rangordningen möjligheter till mina klienter. Så jag fick Avhandling och lekte med det för en dag.
Det är ett utmärkt tema på alla sätt. Den navigering del av det är dock lite begränsad funktion. Från Thesis 1,5 + det är en nivå meny bara. Min vanliga önskan är att kunna anpassa navigeringen så mycket som behövs. Vissa har bara några sidor, många andra har massor av statiska sidor + zillions av varor / tjänster + massor av kategorier.
Så i bästa av världar har en chans att skapa snygg hierarkiskt ordnade användarvänlig navigation menu är ett måste. Avhandling höger utanför bat har snygga navigering men jag märkte att alla Thesis-baserade webbplatser som ser ut som tvillingar. Anpassa Thesis navigeringsmenyn är inte riktigt enkelt så de flesta människor bara lämna det som det är. Det finns inget sätt att ändra ordning på 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 halvdussin menyn / navigeringen relaterade plugins jag mitt val på Wordpress Navigation List Plugin NAVT.
NAVT plugin är huvudsakligen oordnad lista generator med super fantasi och lite svåra att figur otraditionella admin-gränssnittet. Vad vilseledande om den är att det egentligen inte skapar lust ser menyerna själv. Det är den svåraste delen av job though - ger dig möjligheten att visuellt samla och generera oordnad lista - skelett av din meny-till-vara. Och du kan skapa många menyerna också. Du kan dra alla typer av Wordpress saker i navigeringsmenyn: sidor, tjänster, artiklar, kategorier, användare, block kod, externa länkar, passare, separatorer och mixa och matcha och bo och arrangera och skräddarsy dem i alla trädstruktur dig brist.
NAVT genererar för dig resulterade HTML oordnad lista. Andra skönhet NAVT är att det hjälper dig att sätta in nya menyn i ditt tema via berömda JQuery baserad logik utan att behöva ändra någon kod! NAVT kan du ange: "Ersätt denna # element med min nya NAVT menyn". # element kan vara ett id klass eller bana befintliga menyn eller div element tagg som alstras av din aktuella tema. Så NAVT betyder ersättning för dig utan att tvinga dig att gå in i tema-nummer och göra det mer krångligt än det redan är. Om allt detta 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-kod för din menyn 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.
Sincerely 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 leda mänskligheten till frihet att bygga det bästa av det bästa navigeringsmenyerna för Wordpress. Jag behövde bara ta reda på källor för några snygg horisontell CSS menyer. Jag plockade Dynamic Drive webbplats för deras bästa val, demos och källor.
Jag ägnade en dag för att studera Avhandling och leka med NAVT plugin. I slutet skapade jag stolt anpassade, flexibla, SEO optimerad, multilevel, kapslade nagivation struktur för min Wordpress + baserat Thesis webbplats.
Lista över funktioner i flera nivåer, kapslade Wordpress navigeringsmenyn för Examensarbete Tema
(Du måste älska det här):
- Professionella, rent utseende och känsla.
- Stöd för alla moderna webbläsare, inklusive MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome både javascript och icke-javascript lägen.
- Graciöst downgradable för icke-javascript browsers. Du menyn kommer att vara användbar, visuell likhet och arbetar även för javascript funktionshindrade webbläsare (om än bara top level navigeringen kommer att vara synlig och ingen flyouts händer naturligtvis eftersom de görs av javascript).
- SEO friendly features - icke ordnad lista menyn koden skapas i HTML. Google och andra sökrobotar motorn kommer att kunna indexera din navigering struktur och hitta länkar till inre sidor.
- Stöd för obegränsat kapsling 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).
- Menystrukturen och innehåll är visuellt kan justeras via NAVT admin område.
- Kompakt: jQuery baserad flyouts för kapslade nivåer.
- Fast: jQuery för menyn laddas från Googles servrar (I'd love Thesis sig att göra samma sak i stället för att dra lokalt). Detta skulle påskynda det hela lite.
- Skalbarhet - Denna typ av meny är redigerbara och konfigureras som helst via NAVT plugin inställningar utan något behov av kodning någonstans.
Jag använde denna utmärkta meny från Dynamic Drive portal som bas. Jag var tvungen att anpassa javascript-kod lite samt omfatta bit av PHP i custom_functions.php att få det att fungera med Thesis. Även antalet befintliga sidor, kategorier och inlägg från min sida har använts för att samla menystruktur. Din webbplats närmare detaljerna kommer att vara annorlunda - utan begrepp 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 navigeringsmenyn för Wordpress och Thesis Theme
- Gå till Wordpress admin panel. Plugins-> Lägg till nya, sök efter "navt". Insticksprogrammet visas. Klicka på [Install], [Installera nu], "Aktivera Plugin".
- Verktyg-> NAVT listor Inside "Navigation gruppen" område finner "gruppen" och skriver: "menu1" i fältet, tryck på [Skapa] knappen. "Menu1" rektangel området har skapats.
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" area hitta "andra" listan och klicka på "Hem" val. "Home" thingie visas inuti "otilldelad" område. Weird, eh? 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 bli "hem" i menyn.
- Upprepa steg 3-4 för några sidor ur "Sidor" område, liksom för kategorierna i "kategorier" område. Dra några andra saker du vill vara på menyn inne "menu1" rektangel. Du kan klicka på sidor, kategorier, användare och vissa delar anpassade till exempel "lista divider" och "kod block". Kodblock är häftiga sättet att lägga till anpassade strängar inne i menyn.
- Du kan dra menyalternativ inne "menu1" område för att arrangera sin beställning.
- Du kan justera hierarkiska position varje menyobjekt med "<" och ">" pilar.
- Klicka på text namn på varje menyobjekt - öppnar sinne boggling extra customization dialogruta för denna artikel. I huvudsak används som standard, men tekniskt man kan bli galen och börja göra bildbaserade menyval och lägg bitar av HTML-kod i den. Fortsätt med försiktighet though.
- För linkless unclikable undermenyer som kommer att fungera som "föräldrar" för andra "sub-barn" Jag använde "Code block" typ. Till exempel när anpassar sådan punkt kodblock jag in för "Menypost alias" = "MemberWing" och "Enter kodblock:" = "<a href='#'> MemberWing </ a>". Ha href = "#" gör det inte klickbar utan fungerar som ett giltigt "förälder" menyvalet.
- Här är hur min NAVT "menu1" bygga struktur liknade nästan färdig:
- Mål ursprungliga byggnaden och klicka sedan på "redskap"-ikonen för att anpassa din meny struktur:
- Det kommer att öppna dialogrutan med 4 flikar: Alternativ, Display, CSS, Tema.
- Gå till "Options"-fliken och kontrollera att allting är markerad och "gruppnamn" säger: "menu1"
- Gå till "Visa"-fliken och se till att allt på "Visa navigering grupp på ..." område är markerad [x]. Låt vila i standardinställningarna.
- Gå till "CSS" fliken och välj knappen (x) "Använd inte CSS-klasser".
- Gå till "Theme" fliken och fyll i det som att:
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 [spara / stäng] knappen
- Vid denna punkt menyn byggnaden inifrån NAVT plugin alternativ är klar.
Nu är det dags att göra en liten melodi upp för Thesis tema för att få det färdigt. För att vi behöver lägga till några anpassade filer - CSS och javascript som tillhör 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 dina anpassningar - du behöver för att slå samman dem med mina grejer. Jag lämnar det upp till dig.
Om du inte har berört det - välkommen att skriva över med mitt. Observera: Jag föredrar att placera menyn under rubriken webbplats (standard är ovan) - så min justeringen omfattade denna preferens också. - Ladda upp arkiv inklusive alla underkataloger och filer i ditt Thesis temat "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-specifika CSS enligt deras egna platser för att undvika att skapa oreda inuti custom.css - På denna punkt kan du ladda din webbplats och se nya vackra nya multilevel, kapslade, SEO optimerad menyn.
- Du kan alltid gå tillbaka till NAVT inställningar och anpassa din meny med fler val eller flytta något. Det kommer att visas 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 att se hur mörk menyn skulle se ut:
Thesis tema - multilevel kapslade CSS meny - mörk palett
Jag tycker det är ganska trevligt. Det finns många fler brygga prover finns på Dynamic Drive - alla är möjliga att anpassa för examensarbeten och andra Wordpress teman med viss ansträngning:
Dynamic Drive Horizontal Menus
Jag hoppas att du hittar den här guiden nyttiga och användbara. Som jag sa, är det möjligt att anpassa alla dessa menyer för Examensarbete - som ges tid och lust att göra detta möjligt.
Jag kunde göra detta åt dig på uppdragsbasis. Välj bara den meny du vill kontakta mig och jag kommer att arbeta med kod och instruktioner för din webbplats.
$ 20
Och naturligtvis om du fram till byggnaden super SEO optimerad premium portal wordpress medlemskap - den bästa lösningen för detta:
Examensarbete Tema + MemberWing medlemskap plugin + Egen värd Wordpress naturligtvis.
