La ricerca del menù perfetto ...
Questa è la parte 1 del tutorial
Parte 2 di questo tutorial insegna come costruire menu verticale + tavolozza di colori scuri per quella orizzontale
Ho deciso di ottenere tema della tesi , perché uno dei miei clienti mi ha informato sui problemi di compatibilità tra la tesi e la mia appartenenza plugin di wordpress sito MemberWing. Lo fisso e poi ha deciso di dare un'occhiata più da vicino a tesi e di fatto preso la briga di guardare i video sulla prima pagina del sito principale Tesi - Diythemes.com .
Ciò che mi ha impressionato di più è l'attenzione ai dettagli, facilità d'uso e soprattutto - le caratteristiche SEO che sono così ben pensato.
Appartenenza plug MemberWing è stato progettato da zero per i siti di appartenenza, che avrebbe bisogno di tirare il più possibile di succo di SEO. Così ho pagato un sacco di attenzione alla moltitudine di miglioramenti e SEO perfezioni in MemberWing. Molti dei miei clienti stanno chiedendo su temi diversi da usare e avere tema che era così ben ottimizzato SEO dal profondo sarebbe una misura eccellente per gli imprenditori portale di appartenenza.
La combinazione di poteri di SEO MemberWing con poteri di SEO tema tesi darebbe il meglio di opportunità classifica ai miei clienti. Così mi sono tesi e suonato con lui per un giorno.
Si tratta di un tema eccellente in tutti i modi. La navigazione parte di esso è però un po 'limitato nelle funzioni. A partire dalla tesi di 1,5 + è un menù solo livello. Il mio desiderio comune è di essere in grado di personalizzare la navigazione, per quanto necessario. Alcuni siti hanno solo poche pagine, molti altri hanno tonnellate di pagine statiche + miriade di articoli / post + un sacco di categorie.
Così, nel mondo ideale avere la possibilità di creare carina organizzato gerarchicamente menu di navigazione facile da usare è un must. Tesi di diritto fuori del blocco ha una buona navigazione alla ricerca, ma ho notato che tutte le Tesi di siti web basati su cerchi come gemelli. Personalizzazione menu di navigazione tesi non è davvero facile così molte persone semplicemente lasciarlo com'è. Non c'è modo di cambiare l'ordine delle categorie nel menu o posizione in tra le pagine. E ancora, la capacità di creare strutture di menu nidificate manca. Così ho deciso di vedere cosa si potrebbe fare su di esso.
Dopo aver provato circa mezza dozzina di menu / di navigazione relativi plugin ho impostato la mia scelta su NAVT Wordpress Plugin Lista navigazione .
Plug NAVT è essenzialmente ordinata generatore lista con fantasia super e un po 'difficile da capire-non tradizionale interfaccia di amministrazione. Che fuorviante a questo proposito è che in realtà non voglia creare i menu alla ricerca di se stesso. Fa la parte più difficile del lavoro anche se - vi dà la capacità di tirare visivamente insieme, e generare lista non ordinata - scheletro del vostro menu-to-be. E si può creare molti menu troppo. Si può tirare tutti i tipi di cose Wordpress nel 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 che vogliono.
NAVT genera per voi portato HTML lista non ordinata. Bellezza NAVT seconda è che ti aiuta a inserire il nuovo menu nel tema tramite logica JQuery famosa base, 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 classe di percorso di menu esistente o elemento tag div che viene generato dal tema corrente. Così NAVT fa questa sostituzione per voi senza costringere ad andare in codice tema e renderlo più disordinato di quello che è già. Se tutto questo suona come incomprensibile - non ti preoccupare - mi guida passo passo al più presto. La parte impegnativa NAVT per tutti è che dovrete venire con immagini reali CSS + + codice javascript per voi stessi menu. Ed è a voi per capire dove e come integrare questi file e fare queste cose correttamente collegarsi insieme.
Sinceramente, senza sapere JQuery + qualche + CSS + PHP con esperienza decente con Wordpress - questa cosa è difficile da tirare.
So che volentieri questa roba un po 'così ho deciso di stringere i denti e guida l'umanità alla libertà nel costruire il migliore dei migliori menu di navigazione per Wordpress. Avevo solo bisogno di trovare fonti per qualche bella cercando menu orizzontale CSS. Ho preso sito web dinamico disco per i migliori le loro selezioni, demo e sorgenti.
Ho dedicato una giornata di studio Tesi e giocare con il plugin NAVT. Alla fine ho orgogliosamente creato su misura, flessibile, ottimizzato SEO, multilivello, struttura nagivation annidati per la mia tesi di Wordpress sito + based.
Elenco delle caratteristiche del multilivello, annidati menù di navigazione per Wordpress Theme Tesi
(Devi amare queste cose):
- Professionale, look pulito e si sentono.
- Supporto per tutti i browser moderni, tra cui 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome sia in javascript e non javascript modi.
- Grazia downgradable per non javascript browser. Tu menù 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 flyout accadrà, naturalmente, come esse sono realizzate da javascript).
- Caratteristiche SEO friendly - lista non ordinata menù codice 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 a pagine interne.
- Supporto per un numero illimitato livelli di nidificazione e sottolivelli.
- Sostegno per ogni ordine o pagine, messaggi (tramite gli URI definiti dall'utente), le categorie, gli utenti, i blocchi di codice personalizzato e link esterni all'interno del menu.
- Supporto di testo così come image-based elementi del menu. (Devo ancora provare queste però).
- Struttura del menu e dei contenuti è visivamente regolabile tramite area admin NAVT.
- Compatta: JQuery flyout base per i livelli annidati.
- Veloce: JQuery per il menu viene caricato dal server di Google (mi piacerebbe Tesi stesso a fare lo stesso, invece di tirare in locale). Questo avrebbe accelerato le cose un po '.
- Scalabilità - Questo tipo di menù è modificabile e configurabile in qualsiasi momento tramite le impostazioni di plug NAVT senza necessità di codifica da nessuna parte.
Ho usato questo menu eccellente da guidare dinamico portale come base. Ho dovuto personalizzare il codice javascript un po 'così come sono pezzo di PHP in custom_functions.php per farlo funzionare con Tesi. Anche il numero di pre-esistente pagine, categorie e messaggi dal mio sito sono stati usati per assemblare la struttura del menu. Il vostro sito sarà specifiche diverse - ma i concetti saranno gli stessi.
Quindi cerchiamo procedere, d'accordo?
Istruzioni passo passo per impostare NAVT basato nidificate, personalizzabile, multilivello, SEO friendly
e semplicemente menù fresco di navigazione alla ricerca di Wordpress e Tesi a tema
- Vai al pannello di amministrazione di Wordpress. Plugins-> Aggiungi nuovo, cercare "navt". Il plugin sarà mostrata. Fare clic su [Installa], [Installa ora], "Attiva plugin".
- Strumenti-> Liste NAVT, Inside "Navigazione del Gruppo" area trovare "il nome del gruppo" e inserire: "menu1" nel campo, premere pulsante [Crea]. Area "menu1" rettangolo ha creato.
Questa area "menu1" sarà il principale parco giochi per la costruzione del menu. Sarete trascinando qui gli elementi del menu. - Delle "Attività" area trovare listbox "altro" e clicca su scelta "Home". "Home" thingie apparirà all'interno della zona "non assegnato". Strano, eh? Nessun problema, fintanto che funziona - e sarà per noi.
- Trascina questo thingie "Casa" di zona "attività" in zona rettangolo "menu1". Diventerà voce "Home" nel menu.
- Ripetere i passaggi 3-4 per alcune pagine dalla zona "Pagine", così come per le categorie in zona "categorie". Trascinare tutti gli altri articoli si vuole essere nel menu interno rettangolo "menu1". Potete cliccare sulle pagine, le categorie, gli utenti e alcuni elementi personalizzati come ad esempio "divisore lista" e "blocco di codice". Blocco di codice è il modo fresco per aggiungere frammenti personalizzati all'interno del menu.
- Si può trascinare le voci di menu all'interno dell'area "menu1" per riorganizzare il loro ordine.
- Si può regolare la posizione gerarchica di ogni voce di menu con "<" e ">" frecce.
- Cliccando sul nome di testo di ogni voce di menu - apre la mente di dialogo incredibile personalizzazione in più per questo articolo. Ho usato soprattutto default, ma tecnicamente si può impazzire e iniziare a fare basati su immagini scelte del menu 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 "blocco codice" tipo. Per esempio quando si personalizza come elemento di blocco di codice sono entrato per "Voce di menu alias" = "MemberWing" e per "Enter blocco di codice:" = "href='#'> MemberWing </ a>". Avendo href = "#" renderà non cliccabile, ma agisce come un valido scelta "genitore" del menu.
- Ecco come il mio NAVT 'menu1' costruire la struttura sembrava quasi completato:
- Completare la costruzione iniziale e quindi fare clic sull'icona "marcia" per personalizzare la tua struttura del menu:
- Si aprirà dialogo con 4 schede: Opzioni di visualizzazione, CSS, Tema.
- Vai alla scheda "Opzioni" e verificare che tutto sia selezionata e "il nome del gruppo", dice: "menu1"
- Vai alla scheda "Visualizzazione" e assicuratevi che tutto ciò che il "gruppo Mostra navigazione ..." area viene controllata [x]. Lasciare il resto a default.
- Vai alla scheda "CSS" e selezionare il pulsante radio (x) "Non applicare 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 [salva / chiudi] pulsante
- A questo punto edificio all'interno del menu opzioni del plugin NAVT è completa.
Ora è il momento di fare un motivetto per tema tesi per essere pronto. Per questo abbiamo bisogno di aggiungere alcuni file personalizzati - CSS e javascript che fa parte del menu e custom_functions.php Tesi update ' - Scarica il set completo di file qui .
- Decomprimere archivi. Se avete aggiornato il vostro custom_functions.php con le personalizzazioni - avete bisogno di fondersi con la mia roba. Lascio a voi.
Se non hai toccato - sentitevi liberi di sovrascriverla con la mia. Nota bene: ho preferito posizione del menu sotto l'intestazione sito web (di default è in alto) - quindi il mio rettifica inclusa questa preferenza pure. - Carica archivio incluse tutte le sottodirectory ei file sotto il vostro tema Tesi directory 'custom', come questo:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Non ho toccato custom.css - preferisco mantenere menù specifici per i CSS con le proprie sedi, per evitare di creare confusione all'interno custom.css - A questo punto potete ricaricare il vostro sito e vedere nuove bellissimo nuovo multilivello, annidati, menu ottimizzato SEO.
- Si può sempre tornare a NAVT impostazioni e personalizzare il menu con più scelta o riposizionare nulla. E si rifletterà 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 menù di colore scuro potrebbe essere così:
Tesi a tema - multilivello menù annidati CSS - tavolozza scura
Penso che sia molto carino. Ci sono molti più campioni di navigazione disponibili al Dynamic Drive - tutti sono possibili da personalizzare per tesi e altri temi Wordpress con un certo sforzo:
Menù Orizzontale Dynamic Drive
Spero che troverete questo tutorial benefico e utile. Come ho detto, è possibile personalizzare qualsiasi di questi menu per la tesi - che è dato il tempo e la voglia di farlo accadere.
Ho potuto fare questo lavoro per voi su base contrattuale. Basta scegliere nel menu che ti piace, contatto con me e io lavoro sul codice e le istruzioni per il tuo sito.
20 dollari
E naturalmente se si sta fino alla costruzione di super-premium wordpress ottimizzato SEO appartenenza portale - la soluzione migliore per questo:
Tesi a tema + plugin di appartenenza MemberWing + auto ospitato Wordpress naturalmente.
