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 farve palette for horisontalt

Jeg besluttede at få Thesis tema , fordi en af mine klienter informeret mig om kompatibilitetsproblemer mellem Eksamensprojekt og mit wordpress medlemskab site plugin MemberWing. Jeg fast, og besluttede derefter at tage et nærmere kig på Thesis og faktisk den ulejlighed at se videoer på forsiden af de vigtigste afhandling site - Diythemes.com .
Hvad imponeret mig mest, er opmærksom på detaljer, brugervenlighed og mest af alt - SEO funktioner, der er så godt tænkt.
MemberWing medlemskab plugin blev designet fra bunden til medlemskab websteder, der vil være nødvendigt at trække så meget SEO juice som muligt. Så jeg betalte masser af opmærksomhed til mange SEO forstærkninger og Fuldkommenheder i MemberWing. Mange af mine egne kunder spørger om forskellige temaer til brug, og som har tema, der var så godt SEO optimeret fra dybt inde ville være en god pasform til medlemskab portal iværksættere.

Ved at kombinere SEO beføjelser MemberWing med SEO beføjelser Thesis tema vil være den bedste af placeringen muligheder for at mine kunder. Så jeg fik Eksamensprojekt 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 menu bare. Min sædvanlige ønske er at kunne tilpasse navigation så meget som nødvendigt. Nogle steder har kun nogle få sider, mange andre har tonsvis af statiske sider + zillions af artikler / indlæg + masser af kategorier.
Så i ideel verden har en chance for at skabe flot hierarkisk organiseret brugervenlig navigation menu er et must. Afhandling ret off the bat har god leder navigation, men jeg har bemærket, at alle Eksamensprojekt-baserede websites er at ligne tvillinger. Tilpasning Thesis navigationsmenu er ikke rigtig let, så de fleste folk bare lade det som det er. Der er ingen måde at ændre rækkefølgen af kategorierne i menuen eller placere dem i mellem siderne. Og igen, er evnen til at skabe nested menu strukturer mangler. Så jeg besluttede at se, hvad der kunne gøres ved det.
Efter at have prøvet omkring halvdelen dusin menu / navigation relaterede plugins jeg mit valg på Wordpress Navigation List Plugin NAVT .
NAVT plugin er væsentlige uordnet liste generator med super smarte og lidt svære at finde utraditionelle admin interface. Hvad vildledende om det er, at det faktisk ikke skaber fancy ud menuer af sig selv. Det gør den sværeste del af jobbet selv - giver dig en mulighed for at visuelt samle og generere uordnet liste - skelet af din menu-til-være. Og du kan skabe mange menuer også. Du kan trække alle former for Wordpress ting i navigationsmenuen: sider, stillinger, artikler, kategorier, brugere, kode blokke, eksterne links, dividers, separatorer og mix og match og reden og arrangere og tilpasse dem i enhver 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 i din tema via berømte JQuery baseret logik, men uden behov for at ændre noget kode! NAVT tillader dig at angive: "erstatte dette # element med min nye NAVT menu". # Element kunne være en id eller gruppe af sti af eksisterende menu eller div element tag, der bliver genereret af din nuværende tema. Så NAVT gør denne udskiftning for dig uden at tvinge dig til at gå ind i temaet kode og gøre det mere rodet end det allerede er. Hvis det lyder som volapyk - ikke 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 konkrete 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 få sluttet sammen.
Med venlig hilsen, uden at vide JQuery + nogle PHP + CSS + har anstændige erfaring med Wordpress - denne ting er svært at trække.
Gerne jeg kender det her en smule, så jeg besluttede at bide i det sure og guide menneskeheden til frihed i opbygningen af bedste af det bedste navigation menuer for Wordpress. Jeg har lige brug for at finde ud af kilder til nogle pæne ud horisontale CSS menuer. Jeg plukkede dynamisk drive hjemmesiden for deres bedste valg, demoer og kilder.

Jeg dedikeret en dag til at studere Eksamensprojekt og lege med NAVT plugin. I slutningen jeg stolt skabt skik, fleksibel, optimeret SEO, multilevel, indlejret Nagivation struktur for min Wordpress + Eksamensprojekt baseret site.

Liste over funktioner i flere niveauer, indlejret Wordpress navigationsmenu for Eksamensprojekt Theme
(Du GOT at elske det her):

