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' tema de tesi 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, el menú de navegació WordPress imbricada per 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 menú de navegació mirant pla per WordPress i tesis Tema
- 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".
- 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ú. - 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.
- 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.
- Heus aquí com l'estructura build 'menu1' el meu NAVT semblava gairebé completat:
- Finalitzar la construcció inicial i després feu clic a la icona de "eines" per personalitzar l'estructura dels menús:
- S'obrirà el diàleg amb 4 fitxes: Opcions, Display, CSS, Theme.
- Anar a la pestanya "Opcions" i assegurar-se que tot està desactivada i "nom de grup", diu: "menu1"
- Aneu a "Display" i assegurar-se que tot el "grup de la navegació en ..." àrea està marcada [x]. Deixi la resta en valors predeterminats.
- Anar a la pestanya "CSS" i seleccioneu el botó de ràdio (x) "No aplicar classes CSS".
- Anar a la pestanya "Temes" i omplir d'aquesta manera:
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> - Premi el botó [guardar / tancar]
- 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 ' - Descarregueu el conjunt complet dels arxius aquí .
- 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é. - 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 - En aquest punt vostè pot recarregar el seu lloc web i veure la nova nova i bonica, jerarquitzat, menú optimitzat SEO multinivell.
- 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í:
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 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.
Els comentaris sobre aquesta entrada estan tancats.