The Quest for den perfekta menyn ...

Detta är del 1 av läraren
Del 2 av denna tutorial lär ut hur man bygger vertikala menyn + mörk färgpalett för den horisontella en

Jag bestämde mig för att få Thesis temat , eftersom en av mina klienter informerade mig om kompatibilitetsproblem mellan Avhandling och min wordpress medlemskap webbplats plugin MemberWing. Jag fixade det och sedan bestämde sig för att ta en närmare titt på Avhandling och faktiskt brytt sig om att titta på video på framsidan av huvudtes site - Diythemes.com .
Det som imponerade mig mest är uppmärksamhet på detaljer, användarvänlighet och mest av allt - SEO funktioner som är så väl tänkt på.
MemberWing medlemskapet plugin ritades från grunden upp för medlemskap webbplatser som skulle behöva dra så mycket SEO juice som möjligt. Så jag betalade massor av uppmärksamhet mångfald av 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 inifrån skulle vara en utmärkt passform för entreprenörer medlemskap portal.

Kombinera SEO befogenheter MemberWing med SEO befogenheter Thesis temat skulle ge det bästa av rang möjligheter att mina klienter. Så jag fick Avhandling och lekte med det för en dag.

Det är en utmärkt tema på alla sätt. Navigeringen del av det är dock lite begränsad funktion. Med utgångspunkt från Examensarbete 1,5 + att det är en nivå menyn bara. Min vanliga önskan är att kunna skräddarsy navigering så mycket som behövs. Vissa webbplatser har bara några sidor, många andra har massor av statiska sidor + zillions av artiklar / tjänster + massor av kategorier.
Så i bästa av världar ha en chans att skapa snygg hierarkiskt organiserade användarvänlig navigation meny är ett måste. Avhandling höger utanför bat har snygg navigering, men jag märkte att alla tes-baserade webbplatser ser ut tvillingar. Anpassa Examensarbete navigeringsmenyn är egentligen inte lätt så de flesta människor bara lämna det som är. Det finns inget sätt att ändra ordningen på kategorier i menyn eller placera dem i mellan sidorna. Och igen, förmågan att skapa kapslade menystrukturer 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 in mitt val av Wordpress Navigation lista Plugin NAVT .
NAVT plugin i huvudsak oordnad lista generator med super fint och lite svår att räkna otraditionellt admin-gränssnittet. Hur vilseledande om det är att det faktiskt inte skapar lust söker menyer av sig själv. Det gör den svåraste delen av arbetet men - ger dig möjligheten att visuellt dra 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 navigationsmenyn: sidor, stolpar, artiklar, kategorier, användare, block kod, externa länkar, avdelare, separatorer och mixa och matcha och häckar och ordna och anpassa dem i valfri trädliknande struktur du vill ha.
NAVT genererar för dig resulterat HTML oordnad lista. Andra skönhet NAVT är att det hjälper dig att infoga din nya menyn i din temat via berömda JQuery baserad logik utan behov av att ändra koden! NAVT kan du ange: "ersätta den här # element med min nya NAVT menyn". # Inslag kan vara ett id eller klass av väg befintlig meny eller div-element tagg som genereras av din nuvarande tema. Så NAVT gör detta ersättning för dig utan tvingar dig att gå in temat kod och göra det mer rörigt än vad det redan är. Om allt detta låter som rappakalja - oroa dig inte - jag guida dig steg för steg inom kort. Den utmanande delen av NAVT för alla är att du måste komma med faktisk CSS + bilder + JavaScript-kod 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 blir sammankopplade.
Med vänliga hälsningar utan att veta JQuery + lite PHP + CSS + med hyfsad erfarenhet av Wordpress - det här är svårt att dra.
Gärna Jag vet det här lite så jag bestämde mig för att bita ihop och guide mänskligheten till frihet att bygga det bästa av de bästa navigeringsmenyerna för Wordpress. Jag behövde bara ta reda på källorna för några snygga horisontella CSS menyer. Jag plockade Dynamic Drive webbplats för sina bästa val, demos och källor.

Jag ägnat 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 + Thesis baserad webbplats.

Förteckning över funktioner i flera nivåer, kapslade Wordpress navigeringsmenyn för Thesis Theme
(Du måste älska det här):

• 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 både javascript och icke-javascript lägen.
• Graciöst downgradable för icke-javascript-webbläsarna. Du menyn kommer att vara användbara, visuellt liknande och arbetar även för javascript-inaktiverade webbläsare (om än bara högsta nivå navigering kommer att vara synlig och inga flyouts kommer att hända förstås, eftersom de görs av javascript).
• SEO användarvänliga funktioner - oordnad lista menyn koden genereras i HTML. Google och andra sökrobotar kommer att kunna indexera din navigering struktur och hitta länkar till inre sidor.
• Stöd för obegränsat antal häckande nivåer och undernivåer.
• Stöd för varje beställning eller sidor, stolpar (via användardefinierade URIs), kategorier, användare, anpassade block kod och externa länkar i menyn.
• Stöd för text-och bildbaserade element menyn. (Jag har ännu att prova dessa dock).
• Meny struktur och innehåll är visuellt justeras via NAVT admin område.
• Kompakt: jQuery baserade flyouts för kapslade nivåer.
• Snabb: jQuery för menyn läses in från Googles servrar (jag skulle vilja avhandlingen att göra detsamma istället för att dra den lokalt). Detta skulle påskynda saker och ting lite.
• Skalbarhet - Den här typen av meny är redigerbar och konfigurerbar när som helst via NAVT plugin inställningar utan något 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-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 användes för att montera menystruktur. Till din sajt närmare detaljerna kommer att vara annorlunda - men koncepten kommer att vara densamma.
Så låt gillas, skall vi?

