Jakten på den perfekte menyen ...
Dette er del 1 av opplæringen
Del 2 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 bestemt den og deretter besluttet å ta en nærmere titt på Avhandling og faktisk gidder å se videoer på forsiden av hovedoppgave site - Diythemes.com.
Hva imponert meg mest er fokus på detaljer, brukervennlighet og mest av alt - SEO funksjoner som er så godt tenkt.
MemberWing medlemskap plugin ble designet fra grunnen av for medlemskap nettsteder som måtte trekke så mye SEO saft som mulig. Så jeg betalte masse oppmerksomhet til mangfoldet av SEO forbedringer og fullkommenhet i MemberWing. Mange av mine klienter ber om ulike temaer å bruke og ha tema som var så godt SEO optimert fra innerst inne ville være en utmerket form for medlemskap portalen gründere.
Kombinere SEO krefter MemberWing med SEO krefter Thesis tema ville gi det beste av rangeringen muligheter til mine klienter. Så jeg fikk Avhandling og spilte med det for en dag.
Det er et utmerket seg på alle måter. Navigeringen del av det men litt begrenset i funksjon. Fra Thesis 1.5 + det er ett nivå meny bare. Min vanlig ønske er å kunne tilpasse navigasjonen så mye som nødvendig. Noen steder har bare noen få sider, mange andre har tonnevis av statiske sider + zillions artikler / innlegg + mange kategorier.
Så i ideell verden hadde en sjanse til å skape hyggelig ser hierarkisk organiserte brukervennlig navigeringsmenyen er et must. Avhandling rett utenfor flaggermus har gode jakt navigering men jeg merket at alle Thesis-baserte nettsteder ser ut som tvillinger. Tilpasse Thesis navigeringsmenyen egentlig ikke er så lett folk flest bare la det som er. Det er ingen måte å endre rekkefølgen på kategoriene i menyen eller plassere dem i mellom sider. Og videre, er muligheten til å opprette nestede menyen strukturer mangler. Så jeg bestemte meg for å se hva som kunne gjøres med det.
Etter å ha prøvd omtrent halvparten dusin meny / navigasjon relatert plugins jeg mitt valg på Wordpress Navigation List Plugin NAVT.
NAVT plugg er essensielt sorterte liste generator med super fancy og litt vanskelig å regne utradisjonelle admin-grensesnitt. Hva misvisende om det er at den ikke skaper egentlig fancy ser menyene av seg selv. Det gjør den vanskeligste delen av jobben selv - gir deg en mulighet til å visuelt dra sammen, og generere sorterte liste - skjelett av menyen å være. Og du kan lage mange menyer også. Du kan trekke alle slags Wordpress ting inn i navigeringsmenyen: sider, innlegg, artikler, kategorier, brukere, kode blokker, eksterne koblinger, skillevegger, separatorer og mikse og hekker og arrangere og tilpasse dem i en tre-struktur deg vil.
NAVT genererer for deg resulterte HTML-sorterte liste. Andre skjønnhet NAVT er at det hjelper deg å sette inn ny meny i temaet via kjente JQuery basert logikk men uten må endre en kode! NAVT lar deg angi: "erstatter dette # element med mitt nye NAVT menyen". # element kan være en id eller klasse av banen av eksisterende menyen eller div element kode som blir generert av din aktuelle tema. Så NAVT gjør dette erstatning for deg uten å tvinge deg til å gå inn i temaet kode og gjør det mer rotete enn det allerede er. Ved at alle høres ut som vrøvl - ikke bekymre deg - jeg skal guide deg steg for steg snart. Den utfordrende delen av NAVT for alle er at du må komme opp med faktiske CSS + bilder + JavaScript-koden for menyen selv. Og det er opp til deg å finne ut hvor og hvordan du kan integrere disse filene og gjøre slike ting skal bli koplet sammen.
Vennlig hilsen uten å vite JQuery + noen PHP + CSS + ha skikkelige erfaring med Wordpress - denne saken er vanskelig å trekke.
Glede Jeg vet dette ting litt så jeg bestemte meg for å bite kulen og guide menneskeheten til friheten i å bygge det beste av det beste navigeringsmenyer for Wordpress. Jeg trengte å finne ut kilder til noen fine leter CSS horisontale menyer. Jeg plukket Dynamic Drive webside for sine beste valg, demoer og kilder.
Jeg bruker en dag for å studere Thesis og leke med NAVT plugin. På slutten stolt jeg opprettet tilpassede, fleksible, SEO optimalisert, multilevel, nestede nagivation struktur for min Wordpress + Thesis basert site.
Liste over funksjoner på flere nivåer, nestede Wordpress navigeringsmenyen for Thesis Theme
(du må elske denne ting):
- Profesjonell, rene utseende.
- Støtte for alle moderne nettlesere, inkludert 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome i både javascript og ikke-javascript moduser.
- Grasiøst downgradable for non-javascript nettlesere. Du menyen vil bli brukbart, visuelt like og arbeider selv for JavaScript deaktivert nettlesere (riktignok bare toppnivå navigasjon vil være synlig og ingen flyouts vil skje selvfølgelig som de er laget av javascript).
- SEO funksjoner - sorterte liste meny koden genereres innen HTML. Google og andre søkemotoredderkopper vil kunne indeksere navigasjon struktur og finne linker til indre sider.
- Støtte for ubegrenset hekkende nivåer og undernivåer.
- Støtte for hvilken som helst rekkefølge eller sider, innlegg (via brukerdefinert URIer), kategorier, brukere, tilpasset kode blokker og eksterne lenker i menyen.
- Støtte for tekst-og bilde-basert meny-elementer. (Jeg har ennå til å prøve dette selv).
- Meny struktur og innhold er visuelt justerbar via NAVT admin-området.
- Kompakt: JQuery basert flyouts for nestede nivåer.
- Rask: JQuery for menyen er lagt fra Google-servere (Jeg skulle gjerne Thesis seg til å gjøre det samme stedet for å trekke det lokalt). Dette ville fremskynde ting litt.
- Skalerbarhet - Denne typen menyen er redigerbart og konfigurerbar helst via NAVT plugg innstillinger uten behov for koding overalt.
Jeg brukte denne utmerkede menyen fra Dynamic Drive portal som base. Jeg måtte tilpasse javascript koden litt, samt omfatte blings av PHP i custom_functions.php å lage den arbeide med Thesis. Også antallet eksisterende sider, kategorier og innlegg fra nettstedet mitt ble brukt til å montere menystrukturen. Nettstedet ditt detaljer vil bli annerledes - men konseptene vil være den samme.
Så la gå, skal vi?
Trinnvise instruksjoner for oppsett NAVT-baserte nestede, passelig, multilevel, SEO friendly
og rett og slett avkjøle ser navigeringsmenyen for Wordpress og Thesis Theme
- Gå til Wordpress admin-panelet. Plugins-> Legg til ny, søk etter "navt". Programtillegget vil bli vist. Klikk [Install], [Installer nå], "Aktiver Plugin".
- Verktøy-> NAVT Lister, Inside Navigation Group "området finner" gruppenavn "og skriver:" menu1 "i feltet, trykker du [Opprett] knappen. "Menu1" firkant-området har skapt.
Denne "menu1" område vil være den viktigste lekeplass for meny konstruksjon. Du vil være å dra og slippe her menyen din elementer. - I "aktiva" området finner "andre" listeboksen, og klikk på "Home" valg. "Home" thingie vises på innsiden av "ikke utdelt" area. Rare, eh? Ingen grunn til bekymring, så lenge det fungerer - og det vil for oss.
- Dra denne "Hjem" thingie fra «eiendeler" området til "menu1" rektangel området. Det vil bli "Hjem" elementet i menyen.
- Gjenta trinn 3-4 for noen sider fra "Sider", så vel som for kategoriene i "kategorier" område. Dra andre elementer du ønsker å være på menyen inni "menu1" rektangel. Du kan klikke på sider, kategorier, brukere og noen tilpassede elementer som "liste divider" og "code block". Kodestykket er kul måte å legge til egendefinerte tekstutdragene inne i menyen.
- Du kan dra menyelementer inni "menu1" område å omorganisere rekkefølgen.
- Du kan justere hierarkiske posisjonen til hvert menyelement med "<" og ">" piler.
- Klikker du på teksten navnet på hvert menyelement - åpner tankene boggling ekstra tilpasning dialogen for dette elementet. Jeg mest brukt standardverdier men teknisk kan gå gale og begynne å lage image-basert meny valg og legge biter av HTML-kode i den. Fortsett med forsiktighet skjønt.
- For linkless unclikable undermenyer som vil tjene som "foreldre" for andre "sub-barn" Jeg brukte "Code blokk" type. For eksempel når du tilpasser slike kodestykket elementet jeg gikk inn for "Menyelement alias" = "MemberWing" og "Enter kodestykket:" = "<a href='#'> MemberWing </ a>". Har href = "#" gjør det ikke klikkbar, men fungerer som et gyldig "foreldre" menyvalget.
- Her er hvordan min NAVT 'menu1' bygge strukturen lignet nesten fullført:
- Fullfør opprinnelige bygningen og klikk på "giret"-ikonet for å tilpasse menyen struktur:
- Det vil åpne dialog med 4 faner: Valg, Display, CSS, Theme.
- Gå til "Options" kategorien og kontrollere at alt er merket og "gruppe navnet sier:" menu1 "
- Gå til "Vis"-kategorien og kontrollere alt på "Vis navigasjon gruppe på ..." området er avmerket [x]. La resten på standardinnstillingene.
- Gå til "CSS" tab og velge radioknappen (x) "ikke gjelder CSS klasser".
- Gå til "Theme" tab og fylle det slik:
Sett inn "Legg til koder før ..." området denne koden:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Sett inn "Legg til koder etter ..." området denne koden:
<br style='clear: left' /></div> - Trykk [lagre / lukke] knappen
- På dette punktet menyen bygningen fra NAVT plugg alternativer er fullført.
Nå er det på tide å gjøre litt tune up for Thesis tema å få den klar. For at vi må legge til noen tilpassede filer - CSS og javascript som tilhører menyen og oppdatere Thesis 'custom_functions.php - Last ned den komplette sett med filer her.
- Unzip arkivet. Hvis du har oppdatert din custom_functions.php med tilpasninger - du må slå dem med mine ting. Jeg lar det opp til deg.
Hvis du ikke har rørt det - gjerne for å overskrive den med meg. Merk: Jeg ønsket å plassere menyen under nettsted header (standard er over) - slik at mine justering inkludert denne innstillingen også. - Last opp arkivet inkludert alle underkataloger og filer under Thesis temaet "egendefinert" katalogen, slik:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Jeg har ikke rørt custom.css - Jeg foretrekker å holde meny-spesifikk CSS under sine egne steder for å unngå å skape rot inni custom.css - På dette punktet kan du laste inn ditt nettsted og se nye flotte, nye nivåer, nestede, SEO optimert menyen.
- Du kan alltid gå tilbake til NAVT innstillingene og tilpasse meny med flere valg eller flytte noe. Det vil bli reflektert på live nettstedet automatisk.
Veien videre ...
Denne opplæringen inngår kreative eksempel på en type menyen. Jeg spilte med en annen - bare for å se hvordan mørk farget menyen vil se ut:
Thesis tema - multilevel nestet CSS meny - mørk palett
Jeg synes det er ganske fint. Det finnes mange flere eksempler navigasjonsutstyr tilgjengelig i Dynamic Drive - alle av dem er mulig å tilpasse for Avhandlinger og andre Wordpress temaer med litt innsats:
Dynamic Drive Horisontal Menyer
Jeg håper du finner denne opplæringen gunstige og nyttige. 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 denne jobben for deg på en kontrakt basis. Bare velg den menyen du ønsker, ta kontakt med meg og jeg skal jobbe på kode og instruksjoner for din webside.
$ 20
Og selvfølgelig hvis du er opp til bygging super SEO optimert premium wordpress medlemskap portal - den beste løsningen for dette:
Thesis Theme + MemberWing medlemskap plugg + selvtillit vert Wordpress selvfølgelig.
