Apple è sempre stata una divinità in termini di presentazione di se stessi e dei loro prodotti. Adoro la sidebar nella pagina iniziale di Apple e volevo utilizzare il plug-in Accordion nell'interfaccia utente jQuery per raggiungere questo obiettivo! Come se non fosse abbastanza per me, voglio essere in grado di mostrarlo e nasconderlo a mio piacimento. Ti mostrerò come!

Prefazione

Questo tutorial presume che tu abbia un motore wordpress in esecuzione su un server a cui hai accesso per caricare file, scaricare file e navigare. Se vuoi eseguire un server locale sul tuo computer con un'installazione di wordpress, c'è un tutorial su questo qui per Windows, e qui per OS X.

File di cui avrai bisogno.

Abbiamo bisogno di un totale di 6 file per questo tutorial:

• functions.php - Questo terrà una piccola riga di codice che registra la nostra barra laterale.
• index.php - Abbiamo sicuramente bisogno di questo file. Qualunque cosa indovina perché?
• jQuery - Ecco la versione 1.2.6 per te.
• jQuery UI (fisarmonica) - Abbiamo solo bisogno del plugin Accordion e del nucleo dell'interfaccia utente, non dell'intera libreria dell'interfaccia utente.
• sidebar.js - Contiene tutto il codice jQuery per la barra laterale.
• style.css - Necessario per attivare il tema e contiene tutti i CSS.
• cartella di immagini - Ti darò una lista di immagini per riempire questo con un po 'più tardi, nella parte CSS. Per ora, però, abbiamo solo bisogno di 1 immagine che si trova nel codice HTML - l'icona RSS! Inseriscilo nella cartella "images" e cominciamo!

Non dimenticare di attivare il tuo tema Wordpress (che dovrebbe essere opportunamente chiamato sidebarTheme) in Dashboard! Destra. Per il tutorial! Cominceremo con l'HTML e Wordpress di cui avremo bisogno. Questo includerà lo strcutre di cui avremo bisogno, quindi lo riempiremo con il codice Wordpress che mostrerà i post e registrerà e mostrerà la nostra barra laterale. Sembrerà ancora pazzo dopo questo, quindi lo sistemeremo con un bel CSS che lo renderà in qualche modo simile alla pagina iniziale di Apple, e farà in modo che anche la barra laterale sia simile a apple-y. Lo facciamo prima del JS, quindi quelli senza JS vedono ancora la bella cosa che guarda. Poi, finalmente, il mio preferito - il jQuery. Lo animeremo aperto e chiuso e useremo fisarmonica() ed è i parametri per generare l'effetto hover.

Passaggio 1: HTML

Apri rapidamente functions.php, e metti questo in:

 'AppleQuery')); ?>

functions.php viene prelevato automaticamente da PHP / Wordpress ed esegue le funzioni. Questa funzione chiede a Wordpress di registrare una nuova barra laterale nella Dashboard per aggiungervi dei widget. Ma non è tutto ... Dobbiamo metterlo nel nostro tema! Lo spiegherò dopo il bit HTML / Wordpress successivo. L'array nomina semplicemente la barra laterale, in modo che in Dashboard possiamo selezionare quale barra laterale modificare (non è davvero un problema ... Più di una buona abitudine in caso di numerose barre laterali).

Copia o digita questo nel tuo index.html:

            
 
 
 
   
 
 
 
  Top Stories  "title =" RSS 2 feed "> 
  
  
"title ="">
 
  
 
   
 
  

Spiegazione

Ok ... so che è molto. Molto molto. Ma questo tutorial non si concentra specificamente su Wordpress e HTML, ma selezionerò gli interessi che probabilmente dovresti capire.

• L'intero segmento della barra laterale - Questa è la parte principale di ciò che è importante. Quello che stiamo chiedendo wordpress, è quello Se, nell'intero motore wordpress locale, la funzione dynamic_sidebar è presente (che è in functions.php), eseguire la funzione. AppleQuery specifica il nome della barra laterale che abbiamo assegnato (in functions.php, ricorda?).
• - Questo è un raw PHP per echeggiare la data e l'ora correnti dell'utente. È solo qui perché è su Apple! È nel formato di: (Mese DD, YYYY 00:00 AM GMT).
• - Guarda nel capo elemento ... Vedi la stessa cosa? Ancora una volta, è sul sito Web di Apple. È solo il feed delle voci XML per il blog.
• - Niente di straordinario ... Questo è solo il pulsante che attiva la visibilità della barra laterale. Ne ho fatto uno span quindi non è selezionabile per i browser JSless, ma usando la funzione .click () di jQuery people WITH JS can!

