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 tema de tesi 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 habitual és ser capaç de 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 Plugin NAVT 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 de 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 menús de navegació millor per a 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 basat en Wordpress + Tesi.
Llista de funcions del menú en diversos nivells, niats de Wordpress de navegació 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 plugin 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ú. Els seus detalls específics 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 la navegació a la recerca de menú per Wordpress i Tesi Tema
- 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".
- 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ú. - 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.
- 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ú.
- Així és com el meu NAVT 'menu1' estructura de construcció que semblava gairebé acabat:
- Finalitzar 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 assegureu-vos que tot el que no està marcada i "el nom del grup", diu: "menu1"
- 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.
- Aneu a "CSS" i seleccioneu el botó de ràdio (x) "No aplicar classes CSS".
- Anar al "Tema" i omplir la fitxa en l'estil:
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> - Premeu [Desar / Tancar]
- 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ó ' - Descarregar el joc complet dels arxius aquí .
- 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é. - Pujar arxius incloent tots els subdirectoris i els arxius sota el seu tema de tesi directori 'custom', 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 - En aquest punt vostè pot recarregar el seu lloc web i veure la nova nova i bonica de diversos nivells, niats, SEO menú optimitzat.
- 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í:
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 de Wordpress amb una mica d'esforç:
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 + auto allotjat Wordpress , és clar.
