Jakten på den perfekta menyn ...

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

Jag bestämde mig för att få Thesis tema , eftersom en av mina klienter informerade 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å Avhandling och verkligen brytt sig om att titta på videor på framsidan av huvudtes plats - Diythemes.com .
Det som imponerade mig mest är uppmärksamhet på detaljer, användarvänlighet och mest av allt - SEO funktioner som är så bra tänkt.
MemberWing medlemskap plugin utformades från grunden för medlemskap webbplatser som skulle behöva dra så mycket SEO juice som möjligt. Så jag betalade massor av uppmärksamhet åt många av SEO förbättringar och fullkomligheter i MemberWing. Många av mina egna kunder ställer frågor om olika teman att använda och ha tema som var så väl SEO optimerad djupt inifrån skulle vara en utmärkt plats för entreprenörer medlemskap portal.

Kombinera SEO befogenheter MemberWing med SEO befogenheter Thesis tema skulle ge det bästa av rangordningen möjligheter till mina kunder. Så jag fick Avhandling och lekte med den för en dag.

Det är ett utmärkt tema på alla sätt. Navigeringen del av det är dock lite begränsad funktion. Från Thesis 1,5 + 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 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 att ha en chans att skapa snygga hierarkiskt organiserade användarvänlig navigeringsmeny är ett måste. Avhandling höger utanför bat har snygg navigering, men jag märkte att alla Tes-baserade webbplatser är ser ut som tvillingar. Anpassa menyn Examensarbete navigering är inte riktigt lätt så de flesta människor bara lämna det som är. Det finns inget sätt att ändra ordningen på kategorierna 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 kunde göras åt det.
Efter att ha provat ungefär halv dussin meny / navigation relaterade plugins jag in mitt val på Wordpress Navigation Lista Plugin NAVT .
NAVT plugin är i huvudsak icke ordnad lista generator med super fint och lite svåra att siffran otraditionella admin-gränssnittet. Vad missvisande om det är att det faktiskt inte skapar fantasi ser menyerna av sig själv. Det gör den svåraste delen av jobbet dock - ger dig en möjlighet att visuellt dra åt samma håll, 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 grejer i navigeringsmenyn: sidor, inlägg, artiklar, kategorier, användare, block kod, externa länkar, avdelare, separatorer och mixa och matcha och häckar och ordna och anpassa dem på något trädliknande struktur du vill.
NAVT genererar för dig resulterat HTML oordnad lista. Andra skönhet NAVT är att det hjälper dig att sätta in din nya menyn i ditt tema via berömda JQuery baserad logik men utan att behöva ändra någon kod! NAVT kan du ange: "Ersätt denna # inslag med min nya NAVT menyn". # Inslag skulle kunna vara ett id eller klass av väg av befintliga menyn eller div-element tagg som genereras av din nuvarande tema. Så NAVT gör detta byte för dig utan tvingar dig att gå in i 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 ska guida dig steg för steg snart. Den utmanande delen av NAVT för alla är att du måste komma med faktiska 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 på rätt sätt får kopplas ihop.
Med vänliga hälsningar utan att veta JQuery + några PHP + CSS + som har hygglig erfarenhet av Wordpress - det här är svårt att dra.
Gärna Jag vet att det grejer 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 navigering menyer 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 deras bästa val, demos och källor.

Jag ägnat en dag för att studera Thesis och leka med NAVT plugin. I slutet skapade jag stolt anpassad, flexibel, SEO optimerad, på flera nivåer, kapslade nagivation struktur för min Wordpress + Thesis baserade webbplats.

