La ricerca per il menu perfetto ...
Questa è la parte 1 della guida
Parte 2 di questo tutorial insegna come costruire + menu verticale di colore scuro tavolozza per quella orizzontale
Ho deciso di avere tema di tesi , perché uno dei miei clienti mi ha informato sui problemi di compatibilità tra le tesi e il mio sito di appartenenza plugin di wordpress MemberWing. L'ho fissato e poi ha deciso di dare un'occhiata più da vicino di tesi e di fatto la briga di guardare i video sulla prima pagina del principale sito di Tesi - Diythemes.com .
Che cosa mi ha colpito di più è l'attenzione al particolare, facilità d'uso e caratteristiche di SEO più di tutto - che sono così ben pensato.
plugin di appartenenza MemberWing è stato progettato da zero per i siti di appartenenza che avrebbe bisogno di tirare il succo di SEO più possibile. Così ho pagato un sacco di attenzione alla moltitudine di miglioramenti SEO e perfezioni in MemberWing. Molti dei miei propri clienti stanno chiedendo about to use diversi temi e il tema hanno tale was così ben ottimizzato da SEO nel profondo be sarebbe una calzata eccellente per soci imprenditori portale.
La combinazione di competenze SEO MemberWing con poteri SEO del tema di tesi avrebbe dato il meglio di opportunità di ranking per i miei clienti. Così mi sono tesi e giocato con essa per un giorno.
Si tratta di un tema eccellente in tutti i modi. La navigazione parte di esso è comunque un po 'limitato in funzione. A partire da 1.5 + Tesi è uno solo al livello di menu. Il mio desiderio è quello di essere sempre in grado di personalizzare la navigazione, per quanto necessario. Alcuni siti hanno solo poche pagine, molti altri hanno tonnellate di pagine statiche + un'infinità di articoli / post + un sacco di categorie.
Così, nel mondo ideale avere la possibilità di creare carina gerarchicamente organizzato il menu di navigazione di facile utilizzo è un must. Tesi di destra fuori del blocco è bello navigazione ma ho notato che tutti i siti web basati su tesi sono alla ricerca come due gemelli. Personalizzare il menu di navigazione tesi non è davvero facile così molte persone lasciarlo così com'è. Non vi è alcun modo per modificare l'ordine delle categorie nel menu o nella posizione tra le pagine. E ancora, la possibilità di creare strutture di menu nidificate è mancante. Così ho deciso di vedere cosa si potrebbe fare.
Dopo aver provato circa la metà menu dozzina / plugins di navigazione relativi a impostare la mia scelta su di navigazione List Wordpress Plugin NAVT .
NAVT plugin è essenzialmente ordinata generatore di lista con fantasia e un po 'eccellente duro-a-figura non tradizionale interfaccia di amministrazione. Che cosa ingannevole proposito è che in realtà non voglia creare i menu alla ricerca di per sé. Fa la parte più difficile del lavoro anche se - ti dà la capacità di tirare visivamente insieme, e generare lista non ordinata - scheletro del vostro menu-to-be. E si può anche creare i menu molti. Si può tirare tutto il genere di cose in Wordpress il menu di navigazione: pagine, post, articoli, categorie, gli utenti, i blocchi di codice, link esterni, divisori, separatori e mix and match e nido e organizzare e personalizzare in qualsiasi struttura ad albero come te vogliamo.
NAVT genera per voi portato lista non ordinata HTML. seconda bellezza di NAVT è che vi aiuta a inserire il nuovo menu in tema con la vostra famosa logica basata JQuery, ma senza bisogno di cambiare il codice! NAVT consente di specificare: "# sostituire questo elemento con il mio menu NAVT nuovo". # Elemento potrebbe essere un id o una classe di percorso di menu esistente o elemento tag div che viene generato dal tema corrente. Così NAVT fa questo per voi sostituzione senza costringere ad andare in codice a tema e renderlo più disordinato quanto non lo sia già. Se questo suona come tutti incomprensibili - non preoccuparti - ti guida passo dopo passo al più presto. La parte difficile del NAVT per tutti è che dovrete venire con i CSS effettivo + immagini + codice javascript per il tuo te stesso menu. Ed è a voi per capire dove e come inserire questi file e fare questa roba adeguatamente ottenere collegati tra loro.
Sinceramente, senza sapere JQuery + alcuni + PHP + CSS che ha esperienza decente con Wordpress - questa cosa è difficile da tirare.
Volentieri So che questa roba un po 'così ho deciso di ingoiare il rospo e guida l'umanità alla libertà nella costruzione del migliore dei menu di navigazione migliore per Wordpress. Ho solo bisogno di trovare fonti per alcuni bello guardare i menu orizzontale CSS. Ho scelto drive siti web dinamici per le loro migliori selezioni, demo e fonti.
Ho dedicato una giornata di studio di tesi e giocare con i plugin NAVT. Alla fine ho orgogliosamente creato personalizzato, flessibile, SEO ottimizzato, multilivello, annidati struttura nagivation per il mio sito Wordpress + Tesi based.
Elenco delle caratteristiche del multilivello, annidati menu di navigazione per Wordpress Theme Tesi
(Devi amare questa roba):
- Professional, look pulito e sentire.
- Il supporto per tutti i browser moderni, tra cui 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome sia in javascript e modi non-javascript.
- Downgradable grazia per i browser non-javascript. Si menu saranno utilizzabili, visivamente simili e di lavoro anche per i browser javascript disabilitato (anche se solo di navigazione di primo livello sarà visibile e non flyouts accadrà naturalmente, che sono costituiti da javascript).
- caratteristiche di SEO friendly - non ordinata codice menu elenco viene generato all'interno di HTML. Google e altri motori di ricerca saranno in grado di indicizzare il tuo struttura di navigazione e trovare i link alle pagine interiore.
- Supporto per un numero illimitato livelli di nidificazione e sottolivelli.
- Il supporto per qualsiasi ordine o le pagine, i messaggi (tramite URI definito dall'utente), le categorie, gli utenti, i blocchi di codice personalizzato e collegamenti esterni all'interno del menu.
- Supporto di testo, così come gli elementi di menù basato sulle immagini. (Devo ancora provare questi però).
- struttura dei menu e dei contenuti visivamente è regolabile tramite NAVT area admin.
- Compatta: flyouts JQuery based per i livelli nidificati.
- Fast: JQuery per il menu viene caricato dal server di Google (che avevo Tesi amore stesso di fare lo stesso, invece di tirarlo in loco). Ciò potrebbe accelerare le cose un pochino.
- Scalabilità - Questo tipo di menu è modificabile e configurabile in qualsiasi momento, tramite le impostazioni plugin NAVT senza alcun bisogno di codifica da nessuna parte.
Ho usato questo menu eccellente da guidare dinamico portale come base. Ho dovuto personalizzare il codice un po 'come javascript e comprende pezzo di PHP in custom_functions.php per farlo funzionare con la tesi. Anche il numero di pagine pre-esistenti, le categorie e post dal mio sito sono stati utilizzati per assemblare struttura dei menu. Il tuo sito specifiche sarà diverso - ma i concetti sono gli stessi.
E allora procedere, d'accordo?
Passo dopo passo le istruzioni per l'installazione NAVT basata nidificati, personalizzabile, multilivello, SEO friendly
e semplicemente fresco guardare il menu di navigazione per Wordpress e Tesi a tema
- Vai al pannello admin di Wordpress. Plugins-> Aggiungi nuovo, cercare "navt". Il plugin verrà visualizzato. Fare clic su [Installa], [Installa adesso], "Attiva Plugin".
- Strumenti-> Liste NAVT, Inside "Navigazione" Area Group "trovare il nome del gruppo" e inserisci: "Menu1" nel campo, premere [pulsante Create]. "Menu1" area rettangolo ho creato.
Questa "Menu1" area sarà il parco giochi principale per la costruzione del menu. Ti verrà trascinando qui gli elementi del menu. - In "attività" area "trovare" listbox altri e clicca su "scelta" Home. "Home" thingie verrà visualizzato all'interno del settore "non assegnati. Strano, eh? Nessun problema, a patto che funziona - e sarà per noi.
- Trascinare questa "thingie Home da zona" attività in "Menu1" area rettangolo. Diventerà voce "Home nel menu.
- Ripetere i passaggi 3-4 per alcune pagine da "Pagine zona, così come per le categorie in zona" categorie. Trascina ogni altro elemento che si desidera essere sul menu del dentro "" rettangolo Menu1. Potete cliccare sulle pagine, categorie, gli utenti e alcuni elementi personalizzati come ad esempio "divisore di lista" e "blocco di codice". blocco di codice è fresco modo per aggiungere frammenti personalizzati all'interno del menu.
- Si può trascinare dentro le voci di menu "Menu1" area per riorganizzare il loro ordine.
- È possibile regolare la posizione gerarchica di ogni voce di menu con "<" e ">" frecce.
- Cliccando sul nome di testo di ogni voce di menu - apre mente in attività di dialogo di personalizzazione in più per questo articolo. I più utilizzati default, ma tecnicamente si può impazzire e iniziare a fare scelte di menu basato sulle immagini e aggiungere pezzi di codice HTML in esso. Procedere con cautela però.
- Per linkless sottomenu unclikable che servirà come "genitori" per altri "sub-bambini" ho usato il tipo "blocco di codice. Per esempio, quando la personalizzazione come elemento blocco di codice sono entrato per "alias Voce di menu" = "MemberWing" e per "Enter blocco di codice:" = "<a href='#'> MemberWing </ a>". Avendo href = "#" farà ma in qualità di una valida "padre" scelta del menu non cliccabile.
- Ecco come il mio NAVT 'Menu1' struttura costruire sembrava quasi completato:
- fare clic su Fine costruzione iniziale e poi su "" attrezzo icona per personalizzare la struttura del menu:
- Si aprirà di dialogo con quattro schede: Opzioni di visualizzazione, CSS, Tema.
- Vai alla scheda "Opzioni" e assicurarsi che tutto è controllato e "nome di gruppo", dice: "Menu1"
- Vai alla scheda "Visualizza" e accertati che tutto sia su "Group Show navigazione su ..." area è controllata [x]. Lasciare il resto a default.
- Vai alla scheda "CSS e pulsante select (x)" Non applicare le classi CSS ".
- Vai alla scheda "Tema e compilarlo così:
Inserire in "Aggiungi tag prima ..." zona questo codice:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Inserire in "Aggiungi tag dopo ..." zona questo codice:
<br style='clear: left' /></div> - Premere il tasto [Save / chiudi] pulsante
- A questo punto dal menu edificio all'interno NAVT opzioni plugin è completa.
Ora è il momento di fare un po 'di musica per tema di tesi per prepararla. Per questo abbiamo bisogno di aggiungere alcuni file personalizzati - CSS e JavaScript che appartiene al menu e aggiornare custom_functions.php Tesi ' - Scarica il set completo di file qui .
- Unzip archivio. Se avete aggiornato il vostro custom_functions.php con le personalizzazioni - è necessario unire con la mia roba. Lascio a voi.
Se non hai toccato - sentiti libero di sovrascriverlo con la mia. Nota bene: ho preferito menu posizione sotto l'intestazione sito (di default è in alto) - così la mia rettifica inclusa questa preferenza pure. - Carica archivio comprese tutte le sottodirectory ei file sotto il vostro tema di tesi 'custom' directory, in questo modo:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Non ho toccato custom.css - io preferisco tenere CSS menu specifici sotto le proprie sedi, per evitare di creare confusione all'interno custom.css - A questo punto si può ricaricare il tuo sito web e vedere nuove nuova bella multilivello, annidati, SEO ottimizzata dei menu.
- Si può sempre tornare alle impostazioni NAVT e personalizzare il menu con una scelta più ampia o spostare alcunché. Essa si riflettono sul sito online automaticamente.
La strada da percorrere ...
Questo tutorial incluso esempio creativo di un tipo di menu. Ho giocato con un altro - solo per vedere come colore scuro menu sarà simile:
Tesi a tema - multilivello menu nidificate CSS - scuro tavolozza
Penso che sia abbastanza piacevole. Ci sono molti esempi di navigazione più disponibili al Dynamic Drive - e tutto ciò è possibile personalizzare per Tesi di Laurea e di altri temi di Wordpress con un certo sforzo:
Dynamic Drive menu orizzontale
Spero che possiate trovare questo utile tutorial e utile. Come ho detto, è possibile personalizzare qualsiasi di questi menu per Tesi - che sia dato il tempo e la voglia di farlo accadere.
Ho potuto fare questo lavoro per voi su una base contrattuale. Basta scegliere il menu che ti piace, contatto con me e potrò lavorare sul codice e le istruzioni per il tuo sito web.
20 dollari
E naturalmente se si sta fino alla costruzione di SEO super ottimizzato wordpress abbonamento Premium portale - la soluzione migliore per questo:
Tesi a tema + plugin appartenenza MemberWing + self hosted Wordpress naturalmente.
