Hi per al menú vertical perfecta ...

Part 1 d'aquesta guia es descriu pas a pas el procés de construcció de menú horitzontal de diversos nivells niats de tema de tesi de WordPress . Part 2 continuarà per millorar aquesta funció. Aquí anem a afegir "fosc" de la versió del menú de navegació horitzontal i et vaig a ensenyar com canviar entre "brillant" i la versió "fosca". La part 2 és el superconjunt de la part 1. Inclou totes les de la part 1 + afegeix més coses interessants.

La idea principal que jo volia presentar és l'addició de menú vertical de (i WordPress en general). Jo estava buscant realment flexible, SEO amigable i multi-navegador compatible amb el menú vertical que permet crear un nombre il · limitat de nivells d'anidamiento.

WEB té un munt de pàgines sobre el tema, però quan vaig començar a provar tots aquests exemples - que o bé es va enfonsar, ensorrat, amb el suport només nombre limitat de nivells o de mal comportament a les portes + Ballmer junksplorer 6. Finalment vaig arribar a jutjats i de confiança menús Dynamic Drive com les seves mostres verticals resultar ser un bon cas que s'adapti a les meves necessitats estrictes. Vaig haver de modificar-los de manera significativa, encara que per assegurar-se que s'ajusta al model de tesi.
La recerca de la perfecció segueix ...

Vaig passar al voltant de 16 hores de recerca, muntatge, proves, fixar, polir i afinar CSS menú vertical i. Codi JS i 3/4 del temps es va dedicar a fer que funcioni en MSIE 6.
De tota manera, jo estava feliç amb el resultat final. Anar al web vertical resultat té els mateixos beneficis que el menú horitzontal té.

Tenir capacitat d'agregar menú vertical és molt important al voltant del 70-80% dels portals a la web. Menús horitzontals han limitat "espai" per donar cabuda a moltes opcions de menú, però el menú vertical no tenen aquesta limitació i que ajudaria enormement. Així que aquí anem.

Molts dels passos perquè això passi ja s'han descrit en la part 1 del tutorial així que això ho farà per un poc més curt, però amb resultats molt més rics en funcions.

Així que aquí va:

