La recerca del menú vertical perfecta ...

Part 1 d'aquest tutorial es descriu pas a pas el procés de creació de menús niats multinivell horitzontal per WordPress tema de tesi . Part 2 continuarà per millorar aquesta funcionalitat. Aquí anem a afegir la versió "fosca" del menú de navegació horitzontal i jo li ensenyarem com canviar entre "brillant" i la versió "dark". Part 2 és el subconjunt de la part 1. Inclou tota la part 1 + afegeix més coses interessants.

La idea principal que volia presentar és l'addició de menú vertical de (i per WordPress en general). Jo estava buscant molt flexible, SEO amigable i menú vertical múltiple compatible amb el navegador que permeti crear un nombre il · limitat de nivells de niament.

WEB té un munt de pàgines sobre el tema, però quan vaig començar a provar totes aquestes mostres - que o bé es va trencar, va caure a trossos, admet només nombre limitat de nivells o es portava malament en portes de Ballmer junksplorer juny. Finalment vaig arribar a provat i de confiança menús Dynamic Drive com les seves mostres verticals resultar ser un cas agradable que s'adapti a les meves exigències estrictes. Vaig haver de modificar de manera significativa, encara que per assegurar-se que encaixa model Thesis.
La recerca de la perfecció continua ...

Vaig passar prop de 16 hores de recerca, muntatge, proves, fixació, neteja i ajust de CSS del menú vertical. Codi js i 3/4 del temps el passem pel que és treballar en MSIE 6.
De totes maneres, jo estava content amb el resultat final. Menú de navegació vertical resultar té els mateixos beneficis que el menú horitzontal té.

Tenir capacitat per afegir 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ò menú vertical no té aquesta limitació i seria de gran ajuda. Així que aquí anem.

Hi ha molts graons perquè això passi ja s'han descrit en la part 1 del tutorial així que això farà que sigui una mica més curt, però amb resultats molt més rics de la característica.

Així que aquí va:

Building SEO friendly, vertical, de diversos nivells, menú jeràrquicament niats per WordPress i el tema de tesi. Pas a pas
(... El que mai va creure possible ...)

  1. Instal · lar Plugin executiu php i activar-lo. El necessitarem perquè vaig a utilitzar PHP en el giny de text per emetre codi HTML de menú vertical ".
  2. Feu els passos 1 - 6 la part 1 del tutorial . Bàsicament, vostè necessita per instal lar i activar l'ús NAVT plugin de construcció + visualment el seu menú. Assegureu-vos que el menú del nom del grup és "menu1 '. Aquest nom està codificat en custom_functions.php
  3. Feu clic a la icona de "engranatge" per al seu grup menu1 '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 la configuració de les pestanyes "CSS".
  5. Ara feu clic a la pestanya "Temes" d'aquest diàleg. Anem a sobreescriure sèrie d'ajustos allà (si has seguit el pas 1). Això està bé - no es perd res - però es necessiten aquests canvis, ja que he canviat una mica de codi en el pas 1.
    Es fa així necessari aquest diàleg ha de ser emplenat:
    1. Dins del "Tema xpath:" àrea Introduir el codi (que ordena reemplaçar qualsevol etiqueta amb aquestes classes):
      .jquerycssmenu, .jqueryslidemenu
    2. Ajust "acció" a "Reemplaça amb"
    3. Dins de "Afegeix etiquetes abans de la navegació del grup" zona escrigui aquest codi:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. Dins de "Afegeix etiquetes després de la navegació del grup" zona escrigui aquest codi:
      <br style='clear: left' /></div>
    5. Feu clic a [Desar / Tancar].
  6. Ara aneu al tauler de WordPress admin -> Aparença -> Widgets.
  7. Arrossegament giny de "Text" (des de l'àrea gran "Ginys disponibles") a la zona de "Barra Lateral 1" a la dreta. Anem a afegir codi en el giny de text que ens ajudarà a materialitzar menú vertical.
    NOTA: Suposo que tens "Sidebar 1" en l'existència. Opcions de tesi li permet apagar - però pel bé d'aquest tutorial farem que sigui.
  8. Un cop arrossegar i deixar anar aquest giny - s'obre com una flor (em sento romàntica ara que la lluita ha acabat MSIE).
  9. A l'àrea "Títol" entrar "millor menú vertical del món" ... Bé, no dubteu a utilitzar la seva creativitat - que el text passarà per sobre del seu menú vertical nounat.
  10. En gran àrea per al text - introduir aquest 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. Premi el botó [Guardar], feu clic a l'enllaç "Tancar".
  12. Descarrega actualitzat dels arxius aquí .
    Aquest fitxer inclou:


    • Versió actualitzada de "brillant" codi menu horitzontal
    • Versió "Dark" del menú horitzontal
    • Codis dels menús verticals
    • Versió actualitzada de custom_functions.php
  13. Ara cal descomprimir l'arxiu i pujar-lo al directori 'custom' del seu tema de tesi.
    Nota: Si vostè ha fet qualsevol personalització dins custom_functions.php - que havia necessitat de combinar-los. Si no és així - no dubti en per sobreescriure amb la meva versió.
  14. Voila! Ara vostè pot recarregar el seu lloc web i veure el mateix "brillant" del menú horitzontal + menú vertical neato a la barra lateral esquerra.
  15. Tasca BONUS: Anem a canviar "brillant" del menú horitzontal en l'esquema de color "fosc".
    1. Dins d'arxiu custom_functions.php:
      substituir 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 a terme una línia i eliminant el comentari de l'altra.
    2. Ara veu a WordPress Admin-> Eines-> Llistes NAVT i feu clic a la icona abans esmentat "eines" per editar les propietats del seu grup 'menu1'.
    3. Feu clic a la pestanya "Temes".
    4. Dins de "Afegeix etiquetes abans de la navegació del grup" zona escrigui aquest codi:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Ara - recarregar la pàgina - i el menú principal de navegació horitzontal "màgicament" es va convertir en fosc, una cosa així:
      Thesis theme - multilevel nested CSS menu - dark palette

      Tema de tesi - multinivell menú niu CSS - paleta fosca

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

    6. Per tornar a l'esquema de color "brillant" - simplement desfer els passos anteriors "bonus".
  16. Conclusió:
    M'encanta tema de tesi, m'encanta WordPress i m'encanta el fet que tenim una manera d'afegir menús de navegació decent 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

Em vaig decidir a aconseguir el tema de tesi , ja que un dels meus clients em va informar sobre els problemes de compatibilitat entre la tesi i el meu lloc de pertinença wordpress plugin de MemberWing. El vaig arreglar i després vaig decidir prendre una mirada més propera a la tesi i, de fet molest de veure vídeos a la portada del lloc principal Tesi - Diythemes.com .
El que més em va impressionar és l'atenció al detall, facilitat d'ús i, sobretot - les característiques de SEO que estan molt ben pensades.
MemberWing plugin de membres va ser dissenyat des del principi per als llocs d'adhesió que caldria treure tot el suc SEO com sigui possible. Així que he pagat un munt d'atenció a multitud de millores SEO i perfeccions en MemberWing. Molts dels meus clients es pregunten sobre diferents temes d'utilitzar i tenir el tema que estava tan bé SEO optimitzat des de l'interior seria una excel · lent opció per als empresaris de membres del portal.

Combinant els poders de SEO d'MemberWing amb poders de SEO d' donaria la millor de les oportunitats de classificació als meus clients. Així que em Tesis i vaig 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 només un menú de nivell. El meu habitual desig és ser capaç de personalitzar la navegació tant com sigui necessari. Alguns llocs tenen només unes poques pàgines, molts altres tenen un munt de pàgines estàtiques + milions i milions d'articles / posts + un munt de categories.
Així que en el món ideal de tenir l'oportunitat de crear bonica menú de navegació fàcil d'usar jeràrquicament organitzada és una necessitat. Tesi de bones a primeres té bona navegació mirant però em vaig adonar que tots els llocs web basats en la tesi estan buscant com bessons. Personalització del menú de navegació tesi no és gens fàcil per a la majoria de la gent simplement deixar-ho 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 de nou, la capacitat de crear estructures de menús niats falta. Així que em vaig decidir a veure què es podia fer al respecte.
Després de tractar sobre mitja dotzena de plugins relacionats menú de navegació / em vaig posar la meva elecció a WordPress Navegació Llista NAVT Plugin .
NAVT connector està essencialment desordenada generador de llista de súper luxe i una interfície d'administració de difícil esbrinar alguna cosa poc tradicional. El caràcter enganyós de tot és que en realitat no busquen crear menús de luxe per si mateix. Ho fa la part més dura de treball, encara que - et dóna una capacitat de tirar visualment junts, i generar llista desordenada - esquelet del seu menú-a-ser. I vostè pot crear tants menús també. Vostè pot llençar tot tipus de coses de WordPress al menú de navegació de pàgines, posts, articles, categories, els usuaris, els blocs de codi, enllaços externs, divisors, separadors i barrejar i combinar i niar i organitzar i personalitzar en qualsevol estructura d'arbre que desitjar.
NAVT genera per a vostè resultar HTML llista desordenada. Segon bellesa de NAVT és que ajuda a que vostè inseriu el nou menú al tema a través de famosos lògica basada en jQuery, però sense necessitat de canviar cap codi! NAVT permet especificar: "reemplaçar aquest element # amb el meu nou menú NAVT". # Element podria ser un id o classe de via de menú existent o etiqueta d'element div que s'està generant pel tema actual. Així NAVT fa reemplaçament per a vostè sense obligar-los a entrar en el tema de codi i fer-lo més complicat del que ja és. Si tot això sona com un galimaties - no es preocupi - vaig a guiar pas a pas aviat. La part difícil de NAVT per a tothom és que vostè haurà d'arribar a real CSS + imatges + codi javascript del seu menú de si mateix. I li toca a vostè per esbrinar on i com integrar aquests arxius i fer això correctament connectar junts.
Sincerament sense saber JQuery + alguns + CSS + PHP amb experiència decent amb WordPress - això és difícil de treure.
Amb molt de gust ho sé aquestes coses una mica, així que vaig decidir fer el cor i guiar la humanitat a la llibertat de construir el millor dels millors menús de navegació per WordPress. Només havia de esbrinar les fonts d'algunes boniques que busquen menús CSS horitzontals. Vaig agafar website unitat dinàmica de les seves millors seleccions, demos i fonts.

Vaig dedicar un dia per estudiar Tesis i jugar amb NAVT plugin. Al final m'enorgulleix creat flexibles, SEO optimitzat, multinivell, l'estructura nagivation personalitzada, imbricada per al meu + lloc basat Tesi WordPress.

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

  • Professional, aspecte net i se sent.
  • Suport per a tots els navegadors moderns, incloent 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome, tant en javascript i els modes no javascript.
  • Gràcia degradable per als navegadors que no javascript. Vostè menú es podrà utilitzar, visualment similars i treballar fins i tot per navegadors sense javascript (encara que la navegació de nivell superior només serà visible i menús laterals no passarà, per descomptat, ja que estan fets de javascript).
  • SEO característiques d'ús - desordenada llista de codis menú és generat dins d'HTML. Altres motors de cerca Google i seran capaços d'indexar la seva estructura de navegació i trobar enllaços a pàgines interiors.
  • El suport als nivells de nidificació il · limitat i subnivells.
  • El suport a qualsevol ordre o pàgines, posts (via definit URI usuari), les categories, els usuaris, els blocs de codi personalitzat i els enllaços externs en el menú.
  • Suport de text, així com elements de menú basades en imatges. (Encara he de provar això però).
  • Estructura dels menús i el contingut visual és ajustar mitjançant àrea d'administració NAVT.
  • Compacte: icones desplegables basats en JQuery per als nivells niats.
  • Ràpid: JQuery per al menú es carrega dels servidors de Google (m'encantaria mateixa tesi a fer el mateix en comptes 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ó del connector NAVT sense necessitat de codificar en qualsevol lloc.

He utilitzat aquest excel · lent menú de la unitat dinàmica portal com a base. Vaig haver de modificar el codi javascript cosa així com incloure la part de PHP a custom_functions.php perquè funcioni amb la Tesi. També s'utilitza el nombre de pàgines ja existents, categories i llocs de el meu lloc per muntar l'estructura del menú. Els seus detalls seran diferents -, però els conceptes són les mateixes.
Així que seguirem endavant, d'acord?

Instruccions pas a pas per configurar NAVT basat niada, personalitzable, multinivell, SEO friendly
i tot just fresc buscant plana i tesis Tema

  1. Anar al panell d'administració de WordPress. Plugins-> Afegir nou, busqui "navt". Es mostrarà el plugin. Feu clic a [Instal ·], [Instal · lar ara], "Activar Plugin".
  2. Eines-> Llistes NAVT, Dins àrea "Navigation Group" trobar "nom de grup" i escriviu: "menu1" al camp, premi el botó [Crea]. Àrea rectangular "menu1" va aconseguir crear.
    Aquesta zona "menu1" serà el parc principal de la construcció de menús. Et arrossegant i deixant anar aquí els elements de menú.
  3. En l'àrea de "actius" trobar "un altre" quadre de llista i feu clic a l'opció "Inici". Apareixerà "Home" coseta dins de l'àrea "sense assignar". Estrany, no? No hi ha problema, sempre i quan funciona - i ho farà per nosaltres.
  4. Arrossegament aquest thingie "Home" de zona "actius" al camp rectangular "menu1". Es convertirà en tema "Home" al menú.
    • Repetiu els passos 3-4 per a algunes pàgines de la zona de "pàgines", així com per a les categories en l'àrea de "categories". Arrossegueu qualsevol altre element que voleu estar en el seu menú dins rectangle "menu1". Podeu fer clic a les pàgines, categories, usuaris i alguns elements personalitzats, com "llista de divisor" i "bloc de codi". Bloc de codi és manera fresca per afegir fragments d'encàrrec dins del menú.
    • Podeu arrossegar elements de menú dins de l'àrea "menu1" per canviar l'ordre.
    • Podeu ajustar la posició jeràrquica de cada element del menú amb "<" i ">" fletxes.
    • En fer clic al nom de text de cada element de menú - obre lucinant diàleg de personalització addicional per aquest concepte. Jo sobretot utilitzat per defecte però tècnicament puc tornar boig i començar a fer opcions de menú basades en imatges i afegir fragments de codi HTML a ell. Procediu amb precaució però.
    • Per submenús unclikable sense enllaços, que serviran com a "pares" per altres "sub-fills" Solia tipus "bloc de codi". Per exemple, quan la personalització de l'article bloc de codi que vaig entrar de "Element de menú àlies" = "MemberWing" i "Enter bloc de codi:" = "<a href='#'> MemberWing </ a>." Tenir href = "#" farà que no es pot fer clic, sinó que actua com un "pare" de menú vàlid.
  5. Heus aquí com l'estructura build 'menu1' el meu NAVT semblava gairebé completat:
    navt_building_icon
  6. Finalitzar la construcció inicial i després feu clic a la icona de "eines" per personalitzar l'estructura dels menús:
    navt_customize_menu
  7. S'obrirà el diàleg amb 4 fitxes: Opcions, Display, CSS, Theme.
    1. Anar a la pestanya "Opcions" i assegurar-se que tot està desactivada i "nom de grup", diu: "menu1"
    2. Aneu a "Display" i assegurar-se que tot el "grup de la navegació en ..." àrea està marcada [x]. Deixi la resta en valors predeterminats.
    3. Anar a la pestanya "CSS" i seleccioneu el botó de ràdio (x) "No aplicar classes CSS".
    4. Anar a la pestanya "Temes" i omplir d'aquesta manera:
      navt_configuration_theme_tab_icon
      Introduïu a "Afegeix etiquetes abans de ..." zona aquest codi:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Introduïu a "Afegeix etiquetes després de ..." zona d'aquest codi:
      <br style='clear: left' /></div>
    5. Premi el botó [guardar / tancar]
  8. En aquest punt, la construcció menú d'opcions del plugin dins NAVT és completa.
    Ara és el moment de fer una mica de posada a punt per al tema de tesi perquè estigui llest. Per a això hem d'afegir alguns fitxers personalitzats - CSS i Javascript que pertany al menú i custom_functions.php actualització Tesis '
  9. Descarregueu el conjunt complet dels arxius aquí .
  10. Descomprimir arxiu. Si ha actualitzat el seu custom_functions.php amb les personalitzacions - cal combinar-los amb les meves coses. Ho deixo a vostè.
    Si no ha tocat - no dubti en per sobreescriure amb la meva. Si us plau, tingui en compte: preferir menú posicionar sota de la capçalera lloc web (per defecte és anterior) - així que el meu ajust incloure aquesta preferència també.
  11. Carrega incloent tots els subdirectoris i arxius en el directori del tema de la seva tesi 'custom', així:
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...

    No he tocat custom.css - Prefereixo mantenir CSS menú específic amb les seves pròpies ubicacions per evitar crear confusió dins custom.css
  12. En aquest punt vostè pot recarregar el seu lloc web i veure la nova nova i bonica, jerarquitzat, menú optimitzat SEO multinivell.
  13. Sempre podreu tornar a NAVT configuració i personalitzar el menú amb més opcions o canviar la posició de qualsevol cosa. Això es reflectirà en el lloc en viu de forma automàtica.

El camí per recórrer ...

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

Thesis theme - multilevel nested CSS menu - dark palette

Tema de tesi - multinivell menú niu CSS - paleta fosca

Crec que és bastant agradable. Hi ha molts exemples més de navegació disponibles al Dynamic Drive - tots ells són possible personalitzar de tesi i altres temes de WordPress amb una mica d'esforç:

Dynamic Drive Horizontal Menus

Dynamic Drive Menús horitzontals

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

Que podia fer aquest treball 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 les instruccions per al seu lloc web.

$ 20

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

comments } { 15 comentaris }

Prima Post 3

5 juliol 2009

Aquest reclam és lliure per pal premium 3. Aquest article conté contingut mixt: la primera part és visible pels membres Gold, tot l'article és visible només per a usuaris de platí. Intenta iniciar la sessió com a membre del primer or (nom d'usuari / password = or / or) - veurà més contingut. ... I després tancar la sessió i tornar a iniciar sessió com platí [...]

Llegir-ne més →

Prima Missatge 2

5 juliol 2009

Aquest reclam és lliure per pal premium 2. La resta és visible per l'or i només els membres. Suggeriment - gold member login / password = or / or ......

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

Llegir-ne més →

Prima Missatge 1

5 juliol 2009

Aquest és l'article de demostració per MemberWing-X. Amb MemberWing-X aquest article es fa la venda a un preu únic de 2,95 dòlars, o mitjançant la subscripció de programa "Gold". Per tant, aquest és bromista lliure per al pal superior 1. La resta d'aquest article només és visible pels membres que han comprat per $ 2,95 o subscrits a "L'or [...]

Llegir-ne més →

Tema de tesi i lloc de pertinença MemberWing plugin per als millors llocs d'adhesió SEO

5 juliol 2009

MemberWing és un plugin de WordPress lloc de membres dissenyat específicament per SEO optimitzat portals membres. Amb els seus teasers indexables flexibles, el suport a Google Primer Fer clic estàndard lliure, els continguts digitals i la protecció de descàrrega habilitat amb PromoFusion - que garanteix la seva pertinença a un lloc ràpida indexació i classificació més alta. Mentre que altres membres del lloc li agrada programaris per deshabilitar completament l'accés [...]

Llegir-ne més →