Lista över funktioner i flera nivåer, kapslade Wordpress navigation meny 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, däribland MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome i både javascript och icke-JavaScript lägen.
• Graciöst downgradable för icke-JavaScript webbläsare. Du menyn kommer vara användbara, visuellt liknande och arbetar även för JavaScript-inaktiverad webbläsare (om än bara toppnivå navigering kommer att vara synlig och ingen flyouts kommer att hända i kursen som de görs av javascript).
• SEO friendly funktioner - oordnad lista meny kod genereras inom 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 beslut eller sidor, inlägg (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 inte prova dessa dock).
• Meny struktur och innehåll är visuellt justeras via NAVT admin område.
• Kompakt: JQuery baserat flyouts för kapslade nivåer.
• Snabb: jQuery för menyn hämtas från Googles servrar (Jag skulle älska avhandling sig att göra samma sak istället för att dra det lokalt). Det skulle snabba upp saker lite.
• Skalbarhet - Denna typ av menyn är redigerbara 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 för att få det att fungera med Thesis. Även antalet redan existerande sidor, kategorier och inlägg från min sida var vana att montera menystrukturen. Din webbplats detaljerna kommer att vara olika - men koncept kommer att vara densamma.
Så låt gå vidare, ska vi?

Steg för steg instruktioner för att installera NAVT -baserade kapslade, anpassningsbara, flera nivåer, SEO vänlig
och helt enkelt sval sett navigationsmenyn för Wordpress och Thesis Theme

1. Gå till Wordpress admin panel. Plugins-> Lägg till ny, sök på "navt". Insticksprogrammet kommer att visas. Klicka på [Install], [Installera nu], "Aktivera insticksprogram".
2. Verktyg-> NAVT listor, Inside "Navigering Group" område hitta "gruppnamn" och skriver: "menu1" i fältet, tryck på [Skapa] 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.
3. I "tillgångar" område hitta "andra" listboxen och klicka på "Hem" val. "Hem" thingie kommer att visas inne i "lediga" område. Konstigt, va? Inga problem, så länge den fungerar - och det kommer för oss.
4. Dra denna "Hem" 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ådet, samt för kategorier i "kategorier"-området. Dra några andra objekt som du vill vara på din meny insidan "menu1" rektangel. Du kan klicka på sidor, kategorier, användare och vissa anpassade element som "lista avskiljare" och "kodblock". Kodblock är coolt sätt att lägga till egna snippets inne i 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.
   • När du klickar på texten namnet på varje menyalternativ - öppnar sinnesrörelser extra anpassning dialogrutan för denna produkt. Jag använde mestadels standard, men tekniskt kan man bli galen och börja göra bildbaserad menyval och lägga bitar av HTML-kod i den. Fortsätt med försiktighet dock.
   • 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 anpassar sådan punkt kodblock jag gick in för "Menyalternativ alias" = "MemberWing" och "Enter kodblock:" = "<a href='#'> MemberWing </ a>". Efter att ha href = "#" gör det inte klickbar, men fungerar som ett giltigt "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 inte är markerad och "gruppnamn" säger: "menu1"
   2. Gå till "Visa"-fliken och se till att allt på "Visa navigering grupp på ..." området är markerad [x]. Lämna resten på standard.
   3. Gå till "CSS"-fliken och markera alternativknappen (x) "inte gäller CSS-klasser".
   4. Gå till "Tema"-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>
   5. Tryck på [Spara / Stäng]
8. Vid denna punkt menyn byggnaden inifrån NAVT plugin alternativen är klar.
   Nu är det dags att göra lite melodi upp för examensarbete tema för att få den färdig. För att vi behöver lägga till några egna filer - CSS och JavaScript som hör till menyn och uppdatera Avhandling "custom_functions.php
9. Ladda ner den fullständiga uppsättningen filer här .
10. Packa upp arkiv. Om du har uppdaterat din custom_functions.php med dina anpassningar - måste du 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 den 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 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 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 nivåer, kapslade, SEO optimerade menyn.
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å levande plats 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 tema - multilevel kapslade CSS meny - mörk palett

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

Dynamic Drive horisontella 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 kunde göra detta åt dig på ett kontrakt. Välj bara den meny du vill, kontakta mig och jag ska arbeta med kod och instruktioner för din hemsida.

$ 20

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

comments } { 15 kommentarer }