The Quest for den perfekte menyen ...

Dette er del 1 av opplæringen
Del to av denne opplæringen lærer hvordan å bygge vertikale menyen + mørk fargepalett for den horisontale en

Jeg bestemte meg for å få Thesis tema , fordi en av mine klienter informert meg om kompatibilitetsproblemer mellom Thesis og min WordPress medlemskap nettsted plugin MemberWing. Jeg fikset det og deretter besluttet å ta en nærmere titt på oppgaven og faktisk gidder å se på videoer på forsiden av Hovedtesen site - Diythemes.com .
Det som imponerte meg mest er fokus på detaljer, brukervennlighet og mest av alt - SEO funksjoner som er så bra tenkt på.
MemberWing medlemskap plugin ble designet fra grunnen av for medlemskap nettsteder som ville trenge for å trekke så mye SEO juice som mulig. Så jeg betalte masse oppmerksomhet til mangfold av SEO forbedringer og fullkommenhet i MemberWing. Mange av mine egne kunder spør om ulike temaer for å bruke og ha tema som var så godt SEO optimalisert fra dypt inne ville være en utmerket passform for medlemskap portal gründere.

Kombinere SEO krefter MemberWing med SEO makter Thesis tema ville gi det beste av rangeringen muligheter til mine klienter. Så jeg fikk Thesis og spilte med det for en dag.

Det er en utmerket tema på alle måter. Navigasjonen del av det er men litt begrenset i funksjon. Fra Thesis 1.5 + det er en plan-menyen. Min vanlig ønske er å kunne tilpasse navigasjon så mye som nødvendig. Noen steder bare få sider, mange andre har tonnevis av statiske sider + zillions av artikler / innlegg + masse kategorier.
Så i en ideell verden å ha en sjanse til å skape hyggelig ser hierarkisk organisert brukervennlig navigasjonsmeny er et must. Avhandling rett utenfor flaggermus har gode jakt navigering, men jeg la merke til at alle Thesis-baserte nettsteder er ser ut som tvillinger. Tilpasse Thesis navigasjonsmenyen er ikke veldig lett slik at folk flest bare la det som er. Det er ingen måte å forandre rekkefølgen på kategoriene i menyen eller plassere dem i mellom sidene. Og igjen, er evnen til å skape nestede menystrukturer mangler. Så jeg bestemte meg for å se hva som kunne gjøres med det.
Etter å ha prøvd omtrent halvt dusin meny / navigasjon relaterte plugins setter jeg mitt valg på Wordpress Navigasjon List Plugin NAVT .
NAVT plugin er i hovedsak ikke-sorterte liste generator med super fancy og litt vanskelig å finne utradisjonelle admin grensesnitt. Hva villedende om det er at den ikke skaper egentlig fancy leter menyer av seg selv. Det gjør den vanskeligste delen av jobben selv - gir deg en mulighet til å visuelt trekke sammen, og generere uordnet liste - skjelettet av din meny-å-være. Og du kan opprette mange menyer også. Du kan trekke alle slags Wordpress ting inn i navigasjonsmenyen: sider, innlegg, artikler, kategorier, brukere, kode blokker, eksterne lenker, skillevegger, separatorer og mikse og matche og hekker og ordne og tilpasse dem i et tre-lignende struktur deg ønsker.
NAVT genererer for deg resulterte HTML-sorterte liste. Andre skjønnhet NAVT er at det hjelper deg å sette inn nye menyen til tema via berømte jQuery-basert logikk, men uten behov for å endre noen kode! NAVT lar deg spesifisere: "erstatte dette # elementet med min nye NAVT meny". # Element kan være en id eller klasse av banen av eksisterende meny eller div element tag som blir generert av din nåværende tema. Så NAVT gjør dette erstatning for deg uten å tvinge deg til å gå inn i temaet koden og gjøre det mer rotete enn det allerede er. Hvis det alle lyder som vrøvl - ikke vær redd - Jeg vil veilede deg steg for steg snart. Den utfordrende del av NAVT for alle er at du må komme opp med faktiske CSS + bilder + javascript-kode for menyen din selv. Og det er opp til deg å finne ut hvor og hvordan å integrere disse filene og gjøre slike ting ordentlig få koblet sammen.
Vennlig hilsen uten å vite jQuery + noen PHP + CSS + ha anstendig erfaring med Wordpress - denne saken er vanskelig å trekke.
Gjerne Jeg vet dette er ting litt så jeg bestemte meg for å bite the bullet og guide menneskeheten til friheten i å bygge det beste av de beste navigeringsmenyer for Wordpress. Jeg trengte bare å finne ut kilder for noen fine jakt horisontale CSS menyer. Jeg plukket Dynamic Drive nettsted for deres beste valg, demoer og kilder.

