Wordpress offre una vasta gamma di informazioni sul tuo blog e sui suoi contenuti. Mostrare molte di queste informazioni può diventare ingombro. Una soluzione di grande impatto è il contenuto a schede!

In questo tutorial, prenderemo in precedenza il layout per giornali di WordPress su cui abbiamo lavorato e lo estendere con le schede.

Prefazione

Destra! Useremo una bella e potente combinazione di animazione di jQuery e .legare la funzione si amalgama bene con la versatilità di Wordpress WP_Query () e tag condizionali esclusivi di Wordpress. Se sei come me, ti piace vedere il prodotto finito prima di tutto:

Se vuoi farlo solo questo tutorial, ti servirà l'ultima versione di jQuery per questo tutorial. Scaricalo qui. Altrimenti, dovrebbe già essere in linea con questo tema che ho preparato, che puoi scaricare qui: myTheme.

Supponiamo che tu abbia un'installazione live di Wordpress, che sia locale o ospitata. Ci sono tutorial sull'esecuzione locale di Wordpress qui per Windows, e qui per OS X. Attivare il tema che ho preparato in precedenza - myTheme - sarebbe di grande aiuto. Ci stiamo estendendo su questo, quindi apriamo index.php e otteniamo il montaggio!

Passaggio 1: nuovo codice HTML strutturale.

Abbiamo bisogno di un nuovo HTML, ovviamente. Questo è semplice Abbiamo solo bisogno di alcune div aggiuntive per avvolgere tutto ciò con cui stiamo lavorando. Inserisci questo codice seguente appena sopra

 
 
 
iBlog - Wordpress e jQuery insieme Armonia.
 
 

Passaggio 2: tag condizionali

Quindi amiamo il contenuto a schede che stiamo per realizzare, ma lo vogliamo solo sulla nostra prima pagina per l'amor di spettacolo! Com'è possibile avere un codice esclusivo sulla prima pagina che chiedi !? Semplice. Tag condizionali di Wordpress. Questa è una lezione preziosa da imparare! I tag condizionali forniscono un mezzo molto potente per personalizzare i tuoi temi un po 'di più! Sono molto auto-esplicativi, ma fornirò un riepilogo di base sotto il codice. Aggiungi questo appena sotto il nostro nuovo marchio h1 elemento in index.php.

Ottieni ciò che è, giusto? if (is_home ()) è la nostra condizione qui, quindi Se la pagina attualmente visualizzata è la casa, includi il nostro file tabbedContent.php. Che creeremo in seguito.

Passaggio 3: tabbedContent.php (HTML)

Quindi ora abbiamo chiesto a Wordpress di includere tabbedContent.php quando la pagina è a casa, ma abbiamo ancora bisogno del file e del contenuto effettivi! Crea un nuovo file nella nostra directory 'myTheme' e chiamalo tabbedContent.php. Digita o incolla quanto segue in questo nuovo file:

 
 
Articoli recenti
 
archivi mensili
 
Ricerca
 
 
 
 
  
 
 
 
  
 
 
  
 
 
 

Grande. Al momento, questo è solo HTML grezzo senza aggiunte a Wordpress o jQuery. Non molto di questo è nuovo, ma lascia che ti spieghi un po 'il layout.

