La ricerca del menu perfetto ...
Questa è la parte 1 del tutorial
Parte 2 di questo tutorial insegna come creare menu verticale + tavolozza dei colori scuri per quella orizzontale
Ho deciso di ottenere tema di tesi, perché uno dei miei clienti mi ha informato sui problemi di compatibilità tra la tesi e il mio sito wordpress MemberWing adesione plugin. I fisso e poi ha deciso di adottare uno sguardo più attento a Thesis e presi la briga di guardare i video sulla prima pagina del sito tesi principale - Diythemes.com.
Cosa mi ha colpito di più è l'attenzione ai dettagli, facilità d'uso e, soprattutto, - caratteristiche di SEO che sono così ben pensato.
Plugin adesione MemberWing è stato progettato da zero per i luoghi di appartenenza, che avrebbe bisogno di tirare il succo 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 informazioni su diversi temi da usare e con tema che è stato così bene SEO ottimizzato dal profondo sarebbe un eccellente complemento per l'adesione degli imprenditori del portale.
Combinando competenze SEO di MemberWing con poteri SEO del tema di tesi sarebbe dare il meglio di opportunità di ranking per i miei clienti. Così mi sono tesi e ha giocato con essa per un giorno.
Si tratta di un tema eccellente in tutti i modi. La parte di navigazione di esso è però un po 'limitato in funzione. A partire dalla tesi di 1,5 + è un menu unico livello. Il mio desiderio è quello di essere sempre in grado di personalizzare la navigazione nella misura necessaria. Alcuni siti hanno solo poche pagine, molte altre sono tonnellate di pagine statiche + miriade di articoli / posti + un sacco di categorie.
Così, nel mondo ideale avere la possibilità di creare nice looking organizzate gerarchicamente menu di facile navigazione è un must. Tesi di destra fuori del blocco è bella la navigazione, ma ho notato che tutte le Tesi di siti web basati stanno cercando, come due gemelli. Personalizzazione menu di navigazione di tesi non è davvero facile, quindi maggior parte delle persone lasciate così com'è. Non vi è alcun modo per cambiare l'ordine delle categorie nel menu o nella posizione in tra le pagine. E ancora, la capacità di creare strutture di menu nidificate è mancante. Così ho deciso di vedere cosa si può fare su di esso.
Dopo aver provato circa la metà dei menu dozzina / plugins relativi alla navigazione Ho impostato la mia scelta su Wordpress Plugin List di navigazione NAVT.
Plugin NAVT è essenzialmente generatore di lista non ordinata con fantasia super e un po 'difficile da figura interfaccia di amministrazione non tradizionale. Cosa fuorvianti riguardo è che in realtà non voglia creare menu in cerca di se stessa. Fa la parte più difficile del lavoro anche se - ti dà la capacità di mettere insieme visivamente, e generare elenco non ordinato - scheletro del vostro menu-to-be. E si possono creare menu molti troppo. Si può tirare qualsiasi tipo di roba Wordpress nel menu di navigazione: pagine, post, articoli, categorie, utenti, blocchi di codice, link esterni, divisori, separatori e mix and match e nido e organizzare e personalizzare in qualsiasi struttura ad albero si volere.
NAVT genera per voi portato HTML lista non ordinata. Secondo la bellezza di NAVT è che ti aiuta a inserire il nuovo menu nel vostro tema tramite JQuery famosa base logica, ma senza bisogno di modificare 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 esistenti o tag div elemento che viene generato dal tema corrente. Così NAVT fa questa sostituzione per voi, senza che vi costringono ad andare in tema di codice e renderlo più confusa di quanto lo sia già. Se che tutti i suoni incomprensibili - non preoccuparti - ti guida passo per passo al più presto. La parte difficile del NAVT per tutti è che devi venire con reali CSS + immagini + il codice javascript per il menu te stesso. E sta a voi capire dove e come integrare questi file e fare questa roba correttamente ottenere collegati tra loro.
Sinceramente senza conoscere alcuni JQuery + PHP + CSS + che hanno esperienza decente con Wordpress - questa cosa è difficile da tirare.
Volentieri So che questa roba un po 'così ho deciso di mordere la pallottola e l'umanità guida per la libertà nel costruire il migliore dei migliori menu di navigazione per Wordpress. Avevo solo bisogno di trovare le fonti per alcuni nice looking orizzontale menu CSS. Ho preso sito disco dinamico per i loro migliori selezioni, demo e le fonti.
Ho dedicato una giornata di studio Tesi e giocare con i plugin NAVT. Alla fine ho creato con orgoglio personalizzate, flessibili, SEO ottimizzato, multilivello, struttura nagivation nidificate per il mio Wordpress + sito Thesis base.
Elenco di funzionalità di multilivello, menu di navigazione per Wordpress nidificato Tesi Tema
(You Got to love this stuff):
- Professionale, aspetto 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 non le modalità javascript.
- Downgradable grazia per i non-browser javascript. Si menu saranno utilizzabili, simili sul piano visivo e di lavoro anche per i browser javascript disabili (anche se solo di navigazione di primo livello saranno visibili e non flyouts accadrà, naturalmente, che sono costituiti da javascript).
- Caratteristiche SEO friendly - codice menu non ordinato elenco viene generato in HTML. Google e gli altri spider dei motori di ricerca sarà in grado di indicizzare il tuo struttura di navigazione e trovare i link alle pagine interne.
- Il sostegno per un numero illimitato livelli di nidificazione e sottolivelli.
- Sostegno per ogni ordine o le pagine, i messaggi (tramite URI definiti dall'utente), le categorie, gli utenti, i blocchi di codice personalizzato e collegamenti esterni all'interno del menu.
- Sostegno del testo così come l'immagine a base di elementi del menu. (Devo ancora provare questi però).
- Struttura dei menu e il contenuto visivo è regolabile attraverso l'area admin NAVT.
- Compact: flyouts JQuery base per i livelli nidificati.
- Fast: JQuery per il menu viene caricato dal server di Google (mi piacerebbe tesi stessa di fare lo stesso, invece di tirare in locale). Questo potrebbe accelerare le cose un po '.
- Scalabilità - Questo tipo di menu è modificabile e configurabile in qualsiasi momento, tramite le impostazioni del plugin NAVT senza necessità di codifica da nessuna parte.
Ho usato questo menu eccellente portale unità dinamica come base. Ho avuto per personalizzare il codice javascript un po 'così come comprendere pezzo di PHP in custom_functions.php per farlo funzionare con la tesi. Anche il numero di pagine pre-esistenti, le categorie ei posti dal mio sito sono stati utilizzati per assemblare la struttura del menu. Specifiche vostro sito sono diversi -, ma i concetti sono gli stessi.
E allora procedere, d'accordo?
Istruzioni passo passo per NAVT setup-based nested, personalizzabile, multilivello, SEO friendly
e semplicemente cool looking menu di navigazione per Wordpress e Tesi Tema
- Vai al pannello di amministrazione Wordpress. Plugins-> Aggiungi nuovo, cercare "navt". Il plugin verrà mostrato. Fare clic su [Installa], [Installa], "Attiva Plugin".
- Tools-> Liste NAVT, Inside "Navigation Group" zona di trovare "il nome del gruppo" e inserire: "menu1" nel campo, premere [Crea] pulsante. "Menu1" area rettangolo ha creato.
Questo "menu1" area sarà il parco giochi principale per la costruzione di menu. Sarete trascinando qui il tuo elementi del menu. - In "attività" trovare spazio "altro" casella di riepilogo e fare clic su "Home" scelta. "Home" thingie apparirà all'interno di "non assegnato" area. Strano, eh? No worries, fintanto che funziona - e sarà per noi.
- Trascinare il "Home" thingie da "attività" in zona "menu1" area rettangolo. Diventerà "Home" nel menu.
- Ripetere i passaggi 3-4 per alcune pagine da "Pagine" area, così come per le categorie in "categorie" area. Trascinare tutti gli altri elementi che si desidera essere sul menu interno "menu1" rettangolo. È possibile fare clic sulle pagine, categorie, utenti e alcuni elementi personalizzati, come "divisore di lista" e "blocco di codice". Blocco di codice è un modo cool per aggiungere frammenti personalizzato all'interno del menù.
- È possibile trascinare le voci del menu interno "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 incredibile mente di dialogo di personalizzazione in più per questo articolo. I più utilizzati default, ma tecnicamente si può impazzire e iniziare a fare "image-based scelte di menu e aggiungere pezzi di codice HTML in essa. Procedere con cautela però.
- Per linkless sottomenu unclikable che servirà come "genitori" per gli altri "sub-bambini" ho usato "blocco di codice" tipo. Per esempio, quando la personalizzazione dell'oggetto blocco di tale codice sono entrato per "alias voce di menu" = "MemberWing" e per "Enter blocco di codice:" = "<a href='#'> MemberWing </ a>". Dopo aver href = "#" renderà non cliccabili, ma agisce come un valido "genitore" menu a scelta.
- Ecco come il mio NAVT 'menu1' costruire la struttura sembrava quasi completato:
- Terminare la costruzione iniziale e quindi fare clic su "attrezzi" icona per personalizzare la struttura dei menu:
- Si aprirà il dialogo con 4 schede: Opzioni, Display, CSS, Tema.
- Vai su "Opzioni" sulla scheda e assicurarsi che tutto è controllato e "nome di gruppo", dice: "menu1"
- Vai alla scheda "Visualizza" e accertati che tutto il "gruppo di navigazione Mostra su ..." L'area è controllata [x]. Lasciare il resto a default.
- Vai a "CSS" scheda e pulsante select (x) "non si applicano le classi CSS".
- Vai a "tema" scheda e compilare in quel modo:
INSERT INTO "Aggiungi tag prima ..." zona di questo codice:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
INSERT INTO "Aggiungi tag dopo ..." zona di questo codice:
<br style='clear: left' /></div> - Premere [save / chiudi] pulsante
- A questo punto dal menu edificio all'interno di opzioni plugin NAVT è completa.
Ora è il momento di fare un motivetto 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 archive. Se avete aggiornato il vostro custom_functions.php con le personalizzazioni - avete bisogno di unione con le mie cose. Lascio a voi.
Se non hai toccato - sentitevi liberi di sovrascrivere con la mia. Si prega di notare: ho preferito posizione del menu sotto l'intestazione al sito web (di default è al di sopra) - quindi la mia rettifica inclusa questa preferenza pure. - Carica Archivio comprese tutte le sottocartelle ei file sotto il tema di tesi directory 'personalizzato', in questo modo:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Io non ho toccato custom.css - Io preferisco mantenere menu specifici CSS con le proprie sedi, per evitare di creare confusione all'interno custom.css - A questo punto si può ricaricare il vostro sito e vedere il menu nuovo bellissimo nuovo multilivello, nidificate, SEO optimized.
- Si può sempre tornare alle impostazioni NAVT e personalizzare il menu con maggiori possibilità di scelta o spostare nulla. Essa si riflettono sul sito live automaticamente.
La strada da percorrere ...
Questo tutorial incluso valido esempio di un tipo di menu. Ho giocato con un altro - solo per vedere come menu di colore scuro sarà simile a:
Tema Tesi - multilevel menu CSS nidificate - dark palette
Penso che sia molto carino. Ci sono molti più campioni di navigazione disponibile al Dynamic Drive - e tutto ciò è possibile personalizzare per tesi e altri temi di Wordpress con un certo sforzo:
Dynamic Drive Horizontal Menu
Spero che troverete utile questo tutorial e utile. Come ho detto, è possibile personalizzare qualsiasi di questi menu per la tesi - che viene dato il tempo e la voglia di farlo accadere.
Avrei potuto fare questo lavoro per voi su base contrattuale. Basta scegliere il menu che ti piace, in contatto con me e io lavoro sul codice e le istruzioni per il tuo sito web.
$ 20
E, naturalmente, se siete fino alla costruzione di SEO super ottimizzato wordpress portale premio di appartenenza - la soluzione migliore per questo:
Tema Tesi + MemberWing plugin adesione + self hosted Wordpress, ovviamente.
