La recerca per al menú perfecte ...
Aquesta és la part 1 del programa d'aprenentatge
Part 2 d'aquest tutorial ensenya com construir un menú vertical + paleta de color fosc per l'horitzontal
Vaig decidir tema de tesi, perquè un dels meus clients m'ha informat sobre problemes de compatibilitat entre la tesi i el meu lloc de wordpress MemberWing membres plugin. Ho vaig arreglar i després va decidir prendre una mirada més propera a 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ó al detall, facilitat d'ús i sobretot - les característiques de SEO que són tan ben pensat.
Plugin de membres MemberWing va ser dissenyat des de zero per als llocs d'adhesió que han de treure el suc de SEO del possible. Així que vaig anar a un munt d'atenció a multitud de millores SEO i perfeccions a MemberWing. Molts dels meus propis clients es pregunten sobre diferents temes d'usar i tenir tema que estava tan bé SEO optimitzats des del fons seria un complement excel lent per a l'adhesió als empresaris del portal.
La combinació dels poders de SEO d'MemberWing amb poders de SEO de tema de tesi de donar el millor de les oportunitats de classificació per als meus clients. Així que em tesi i jugar amb ell durant un dia.
És un excel lent tema en tots els sentits. La part de navegació de que encara que és una mica limitat en les seves funcions. A partir de la tesi de 1,5 + és un menú únic nivell. El meu desig sempre és ser capaç de personalitzar la navegació tant com sigui necessari. Alguns llocs tenen només unes poques pàgines, molts altres han de 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 boniques organitzats jeràrquicament amigable menú de navegació de l'usuari és un deure. Dret de tesi del pal té un bon aspecte de navegació, però em vaig adonar que tots els llocs web basats en tesis estan buscant com bessons. Personalitzar el menú de navegació de tesi 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ó en entre 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 provar prop de la meitat de menú dotzena / plugins relacionats amb la navegació puc definir el meu elecció en Wordpress Plugin NAVT llista de navegació.
Plugin NAVT és essencialment generador de llista no ordenada amb súper luxe i una mica dur-a-hi ha la interfície d'administració no tradicionals. El enganyós de tot és que en realitat no crear menús de luxe a la recerca de si mateix. Ho fa la part més difícil de la feina ben - li dóna una capacitat visual a reunir, i generar una llista no ordenada - esquelet del seu menú-a-ser. I vostè pot crear els menús de molts també. Vostè pot tirar tot tipus de coses de Wordpress al menú de navegació: pàgines, posts, articles, categories, els usuaris, els blocs de codi, els enllaços externs, divisors, separadors i barrejar i combinar i nien i organitzar i personalitzar en qualsevol estructura d'arbre que voler.
NAVT genera per a que va resultar la llista de l'HTML desordenada. La bellesa de la Segona NAVT és que t'ajuda a inserir el nou menú en el seu tema a través de la lògica basada en JQuery famós, però sense necessitat de modificar el codi! NAVT li permet especificar: "substituir aquest element # amb el meu menú NAVT nou". # Element podria ser un identificador de classe o de la trajectòria de menú existent o l'etiqueta d'element div que està sent generat per el tema actual. Així NAVT fa aquesta substitució per a vostè sense forçar a anar en el codi de tema i fer-lo més complicat del que ja és. Si tot això sona una galimaties - No et preocupis - em guiarà pas a pas aviat. La part difícil d'NAVT per a tots és que vostè haurà de venir per amunt amb CSS real + imatges + codi Javascript per el seu menú de tu mateix. I és a vostè a esbrinar on i com integrar aquests arxius i fer aquestes coses correctament connectar junts.
Sincerament, sense saber alguns JQuery + PHP + CSS + experiència decent tenint amb Wordpress - això és difícil de tirar.
Amb molt de gust jo sé aquestes coses una mica, així que vaig decidir fer el cor fort i la guia de la humanitat a la llibertat en la construcció del millor dels millors menús de navegació per a Wordpress. Només necessitava per esbrinar les fonts d'algunes bones horitzontal trobar menús CSS. Vaig agafar web impuls dinàmic de les seves millors seleccions, demos i fonts.
Em va dedicar un dia a l'estudi de tesi i jugar amb el plugin NAVT. Al final he creat amb orgull personalitzat, flexible, SEO optimitzats, de múltiples nivells, l'estructura imbricada nagivation d'un lloc basat en Wordpress + Tesi.
Llista de funcions de menú de nivells múltiples, niats de navegació per a Wordpress Tema de tesi
(You Got to love this stuff):
- Professional, la mirada neta i se sent.
- Suport per a tots els navegadors moderns, incloent 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome en JavaScript i no tant en les formes de javascript.
- Gràcia downgrade per a navegadors no javascript. Vostè menú serà utilitzable, una semblança visual i de treball, fins i tot per navegadors JavaScript desactivat (encara que només sigui de navegació d'alt nivell serà visible i no flyouts passarà, per descomptat, sempre que estiguin constituïts per javascript).
- Característiques SEO friendly - desordenada codi de menú llista es genera dins de l'HTML. Google i altres aranyes dels motors de cerca serà capaç d'índex de la seva estructura de navegació i trobar enllaços a pàgines interiors.
- Suport als nivells d'anidament il limitat i subnivells.
- Suport per a qualsevol fi o pàgines, missatges (definits per l'usuari a través dels URI), les categories, els usuaris, els blocs de codi personalitzat i enllaços externs en el menú.
- Suport de text-així com la imatge basada en elements de menú. (Encara he de provar aquestes però).
- Estructura de menús i el contingut visual és ajustable mitjançant l'àrea d'administració NAVT.
- Compacte: flyouts JQuery base per als nivells niats.
- Ràpid: jQuery per al menú es carrega des dels servidors de Google (m'encantaria pròpia tesi a fer el mateix en comptes de llençar de forma local). Això podria accelerar les coses una mica.
- Escalabilitat - Aquest tipus de menú és editable i configurable en qualsevol moment mitjançant la configuració de plug-in NAVT sense necessitat de codificació en qualsevol lloc.
Jo aquest menú excel lent portal de conducció dinàmica com a base. Vaig haver de personalitzar el codi Javascript una mica, així com incloure tros de PHP custom_functions.php perquè funcioni amb la tesi. També el nombre de pàgines pre-existents, les categories i llocs del meu lloc web es fa servir per acoblar l'estructura de menú. El seu lloc serà específics diferents - però els conceptes serà el mateix.
Així que endavant, d'acord?
Instruccions pas a pas a NAVT de configuració basat en SEO niats, personalitzable, de múltiples nivells, amistós
i simplement genial mirant el menú de navegació per a Wordpress i tesi Tema
- Anar al panell d'administració de Wordpress. Connectors-> Afegeix un nou, busqui "navt". El connector es mostrarà. Feu clic a [Instal lar], [Instal lar ara], "Activar plugin".
- Eines-> Llistes NAVT, Inside "zona de navegació pel grup" trobar "el nom del grup" i escriviu: "menu1" en el camp, premeu [Crea] el botó. "Menu1" àrea rectangular es va crear.
Aquest "menu1" zona serà el pati principal per a la construcció de menú. Vostè serà arrossegar i deixar anar aquí els elements de menú. - En els "actius" zona de trobar "un altre" quadre de llista i feu clic a "Inici elecció". "Home" Thingies apareixerà dins de "assignar" la zona. Estrany, eh? No es preocupi, sempre que les obres - i serà per a nosaltres.
- Arrossegueu aquest "Home" Thingies de "actius" a la zona "menu1" àrea rectangular. Es convertirà en "Home" al menú.
- Repetiu els passos 3/4 per a algunes pàgines de "Pàgines de la zona", així com per a les categories de "categories" de la zona. Arrossegueu qualsevol altre element que desitgi estar en el menú del seu interior "menu1" rectangle. Podeu fer clic a les pàgines, les categories, els usuaris i alguns elements personalitzats, com "divisor de la llista" i "bloc de codi". Bloc de codi és la forma freda per afegir fragments de costum dins del menú.
- Vostè pot arrossegar els elements de menú dins de "menu1" àrea per canviar el seu ordre.
- Vostè pot 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ú - s'obre la ment al.lucinant addicionals de personalització de diàleg per aquest tema. I utilitza sobretot per defecte, però tècnicament pot tornar boig i començar a fer la imatge basada en opcions de menú i afegiu trossos de codi HTML en ell. Procediu amb precaució quan.
- Per linkless submenús unclikable que servirà com a "pares" d'altres sub "nens de" Jo "bloc" Codi de tipus. Per exemple quan es personalitza com a element de bloc de codi que vaig entrar per "àlies element de menú" = "MemberWing" i per "Enter bloc de codi:" = "<a href='#'> MemberWing </ a>". Havent href = "#" farà que no pot fer clic, però actuant com un pare vàlida "" opció de menú.
- Aquí és com la meva NAVT 'menu1' construir una estructura que semblava gairebé acabada:
- Finalització de la construcció inicial i després feu clic a "engranatge" icona per personalitzar l'estructura del seu menú:
- S'obrirà el diàleg amb 4 pestanyes: Opcions de visualització, CSS, Tema.
- Anar a la pestanya "Opcions" i assegurar-se que tot està sense control i "el nom del grup", diu: "menu1"
- Anar a la pestanya "Pantalla" i assegurar-se que tot el "grup de navegació ... Mostra al camp" està marcada [x]. Deixa la resta en valors predeterminats.
- Anar a la pestanya "CSS" i seleccioneu el botó de ràdio (x) "no s'apliquen les classes CSS".
- Anar a la pestanya "Tema" omplint el formulari així:
Insereix a "Afegeix etiquetes abans de ..." zona d'aquest codi:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Insereix a "Afegeix etiquetes després de ..." zona d'aquest codi:
<br style='clear: left' /></div> - Premi [Guardar / Close]
- En aquest edifici des del punt de menú Opcions de plug-NAVT és completa.
Ara és el moment de fer una petita melodia per a tema de tesi per deixar-lo llest. Per això necessitem afegir un fitxer personalitzat pocs - CSS i JavaScript que pertany al menú i actualització custom_functions.php tesi " - Descarregar el joc complet dels arxius aquí.
- Arxiu Descomprimir. Si heu actualitzat el seu custom_functions.php amb les personalitzacions - el que necessita de fusionar amb les meves coses. Vaig a deixar a vostè.
Si vostè no ha tocat - fóssiu lliure per sobreescriure amb la meva. Tingueu en compte: he preferit a la posició de menú sota l'encapçalament de pàgina web (per defecte és a dalt) - per la qual cosa la meva adaptació inclòs aquesta preferència també. - Carrega incloent-hi tots els subdirectoris i arxius sota el seu tema de tesi directori 'custom', com aquest:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
No he tocat custom.css - Jo prefereixo mantenir menú CSS específiques en els seus propis llocs per evitar crear confusió dins d'custom.css - En aquest punt vostè pot recarregar el seu lloc web i veure el menú nou i bell nous nivells, niats, SEO optimitzat.
- Vostè sempre pot tornar a la configuració de NAVT i personalitzar el menú amb més opcions, o posar qualsevol cosa. Que es veurà reflectit en el lloc en viu de forma automàtica.
El camí per recórrer ...
Aquest tutorial inclòs exemple creatiu d'un tipus de menú. Vaig jugar amb una altra - només per veure com el menú de color fosc es veuria així:
Tema de tesi - de diversos nivells de menú CSS niats - Dark paleta de
Crec que és bastant agradable. Hi ha moltes mostres de navegació més disponible a Dynamic Drive - tots ells són possibles de personalitzar per a tesis i altres temes de Wordpress amb una mica d'esforç:
Dynamic Drive Horitzontal Menús
Espero que trobaràs en aquest tutorial beneficiosa i útil. Com he dit, és possible personalitzar qualsevol d'aquests menús per a tesis - que es dóna el temps i el desig de fer que passi.
Que podia fer aquest treball per a vostè en una base contractual. Seleccioneu el menú que desitja, poseu-vos en contacte amb mi i jo treball en el codi i les instruccions per al seu lloc web.
$ 20
I, per descomptat, si vostè està fins a la construcció de SEO super optimitzada wordpress portal de la membresía premium - la millor solució per a això:
Tema de tesi + MemberWing plugin pertinença + Allotjament propi Wordpress, per descomptat.