Jeg dedikert en dag å studere oppgaven og leke med NAVT plugin. På slutten stolt jeg opprettet egendefinerte, fleksibel, SEO optimalisert, multilevel, nøstede Nagivation struktur for min Wordpress + avhandling basert nettsted.

Liste over trekk ved multilevel, nestet Wordpress navigasjon menyen for Avhandlinger Theme
(Du må elske denne ting):

• Profesjonell, rent utseende og følelse.
• Støtte for alle moderne nettlesere, inkludert 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome både javascript og ikke-javascript moduser.
• Grasiøst downgradable for ikke-javascript nettlesere. Du menyen vil være brukbart, visuelt like og jobbe selv for nettlesere med deaktivert javascript (riktignok bare øverste nivå navigasjon vil være synlig og ingen flyouts vil skje selvfølgelig som de er laget av javascript).
• SEO vennlige funksjoner - uordnet liste menyen kode genereres innen HTML. Google og andre søkemotorer edderkopper vil kunne indeksere navigasjon struktur og finne linker til indre sider.
• Støtte for ubegrenset hekkende nivåer og undernivåer.
• Støtte for enhver ordre eller sider, innlegg (via brukerdefinert URIer), kategorier, brukere, tilpasset kode blokker og eksterne lenker i menyen.
• Støtte for tekst-, samt bilde-baserte menypunktene. (Jeg har ennå til å prøve disse selv).
• Menystruktur og innhold er visuelt justerbar via NAVT admin området.
• Kompakt: jQuery baserte flyouts for nestede nivåer.
• Rask: jQuery for menyen er lastet fra Google-servere (Jeg skulle gjerne Thesis seg å gjøre det samme i stedet for å trekke det lokalt). Dette vil fremskynde ting litt.
• Skalerbarhet - Denne typen menyen er redigerbar og konfigurerbar når som helst via NAVT plugin innstillinger uten behov for koding hvor som helst.

Jeg brukte denne utmerkede menyen fra Dynamic Drive portal som base. Jeg måtte tilpasse javascript kode litt, samt inkludere blings av PHP i custom_functions.php å gjøre det arbeidet med masteroppgaven. Også antall pre-eksisterende sider, kategorier og innlegg fra siden min ble brukt til å montere menystruktur. Dine site detaljer vil være annerledes - men konsepter vil være den samme.
Så la fortsette, skal vi?

Trinnvise instruksjoner for å sette opp NAVT -baserte nestet, passelig, direktesalg, SEO vennlig
og bare ren avkjøle ser navigasjonsmenyen for Wordpress og Thesis Theme

1. Gå til Wordpress admin panel. Plugins-> Legg til ny, søk etter "navt". Programtillegget vil bli vist. Klikk på [Install], [Installer nå], "Aktiver Plugin".
2. Verktøy-> NAVT Lister, Inside "Navigasjon Group" området finner "gruppe navn" og skriv: "menu1" i feltet, trykk [Opprett] knappen. "Menu1" firkant området ble opprettet.
   Denne "menu1" området vil være den viktigste lekeplass for menyen konstruksjon. Du vil bli å dra og slippe her dine menypunktene.
3. I "eiendeler" området finner "andre" Liste-og klikk på "Hjem" valg. "Home" thingie vises på innsiden av "tilordnet" område. Weird, eh? Ingen fare, så lenge det fungerer - og det vil for oss.
4. Dra denne "Home" thingie fra "eiendeler" området til "menu1" rektangel område. Det vil bli "Forsiden" i menyen.
   • Gjenta trinn 3-4 for noen sider fra "Sider"-området, samt for kategoriene i "kategorier" område. Dra andre elementene du vil være på menyen din inni "menu1" rektangel. Du kan klikke på sider, kategorier, brukere og noen tilpassede elementer som "liste divider" og "code block". Kode blokk er kul måte å legge til egendefinerte biter inne i menyen.
   • Du kan dra menyelementer inne "menu1" område å endre rekkefølgen.
   • Du kan justere hierarkisk posisjon hvert menyelement med "<" og ">" piler.
   • Ved å klikke på tekst navnet på hvert menypunkt - åpner sinnet boggling ekstra tilpasning dialogen for dette elementet. Jeg stort sett brukt som standard, men teknisk kan gå gale og begynne å lage image-baserte menyvalg og legge biter av HTML kode i den. Fortsett med forsiktighet skjønt.
   • For linkless unclikable undermenyer som skal tjene som "foreldre" for andre "sub-barn" Jeg brukte "Kode blokk" type. For eksempel når du tilpasser slik kode block element jeg gikk inn for "menyen alias" = "MemberWing" og for "Tast inn kode block:" = "<a href='#'> MemberWing </ a>". Å ha href = "#" vil gjøre det ikke klikkbare, men fungerer som en gyldig "forelder" menyvalg.
