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 for den vandrette en
Jeg besluttede at få Thesis tema , fordi en af mine klienter informeret mig om kompatibilitetsproblemer mellem Speciale og mit wordpress medlemskab site plugin MemberWing. Jeg fast det og derefter besluttede at tage et nærmere kig på Speciale og faktisk gider at se videoer på forsiden af hovedtese site - Diythemes.com .
Hvad der imponerer mig mest er opmærksomhed på detaljer, brugervenlighed og mest af alt - SEO funktioner, der er så godt tænkt på.
MemberWing medlemskab plugin er designet fra bunden til medlemskab websteder, der skulle trække så meget SEO saft som muligt. Så jeg betalte masser af opmærksomhed på mange SEO forbedringer og fuldkommenheder i MemberWing. Mange af mine egne klienter spørger om forskellige temaer for at bruge og have tema, der var så godt SEO optimeret fra dybt inde ville være en god pasform for medlemskab portal iværksættere.
Ved at kombinere SEO beføjelser MemberWing med SEO beføjelser Thesis tema ville give det bedste af rangordning muligheder for at mine klienter. Så jeg fik Speciale og legede med det for en dag.
Det er en fremragende tema på alle måder. Navigationen del af det selv er en smule begrænset i funktion. Fra Speciale 1,5 + det er et niveau kun i menuen. Min sædvanlige ønske er at kunne tilpasse navigation så meget som nødvendigt. Nogle steder har kun få sider, mange andre har tonsvis af statiske sider + zillions af artikler / stillinger + masser af kategorier.
Så i ideelle verden at have en chance for at skabe flot hierarkisk organiseret brugervenlig navigation menu er et must. Speciale ret off the bat har god leder navigation, men jeg bemærkede, at alle Speciale-baserede websites er at ligne tvillinger. Tilpasning af Speciale navigationsmenuen er ikke rigtig nemt, så de fleste mennesker bare lade det som er. Der er ingen måde at ændre rækkefølgen af kategorier 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 kan gøres ved det.
Efter at have prøvet omkring halv snes menu / navigation relaterede plugins jeg sætte mit valg på Wordpress Navigation liste Plugin NAVT .
NAVT plugin er hovedsagelig uordnet liste generator med super fancy og lidt svære at finde utraditionelle admin interface. Hvad vildledende om det er, at det faktisk ikke skaber fancy udseende menuer af sig selv. Det gør den sværeste del af opgaven selv - giver dig en mulighed for visuelt at trække sig 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 mikse og matche og reden og arrangere og tilpasse dem i noget træ-lignende struktur, du ønsker.
NAVT genererer for dig resulterede HTML uordnet liste. Anden skønhed NAVT er, at det hjælper dig med at indsætte din nye menu ind i dit tema via berømte JQuery baserede logik, men uden behov for at ændre koden! NAVT giver dig mulighed for at angive: "erstatte dette # element med min nye NAVT menu". # Element kan være et id eller en klasse af stien til den eksisterende menu eller div element tag, der bliver genereret af din aktuelle tema. Så NAVT gør dette erstatning for dig uden at tvinge dig til at gå ind i temaet kode og gøre det mere rodet, end det allerede er. Hvis alle lyder som volapyk - bare rolig - 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 egentlige CSS + billeder + JavaScript-kode til din menu 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 blive tilsluttet sammen.
Med venlig hilsen uden at vide JQuery + nogle PHP + CSS + have en anstændig erfaring med Wordpress - denne ting er svært at trække.
Gerne Jeg kender det her en smule, så jeg besluttede at bide den prik og vejledning menneskeheden til frihed i opbygningen af den bedste af de bedste navigationsmenuer til Wordpress. Jeg har bare brug for at finde ud af kilder for nogle pæne vandrette CSS menuer. Jeg valgte dynamic drive hjemmeside for deres bedste valg, demoer og kilder.
Jeg dedikeret en dag til at studere Speciale og lege med NAVT plugin. I slutningen jeg stolt skabt sædvane, fleksibel, SEO optimeret, multilevel, indlejrede nagivation struktur for min Wordpress + afhandling baseret websted.
Liste over funktioner i flere niveauer, indlejret Wordpress navigationsmenuen til Thesis Theme
(Du nødt til at elske det her):
- Professional, rent udseende.
- Understøttelse af alle moderne browsere, herunder MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome i både javascript og ikke-javascript modes.
- Yndefuldt downgradable for ikke-javascript browsere. Du menu vil være anvendelige, visuelt ligner hinanden og arbejder endda for JavaScript handicappede browsere (dog kun på øverste niveau navigation vil være synlig og ingen flyouts sker selvfølgelig, da de er lavet af javascript).
- SEO venlige funktioner - uordnet liste menu koden genereres inden for 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 redebyggende niveauer og underniveauer.
- Støtte til vilkårlig rækkefølge eller sider, indlæg (via brugerdefineret URI'er), kategorier, brugere, brugerdefineret kode blokke og eksterne links i menuen.
- Understøttelse af tekst-såvel som billede-baserede menu elementer. (Jeg har endnu til at prøve dem selv).
- Menu struktur og indhold er visuelt justeres via NAVT admin område.
- Compact: jQuery baserede flyouts for nestede niveauer.
- Hurtig: JQuery for menuen er indlæst fra Google-servere (jeg ville elske Thesis sig at gøre det samme i stedet for at trække det lokalt). Dette ville fremskynde tingene lidt.
- Skalerbarhed - Denne type menu er redigerbare og konfigureres til enhver tid via NAVT plugin indstillinger uden behov for kodning overalt.
Jeg brugte denne fremragende menu fra Dynamic Drive portal som en base. Jeg var nødt til at tilpasse javascript kode, lidt ligesom der indgår luns af PHP i custom_functions.php 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 menustruktur. Dine site nærmere 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 indlejret, tilpasses, multilevel, SEO venlige
og bare cool ud navigation menu for Wordpress og Thesis Tema
- Gå til Wordpress admin panel. Plugins-> Tilføj ny at søge efter "navt". Det plugin vil blive vist. Klik på [Install], [Installer nu], "Aktiver Plugin".
- Værktøjer-> NAVT lister, Inside "Navigation-gruppen" område find "gruppenavn" og indtast: "menu1" i feltet, trykke på [Opret] knappen. "Menu1" rektangel område blev skabt.
Denne "menu1" område vil være den vigtigste legeplads for menu byggeri. Du vil blive at trække og slippe her dine menu elementer. - I "aktiver" område find "anden" listbox og klik på "Home" valg. "Home" thingie vises indersiden af "tildelt" område. Weird, eh? Ingen bekymringer, så længe det virker - og det vil for os.
- Træk denne "Home" thingie fra "aktiver" område i "menu1" rektangel område. Det vil blive "Home" punkt i menuen.
- Gentag trin 3-4 for nogle sider fra "Pages"-området, samt for kategorier i "kategorier" område. Træk eventuelle 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". Kode blok er cool måde at tilføje brugerdefinerede uddrag inde i menuen.
- Du kan trække menupunkter inde i "menu1" område at ændre deres rækkefølge.
- Du kan justere hierarkiske placering af hvert menupunkt med "<" og ">" pile.
- Hvis du klikker på teksten navnet på hvert menupunkt - åbner sindet boggling ekstra tilpasning dialogen for denne post. Jeg mest brugte standard, men teknisk set kan du gå amok og begynde at gøre billedet-baserede menu valg og tilføje bidder af HTML-kode ind i det. Fortsæt med forsigtighed selv.
- For linkless unclikable undermenuer, der vil tjene som "forældre" til andre "sub-børn" Jeg plejede "Code blok" type. For eksempel når du skal tilpasse sådan kode blok post jeg kom for "Menupunkt alias" = "MemberWing" og for "Indtast kode blok:" = "<a href='#'> MemberWing </ a>". Under href = "#" vil gøre det ikke klikbart, men fungerer som en gyldig "forælder" menuvalg.
- Her er hvordan min NAVT 'menu1' build struktur lignede næsten afsluttet:
- Afslut første bygning og derefter klikke på "gear" ikonet for at tilpasse din menu struktur:
- Det vil åbne dialog med 4 faner: Options, Display, CSS, Tema.
- Gå til "Indstillinger" fanen og sørg for alt er markeret, og "gruppenavn" siger: "menu1"
- Gå til "Vis" fanen og sørg for alt på "Vis navigations-gruppen ..." område er markeret [x]. Lad hvile på standardindstillinger.
- Gå til "CSS"-fanen og vælg alternativknappen (x) "Må ikke anvendes CSS klasser".
- Gå til "Theme" fanen og udfylde den sådan:
Sæt ind "Tilføj tags før ..." område denne kode:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Sæt ind "Tilføj tags efter ..." område denne kode:
<br style='clear: left' /></div> - Tryk på [Gem / CLOSE] knappen
- På dette tidspunkt menu bygning indefra NAVT plugin muligheder er færdig.
Nu er det tid til at gøre en lille melodi op for Thesis tema for at få den klar. For at vi er nødt til at tilføje et par brugerdefinerede filer - CSS og JavaScript, som hører til menuen og opdateringen speciale 'custom_functions.php - Download det komplette sæt af filer her .
- Unzip arkivet. Hvis du har opdateret din custom_functions.php med dine tilpasninger - du nødt til at flette dem med mine ting. Jeg vil lade det være op til dig.
Hvis du ikke har rørt det - velkommen til at overskrive det med mine. Bemærk venligst: jeg foretrak at placere menuen under hjemmesiden header (standard er ovenfor) - så min justering inkluderet dette præference så godt. - Upload arkiv inklusive alle undermapper og filer under dit speciale temaet 'custom' 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-specifikke CSS i henhold til deres egne steder for at undgå at skabe rod indeni custom.css - På dette punkt kan du genindlæse din hjemmeside og se nye smukke nye flere niveauer, indlejret, SEO optimeret menu.
- Du kan altid gå tilbage til NAVT indstillinger og tilpasse din menu med flere valgmuligheder eller flytte noget. Det vil blive afspejlet på levende hjemmeside automatisk.
Vejen frem ...
Denne tutorial omfattede kreative eksempel på en type af menuen. Jeg spillede med en anden - bare for at se, hvordan mørk menu ville se sådan ud:
Speciale tema - flere niveauer indlejret CSS menu - mørk palet
Jeg synes, det er ret nice. Der er mange flere navigations-prøver til rådighed på Dynamic Drive - alle af dem er muligt at tilpasse til Speciale og andre Wordpress temaer med en vis indsats:
Dynamic Drive Horisontale 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 Speciale - der er tid og lyst til at gøre det ske.
Jeg kunne gøre dette arbejde for dig på en kontrakt. Du skal bare vælge den menu, du vil, kontakte mig og jeg vil arbejde på koden og vejledning til din hjemmeside.
$ 20
Og selvfølgelig, hvis du er op til at bygge super SEO optimeret premium wordpress medlemskab portal - den bedste løsning for dette:
Speciale Tema + MemberWing medlemskab plugin + self hosted Wordpress selvfølgelig.
