Multilevel lodret hierarkisk nested menu til Wordpress

Tilføjelse multilevel, indlejret, SEO venlige navigationsmenu til WordPress - del 2

af gesman den 10 juli 2009

Jagten på den perfekte Lodret menu ...

Del 1 af denne tutorial beskrevet trinvis proces med at opbygge horisontale multilevel nested menu til WordPress Thesis tema . Del 2 vil fortsætte på at forbedre denne funktionalitet. Her vil vi tilføje "mørke" version af horisontale navigationsmenuen og jeg vil lære dig at skifte mellem "lyst" og "mørke" version. Del 2 er den overordnet del 1. Det omfatter alt fra del 1 + tilføjer mere cool stuff.

Grundtanken at jeg ønskede at præsentere tilføjer lodret menu til (og WordPress i almindelighed). Jeg ledte efter virkelig fleksibel, SEO venlige og multi-browser kompatibel lodret menu, der gør det muligt at skabe ubegrænset rugende niveauer.

WEB har tonsvis af sider på emnet, men da jeg begyndte at prøve alle disse prøver - de enten brød ned, faldet fra hinanden, understøttes kun et begrænset antal niveauer eller misbehaved i Gates + Ballmers junksplorer 6. Endelig fik jeg tilbage til afprøvede og betroede Dynamic Drive menuerne som deres vertikale prøver viste sig at være en god sag, passer mine strenge krav. Jeg var nødt til markant at ændre dem selv for at sikre det passer Speciale model.
Den søgen efter perfektion fortsætter ...

Jeg brugte omkring 16 timer at søge, montage, test, fastsættelse, polering og tuning lodret menu 's CSS og. Js kode og 3/4 af tiden blev brugt gør det at arbejde i MSIE 6.
Anyways, jeg var tilfreds med det endelige resultat. Resulterede lodrette navigationsmenu har alle de samme fordele , som vandret menu har.

Har evnen til at tilføre lodret menuen er det meget vigtigt at omkring 70-80% af portaler på nettet. Horisontale menuer har begrænset "plads" til at rumme mange menuvalg, men vertikal menu ikke har denne begrænsning, og ville hjælpe enormt. Så here we go.

Masser af skridt til at gøre det ske, er allerede beskrevet i del 1 i tutorial , så dette vil gøre det til en lidt kortere, men med langt mere funktionsrige resultater.

Så her går det:

Bygning SEO venlige, lodret, multilevel, hierarkisk indlejret menu til WordPress og Thesis tema. Trin for Trin
(... Hvad du aldrig troede muligt ...)

  1. Installer exec php plugin og aktivere den. Vi får brug for det, fordi jeg vil bruge PHP inde i teksten widget til at udlede vertikal menu 'HTML-kode.
  2. Udfør trin 1 - 6 fra del 1 tutorial . Dybest set skal du installere og aktivere bruge NAVT plugin + visuelt bygge din menu. Sørg for, at din menu gruppe navn er 'menu1'. Dette navn er indkodet i custom_functions.php
  3. Klik på 'gear' ikonet for din 'menu1 "gruppe for at redigere det egenskaber:
    navt_customize_menu
  4. Følger Steps 7,1 -7.3 i del 1 tutorial til at indstille "Options", "Vis" og "CSS" faner indstillinger.
  5. Klik nu på "Tema" fane i dialogen. Vi vil overskrive antallet af indstillinger, der (hvis du har fulgt trin 1). Det er ok - du vil ikke miste noget - men disse ændringer er nødvendige, fordi jeg har ændret noget kode fra trin 1.
    Her er, hvordan denne dialog skal udfyldes:
    1. Inde i "Tema XPath:" areal indtaste denne kode (det befaler at erstatte nogen tag med disse klasser):
      .jquerycssmenu, .jqueryslidemenu
    2. Indstil "Action" til "Erstat med"
    3. Inde i "Tilføj tags før navigation gruppe" område, indtast denne kode:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. Inde i "Tilføj tags efter navigation gruppe" område, indtast denne kode:
      <br style='clear: left' /></div>
    5. Klik på [Gem / CLOSE] knappen.
  6. Nu skal du gå til WordPress admin panel -> Udseende -> Widgets.
  7. Træk "Tekst" widget (fra den store "Tilgængelige widgets" område) til "Sidebar 1" område til højre. Vi vil tilføje kode i tekst widget, der vil hjælpe os med at materialisere lodret menu.
    BEMÆRK: Jeg formoder du har "Sidebar 1" i eksistens. Afgangsprojekter indstillinger giver dig mulighed for at slukke for den - men af ​​hensyn til denne tutorial lad gøre det være.
  8. Når du trækkes og slippes denne widget - det vil som åbner sig som en blomst (Jeg føler mig romantisk nu, at MSIE kamp er overstået).
  9. I "Title" område enter "Verdens bedste lodrette menu" ... Nå, er du velkommen til at bruge din kreativitet - at teksten vil gå over dit nyfødte lodret menu.
  10. I stort område for tekst - indtaste denne PHP kode:
    <?php
    if (function_exists('navt_getlist'))
    $menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
    else
    $menu_html = "";
    $menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
    echo $menu_html;
    ?>
  11. Tryk på knappen [Gem], klik på "Luk" link.
  12. Hent opdateret sæt af filer her .
    Dette arkiv indeholder:


    • Opdateret version af "lyse" horisontal menu code
    • "Mørke" version af den horisontale menu
    • Lodrette menu koder
    • Opdateret version af custom_functions.php
  13. Nu skal du unzippe dette arkiv og uploade det i "custom" mappe på din Thesis tema.
    Bemærk: Hvis du har gjort nogle tilpasninger inde custom_functions.php - du er nødt til at flette dem. Hvis ikke - er du velkommen til at overskrive den med min version.
  14. Voila! Nu kan du genindlæse din hjemmeside og se den samme "lyse" horisontale menu + neato lodret menu i venstre sidebar.
  15. BONUS opgave: Lad ændre "lyse" horisontal menuen på "mørke" farveskema.
    1. Inside custom_functions.php fil:
      erstatte denne kode:
      echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      //echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
      med denne kode:
      //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
      Dybest set er vi udkommentere en linje og afkommentering den anden.
    2. Nu skal du gå til WordPress admin-> Værktøj-> NAVT lister og klik på ovennævnte "gear" ikonet for at redigere egenskaberne for din 'menu1' gruppe.
    3. Klik på "Theme" fanen.
    4. Inde i "Tilføj tags før navigation gruppe" område, indtast denne kode:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Nu - genindlæse din side - og dit hoved horisontale navigationsmenu "magisk" blev mørkt, noget lignende:
      Thesis theme - multilevel nested CSS menu - dark palette

      Speciale tema - flere niveauer indlejret CSS menu - mørk palet

      Mørk farve palette kan være mere egnet til visse steder end den lyse farve en. Så nu har du en valgfrihed i dit liv!

    6. For at komme tilbage til "lyst" farveskema - bare undo over 'Bonus' trin.
  16. Konklusion:
    Jeg elsker Thesis tema, jeg elsker WordPress, og jeg elsker det faktum, at vi har et måder at tilføje ordentlige navigationsmenuer til vores portaler.