5. Her er hvordan min NAVT 'menu1 "bygge struktur lignet nesten ferdig:
   
6. Fullfør første bygningen og klikk på "utstyr"-ikonet for å tilpasse menystrukturen:
   
7. Det vil åpne dialog med 4 faner: Valg, Display, CSS, Tema.
   1. Gå til "Options"-fanen og sørge for at alt er ukontrollert og "gruppenavn" sier: "menu1"
   2. Gå til "Vis"-fanen og sørge for at alt på "Show navigasjon gruppe på ..." område er avmerket [x]. La hvile på mislighold.
   3. Gå til "CSS"-fanen og velg radioknappen (x) "gjelder ikke CSS klasser".
   4. Gå til "Theme"-fanen og fyll det i sånn:
      
      Sett inn "Legg tags før ..." området denne koden:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Sett inn "Legge til koder etter ..." området denne koden:
      <br style='clear: left' /></div>
   5. Trykk [Lagre / lukke] knappen
8. På dette punktet menyen bygningen fra NAVT plugin alternativer er fullført.
   Nå er det på tide å gjøre litt tune up for Thesis tema å få den klar. Til det trenger vi å legge til noen egendefinerte filer - CSS og javascript som tilhører menyen og oppdatere Thesis 'custom_functions.php
9. Last ned den komplette sett av filer her .
10. Pakk arkiv. Hvis du har oppdatert din custom_functions.php med tilpasningene - du trenger for å slå dem sammen med tingene mine. Jeg lar det opp til deg.
    Hvis du ikke har rørt det - gjerne overskrive den med mine. Vennligst merk: jeg foretrukket å plassere menyen under nettsiden header (standard er over) - så min justering følger denne innstillingen også.
11. Last arkiv inkludert alle underkataloger og filer under din Thesis temaet 'tilpasset' katalogen, som dette:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    Jeg har ikke rørt custom.css - Jeg foretrekker å holde meny-spesifikke CSS under egne steder for å unngå å skape rot inne custom.css
12. På dette punktet kan du laste inn nettsiden og se nye flotte nye multilevel, nestet, SEO optimalisert menyen.
13. Du kan alltid gå tilbake til NAVT innstillinger og tilpasse din meny med flere valg eller flytte noe. Det vil bli reflektert på live nettstedet automatisk.

Veien fremover ...

Denne opplæringen inkluderte kreative eksempel på en type meny. Jeg spilte med en annen - bare for å se hvor mørkt farget menyen vil se ut:

Thesis tema - multilevel nestet CSS meny - mørk palett

Jeg synes det er ganske fin. Det er mange flere navigasjonsinstrumenter prøver tilgjengelige på Dynamic Drive - alle av dem er mulig å tilpasse for masteroppgaven og andre Wordpress temaer med litt innsats:

Dynamic Drive Horisontale menyer

Jeg håper du finner denne opplæringen fordelaktig og nyttig. Som jeg sa, er det mulig å tilpasse noen av disse menyene for Thesis - som blir gitt tid og lyst til å gjøre det skje.

Jeg kunne gjøre dette arbeidet for deg på en kontrakt basis. Bare velg den menyen du ønsker, ta kontakt med meg og jeg skal jobbe på koden og instruksjoner for ditt nettsted.

$ 20

Og selvfølgelig hvis du er opp til bygging av super SEO optimalisert premium WordPress medlemskap portal - den beste løsningen for dette:
Avhandlinger Theme + MemberWing medlemskap plugin + selv hosted Wordpress selvfølgelig.

comments } { 15 kommentarer }