Quindi con HTML e Wordpress, suggerirei di andare nel tuo WP Admin e aggiungere alcuni widget al tuo blog. Per qualche motivo, la ricerca non ha un titolo e il widget della tag cloud non scompare - Vai a capire! Ho usato il seguente nel mio:

• categorie
• archivio
• link
• pagine
• Meta

E dovrebbe assomigliare a questo: Un po 'brutto eh? Non temere mai, i CSS sono qui!

Passaggio 2: CSS

Sì, il fantastico CSS è qui per salvare la giornata! Vogliamo creare qualcosa in qualche modo ricordo di questo (mockup di Photoshop):

Come il mio piccolo effetto sfocato? Ho pensato che fosse adatto ... Ad ogni modo. La sfocatura sarà il JS, ma per ora vogliamo che tutto sia espanso e mostrato, così che per l'1% dei cookie intelligenti che non hanno JS abilitato, la sidebar sarà ancora visibile e sarà comunque carina. Molto, molto grande, ma tuttavia, lì. È un grosso pezzo, quindi l'ho messo in un altro file, per non riempire questa pagina - Non uccidermi! Copia o digita questo CSS nel tuo style.css. Avrai bisogno di tutte queste immagini:

• activeBg.png
• h1.png
• inactiveBg.png
• sidebarClose.png
• sidebarOpen.png
• topStoriesBg.png

Alcune cose da notare

• Ho fatto del mio meglio per attenersi a ems in termini di ridimensionamento dei caratteri, quindi il 75% ridimensiona tutto il testo a 12px che diventa 1em. Questo è per un altro tutorial però!
• Nel codice h1 ho usato "text-shadow". Questo è CSS3. Contribuisce solo all'aspetto di mele!
• #soddisfare - Ha un colore di sfondo di bianco. Perchè lo chiedi? Lo sfondo sarà sempre bianco comunque, qual è il punto? Bene, amici miei, quando arriviamo al jQuery di cui abbiamo bisogno #soddisfare per diventare una coperta per la barra laterale, e se non vi è alcun set di sfondo, sarà trasparente mostrando così la barra laterale.
• #sidebarToggleButton - Questo è un nome infernale ... Questo imposta il pulsante che consente di attivare la visibilità della barra laterale per essere correttamente in posizione, ma invisibile alle persone JSless. Quando passiamo al JS, verranno applicate le immagini di sfondo, quindi vengono visualizzate solo per le persone JS!

Queste 3 cose sono solo le uniche stranezze in là. Ho testato quel codice in FF, Safari 3 e Opera 9, e tutto sembra perfetto! Ecco come dovrebbe apparire:

Quindi dobbiamo jQueryfy it.

Passaggio 3: Tempo jQuery!

Amo jQuery! Mi piace il fatto che tu possa tradurre le parole in codice così facilmente, e comincio sempre con le parole. Ecco un'idea di base di ciò che vogliamo che lo script faccia.

• Nascondi la barra laterale.
• Facendo clic su ".sidebarOpen", attiva quanto segue:
  • Rimuovi la 'sidebarOpen' della classe.
  • Aggiungi la 'sidebarClose' della classe (che modelleremo nella prossima sezione).
  • Animare la barra laterale per estrarre da sotto (letteralmente, usando posizione: relativa;)
  • Anima (questo) per spostare la quantità X di pixel a sinistra (in modo che rimanga in linea con la barra laterale).
• Inizia la fisarmonica.

Sembra tutto molto (ma in realtà non lo è ...) quindi ti guiderò passo dopo passo. Apri il file che hai creato chiamato sidebar.js e inizia a digitare!

Passaggio 3.1

Come sempre, non dimenticare di avvolgere tutto nel documento speciale di jQuery pronto:

