La recerca del menú perfecte ...
Aquesta és la part 1 del programa d'aprenentatge
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 problemes de compatibilitat entre tesi i el meu lloc de pertinença wordpress plugin MemberWing. Em fix i després va decidir fer una ullada més de prop de tesi i pres la molèstia de veure vídeos a la pàgina principal del lloc principal de Tesi - Diythemes.com .
El que em va impressionar més és l'atenció al detall, facilitat d'ús i sobretot - SEO característiques que estan tan ben pensat.
plugin MemberWing adhesió va ser dissenyat des de zero per als llocs d'adhesió que han de treure el suc de SEO del possible. Així que vaig pagar un munt d'atenció a multitud de millores i perfeccions SEO a MemberWing. Molts dels meus propis clients es pregunten sobre diferents temes d'utilitzar i tenir aquest tema va ser així optimitzat SEO des del més profund seria un excel lent ajustament a l'adhesió als empresaris del portal.
La combinació de competències de SEO MemberWing amb poders SEO de tema de tesi de donar el millor de les possibilitats de classificació als meus clients. Així que em Tesis i jugar amb ell per un dia.
És un excel lent tema en tots els aspectes. La part de navegació d'ell encara que és una mica limitat en la seva funció. A partir de Tesi 1,5 + és un menú de nivell només. El meu desig és de costum perquè puguis personalitzar la navegació tant com sigui necessari. Alguns llocs tenen només unes poques pàgines, molts altres han 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 el menú bonica organitzats jeràrquicament de navegació fàcil d'usar és una necessitat. Tesis dret del pal té bona pinta de navegació, però em vaig adonar que tots els llocs web de tesi obtinguda a partir de la recerca com bessons. Personalitzar el menú de navegació tesi no és un procés més senzill per a 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 a més, la capacitat de crear estructures imbricades menú es troba. Així que vaig decidir veure què es podia fer al respecte.
Després d'intentar la meitat dotzena de menú / plugins de navegació relacionats puc definir el meu elecció en Wordpress Plugin de navegació Llista NAVT .
NAVT plugin és essencialment generador de la llista no ordenada amb la fantasia super i una mica difícils de la figura no tradicional interfície d'administració. El enganyós de tot és que en realitat no crear menús de luxe busca per si mateix. Ho fa la part més difícil del treball, tot i que - et dóna una capacitat per tirar visualment junts, i generar llista desordenada - esquelet del seu menú-a-ser. I vostè pot crear molts menús també. Pot llençar de tot tipus de coses Wordpress al menú de navegació: pàgines, missatges, articles, categories, usuaris, els blocs de codi, enllaços externs, divisors, separadors i barrejar i combinar i nien i organitzar i personalitzar de cap estructura d'arbre, com tu desitja.
NAVT genera per a vostè com a resultat la llista de HTML desordenada. En segon lloc de bellesa NAVT és que t'ajuda a ficar el seu menú nou en el tema a través de la lògica basada en JQuery famosa però sense necessitat de canviar cap codi! NAVT li permet especificar: "substituir aquest element # amb el meu menú NAVT nou". # Element podria ser un id o classe de ruta de menú existent o una etiqueta div element que està sent generat pel seu tema actual. Així ho fa NAVT reemplaçament per a vostè sense obligar-los a anar en el codi tema i fer-lo més complicat del que ja és. Si tot això sona una galimaties - no es preocupi - et guia pas a pas aviat. La part desafiant de NAVT per a tots és que vostè haurà de venir amb CSS + imatges reals codi javascript + per a vostè mateix el seu menú. I li toca a vostè per esbrinar on i com integrar aquests arxius i fer aquestes coses correctament per connectar junts.
Sincerament sense saber una mica de PHP + jQuery + CSS + que tinguin 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 fort i de la humanitat guia a la llibertat en la construcció del millor dels menús de navegació millor per a Wordpress. Només necessitava per esbrinar les fonts d'alguns bonica menús CSS horitzontal. Vaig agafar web unitat dinàmica dels seus millors seleccions, demos i fonts.
Vaig dedicar un dia per a estudi de tesi doctoral i jugar amb el plugin NAVT. Al final em orgullosament creat personalitzat, flexible, SEO optimitzats, de múltiples nivells, niats Nagivation estructura d'un lloc basat en Wordpress + Tesis.
Llista de les característiques especials de, imbricada Wordpress menú de navegació multinivell per Tema de tesi
(Vostè ha estimar aquestes coses):
- Professionals, mirada neta 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 downgrade per navegadors no-javascript. Vostè menú es podrà utilitzar, similar visualment i de treball, fins i tot per a discapacitats Javascript navegadors (encara que només sigui de navegació de nivell superior serà visible i flyouts no va a succeir, per descomptat, sempre que estiguin constituïts per javascript).
- característiques SEO friendly - codi de menú de la llista desordenada es genera en HTML. Google i altres motors de cerca podran indexar la seva estructura de navegació i trobar enllaços a pàgines interiors.
- Suport per a un nombre il limitat nivells de niuament i subnivells.
- Suport per a qualsevol fi o pàgines, els missatges (definits per l'usuari a través d'URI), categories, usuaris, blocs de codi personalitzat i enllaços externs en el menú.
- Suport de text, així com elements del menú basades en imatges. (Encara he de provar aquestes però).
- Estructura del menú i el contingut visual és regulable a través de zona d'administració NAVT.
- Compacte: flyouts jQuery base per als nivells niats.
- Ràpid: jQuery per al menú es carrega des dels servidors de Google (que havia Tesis amor mateix 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 a través de la configuració plug-in NAVT sense necessitat de codificar en qualsevol lloc.
Vaig fer servir aquest excel lent menú del disc dinàmic portal com una 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 pàgines ja existents, categories i llocs del meu lloc web es fan servir per acoblar l'estructura del menú. El seu lloc serà diferent detalls - però els conceptes serà el mateix.
Així que endavant, d'acord?
Pas a pas les instruccions per a configurar NAVT basat niats, personalitzable, en diversos nivells, SEO friendly
i simplement genial mirant el menú de navegació per a Wordpress i Tesi Tema
- Anar al panell d'administració de Wordpress. Connectors-> Afegir nova recerca, per a "navt". El connector es mostrarà. Feu clic a [Instal lar], [Instal lar ara], "Activar plugin".
- Eines-> Llista NAVT, Inside "Navegació" Grup de la zona trobar "el nom del grup" i escriviu: "menu1" al camp, premeu [Crea] el botó. "Menu1" àrea d'un rectangle he creat.
Aquest "menu1" àrea serà el pati principal de la construcció del menú. Se li arrossegar i deixar anar elements aquí el seu menú. - En els "actius" zona de trobar "un altre" quadre de llista i feu clic a "Inici" elecció. "Home" thingie apareixerà dins de "no assignada" la zona. Estrany, eh? No es preocupi, sempre que les obres - i serà per a nosaltres.
- Arrossegueu aquest "Home" thingie de "actius" a la zona "menu1 àrea d'un rectangle". Es convertirà en "Home" al menú.
- Repetiu els passos 3-4 per a algunes pàgines de "Pàgines" zona, així com per a les categories de "categories" zona. Arrossegueu qualsevol altre element que voleu estar en el 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 genial manera d'afegir fragments personalitzats dins del menú.
- Pots arrossegar elements de menú dins de "menu1" àrea de la reestructuració de la seva sol.licitud.
- Vostè pot ajustar la posició jeràrquica de cada element de menú amb "<" i ">" fletxes.
- En fer clic al nom de text de cada article de menú - obre bocabadat de diàleg de personalització addicionals per a aquest article. El que més utilitza per defecte, però tècnicament pot tornar boig i començar a fer opcions de menú basades en imatges i afegir trossos de codi HTML en ella. Procediu amb precaució però.
- Per linkless submenús unclikable que servirà com a "pares" per altres "sub-nens" he fet servir "bloc de codi" tipus. Per exemple l'hora de personalitzar el tema com a bloc de codi que vaig entrar "àlies Element de menú" = "MemberWing" i per "Introduir el bloc de codi:" = "<a href='#'> MemberWing </ a>". Havent href = "#" farà que no pot fer clic sinó actuant com a vàlida "pare" de menú a triar.
- Així és com el meu NAVT 'menu1' construir l'estructura semblava gairebé acabada:
- feu clic a Finalitza la construcció inicial i després a "arts" icona per personalitzar l'estructura de menú:
- S'obrirà el diàleg amb 4 fitxes: Opcions, Pantalla, CSS, Tema.
- Anar a la fitxa "Opcions" i assegurar-se que tot estigui marcada i "nom de grup", diu: "menu1"
- Anar a la pestanya "Pantalla" i assegurar-se que tot sobre el "grup de navegació ... Mostra al camp" està marcada [x]. Deixa la resta en valors predeterminats.
- Aneu a "CSS" pestanya i el botó de ràdio de selecció (x) "No aplicar classes CSS".
- Cliqueu a "Tema" fitxa omplint el formulari així:
Introduïu a "Afegeix etiquetes abans de ..." zona est codi:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Introduïu a "Afegeix etiquetes després de ..." zona est codi:
<br style='clear: left' /></div> - Premeu [Guardar / tancar] botó
- En aquest edifici des del punt de menú NAVT opcions de plug-in s'ha completat.
Ara és el moment de fer una melodia per el tema de tesi per tenir-lo llest. Per a això hem d'afegir un pocs arxius personalitzats - CSS i Javascript que pertany al menú i actualitzar custom_functions.php Tesi ' - Descarregar el joc complet d'arxius aquí .
- Descomprimir arxiu. Si vostè ha actualitzat el seu custom_functions.php amb les seves modificacions de personalització - que necessita de fusionar-se amb les meves coses. Ho deixo a vostè.
Si no ha tocat - fóssiu lliure per reemplaçar amb el meu. Nota: he preferit menú posició sota l'encapçalament de pàgina web (per defecte és anterior) - per la qual cosa la meva ajust incloïa aquesta preferència també. - Carrega incloent-hi tots els subdirectoris i arxius sota la seva tema de tesi «costum» de directoris, així:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
No he tocat custom.css - prefereixo mantenir CSS menú específic-a la seva pròpia ubicació per no crear desordre en l'interior custom.css - En aquest punt podeu recarregar la seva pàgina web i veure aquesta bella nous nivells, niats, SEO optimitzat menú.
- Sempre podreu tornar a la configuració de NAVT 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 recórrer ...
Aquest tutorial inclou un exemple creatiu del tipus de menú. Vaig jugar amb una altra - només per veure el grau de foscor del menú de color seria el resultat:
tema de tesi - imbricada menú CSS multinivell - paleta fosca
Crec que és bastant agradable. Hi ha moltes més mostres de navegació disponible a Dynamic Drive - tots ells són possibles de personalitzar per a tesis i altres temes de Wordpress amb un cert esforç:
Dynamic Drive menús horitzontals
Espero que trobareu aquest tutorial beneficiosa i útil. Com he dit, és possible personalitzar qualsevol d'aquests menús per la Tesi - que es dóna el temps i el desig de fer que succeeixi.
Que podia fer aquest treball per a vostè sobre una base contractual. Simplement escolliu el menú que t'agrada, 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à fins a la construcció de SEO super optimitzat membre premium wordpress portal - la millor solució per a això:
Tema de tesi + plugin membres MemberWing + acte va acollir Wordpress per descomptat.