• Professional, rene look og feel.
• Støtte til 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 selv for javascript handicappede browsere (dog kun på øverste niveau navigation vil være synlig og ikke flyouts vil ske naturligvis som de er fremstillet af javascript).
• SEO venlige funktioner - uordnet liste menu-koden genereres i HTML. Google og andre søgemaskiner spiders vil være i stand til at indeksere dine navigation og finde links til indvendige sider.
• Støtte til ubegrænset redebygning niveauer og sublevels.
• Støtte til vilkårlig rækkefølge eller sider, stillinger (via brugerdefinerede URI'er), kategorier, brugere, brugerdefineret kode blokke og eksterne links i menuen.
• Support af tekst-såvel som image-baseret menu elementer. (Jeg har endnu til at prøve disse selv om).
• Menu struktur og indhold er visuelt kan justeres via NAVT admin område.
• Compact: JQuery baseret flyouts for indlejrede niveauer.
• Hurtig: JQuery for menuen er hentet fra Google-servere (Jeg ville elske Eksamensprojekt selv 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 konfigurerbar til enhver tid via NAVT plugin indstillinger uden at der er behov for kodning overalt.

Jeg brugte denne fremragende menu fra dynamiske drive portalen som en base. Jeg var nødt til at tilpasse javascript kode en smule, ligesom der indgår luns af PHP i custom_functions.php at gøre det arbejde med specialet. Også antallet af allerede eksisterende sider, kategorier og indlæg fra min side blev brugt til at samle menustrukturen. Dit site specifikke 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 indlejrede, tilpasselig, multilevel, SEO venlige
og bare plain cool ud navigationsmenu for Wordpress og Eksamensprojekt Theme

1. Gå til Wordpress admin panel. Plugins-> Tilføj ny, søg efter "navt". Dette plugin vil blive vist. Klik på [Install] [Installer nu], "Aktiver Plugin".
2. Værktøjer-> NAVT Lister, Inside "Navigation Group" område find "gruppenavn" og indtast: "menu1" i feltet, tryk [Opret] knappen. "Menu1" rektangel område fik skabt.
   Denne "menu1" område vil være den vigtigste legeplads for menu byggeri. Du vil blive at trække og slippe her din menu elementer.
3. I "aktiver" område finde "andre" listefeltet og klik på "Home" valg. "Home" thingie vises indersiden af "ikke tildelt" område. Weird, eh? Ingen bekymringer, så længe det virker - og det vil for os.
4. 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 "Sider" område, samt for kategorier i "kategorier" område. Træk alle andre elementer, du vil være på din menu inde i "menu1" rektangel. Du kan klikke på sider, kategorier, brugere og nogle brugerdefinerede elementer såsom "liste divider" og "kode blok". Kode blokken er cool måde at tilføje brugerdefinerede uddrag inde i menuen.
   • Du kan trække menupunkterne inde i "menu1" område for at omarrangere deres rækkefølge.
   • Du kan justere hierarkiske placering af hver menupunkt med "<" og ">" pile.
   • Ved at klikke på teksten navnet på hvert menupunkt - åbner sindet boggling ekstra tilpasning dialogen til denne post. Jeg mest anvendte standard, men teknisk kan du gå skøre og begynde at gøre image-baseret menu valg og tilføje bidder af HTML-kode ind i det. Fortsæt med forsigtighed selv.
   • For linkless unclikable undermenuer, der skal tjene som "forældre" for andre "sub-børn" Jeg brugte "Code blok" type. For eksempel når tilpasser sådan kodeks blok post jeg trådte for "Menupunkt alias" = "MemberWing" og for "Enter code blok:" = "<a href='#'> MemberWing </ a>". Under href = "#" vil gøre det ikke klikbare, men fungerer som en gyldig "forælder" menu valg.
5. Her er hvordan mit NAVT 'menu1' bygge struktur lignede næsten afsluttet:
   
6. Finish oprindelige bygning og derefter klikke på "gear" ikonet for at tilpasse din menu struktur:
   
7. Det vil åbne dialog med 4 faner: Valg, Display, CSS, Tema.
   1. Gå til "Indstillinger" fanen og sørg for alt er markeret, og "gruppe navnet" siger: "menu1"
   2. Gå til "Display"-fanen og sørg for alt på "Vis navigation gruppe på ..." område er markeret [x]. Lad hvile defaults.
   3. Gå til "CSS" fanen og vælge radio knap (x) "Må ikke anvendes CSS klasser".
   4. Gå til "Theme"-fanen og udfylde det i sådan:
      
      Indsæt i "Tilføj tags før ..." område denne kode:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Indsæt i "Tilføj tags efter ..." område denne kode:
      <br style='clear: left' /></div>
   5. Tryk på [gem / luk] knappen
8. På dette punkt menu bygning indefra NAVT plugin valgmuligheder er færdig.
   Nu er det tid til at gøre en lille melodi op for Thesis tema for at få det klar. For at vi skal tilføje et par skik filer - CSS og javascript, der hører til menu og opdatere Eksamensprojekt "custom_functions.php
9. Download den komplette sæt af filer her .
10. Unzip arkivet. Hvis du har opdateret din custom_functions.php med dine tilpasninger - skal du flette dem med mine ting. Jeg vil overlade det til dig.
    Hvis du ikke har rørt ved den - velkommen til at overskrive den med min. Bemærk venligst: jeg foretrak at placere menuen under hjemmesiden header (standard er ovenfor) - så min justeringen omfattede denne præference så godt.
11. Upload arkivet herunder alle undermapper og filer under din afhandling tema 'tilpassede' mappe, som dette:
    .../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 inde custom.css
12. På dette punkt kan du genindlæse din hjemmeside og se nye flotte nye niveauer, indlejrede, SEO optimeret menu.
13. Du kan altid gå tilbage til NAVT indstillinger og tilpasse din menu med flere valg eller flytte noget. Det vil blive afspejlet på live site automatisk.

Vejen frem ...

Denne tutorial inkluderet kreative eksempel på en type af menuen. Jeg spillede med en anden - bare for at se, hvordan mørkt farvet menu vil se sådan ud:

Afhandling tema - multilevel indlejrede CSS menu - mørk palet

Jeg synes, det er ret nice. Der er mange flere navigatør prøver findes på Dynamic Drive - alle af dem er muligt at tilpasse til Eksamensprojekt og andre Wordpress temaer med en indsats:

Dynamic Drive Vandret Menuer

Jeg håber at du finder denne tutorial gavnlige og nyttige. Som jeg sagde, er det muligt at tilpasse nogle af disse menuer til Eksamensprojekt - at der gives 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 instruktioner til dit websted.

$ 20

Og selvfølgelig, hvis du er op til bygningen super SEO optimeret præmie wordpress medlemskab portal - den bedste løsning for dette:
Thesis Theme + MemberWing medlemskab plugin + selvstændig vært Wordpress selvfølgelig.

Tagged som: CSS menu for wordpress , afhandling tema , afhandling tema hierarkiske menuer , afhandling tema multilevel menu , afhandling tema Nagivation , afhandling tema indlejrede menuer , afhandling tema tutorial , wordpress css menu , wordpress indlejret menu