The Quest for den perfekte menu ...

Dette er del 1 af selvstudiet
Del 2 af denne tutorial lærer, hvordan man opbygger lodret menu + mørk farvepalet til de horisontale en

Jeg besluttede at få Thesis tema, fordi en af mine kunder informeret mig om kompatibilitetsproblemer mellem Thesis og mit wordpress medlemskab websted plugin MemberWing. I fixed it og besluttede derefter at tage et nærmere kig på Thesis og faktisk gidet at se videoer på forsiden af de vigtigste Thesis site - Diythemes.com.
Hvad imponerede mig mest, er opmærksom på detaljer, brugervenlighed og mest af alt - SEO funktioner, der er så godt tænkt.
MemberWing medlemskab plugin blev designet fra bunden til medlemskab websteder, der ville være nødvendigt at trække så meget SEO saft som muligt. Så jeg betalte masser af opmærksomhed på mange af SEO ekstraudstyr og Fuldkommenheder i MemberWing. Mange af mine egne kunder spørger om forskellige temaer at bruge og har tema, der var så godt SEO optimeret fra inderst inde ville være en glimrende egnet til medlemskab af portalen iværksættere.

Ved at kombinere SEO beføjelser MemberWing med SEO beføjelser Thesis tema vil give de bedste placering muligheder til mine klienter. Så jeg fik Thesis og legede med den for en dag.

Det er et glimrende tema på alle måder. Navigationen del af det selv er en smule begrænset i funktion. Startende fra Thesis 1.5 + det er en plan menu alene. Min sædvanlige ønske er at være i stand til at tilpasse navigation så meget som nødvendigt. Nogle steder har kun nogle få sider, mange andre har tonsvis af statiske sider + zillions af artikler / stillinger + masser af kategorier.
Så i ideel verden, der har en chance for at skabe flot hierarkisk organiseret brugervenlig navigation menu er et must. Afhandling ret off the bat har flot sejlads, men jeg bemærket, at alle Speciale-baserede websites er at ligne tvillinger. Tilpasning Thesis navigationsmenu er faktisk ikke nemt så de fleste mennesker bare lade det være som det er. Der er ingen måde at ændre rækkefølgen af kategorierne i menuen eller placere dem i mellem siderne. Og igen, er evnen til at skabe indlejrede menustrukturer mangler. Så jeg besluttede at se, hvad der kunne gøres ved det.
Efter at have prøvet halv snes menu / navigation relaterede plugins jeg sætte mit valg på Wordpress Navigation Liste Plugin NAVT.
NAVT plugin er væsentlige uordnet liste generator med super smarte og en smule svære at tallet utraditionelt admin interface. Hvad vildledende om det er, at det faktisk ikke oprette smarte menuer ud af sig selv. Det er den sværeste del af arbejdet selv - giver dig en evne til visuelt at trække sammen, og generere uordnet liste - skelet af din menu-til-være. Og du kan skabe mange menuer også. Du kan trække alle slags Wordpress ting i navigationsmenuen: sider, indlæg, artikler, kategorier, brugere, kode blokke, eksterne links, dividers, separatorer og mix and match og reden og arrangere og tilpasse dem i en træ-lignende struktur, du vil.
NAVT genererer til dig resulterede HTML uordnet liste. Anden skønhed NAVT er, at det hjælper dig til at indsætte dit nye menu til dit tema via berømte JQuery baseret logik, men uden behov for at ændre en kode! NAVT giver dig mulighed for at angive: "# erstatte dette element med min nye NAVT menuen". # element kan være et id eller klasse af sti af eksisterende menu eller div element tag, der bliver genereret af din aktuelle tema. Så NAVT gør denne udskiftning for dig uden at tvinge dig til at gå ind i tema-kode og gøre det mere rodet end det allerede er. Hvis det ikke alle lyder som volapyk - ikke bekymre dig - jeg vil guide dig trin for trin snart. Den udfordrende del af NAVT for alle er, at du bliver nødt til at komme med konkrete CSS + billeder + javascript-kode til din menu dig selv. Og det er op til dig at finde ud af, hvor og hvordan man kan integrere disse filer og gøre det her ordentligt få sluttet sammen.
Med venlig hilsen, uden at vide JQuery + nogle PHP + CSS + have anstændigt erfaring med Wordpress - denne ting er svært at trække.
Gerne Jeg ved det her en smule, så jeg besluttede at bide i prik og lede menneskeheden til frihed i opbygningen af det bedste af det bedste navigations-menuer til Wordpress. Jeg har lige brug for at finde ud af kilder til nogle flot horisontale CSS-menuer. Jeg plukkede dynamisk drive hjemmesiden for deres bedste valg, demoer og kilder.

