The Quest for den perfekte menyen ...
Dette er del 1 av opplæringen
Del 2 av denne opplæringen lærer hvordan man kan bygge vertikale menyen + mørk fargepalett for den horisontale en
Jeg bestemte meg for å få Thesis tema , fordi en av mine klienter informerte 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 videoer på forsiden av hoved Thesis nettsted - Diythemes.com .
Det som imponerte meg mest er fokus på detaljer, brukervennlighet og mest av alt - SEO funksjoner som er så godt tenkt på.
MemberWing medlemskap plugin ble utformet fra grunnen for medlemskap nettsteder som ville trenge for å trekke så mye SEO juice som mulig. Så jeg betalte mye oppmerksomhet til mylder 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 form for medlemskap portal gründere.
Kombinere SEO krefter MemberWing med SEO krefter 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 et utmerket tema på alle måter. Navigasjonen del av det er men litt begrenset funksjon. Fra Thesis 1.5 + det er et nivå-menyen. Min vanlig ønske er å kunne tilpasse navigasjon så mye som nødvendig. Har noen steder bare noen få sider, mange andre har tonnevis av statiske sider + zillions av artikler / innlegg + mange kategorier.
Så i en ideell verden å ha en sjanse til å skape nice looking hierarkisk organisert brukervennlig navigasjonsmenyen er et must. Avhandling rett utenfor balltre har gode jakt navigering, men jeg la merke til at alle Thesis-baserte nettsteder som ser ut som tvillinger. Tilpasse Thesis navigasjonsmenyen er egentlig ikke lett så folk flest bare la det som er. Det er ingen måte å endre rekkefølgen på kategorier i menyen eller plassere dem i mellom sider. Og igjen, evnen til å skape nestede menystrukturer 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 setter jeg mitt valg på Wordpress Navigation List Plugin NAVT .
NAVT plugin er egentlig sorterte liste generator med super fancy og litt vanskelig å skikkelse 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 evne til å visuelt trekke sammen, og generere sorterte liste - skjelettet av din meny-å-være. Og du kan lage 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 noen trestruktur deg ønsker.
NAVT genererer for deg resulterte HTML-sorterte liste. Andre skjønnhet NAVT er at det hjelper deg å sette inn nye menyen til temaet 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 menyen 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 kode og gjøre det mer rotete enn det allerede er. Hvis det alt høres ut som vrøvl - ikke fortvil - Jeg skal guide deg trinn for trinn snart. Den utfordrende delen 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 denne 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 kulen og veilede menneskeheten til friheten i å bygge det beste av det beste navigasjon menyer 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 viet en dag til å studere Thesis og leke med NAVT plugin. På slutten stolt jeg laget tilpassede, fleksible, SEO optimalisert, multilevel, nestede nagivation struktur for min Wordpress + Thesis basert nettsted.
Listen over funksjoner på flere nivåer, nestede Wordpress navigasjonsmeny for Thesis Theme
(Du GOT til å elske denne stuff):
- 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 arbeider selv for nettlesere med deaktivert javascript (riktignok kun øverste nivå navigasjon vil være synlige og ingen flyouts vil skje selvfølgelig som de er laget av javascript).
- SEO vennlige funksjoner - sorterte liste menyen kode er generert innen HTML. Google og andre søkemotorer edderkopper vil være i stand til å indeksere ditt 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 menyen elementer. (Jeg har ennå til å prøve disse selv).
- Menystruktur og innhold er visuelt justerbar via NAVT admin området.
- Kompakt: jQuery basert flyouts for nestet nivåer.
- Rask: jQuery for menyen er lastet fra Google-servere (jeg skulle gjerne Thesis seg til å gjøre det samme i stedet for å trekke det lokalt). Dette ville 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 dynamiske drive portalen som en 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 poster fra nettstedet mitt ble brukt til å montere menystrukturen. Nettstedet ditt detaljer vil være forskjellig - men konsepter vil være den samme.
Så la oss fortsette, skal vi?
Trinnvise instruksjoner for oppsett NAVT -baserte nestede, tilpasses, multilevel, SEO vennlig
og bare ren avkjøle ser navigasjonsmenyen for Wordpress og Thesis Theme
- Gå til Wordpress admin panel. Plugins-> Add new, søk etter "navt". Den plugin vil bli vist. Klikk på [Install], [Installer nå], "Aktiver Plugin".
- Verktøy-> NAVT Lister, Inside "Navigation Group" Området finne "gruppenavn" og skriv: "menu1" i feltet, trykk på [Opprett] knappen. "Menu1" rektangel området ble opprettet.
Denne "menu1" området vil være den viktigste lekeplass for meny konstruksjon. Du vil bli å dra og slippe her din menyen elementer. - I "eiendeler" området finner "andre" listeboksen, og klikk på "Home" valg. "Home" thingie vises inne i "tilordnet" området. Rare, eh? Ingen bekymringer, så lenge det fungerer - og det vil for oss.
- Dra denne "Home" thingie fra "eiendeler" området til "menu1" rektangel området. Det vil bli "Home" element i menyen.
- Gjenta trinn 3-4 for noen sider fra "Pages"-området, samt for kategoriene i "kategorier" område. Dra andre elementer du ønsker å 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 blokken er kul måte å legge til egendefinerte biter inne i menyen.
- Du kan dra menyelementer inni "menu1" området for å omorganisere rekkefølgen.
- Du kan justere hierarkiske posisjonen til hvert menyelement med "<" og ">" piler.
- Ved å klikke på tekst navnet på hvert menypunkt - åpner tankene boggling ekstra tilpasning dialogen for dette elementet. Jeg stort sett brukt som standard, men teknisk kan gå gale og begynne å lage image-basert menyvalg og tilsett biter av HTML-kode inn i den. Fortsett med forsiktighet skjønt.
- For linkless unclikable undermenyer som vil fungere som "foreldre" for andre "sub-barn" Jeg brukte "kode block" type. For eksempel når tilpassing slik kode block element jeg gikk inn for "Menypunkt alias" = "MemberWing" og "Enter code block:" = "<a href='#'> MemberWing </ a>". Å ha href = "#" vil gjøre det ikke klikkbare, men fungerer som en gyldig "forelder" menyvalg.
- Her er hvordan min NAVT 'menu1 "bygge strukturen så ut som nesten ferdig:
- Finish innledende bygg og klikk på "utstyr"-ikonet for å tilpasse menystrukturen:
- Det vil åpne dialog med 4 faner: Options, Display, CSS, Theme.
- Gå til "Options"-fanen og kontrollere at alt er ukontrollert og "gruppenavn" sier: "menu1"
- Gå til "Display"-fanen og sørge for at alt på "Vis navigering gruppe på ..." Området er merket av for [x]. La hvile på standardinnstillingene.
- Gå til "CSS"-fanen og velg radioknappen (x) "gjelder ikke CSS klasser".
- Gå til "Theme"-fanen og fylle det inn som at:
Sett inn "Legg tags før ..." området denne koden:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Sett inn i "Legg til koder etter ..." området denne koden:
<br style='clear: left' /></div> - Trykk [Lagre / lukk] knappen
- 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. For at vi må legge til noen egendefinerte filer - CSS og javascript som tilhører menyen og oppdatere Thesis 'custom_functions.php - Last ned den komplette sett av filer her .
- Unzip arkiv. Hvis du har oppdatert din custom_functions.php med tilpasninger - du trenger for å sette dem sammen med mine ting. Jeg lar det opp til deg.
Hvis du ikke har rørt det - føler seg fri til å overskrive den med mine. Vennligst merk: Jeg ønsket å plassere menyen under nettsiden header (standard er over) - så min justering følger denne innstillingen også. - Last arkiv inkludert alle underkataloger og filer under Thesis temaet 'tilpasset' katalog, 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 deres egne steder for å unngå å skape rot inne custom.css - På dette punktet kan du laste inn nettside og se nye flotte nye multilevel, nestede, SEO optimalisert meny.
- Du kan alltid gå tilbake til NAVT innstillinger og tilpasse meny med flere valg eller flytte noe. Det vil bli reflektert på live nettstedet automatisk.
Veien videre ...
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 navigasjonsutstyr prøver tilgjengelig på Dynamic Drive - alle av dem er mulig å tilpasse for Thesis og andre Wordpress temaer med litt innsats:
Dynamic Drive Horisontal 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 er 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, kontakt meg og jeg skal jobbe på kode og instruksjoner for nettstedet ditt.
$ 20
Og selvfølgelig hvis du er opp til bygging super SEO optimalisert premium wordpress medlemskap portal - den beste løsningen for dette:
Thesis Theme + MemberWing medlemskap plugin + selvtillit vert Wordpress selvfølgelig.
