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 vannrette
Jeg bestemte meg for å få Avhandlinger tema , fordi en av mine klienter informert meg om kompatibilitetsproblemer mellom Avhandlinger og min WordPress medlemskap nettsted plugin MemberWing. JEG bestemt det og bestemte seg da for å ta en nærmere titt på oppgaven og faktisk gidder å se videoer på forsiden av hovedoppgave nettstedet - Diythemes.com .
Hva imponerte meg mest, er oppmerksomhet på detaljer, brukervennlighet og mest av alt - SEO funksjoner som er så godt tenkt på.
MemberWing medlemskap plugg ble utformet fra grunnen av for medlemskap områder som vil trenge å trekke så mye SEO juice som mulig. Så jeg betalte masse oppmerksomhet på mangfold av SEO forbedringer og fullkommenhet i MemberWing. Mange av mine egne kunder spør om ulike temaer å bruke og ha tema som var så godt SEO optimalisert fra dypt inne ville være en utmerket form for medlemskap portalen gründere.
Ved å kombinere SEO krefter MemberWing med SEO makter Thesis tema ville gi det beste av rangeringen muligheter til mine klienter. Så jeg fikk Avhandlinger og spilte med det for en dag.
Det er et utmerket tema på alle måter. Navigasjonen deler av den er men litt begrenset i funksjon. Starter fra Thesis 1.5 + det er ett nivå menyen bare. Min vanlig ønske er å kunne tilpasse navigeringen så mye som nødvendig. Enkelte steder har bare noen få sider, mange andre har tonnevis av statiske sider + zillions av artikler / innlegg + mange kategorier.
Så i ideelle verden å ha en sjanse til å skape hyggelig ser hierarkisk organisert brukervennlig navigasjonsmeny er et must. Avhandling rett utenfor flaggermus har gode jakt navigasjon, men jeg la merke til at alle Thesis-baserte nettsteder ser ut som tvillinger. Tilpasse Avhandling navigeringsmenyen er egentlig ikke lett så de fleste folk bare la det være som den er. Det er ikke mulig å endre rekkefølgen på kategorier i menyen eller plassere dem i mellom sidene. Og videre, er muligheten til å lage 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 egentlig sorterte liste generator med super fancy og litt vanskelig å regne utradisjonelle admin grensesnittet. Hva misvisende om det er at den ikke skaper faktisk 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 din-å-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 lenker, skillevegger, separatorer og mikse og matche og hekker og arrangere og tilpasse dem i et tre-lignende struktur deg ønsker.
NAVT genererer for deg resulterte HTML-sorterte liste. Andre fine med NAVT er at det hjelper deg å sette inn nye menyen til temaet via kjente JQuery basert logikk men uten behov for å endre noen kode! NAVT lar deg spesifisere: "erstatter dette # elementet med min nye NAVT meny". # Elementet kan være en id eller klasse av banen av eksisterende meny eller div element kode som blir generert av din nåværende temaet. Så NAVT gjør dette erstatning for deg uten å tvinge deg til å gå inn i tema-koden og gjøre det mer rotete enn det allerede er. Hvis 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-kode for menyen din selv. Og det er opp til deg å finne ut hvor og hvordan du kan integrere disse filene og gjøre denne ting riktig bli koplet sammen.
Vennlig hilsen uten å vite JQuery + noen PHP + CSS + ha anstendig erfaring med Wordpress - denne ting er vanskelig å trekke.
Glede Jeg vet dette ting litt så jeg bestemte meg for å bite i kule og guide menneskeheten til friheten i å bygge det beste av det beste navigeringsmenyer for Wordpress. Jeg trengte å finne ut kilder for noen hyggelig ser horisontal CSS menyer. Jeg plukket Dynamic Drive nettsted for deres beste valg, demoer og kilder.
Jeg dedikerte en dag for å studere Avhandlinger og leke med NAVT plugin. På slutten stolt jeg laget tilpassede, fleksible, SEO optimalisert, multilevel, nestede nagivation struktur for min Wordpress + Thesis basert nettsted.
Liste over funksjoner i flere nivåer, nestede Wordpress navigeringsmenyen for Avhandlinger Theme
(Du fikk til å 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.
- Elegant downgradable for ikke-javascript nettlesere. Du menyen vil kunne brukes, visuelt like og arbeider selv for nettlesere med deaktivert javascript (om enn bare toppnivå navigasjonen vil være synlig og ingen DerDuBor.no Søk vil skje selvfølgelig som de er laget av javascript).
- SEO funksjoner - sorterte liste meny koden genereres innen HTML. Google og andre søkemotorer edderkopper vil være i stand til å indeksere navigasjon struktur og finne lenker 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 brukerdefinerte URL), kategorier, brukere, tilpasset kode blokker og eksterne linker i menyen.
- Støtte av tekst-og bildebaserte meny elementer. (Jeg har ennå til å prøve disse selv).
- Meny struktur og innhold er visuelt justeres via NAVT admin-området.
- Kompakt: JQuery basert DerDuBor.no Søk på nestede nivåer.
- Rask: JQuery for menyen lastes fra Google-servere (Jeg skulle gjerne Avhandlinger seg til å gjøre det samme i stedet for å trekke det lokalt). Dette vil øke hastigheten på ting litt.
- Skalerbarhet - Denne typen menyen er redigerbar og konfigurerbar helst via NAVT plugin-innstillinger uten behov for koding hvor som helst.
Jeg brukte denne utmerkede menyen fra dynamiske kjøre portal som base. Jeg måtte tilpasse javascript kode litt i tillegg omfatte blings av PHP i custom_functions.php å gjøre det arbeidet med masteroppgaven. Også antallet pre-eksisterende sider, kategorier og innlegg fra siden min ble brukt til å montere menystrukturen. Nettstedet ditt detaljer vil være forskjellige - men konsepter vil være det samme.
Så la gå, skal vi?
Trinnvise instruksjoner for å sette opp NAVT -baserte nestede, passelig, multilevel, SEO friendly
og bare ren avkjøle ser navigeringsmenyen for Wordpress og Avhandlinger Theme
- Gå til Wordpress admin panel. Plugins-> Legg til ny, søke for "navt". Programtillegget vil bli vist. Klikk på [Installer], [Installer nå], "Aktiver Plugin".
- Verktøy-> NAVT Lister, Inside "Navigasjon Group" og finner "gruppenavn" og skriver: menu1 "" i feltet, trykker du på [Opprett]-knappen. "Menu1" rektangelet området har skapt.
Denne "menu1" område vil være det viktigste lekeplass for meny konstruksjon. Du vil bli å dra og slippe her menyen din elementer. - I "eiendeler" og finner "andre" Liste-og klikk på "Hjem" valg. "Hjem" thingie ville komme på innsiden av "tilordnet" område. Rare, eh? Ingen grunn til bekymring, så lenge det fungerer - og det vil for oss.
- Dra denne "Home" thingie fra "eiendeler" og i "menu1" rektangelet området. Det vil bli "Home" element i menyen.
- Gjenta trinn 3-4 for noen sider fra "Pages"-område, så vel som for kategoriene i "kategori"-området. Dra alle andre elementer du ønsker å være på menyen din inni "menu1" rektangel. Du kan klikke sider, kategorier, brukere og noen tilpassede elementer som "listen skillelinjen" og "code blokk". Kode blokk er kul måte å legge til egendefinerte tekstutdragene inne i menyen.
- Du kan dra menyelementer inni "menu1" område å omorganisere rekkefølgen deres.
- Du kan justere hierarkiske posisjonen til hvert menyelement med "<" og ">" piler.
- Ved å klikke på tekst navnet til hvert menyelement - åpner sinnet boggling ekstra tilpasning dialogen for dette elementet. Jeg mest brukt som standard, men teknisk kan gå gale og begynne å lage image-baserte meny valg og legge biter av HTML-koden inn 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 slik kode blokk varen jeg gikk inn for "Menypunkt alias" = "MemberWing" og "Enter kodestykket:" = "<a href='#'> MemberWing </ a>". Etter å ha href = "#" vil gjøre det ikke kan klikkes, men fungerer som en gyldig "foreldre" meny valg.
- Her er hvordan min NAVT 'menu1 "bygge strukturen så ut som nesten ferdig:
- Fullfør første byggetrinn, og klikk deretter på "gear"-ikonet for å tilpasse menystrukturen:
- Det vil åpne dialog med 4 faner: Valg, Display, CSS, Theme.
- Gå til "Valg" fanen og kontroller at alt er krysset av og "gruppenavn" sier: "menu1"
- Gå til "Vis" fanen og kontroller at alt på "Vis navigasjon gruppe på ..." Området er sjekket [x]. La resten på standardinnstillingene.
- Gå til "CSS" tab og velg radioknappen (x) "Ikke påfør CSS klasser".
- Gå til "Theme" fanen og fyll den i slik at:
Sett inn "Legg til koder før ..." og denne koden:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Sett inn "Legg til koder etter ..." og 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 en liten melodi for Thesis tema å få den klar. For at vi må legge til et par egendefinerte filer - CSS og JavaScript som tilhører menyen og oppdatere oppgavens custom_functions.php - Last ned den komplette sett med filer her .
- Unzip arkivet. Hvis du har oppdatert custom_functions.php med tilpasninger - du trenger å flette dem med ting min. Jeg lar det opp til deg.
Hvis du ikke har rørt det - gjerne overskrive den med meg. Vennligst merk: Jeg ønsket å plassere menyen under nettsiden overskriften (standard er over) - så min innstilling inkludert denne innstillingen også. - Last opp arkivet inkludert alle underkataloger og filer under Avhandling temaet "egendefinerte" 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 sine egne steder for å unngå å skape rot inni custom.css - På dette punktet kan du laste ditt nettsted og se nye flotte nye nivåer, nestede, SEO optimalisert meny.
- Du kan alltid gå tilbake til NAVT innstillinger og tilpasse menyen din med flere valg eller flytte noe. Det vil bli reflektert på aktive nettstedet automatisk.
Veien videre ...
Denne opplæringen inkluderte kreative eksempel på en type meny. Spilte jeg med en annen - bare for å se hvor mørkt farget menyen vil se ut:
Avhandling tema - multilevel nestet CSS meny - mørk palett
Jeg tror det er ganske hyggelig. Det er mange flere eksempler navigasjonsutstyr tilgjengelig på Dynamic Drive - alle er mulige å tilpasse for Avhandlinger 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 blir gitt tid og lyst til å gjøre det skje.
Jeg kunne gjøre dette arbeidet for deg på en kontrakt basis. Bare velg menyen du vil, kontakt meg og jeg skal jobbe på koden og instruksjoner for nettstedet ditt.
$ 20
Og selvfølgelig hvis du er opp til bygging super SEO optimalisert premium wordpress medlemskapet portal - den beste løsningen for dette:
Avhandlinger Theme + MemberWing medlemskap plugin + selvtillit vert Wordpress selvfølgelig.