• #tabsNav - Queste sono le schede cliccabili! Abbiamo aggiunto un href attributo del loro contenuto corrispondente
• . Assicurarsi che il hrefs corrisponde al nome ID della corrispondente voce dell'elenco di contenuti!
• #tabContent - Noi usiamo a
  non diversamente dalle barre laterali di Wordpress, perché è facile da stile ed è essenzialmente una lista di contenuti comunque! Penso che il contenuto di questo elemento sia auto esplicativo.

  Passaggio 4 - tabbedContent.php (funzioni di Wordpress)

  Ora che è fatto, sembrerà ancora un po 'vuoto. Quindi abbiamo bisogno di sostituire il <-- --> commenti con contenuti reali! Inizieremo con WP_Query (), wp_get_archives () e un modulo di ricerca.

  4.1 - WP_Query ()

  Ancora un'altra preziosa lezione da imparare. È fantastico se vuoi fare cose come quelle che stiamo facendo o un "post in primo piano". Fondamentalmente, è un loop semplificato ovunque nella pagina. È ottimo. Quindi ritaglia il tag comment per il nostro WP_Query e digita quanto segue:

   have_posts ()): $ recent-> the_post ();?> 
   "title =" Link a "> 
   

  WP_Query () è fantastico. Sì, è un loop. Non l'intera cosa però. Tutto ciò che stiamo facendo semplicemente sta dicendo al ciclo immediatamente successivo di mostrarci un elenco degli ultimi 5 post. La stringa tra parentesi di WP_Query può essere qualsiasi cosa ... filtrare per date, categorie, tag, limiti, ecc. È uno strumento fantastico per capire, e ancora un altro preziosa lezione da portare via da questo!

  4.2 - Archivi

  Se sei un frequente wordpress themer, dovresti sapere come farlo. È una chiamata base per un elenco di mensile archivi. E per abbinare la sezione WP_Query, vogliamo solo 5 di loro (automaticamente in ordine decrescente). Basta cambiare il <-- WP_ARCHIVES GOES HERE --> nel tabbedContent.php con il seguente:

  4.3 - Ricerca

  Useremo solo un input e una ricerca molto semplici, utilizzando la ricerca predefinita che utilizzo sempre nei miei modelli. Sostituisci il commento di WP SEARCH con questo:

  Ottimo, quindi ora dovresti avere un nuovo file all'interno del myTheme directory chiamata tabbedContent.php e il tag condizionale in index.php. Se hai seguito tutto correttamente, il tuo tema dovrebbe assomigliare a questo:

  

  Non ancora così carino ... O tab, jQueried o CSSed a tutti per quella materia. Ma è un inizio, e buono a sapere che il nostro codice wordpress funziona! Abbiamo finito tabbedContent.php, quindi puoi chiuderlo ora!

  Passaggio 5: CSS

  Abbiamo bisogno che le nostre schede si confondano, diventino parte della pagina. Al momento sono brutti lati. Abbiamo bisogno di rendere la pagina per le persone senza JavaScript abilitato prima, per una degenerazione elegante. Avrai bisogno di alcune immagini se vuoi renderlo bello tanto quanto me. Ecco una lista di loro (tasto destro del mouse e salva come nella cartella images all'interno della directory myTheme!)

  • searchInputBg.png
  • tabContent.png
  • tabContentHover.png
  • tabsNavBg.png
  • tabsNavActive.png
  • tabsNavHover.png

  O scrivi o incolla questa enorme lastra di CSS. Niente di nuovo, basta allineare le schede con "Dettagli post" e allineare il contenuto con la colonna bianca del contenuto principale e utilizzare l'istanza: hover alcune volte.

  / * ------ TABS ------ * / #container width: 600px; margine: 0 auto;  h1 font-size: 1.3em; text-transform: maiuscolo; color: # 949494; letter-spacing: 1px;  #tabsAndContent ul, #tabsAndContent li padding: 0 ul # tabsNav float: left; larghezza: 200 px; stile elenco: nessuno;  ul # tabsNav li background: url (images / tabsNavBg.png) no-repeat center # a8a8a8;  ul # tabsNav li: hover background: url (images / tabsNavHover.png) no-repeat center #eee;  ul # tabsNav *: focus struttura: nessuno ul # tabsNav li.active background: url (images / tabsNavActive.png) no-repeat center #fff;  ul # tabsNav li.active a color: # 303030;  ul # tabsNav li a padding: 1em 15px; margine: 0 0 1em 0; blocco di visualizzazione; larghezza: 170 px; decorazione del testo: nessuna; colore: # 7e7e7e; font: 11px / 20px Georgia; text-transform: maiuscolo;  ul # tabsNav a: hover color: # 0a0a0a ul # tabContent margin: 1em 0 0; background: url (images / tabContent.png) no-repeat in alto a destra # fff; altezza minima: 180 px; larghezza: 350 px; fluttuare: a sinistra; stile elenco: nessuno; imbottitura: 0 25px; famiglia di font: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;  #tabContent> li width: 350px; stile elenco: nessuno; imbottitura: 0 25px 20px 0;  #tabContent li ul li list-style: none;  #tabContent li ul li a display: block; border-bottom: 1px solid # e7e7e7; imbottitura: 10px 0;  #tabContent li ul li a: hover background: url (images / tabContentHover.png) no-repeat center bottom;  forma padding: 30px;  modulo input background: url (images / searchInputBg.png) repeat-x #ddd; border: 2px solid # cbc6c9; border-right: 0; imbottitura: 5px; margine-destra: 0; colore: #fff; font: 16px Georgia, "Times New Roman", Times, serif;  #searchSubmit border-left: 0; border-right: 2px solid # cbc6c9; margin-left: 0; posizione: relativa; a sinistra: -3px; colore: # 00416c;  #searchSubmit: hover background: url (images / tabContentHover.png) centro senza ripetizione; colore: # 003459; cursore: puntatore; 

  Se tutto va secondo i piani, dovrebbe apparire piuttosto carino, qualcosa di simile a questo (con il tuo contenuto ovviamente):

  

  Ora che ci siamo assicurati che la pagina sia a posto per quelli sans JavaScript, possiamo passare alla ristorazione per quelli che lo fanno!

  Passaggio 5: jQuery

  La mia sezione preferita personale del tutorial! jQuery time! Mettiamo in parole ciò che dobbiamo accadere:

  1. Nascondi tutti gli elementi dell'elenco che non vogliamo vedere inizialmente, mostrando solo la nostra prima sezione di contenuto, la sezione WP_Query.
  2. Aggiungi la classe 'attiva' alla prima scheda, perché la sezione corrispondente è aperta.
  3. Quando si fa clic su una scheda, effettuare le seguenti operazioni nell'ordine:
     • Rimuovi la classe attiva dalla scheda attualmente attiva
     • Aggiungi la classe attiva alla scheda che è stata appena cliccata
     • Ottenere la href attributo della a all'interno della scheda cliccata, e rendilo la nostra nuova variabile 'bersaglio'
     • Quindi il bersaglio si rivela e l'area di visualizzazione precedente si nasconde con alcune animazioni

  Questo può sembrare una cosa difficile da raggiungere, ma grazie a jQuery scrivi di meno fai di più atteggiamento, sono riuscito a tagliare ciò di cui abbiamo bisogno fino a solo 9 righe di codice js! Questo va dentro il $ (document) .ready (function () );, sotto il copione dell'eroe e del malvagio.

  // E la nostra piccola area di scorrimento animata del design. . $ ( '# TabContent> li: GT (0)') nascondere (); $ ('# tabsNav li: first'). addClass ('active'); $ ('# tabsAndContent #tabsNav li'). bind ('click', function () $ ('li.active'). removeClass ('active'); $ (this) .addClass ('active'); var target = $ ('a', this) .attr ('href'); $ (target) .slideDown (400) .siblings (). slideUp (300); return false;);

  Una ripartizione di base del nostro codice:

  • . $ ( '# TabContent> li: GT (0)') nascondere (); - Questo, come volevamo nella nostra versione word della sceneggiatura, nasconde tutti gli elementi di contenuto maggiore di zero, senza oggetti a partire da 0.
  • $ ('# tabsNav li: first'). addClass ('active'); - Aggiungiamo la classe 'attiva' alla prima scheda, perché se solo la prima area del contenuto viene mostrata, non vogliamo che la seconda scheda sia attiva!?
  • $ ('# tabsAndContent #tabsNav li'). bind ('click', function () - La funzione .bind! Tutto ciò avviene quando l'evento parametro si verifica (clic nel nostro caso) lega la seguente funzione all'elemento. e la funzione è:
    • $ ( 'Li.active') removeClass ( 'attivo').; - Prendi la classe attiva dal suo attuale proprietario.
    • $ (This) .addClass ( 'attivo'); - aggiungi la classe a Questo, un utile selettore quando sei entro una funzione, ed è specifica per l'elemento cliccato.
    • var target = $ ('a', this) .attr ('href'); - Crea la nostra variabile 'destinazione' dal figlio della scheda un l'attributo href dell'elemento, ancora una volta usando Questo in un selezionatore.
    • $ (Target) .slideDown (400) .siblings () slideUp (300).; - La nostra animazione! Ora che abbiamo il nostro obiettivo, lo faremo scorrere verso il basso in quattro decimi di secondo (o 40 millisecondi) e far scorrere tutti i fratelli visibili nell'abisso in quasi un terzo di secondo (30 ms).
    • restituisce falso; - Questo è importante! Non vuoi che la cronologia dei browser abbia un milione di link precedenti semplicemente facendo clic sulle schede, vero? Ogni volta che l'URL cambia #Articoli recenti o qualcosa del genere, aggiunge un'altra voce alla cronologia del browser. restituisce falso; annulla questo, quindi nessuna modifica dell'URL e nessuna cronologia è stata aggiunta.

  Quindi questo è tutto il jQuery, CSS, HTML e Wordpress di cui avremo bisogno. Dovresti avere qualcosa che assomiglia a questo:

  

  Sì, dovrebbe animare, sì, il pulsante attivo dovrebbe cambiare, e sì, hai appena creato il tuo contenuto dinamico a schede e l'hai implementato in un tema Wordpress con contenuti Wordpress!

  Per finire.

  Abbiamo affrontato molto in questo tutorial. Nel complesso, alcune importanti lezioni che abbiamo imparato sono:

  • WP_Query (); - Un potente strumento per ottenere contenuti al di fuori del ciclo principale.
  • Tag condizionali di Wordpress - fantastico per personalizzare ulteriormente il tuo tema.
  • .funzione di collegamento - per collegare facilmente una funzione a un elemento specifico con un evento.
  • animazione jQuery - Incredibilmente facile da implementare e bello come un giardino di rose.
  
  
  Codice