$ (document) .ready (function () // codice jQuery va qui);

Metti tutto qui tra il documento pronto!

Passaggio 3.2

$ ("# sidebar"). css (left: "205px");

Questo 'nasconde' la barra laterale manipolando il livello DOM CSS. Non è vero, viene solo spazzato sotto il tappeto. L'essere letterale del tappeto div content #. Questo in realtà non funzionerà finché non avremo aggiunto un po 'più di CSS, ma coprirò dopo questa sezione.

Passaggio 3.3

$ (". sidebarOpen"). toggle (function () $ (this) .removeClass ("sidebarOpen") .addClass ("sidebarClose") .animate (right: "205px", 500); $ ("# barra laterale "). animate (left:" 0px ", 500);, function () $ (this) .removeClass (" sidebarClose ") .addClass (" sidebarOpen ") .animate (right:" 0px " , 500); $ ("# sidebar"). Animate (left: "205px", 500););

OK, posso capire la tua confusione. Questo è molto per un'istruzione passo passo giusto ?! Beh, sì ... Ma in realtà sono due cose molto simili. La prima funzione in .ginocchiera () volontà:

• Rimuove la classe di 'sidebarOpen' (le classi sono per CSS nella prossima sezione).
• Aggiunge la classe di 'sidebarClose'.
• Animate il nostro piccolo pulsante per scorrere a sinistra accanto:
• La barra laterale che si espande, animata da jQuery. Entrambi dovrebbero uscire durante mezzo secondo, quindi dovrebbero muoversi insieme.

Il fatto è che la seconda funzione è esattamente quella, ma al contrario! It:

• Rimuove la classe di 'sidebarClose'.
• Aggiunge la classe di 'sidebarOpen'.
• Animate il nostro piccolo pulsante per scorrere di nuovo a destra accanto:
• La barra laterale che scorre indietro.

Vedere! Non così difficile. È solo un sacco di codice da leggere.

Passaggio 3.4

Tempo di fisarmonica! Sìì! Finalmente possiamo usare l'interfaccia utente jQuery sempre presente. Il modo in cui hanno progettato il widget rende semplicissimo impiantare:

$ ("# sidebar ul"). accordion (header: 'h2', event: 'mouseover', activeClass: 'selected');

È solo l'unico .fisarmonica() funzione, applicata al ul all'interno del #sidebar div. I parametri (uno per riga) sono i seguenti (piuttosto auto esplicativo ... Ma eh):

• intestazione - Questo definisce le maniglie di ciascun "cassetto" della fisarmonica - Nel nostro caso, l'h2 di ciascun widget.
• evento - Definisce quando cambiare i cassetti e vogliamo che l'effetto al passaggio del mouse come Apple abbia, quindi usiamo mouseover
• activeClass - Questo è utile per il piccolo extra CSS che stiamo per affrontare. Dà al cassetto espanso una classe di "selezionati".

Questo è tutto il codice JavaScript di cui avremo bisogno. È tutto abbastanza semplice e facilmente modificabile per adattarsi a qualsiasi cosa tu abbia bisogno!

Perché questo è così fantastico

Sento che questo non è stato ancora sufficientemente glorificato! La cosa sorprendente del plugin per fisarmonica è che non devi modificare nessuno dei Wordpress generato codice, che non abbiamo affatto formattato (a parte il wrapping ul, ma è necessario a prescindere). Non solo è al 100% discreto e 100% non correlato al codice HTML modificato, ma è anche una funzione breve e veloce. La fisarmonica fa tutto il lavoro sporco di selezionare, animare, attivare, cambiare classe, ecc. È fantastico! Considera la fisarmonica UI glorificata! Probabilmente dovresti avere qualcosa di simile a questo (ho messo la fisarmonica molto leggera così puoi vedere dove dovrebbe essere):

Passaggio 4: jQuery CSS

Quindi ovviamente avremo bisogno di un po 'di CSS in più per far fronte a tutti i tagli e cambiamenti che jQuery fa per noi. Le cose che richiedono uno stile aggiuntivo sono:

• #sidebarToggleButton - Usando le classi che jQuery assegna per noi, possiamo ora modellare in modo sicuro le immagini 'sidebarClose.png' e 'sidebarOpen.png' che ti ho fatto risparmiare prima.
• La fisarmonica ha sicuramente bisogno di un po 'di lavoro. Dobbiamo sistemare i cordoni quadrati con alcuni CSS3 e modellare la classe attiva.

/ * jQUERY CSS * / #sidebar> ul border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -opera-border-radius: 5px;  span.sidebarOpen background: url (images / sidebarOpen.png) centro senza ripetizione;  span.sidebarClose background: url (images / sidebarClose.png) centro senza ripetizione;  h2.selected background: url (images / activeBg.png) repeat-x! IMPORTANTE; colore: bianco! IMPORTANTE; 

Solo 2 cose da notare:

1. #sidebar> ul - Cioè, il diretto ul figlio di #sidebar ottiene il cool corders arrotondato - ancora beta CSS3. Funziona su tutti i browser basati su Mozilla, Opera e WebKit.
2. !IMPORTANTE - Questo è necessario per sovrascrivere ciò che è stato precedentemente impostato - lo sfondo grigio della maniglia di default.

E così ora, il tuo show prodotto finale sarà qualcosa di molto simile a questo: (Clicca per la versione HTML)

Avvolgendo

Quindi abbiamo esaminato un po 'di cose in questo tutorial. Abbiamo esaminato le barre laterali dinamiche, un sacco di jQuery per mostrare e nascondere la barra laterale che è infatti una fisarmonica in sé stessa! Questo tutorial era finalizzato all'utilizzo di plugin aggiuntivi per il jQuery predefinito (Abbiamo inserito l'interfaccia utente jQuery in) e anche la funzione dynamic_sidebar.