$ 20


God fornøjelse!

Gleb Esman

{Henvendelse om denne post er lukket}

Speciale Tema - multilevel, indlejret, SEO venlige menu - Tutorial

Speciale Tema Tutorial - at tilføje flere niveauer, indlejret, SEO venlige navigationsmenu til WordPress

af gesman den 8 juli 2009

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 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 former for 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 menu for 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.
  • Kompakt: jQuery baserede flyouts til indlejrede 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 stedet 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 og Thesis Theme

  1. 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".
  2. 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.
  3. 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.
  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 "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.
  5. Her er hvordan min NAVT 'menu1' build struktur lignede næsten afsluttet:
    navt_building_icon
  6. Afslut første bygning og derefter klikke på "gear" ikonet for at tilpasse din menu struktur:
    navt_customize_menu
  7. Det vil åbne dialog med 4 faner: Options, Display, CSS, Tema.
    1. Gå til "Indstillinger" fanen og sørg for alt er markeret, og "gruppenavn" siger: "menu1"
    2. Gå til "Vis" fanen og sørg for alt på "Vis navigations-gruppen ..." område er markeret [x]. Lad hvile på standardindstillinger.
    3. Gå til "CSS"-fanen og vælg alternativknappen (x) "Må ikke anvendes CSS klasser".
    4. Gå til "Theme" fanen og udfylde den sådan:
      navt_configuration_theme_tab_icon
      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>
    5. Tryk på [Gem / CLOSE] knappen
  8. 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
  9. Hent det komplette sæt af filer her .
  10. 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.
  11. 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
  12. På dette punkt kan du genindlæse din hjemmeside og se nye smukke nye flere niveauer, indlejret, SEO optimeret menu.
  13. 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:

Thesis theme - multilevel nested CSS menu - dark palette

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 Horizontal Menus

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.

comments } { 15 kommentarer }

Premium Post 3

5 juli 2009

Det er gratis teaser for præmie Post 3. Denne artikel indeholder kombineret indhold: Første del er synlig for Guld medlemmer, hele artiklen er kun synlig for Platinum medlemmer. Prøv at logge ind som guldmedlem første (brugernavn / password = guld / guld) - du vil se mere indhold. ... Og så logoff og re-login som platin [...]

Læs hele artiklen →

Premium Post 2

5 juli 2009

Det er gratis teaser for præmie post 2. Resten er synlig for Gold og kun for medlemmer. Tip - guld medlem login / password = guld / guld ......

{{{Guld | platin}}}
Resten af ​​denne artikel er til rådighed for premium kun for medlemmer.
Login eller Tilmeld

Læs hele artiklen →

Premium post 1

5 juli 2009

Dette er demo artiklen til MemberWing-X. Med MemberWing-X denne artikel er truffet foranstaltninger til indkøb til en samlet pris på 2,95 dollar eller ved at abonnere på "Gold-medlemskab"-programmet. Så dette er gratis teaser for præmie indlæg 1. Resten af ​​denne artikel er kun synligt for medlemmer, der har købt den for 2,95 dollar eller abonneret på "Gold [...]

Læs hele artiklen →

Speciale tema og medlemskab site plugin MemberWing til de bedste SEO medlemskab websteder

5 juli 2009

MemberWing er en WordPress-medlemskab site plugin designet specielt til SEO optimerede medlemskab portaler. Med det fleksible indekserbare teasere, støtte til Google Først Klik Free standard, digitalt indhold og download beskyttelse bemyndiget med PromoFusion - det garanterer dit medlemskab site hurtig indeksering og højere placeringer. Mens andre medlemskab site software kan lide at helt deaktivere adgang [...]

Læs hele artiklen →