Steg för steg instruktioner för att installera NAVT -baserade kapslade, customizable, multilevel, SEO friendly
och helt enkelt sval sett navigation meny för Wordpress och Thesis Theme

1. Gå till Wordpress admin panel. Plugins-> Lägg till ny, söker efter "navt". Insticksprogrammet kommer att visas. Klicka på [Install], [Installera nu], "Aktivera insticksprogram".
2. Verktyg-> NAVT listor Inside "Navigation Group" område hitta "gruppnamn" och skriv: "menu1" i fältet, tryck på [Skapa] knappen. "Menu1" rektangeln området blev skapat.
   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.
3. I "tillgångar" område hitta "andra" listboxen och klicka på "Home" val. "Home" thingie visas inuti "lediga" område. Weird, va? Inga problem, så länge som det fungerar - och det kommer för oss.
4. Dra denna "Home" thingie från "tillgångar" området till "menu1" rektangeln område. Det kommer att bli "Hem" i menyn.
   • Upprepa steg 3-4 för några sidor ur "Sidor" område, liksom för kategorierna i "kategorier"-området. Dra alla andra objekt som du vill vara på menyn inne "menu1" rektangel. Du kan klicka på sidor, kategorier, användare och några anpassade element som "listan divider" och "kod block". Kodblock är coolt sätt att lägga till egna strängar inuti menyn.
   • Du kan dra menyalternativ inuti "menu1" område för att ordna sin beställning.
   • Du kan justera hierarkiska positionen för varje menyalternativ med "<" och ">" pilar.
   • Om du klickar på texten namnet på varje menyalternativ - öppnar sinnesrörelser extra anpassning dialogruta för denna produkt. Jag använde mest standard, men tekniskt kan du gå galen och börja göra bild-baserade menyval och lägga bitar av HTML-kod i den. Fortsätt med försiktighet ändå.
   • För linkless unclikable undermenyer som kommer att fungera som "föräldrar" för andra "sub-barn" Jag brukade "Code block"-typ. Till exempel när anpassar sådan punkt kodblock jag kom in på "Menyalternativ alias" = "MemberWing" och för "Enter kodblock:" = "<a href='#'> MemberWing </ a>". Med href = "#" gör det inte klickbara, utan fungerar som en giltig "förälder" menyval.
5. Här är hur min NAVT "menu1" bygga strukturen såg ut nästan färdig:
   
6. Slutför första byggnaden och klicka sedan på "växel" ikonen för att anpassa din meny struktur:
   
7. Det kommer att öppna dialogrutan med 4 flikar: Alternativ, Display, CSS, Tema.
   1. Gå till "Options"-fliken och se till att allt är avmarkerat och "gruppnamn" säger: "menu1"
   2. Gå till "Visa"-fliken och se till att allt på "Visa navigering grupp på ..." område är markerad [x]. Lämna resten på standard.
   3. Gå till "CSS"-fliken och välj knappen (x) "gäller inte CSS-klasser".
   4. Gå till "Tema"-fliken och fyll i så 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>
   5. Tryck på [Spara / Stäng]
8. Vid denna punkt meny byggnad inifrån NAVT plugin optioner är fullbordad.
   Nu är det dags att göra lite tune upp för examensarbete temat för att få den klar. För att vi måste lägga till några egna filer - CSS och javascript som hör till menyn och uppdatera Thesis "custom_functions.php
9. Ladda ner den fullständiga uppsättningen filer här .
10. Packa arkiv. 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 rört det - gärna skriva det med mina. Observera: Jag föredrog att placera menyn under webbplatsen huvudet (standard är ovan) - så min inställning ingår denna inställning också.
11. Ladda upp arkivera inklusive alla underkataloger och filer under din uppsats 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 menyn-specifik CSS under sina egna platser för att undvika att skapa oreda inuti custom.css
12. På denna punkt kan du ladda din hemsida och se nya vackra nya multilevel, kapslade, SEO optimerad meny.
13. 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örk menyn skulle se ut:

Examensarbete theme - multilevel kapslade CSS meny - mörk paletten

Jag tycker att det är ganska trevligt. Det finns många fler navigering prover som finns på Dynamic Drive - alla av dem är möjliga att anpassa för examensarbete och andra Wordpress teman med viss ansträngning:

Dynamic Drive Övergripande menyer

Jag hoppas att 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 - som ges tid och lust att få det att hända.

Jag skulle kunna göra detta arbete för dig på ett kontrakt. Bara plocka den meny du vill, kontakta mig och jag ska arbeta på koden och instruktioner för din webbplats.

$ 20

Och naturligtvis om du håller på med att bygga super SEO optimerad premium WordPress medlemskap portal - den bästa lösningen för detta:
Examensarbete Theme + MemberWing medlemskapet plugin + egen värd Wordpress förstås.

Taggad som: CSS meny för wordpress , examensarbete tema , avhandlingen tema hierarkiska menyer , avhandlingen tema multilevel menyn , avhandlingen tema nagivation , avhandlingen tema kapslade menyer , avhandlingen temat handledning , wordpress css meny , wordpress kapslade menyn