Jeg afsat en dag til at studere Thesis og lege med NAVT plugin. Ved udgangen jeg stolt oprettet tilpassede, fleksible, optimeret SEO, multilevel, indlejret nagivation struktur for mit Wordpress + Thesis baseret site.

Liste over funktioner i flere niveauer, indlejrede Wordpress navigationsmenu til Thesis Tema
(du kom til at elske det her):

• Professionelt, rent udseende.
• Støtte til alle moderne browsere, herunder MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome i både javascript og ikke-JavaScript transportformer.
• Yndefuldt downgradable for ikke-JavaScript-browsere. Du menu vil være anvendelige, visuel lighed og arbejder selv for javascript handicappede browsere (omend kun på øverste niveau navigation vil være synlig, og ingen flyouts sker naturligvis som de er fremstillet af javascript).
• SEO friendly features - uordnet liste menu-koden genereres i HTML. Google og andre søgemaskinespiders vil være i stand til at indeksere din navigation struktur og finde links til indvendige sider.
• Støtte til ubegrænset redebygning niveauer og sublevels.
• Støtte til hvilken som helst rækkefølge eller sider, stillinger (via bruger defineret URI'er), kategorier, brugere, brugerdefineret kode blokke og eksterne links i menuen.
• Support af tekst-og billed-baserede menu elementer. (Jeg har endnu til at prøve disse selv).
• Menu struktur og indhold er visuelt kan justeres via NAVT admin område.
• Kompakt: JQuery baseret flyouts for indlejrede niveauer.
• Hurtig: JQuery for menuen er indlæst fra Google-servere (Jeg ville elske Thesis sig til at gøre det samme i stedet for at trække det lokalt). Dette vil fremskynde tingene en smule.
• Skalerbarhed - Denne type af menu er redigerbare og konfigureres til enhver tid via NAVT plugin indstillinger uden brug af kodning overalt.

Jeg brugte denne fremragende menu fra dynamiske drive portalen som en base. Jeg var nødt til at tilpasse JavaScript-koden en smule, ligesom der indgår luns af PHP i custom_functions.php til at gøre det arbejde med Thesis. Også antallet af præ-eksisterende sider, kategorier og indlæg fra min side blev brugt til at samle menustrukturen. Dit websted detaljerne vil være anderledes - men begreber vil være den samme.
Så lad gå videre, skal vi?

Trin for trin instruktioner til opsætning af NAVT-baserede indlejrede, tilpasses, multilevel, SEO friendly
og bare almindeligt afkøle ser navigationsmenu til Wordpress og Thesis Tema

1. Gå til Wordpress admin panel. Plugins-> Tilføj ny, søg efter "navt". Plugin vil blive vist. Klik på [Install], [Installer nu], "Aktiver Plugin".
2. Værktøjer-> NAVT Lister, Inside "Navigation Gruppen" område find "gruppens navn" og indtast: "menu1" i feltet, trykke på [Opret] knappen. "Menu1" rektangel området fik skabt.
   Denne "menu1" område vil være den vigtigste legeplads for menu byggeri. Du kan trække og slippe her din menu elementer.
3. I "aktiver" område finde "andre" listefeltet og klik på "Hjem" valg. "Hjem" Thingie vises inde i "ikke fordelt" område. Weird, eh? No worries, så længe det virker - og det vil for os.
4. Træk denne "Hjem" Thingie fra "aktiver" areal til "menu1" rektangel område. Det bliver "Hjem" punkt i menuen.
   • Gentag trin 3-4 for nogle sider fra "Sider" området, samt for kategorier i "kategorier" område. Træk alle andre emner, du ønsker at være på din menu inde "menu1" rektangel. Du kan klikke på sider, kategorier, brugere og nogle brugerdefinerede elementer såsom "liste divider" og "kode blok". Kodeblok er cool måde at tilføje brugerdefinerede kodestykker inde i menuen.
   • Du kan trække menupunkter inde "menu1" område for at omarrangere deres rækkefølge.
   • Du kan justere hierarkiske position af hvert menupunkt med "<" og ">" pilene.
   • Hvis du klikker på teksten navn på hvert menupunkt - åbner sind hallucinationer ekstra tilpasningsmuligheder dialogen til denne post. Jeg mest er brugt som standard, men teknisk set kan du gå vanvittig og begynde at image-baseret menu-valg, og der tilsættes stykker af HTML-kode ind i det. Fortsæt med forsigtighed selv.
   • For linkless unclikable undermenuer, der vil fungere som "forældre" for andre "sub-børn" Jeg brugte "Kode blok" type. For eksempel når tilpasser sådan kodeblokken post jeg trådte til "Menupunkt alias" = "MemberWing" og for "Enter kodeblokken:" = "<a href='#'> MemberWing </ a>". Under href = "#" vil gøre det ikke klikbare, men fungerer som en gyldig "forælder" menu valg.
5. Her er hvordan mit NAVT 'menu1' opbygge struktur lignede næsten afsluttet:
   
6. Finish oprindelige bygning og derefter klikke på "gear" ikonet for at tilpasse din menu struktur:
   
7. Det vil åbne dialogen med 4 faner: Valg, Display, CSS, Tema.
   1. Gå til "Indstillinger" fanen og sørg for, at alt er markeret, og "gruppe navnet" siger: "menu1"
   2. Gå til "Display" fanen og sørg for alt på "Vis navigation gruppe på ..." område er markeret [x]. Overlade resten til standardindstillinger.
   3. Gå til "CSS" fanen og vælge alternativknappen (x) "Må ikke anvendes CSS klasser".
   4. Gå til "Theme" fanen og udfylde det i gerne at:
      
      Sæt i "Tilføj tags før ..." område denne kode:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Sæt i "Tilføj tags efter ..." område denne kode:
      <br style='clear: left' /></div>
   5. Tryk på [Gem / luk] knappen
8. På dette punkt menu bygning indefra NAVT plugin valgmuligheder er færdig.
   Nu er det tid til at gøre en lille melodi op til Thesis tema for at få den klar. For at vi er nødt til at tilføje et par brugerdefinerede filer - CSS og Javascript, der hører til menuen og opdatere Thesis 'custom_functions.php
9. Download den komplette sæt af filer her.
10. Unzip arkiv. Hvis du har opdateret din custom_functions.php med dine tilpasninger - du har brug for at flette dem med mine ting. Jeg vil lade det være op til dig.
    Hvis du ikke har rørt ved det - er du velkommen til at overskrive den med min. Bemærk: Jeg foretrak at placere menuen under website header (standard er ovenfor) - så min justering medtaget denne præference samt.
11. Upload arkiv, herunder alle undermapper og filer under din Thesis temaet 'Brugerdefineret' bibliotek, som denne:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    Jeg har ikke rørt custom.css - Jeg foretrækker at holde menu-specifik CSS under deres egne steder for at undgå at skabe rod inde custom.css
12. På dette punkt kan du genindlæse din hjemmeside og se nye flotte nye flere niveauer, indlejret, SEO optimeret menuen.
13. Du kan altid gå tilbage til NAVT indstillinger og tilpasse din menu med flere valgmuligheder eller flytte noget. Det vil fremgå af levende websted automatisk.

Vejen frem ...

Denne tutorial inkluderet kreativt eksempel på en type af menuen. Jeg spillede med en anden - bare for at se, hvordan mørk farvet menu vil se sådan ud:

Tese tema - multilevel indlejret CSS menu - mørk palet

Jeg tror, det er ret nice. Der er mange flere navigatør prøver findes på Dynamic Drive - alle af dem er muligt at tilpasse til Thesis og andre Wordpress temaer med en vis indsats:

Dynamic Drive Horisontal Menuer

Jeg håber du vil finde denne tutorial gavnlige og nyttige. Som jeg sagde, er det muligt at tilpasse nogle af disse menuer til Thesis - at der er tid og lyst til at gøre det ske.

Jeg kunne gøre dette arbejde for dig på grundlag af kontrakter. Du skal bare vælge den menu, du gerne kontakte mig og jeg vil arbejde på koden og instruktioner til din hjemmeside.

$ 20

Og selvfølgelig, hvis du op til bygning super SEO optimeret Premium Wordpress medlemskab portal - den bedste løsning for dette:
Thesis Tema + MemberWing medlemskab plugin + selvstændig vært Wordpress selvfølgelig.

Tagged som: CSS menu til wordpress, specialet tema, specialet tema hierarkiske menuer, specialet tema multilevel menu, specialet tema nagivation, specialet tema indlejrede menuer, specialet tema tutorial, WordPress CSS Menu, wordpress nested menu