Edifici SEO, vertical, menús multinivell, jerarquitzats per WordPress i el tema de tesi. Pas a pas
(... El que mai va creure possible ...)

  1. Instal · lar plugin del PHP executiu i que s'activi. Nosaltres el necessitem, perquè vaig a utilitzar PHP dins del giny de text per emetre el codi HTML del menú vertical ".
  2. Feu els passos 1 a 6 de la part 1 del tutorial . Bàsicament el que necessita per instal · lar i activar utilitzar el plugin NAVT + visual construir el seu menú. Assegureu-vos que el nom del grup de menú és 'menu1'. Aquest nom està codificada en custom_functions.php
  3. Feu clic al 'art' icona de la 'menu1' grup per editar les seves propietats:
    navt_customize_menu
  4. Segueix els passos 7,1 -7,3 de la part 1 tutorial per configurar "Opcions", "Pantalla" i "CSS" ajustos de les fitxes.
  5. Ara feu clic al "tema" de la pestanya d'aquest diàleg. Anem a sobreescriure nombre d'ajustos d'allí (si estat seguint el pas 1). Això està bé - no es perd res - però aquests canvis són necessaris perquè he canviat una mica el codi del pas 1.
    Així és com aquest diàleg ha de ser omplert a:
    1. Dins del "Tema xpath:" àrea d'introduir aquest codi (que mana per substituir qualsevol etiqueta amb aquestes classes):
      .jquerycssmenu, .jqueryslidemenu
    2. Ajust "Acció" a "Reemplaça amb"
    3. Dintre de "Afegeix etiquetes abans de la navegació grup de" àrea d'introduir aquest codi:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. Dins de "Afegeix etiquetes de grup després de la navegació" zona aquest codi:
      <br style='clear: left' /></div>
    5. Feu clic a [Desa / Cerrar] botó.
  6. Ara cita en el panell d'administració de WordPress -> Aparença -> Widgets.
  7. Arrossegament "Text" widget (a partir de la gran "widgets disponibles" d'àrea) a la "barra lateral una" àrea de la dreta. Anem a afegir un codi en el giny de text que ens ajudarà a materialitzar menú vertical.
    NOTA: Suposo que vostè té "barra lateral 1" en l'existència. Opcions de tesi li permet apagar - sinó pel bé d'aquest tutorial anem fer que sigui.
  8. Una vegada que arrossegar i deixar anar aquest giny - s'obre com una flor (em sento romàntica ara que ha acabat la lluita MSIE).
  9. A "Títol" àrea d'entrar en "el millor Mundial de menú vertical" ... Bé, no dubteu a utilitzar la seva creativitat - que el text anirà per sobre del seu menú vertical dels nadons.
  10. A l'àrea gran per al text - introduïu el codi PHP:
    <?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. Premeu [Guardar], feu clic a "Tancar" link.
  12. Descarregar actualitzat dels arxius aquí .
    Aquest arxiu inclou:


    • Versió actualitzada de "brillant" codi de menú horitzontal
    • "Fosc" versió del menú horitzontal
    • Codis de menú vertical
    • Versió actualitzada de custom_functions.php
  13. Ara cal descomprimir l'arxiu i pujar-lo a la "costum" del directori del seu tema de tesi.
    Nota: si vostè ha fet totes les personalitzacions a l'interior custom_functions.php - que havia necessitat de combinar-los. Si no és així - no dubteu a sobreescriure amb la meva versió.
  14. Voila! Ara vostè pot carregar el seu lloc web i veure el mateix "brillant" al menú horitzontal + menú neato vertical a la barra lateral esquerra.
  15. Tasca BONUS: Que canviï "brillant" al menú horitzontal en l'esquema de "fosc" de color.
    1. Dins de l'arxiu custom_functions.php:
      reemplaçar aquest codi:
      echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      //echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu

      amb aquest codi:
      //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu

      Bàsicament estem comentant una línia i habilitant l'altre.
    2. Ara veu a WordPress Admin-> Eines-> Llistes NAVT i feu clic a esmentada "engranatge" icona per editar les propietats del seu 'menu1' grup.
    3. Feu clic a "Tema" fitxa.
    4. Dintre de "Afegeix etiquetes abans de la navegació grup de" àrea d'introduir aquest codi:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Ara - torni a carregar la pàgina - i el seu menú principal de navegació horitzontal "màgicament" es va convertir en fosc, alguna cosa així:
      Thesis theme - multilevel nested CSS menu - dark palette

      Tema de tesi - el menú de nivells múltiples niat CSS - paleta fosca

      Paleta de color fosc poden ser més adequats per a certs llocs que el color de la llum. Així que ara vostè té una llibertat d'elecció en la seva vida!

    6. Per tornar a l'esquema de "brillant" de color - només desfer per sobre de "bonus" passos.
  16. Conclusió:
    M'encanta tema de tesi, m'encanta WordPress i m'encanta el fet que tenim diverses formes d'afegir menús decents de navegació per als nostres portals.

20 $


Gaudiu!

Gleb Esman

{Els comentaris sobre aquesta entrada estan tancats}

La recerca del menú perfecte ...

Aquesta és la part 1 del tutorial
Part 2 d'aquest tutorial ensenya com construir menú vertical + paleta de color fosc per al horitzontal

Vaig decidir tema de tesi , perquè un dels meus clients m'ha informat sobre els problemes de compatibilitat entre la tesi i la meva pertinença Plugin de WordPress lloc MemberWing. M'ho van arreglar i va decidir fer una ullada més de prop de tesi i es va prendre la molèstia de veure vídeos a la pàgina principal del lloc de la tesi principal - Diythemes.com .
El que més em va impressionar és l'atenció a la facilitat d'ús detall, i sobretot -. Característiques de SEO que estan tan ben pensat
MemberWing plugin de pertinença ha estat dissenyat des de zero per als llocs d'adhesió que hauria de treure el suc de SEO tant com sigui possible. Així que he pagat un munt d'atenció a multitud de millores de SEO i perfeccions en MemberWing. Molts dels meus clients pregunten als usuaris sobre diferents temes d'usar i tenir tema de què estava tan bé optimitzat SEO des del fons seria un complement excel · lent per als empresaris membres del portal.

La combinació dels poders de SEO SEO MemberWing amb poders de de donar el millor de les oportunitats de classificació per als meus clients. Així que em Tesis i jugar amb ell per un dia.

És un excel · lent tema en tots els sentits. La part de navegació de la mateixa, encara que és una mica limitat en la seva funció. A partir de la tesi 1.5 + és un menú de nivell únic. El meu desig és habitual per poder personalitzar la navegació tant com sigui necessari. Alguns llocs tenen només unes poques pàgines, molts altres tenen tones de pàgines estàtiques + infinitat d'articles i llocs de + un munt de categories.
Així que en el món ideal que té l'oportunitat de crear bonic menú organitzat jeràrquicament de navegació fàcil d'usar és una necessitat. Tesi de la dreta del pal de navegació té bona pinta però em vaig adonar que tots els llocs web basats en la tesi-que busca com bessons. Personalització de Tesi menú de navegació no és molt fàcil, així que la majoria de la gent simplement deixar-lo com està. No hi ha manera de canviar l'ordre de les categories en el menú o la posició d'ells en les pàgines. I un cop més, la capacitat de crear estructures niuades del menú es troba. Així que vaig decidir veure què es podia fer al respecte.
Després de tractar sobre mitja dotzena de menús de navegació / plugins relacionats vaig posar la meva elecció en WordPress NAVT Plugin de navegació llista .
Plugin de NAVT és essencialment desordenada generador de llista de super luxós i una mica difícils d'entendre no tradicional interfície d'administració. El caràcter enganyós de tot és que en realitat no crear menús de luxe que busquen per si mateix. Ho fa la part més difícil de la feina, encara que - et dóna una capacitat de tirar de forma visual en conjunt, i generar una llista desordenada - esquelet del seu menú-a-ser. I vostè pot crear menús de molts també. Vostè pot tirar de tot tipus de coses WordPress al menú de navegació: pàgines, missatges, articles, categories, usuaris, blocs de codi, enllaços externs, divisors, separadors i barrejar i combinar i niu i organitzar i personalitzar en qualsevol estructura d'arbre que desitgi.
NAVT genera per a vostè com a resultat HTML llista desordenada. En segon lloc la bellesa de la NAVT és que ajuda a que vostè inseriu el nou menú en el seu tema a través de la lògica basada en JQuery famosa però sense necessitat de canviar cap codi! NAVT li permet especificar: "reemplaçar aquest element # amb el meu menú de NAVT nou". # Element pot ser un ID o classe de camí de menú existent o etiqueta d'element div que està sent generat pel tema actual. Així NAVT fa reemplaçament per a vostè sense obligar-los a entrar en el tema del codi i fer-lo més complicat del que ja és. Si tot això sona com un galimaties - no et preocupis - em guiarà pas a pas aviat. La part desafiant de NAVT per a tothom és que vostè haurà d'arribar a real de CSS + Javascript + codi d'imatges per mateix menú. I li toca a vostè per esbrinar on i com integrar aquests arxius i fer que aquestes coses es connecten entre si adequadament.
Sincerament, sense saber jQuery + una mica de PHP + CSS + amb experiència decent amb WordPress - això és difícil d'aconseguir.
Amb molt de gust jo sé aquestes coses una mica, així que vaig decidir fer el cor i guiar a la humanitat a la llibertat en la construcció del millor dels millors menús de navegació per WordPress. Només havia de trobar fonts d'algunes bones horitzontals que busquen menús CSS. Vaig agafar web unitat dinàmica dels seus millors seleccions, demos i fonts.

Vaig dedicar un dia a estudiar i jugar la tesi amb el plugin NAVT. Al final he creat amb orgull personalitzat, flexible, optimitzat per SEO, l'estructura de diversos nivells, nagivation niat al meu lloc Tesi WordPress + base.

Llista de les característiques de diversos nivells, niats del menú de tema de tesi
(Has de estimar aquestes coses):

  • Aspecte professional, net i se sent.
  • Suport per a tots els navegadors moderns, incloent MSIE 6,7, Opera, Safari, 3.x Firefox, Google Chrome en JavaScript i les maneres no javascript.
  • Gràcia downgradable per falta de javascript navegadors. Vostè menú es podrà utilitzar, visualment similar i de treball, fins i tot per als navegadors amb javascript desactivat (encara que de navegació de nivell superior només serà visible i no passarà menús laterals, per descomptat, ja que estan fetes per javascript).
  • Característiques SEO friendly - desordenada llista de codis del menú es genera dins d'HTML. Google i altres motors de cerca serà capaç d'indexar la seva estructura de navegació i trobar enllaços a pàgines interiors.
  • El suport a un nombre il · limitat de nivells de anidament i subnivells.
  • Suport per qualsevol motiu i pàgines, els missatges (definits per l'usuari a través d'URI), les categories, els usuaris, els blocs de codi personalitzat i enllaços externs al menú.
  • El suport del text, així com la imatge basada en els elements del menú. (Encara he de provar aquests però).
  • L'estructura del menú i el contingut visual és ajustar mitjançant àrea d'administració NAVT.
  • Compacte: JQuery menús laterals basats en els nivells niats.
  • Ràpid: jQuery per al menú es carrega des dels servidors de Google (m'encantaria Tesi si mateix per fer el mateix en lloc de tirar de forma local). Això podria accelerar una mica les coses.
  • Escalabilitat - Aquest tipus de menú és editable i configurable en qualsevol moment a través de la configuració de connectors NAVT sense necessitat de codificar en qualsevol lloc.

He utilitzat aquest excel · lent menú de la unitat dinàmica del portal com a base. Vaig haver de personalitzar el codi Javascript una mica, així com incloure tros de PHP en custom_functions.php perquè funcioni amb la tesi. També el nombre de les pàgines preexistents, les categories i els llocs del meu lloc web es van utilitzar per muntar l'estructura del menú. Les seves característiques específiques del lloc serà diferent - però conceptes serà el mateix.
Així que seguirem endavant, d'acord?

Instruccions pas a pas per configurar NAVT basat niat, personalitzable en múltiples nivells, SEO
i simplement genial mirant i Tesi Tema

  1. Anar al panell d'administració de WordPress. Plugins-> Afegeix nou, busqui "navt". El connector es mostrarà. Feu clic a [Instal · lar], [Instal · lar ara], "Activar plugin".
  2. Eines-> Llistes NAVT, dins de "Grup de Navegació" zona de trobar "el nom del grup" i escriviu: "menu1" al camp, premeu botó [Crea]. "Menu1" àrea d'un rectangle he creat.
    Aquest "menu1" àrea serà el pati principal per a la construcció del menú. Se li arrossegar i deixar anar els elements d'aquest menú.
  3. En els "actius" zona de trobar "un altre" quadre de llista i feu clic a "Inici" elecció. "Home" coseta apareixerà dins de "no assignada" la zona. Estrany, eh? No es preocupi, sempre que funciona - i voluntat per a nosaltres.
  4. Arrossegueu aquest "Home" coseta d '"actius" àrea en àrea rectangular "menu1". Es convertirà en "Inici" al menú.
    • Repetiu els passos 3-4 per a algunes pàgines de "pàgines" d'àrea, així com per a les categories de "categories" zona. Arrossegueu qualsevol altre element que desitgi estar al menú del seu interior "menu1" rectangle. Podeu fer clic a les pàgines, categories, usuaris i alguns elements personalitzats, com "divisor de llista" i "bloc de codi". Bloc de codi és la forma freda per afegir fragments de codi personalitzats dins del menú.
    • Podeu arrossegar elements de menú dins de "menu1" àrea per canviar el seu ordre.
    • Vostè pot ajustar la posició jeràrquica de cada element de menú amb "<" i ">" fletxes.
    • En fer clic al nom de text de cada element de menú - s'obre al · lucinant diàleg de personalització addicionals per a aquest article. Que utilitza sobretot per defecte, però tècnicament pot tornar-se boig i començar a fer la imatge basada en les opcions del menú i afegir els trossos de codi HTML a ella. Dirigiu-vos cautela, però.
    • Per submenús unclikable sense unions, que serviran com 'pares' d'altres "sub-fills" Jo "en bloc" Codi Tipus. Per exemple, quan la personalització d'aquest element bloc de codi que va entrar per a "element de menú àlies" = "MemberWing" i "Enter bloc de codi:" = "<a href='#'> MemberWing </ a>". Tenir href = "#" farà que no es pot fer clic, però que actua com a vàlida l'elecció "pare" del menú.
  5. Així és com el meu NAVT 'menu1' estructura de construcció que semblava gairebé acabat:
    navt_building_icon
  6. Finalitzar la construcció inicial i després feu clic a "engranatge" icona per personalitzar l'estructura del seu menú:
    navt_customize_menu
  7. S'obrirà el diàleg amb 4 pestanyes: Opcions de visualització, CSS, Tema.
    1. Anar a la pestanya "Opcions" i assegureu-vos que tot el que no està marcada i "el nom del grup", diu: "menu1"
    2. Anar a la pestanya "Pantalla" i assegurar-se que tot el "Show de navegació en grup ..." àrea està marcada [x]. Deixi la resta en valors predeterminats.
    3. Aneu a "CSS" i seleccioneu el botó de ràdio (x) "No aplicar classes CSS".
    4. Anar al "Tema" i omplir la fitxa en l'estil:
      navt_configuration_theme_tab_icon
      Introduïu a "Afegeix etiquetes abans de ..." àrea d'aquest codi:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Introduïu a "Afegeix etiquetes després de ..." àrea d'aquest codi:
      <br style='clear: left' /></div>
    5. Premeu [Desar / Tancar]
  8. En aquest edifici el punt de menú dins d'opcions del plugin NAVT s'ha completat.
    Ara és el moment de fer una melodia per tema de tesi perquè estigui llest. Per a això cal afegir uns quants arxius personalitzats - CSS i Javascript que pertany al menú i custom_functions.php Tesis actualització '
  9. Descarregar el joc complet dels arxius aquí .
  10. Descomprimir arxiu. Si vostè ha actualitzat el seu custom_functions.php amb les seves personalitzacions - cal combinar-los amb les meves coses. L'deixo a tu.
    Si no ho he tocat - no dubti en sobreescriure amb la meva. Recordeu que jo preferia a la posició del menú a la capçalera del lloc web (per defecte està per sobre) - pel que el meu correcció inclosa aquesta preferència també.
  11. Pujar arxius incloent tots els subdirectoris i fitxers sota "costum" del seu tema de tesi, així:
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...

    No he tocat custom.css - Jo prefereixo mantenir el menú específic de CSS en les seves pròpies localitats per evitar la creació de desordre a l'interior custom.css
  12. En aquest punt vostè pot recarregar el seu lloc web i veure la nova nova i bonica de diversos nivells, niats, SEO menú optimitzat.
  13. Vostè sempre pot tornar a NAVT configuració i personalitzar el menú amb més opcions, o canviar la posició de qualsevol cosa. Es reflecteix en el lloc en viu de forma automàtica.

El camí per davant ...

Aquest tutorial inclou exemple creatiu d'un tipus de menú. He jugat amb un altre - només per veure com el menú de color fosc, es veuria així:

Thesis theme - multilevel nested CSS menu - dark palette

Tema de tesi - el menú de nivells múltiples niat CSS - paleta fosca

Crec que és bastant agradable. Hi ha moltes mostres més de navegació disponibles a Dynamic Drive - tots ells són possibles d'adaptar a tesis i altres temes del WordPress, amb una mica d'esforç:

Dynamic Drive Horizontal Menus

Menús dinàmics de transmissió horitzontal

Espero que trobareu aquest tutorial útil i beneficiós. Com ja he dit, és possible personalitzar qualsevol d'aquests menús de Tesi - que es dóna el temps i el desig de fer que succeeixi.

Que podia fer aquesta obra per a vostè sobre una base contractual. Només ha de triar el menú que voleu, poseu-vos en contacte amb mi i vaig a treballar en el codi i instruccions per al seu lloc web.

20 $

I, per descomptat, si estàs a la construcció de súper premium wordpress SEO optimitzat membres del portal - la millor solució per a això:
Tema de tesi + plugin de MemberWing membresía + interlocutòria allotjada del WordPress , és clar.

comments } { 15 comentaris }

Prima Nota 3

5 juliol 2009

Això és bromista lliure per després premium de 3. Aquest article conté el contingut combinat: La primera part és visible per als membres Gold, tot l'article només és visible per als socis Platinum. Intenta entrar com a membre de la primera medalla d'or (nom d'usuari / contrasenya = or / or) - veurà més contingut. ... I després sortir i torni a connectar-se com el platí [...]

Llegiu-ne més →

Prima Nota 2

5 juliol 2009

Això és bromista lliure per després premium 2. La resta l'enviarem als or i els membres només. Suggeriment - l'or de sessió de membre / password = or / d'or ......

{{{Or | platí}}}
La resta d'aquest article està disponible per als membres premium només.

Llegiu-ne més →

Prima 1 Post

5 juliol 2009

Aquest és l'article de demostració per MemberWing-X. Amb MemberWing-X aquest article es fa per a la compra a un preu únic de 2,95 $, o mitjançant la subscripció de "Gold" del programa. Així, aquest reclam és gratuït per als posteriors prima 1. La resta d'aquest article només és visible per als membres que el va comprar per 2,95 $ o subscrit a "L'or [...]

Llegiu-ne més →

Tesi tema i MemberWing pertinença a un lloc plug-in per als millors llocs dels membres de SEO

5 juliol 2009

MemberWing és una organització Plugin de WordPress lloc web dissenyat específicament per als portals dels membres de SEO optimitzats. Amb les seves flexibles teasers indexables, suport per a Google Fer clic estàndard gratuïta, continguts digitals i la protecció contra descàrrega de la facultat amb PromoFusion - que garanteix el seu lloc de pertinença d'indexació ràpida i graduacions més altes. Mentre que altres softwares lloc de pertinença li agrada per a deshabilitar completament l'accés [...]

Llegiu-ne més →