Share
Ora ci occupiamo di menu personalizzati, concentriamoci sulle barre laterali dinamiche e su come possono essere utilizzate all'interno di un tema.
Cos'è esattamente una barra laterale dinamica? Ci sono 3 parti della denominazione che dobbiamo trattare in termini di questo argomento.
In primo luogo, "dinamico". La dinamica si riferisce al fatto che l'area della barra laterale può essere controllata dalla dashboard di amministrazione e può essere facilmente modificata. Inoltre, i suoi contenuti possono essere estratti da informazioni WordPress costantemente aggiornate come post, commenti e altri tipi di contenuti regolarmente aggiornati in modo che ogni volta che viene aggiunto un nuovo post possa essere inserito in un blocco di contenuti recenti o widget (ci occuperemo di con il termine widget in un po '.).
In secondo luogo, "Barra laterale" si riferisce a un'area del contenuto, che non deve necessariamente essere posizionata sul lato del layout (strano lo so). Il termine è stato ereditato dai primi tempi di layout di stile blog in cui i widget erano praticamente sempre posizionati di lato. L'area della barra laterale contiene ulteriori blocchi di contenuti o dati generati dai plugin che vengono visualizzati sotto forma di "widget" di solito sul lato, nell'intestazione o nel piè di pagina dei temi di WordPress ma possono anche essere posizionati in qualsiasi modo all'interno del layout del tema.
Un widget è un piccolo blocco di contenuti, generalmente contenente collegamenti o contenuti associati a pagine o post. Questi potrebbero includere elenchi di post, commenti, tag, categorie e un'intera gamma di altre raccolte di contenuti, alcune incorporate e alcune generate da plugin aggiuntivi.
I widget possono essere aggiunti ai temi "widget pronti" tramite Aspetto -> Widget nel dashboard di amministrazione utilizzando l'area di gestione dei widget drag & drop integrata. I temi non supportano automaticamente i widget e devono essere resi pronti per il widget registrando una funzione speciale, in un modo simile al quale abbiamo registrato i menu personalizzati.
Prima di registrare le barre laterali in qualsiasi tema WordPress, quando visiti Aspetto -> Widget, vediamo quanto segue.
Analogamente ai menu personalizzati della lezione precedente, affinché la funzione della barra laterale dinamica funzioni nel tema, il tema richiede un file functions.php che registri le barre laterali. Il semplice file functions.php dovrebbe contenere il seguente codice:
Presta particolare attenzione come accennato prima di non lasciare spazi vuoti dopo il codice nel tuo file di funzioni in quanto ciò a volte causa problemi che possono causare schermate bianche quando si visualizza il tema sul front-end.
L'unico aspetto di questo codice che sarebbe necessario modificare all'inizio sarebbe la quantità di aree della barra laterale dinamica da registrare in "register_sidebars (1);". Affronteremo un po 'le sidebar nominate. Per ora il nostro codice sopra ha registrato 2 barre laterali identificate semplicemente dal loro numero.
Se desideri avere 5 aree barra laterale dinamica nel tuo tema, il numero cambierà in 5 - "register_sidebars (5);In questo caso avresti 5 aree barra laterale dinamica numerate da 1 a 5.
La funzione ha un'istruzione "if" o un argomento condizionale che controlla se la funzione register_sidebar esiste in questa versione di WordPress. Se la risposta ritorna con un sì, viene eseguita la funzione register_sidebar. Considerando che le barre laterali sono state supportate dalla versione 2.2 di WordPress, probabilmente non è necessario preoccuparsi di questo aspetto del codice.
Una volta che il tuo file delle funzioni è pronto puoi procedere ad inserire i widget nelle nuove aree della barra laterale che abbiamo creato.
Ora puoi afferrare i widget dall'area "Widget disponibili" sul lato sinistro e trascinarli nelle aree Sidebar 1 o 2 nella destra.
Una volta che il tuo file delle funzioni è pronto puoi procedere ad inserire il codice della barra laterale dinamica nelle aree del tuo tema in cui desideri aggiungere dinamicamente i widget di WordPress. Il codice seguente è la forma più semplice del codice di posizionamento della barra laterale. L'unico aspetto che deve essere modificato è il numero per riflettere quale sidebar numerata desideri posizionare nella posizione specifica.
Inseriremo questo codice nella nostra barra laterale di sinistra
Il codice sopra dovrebbe essere sufficiente per consentire alla barra laterale registrata di visualizzare il contenuto del widget all'interno del tema. Quindi andremo avanti e aggiungeremo alcuni widget.
Quale risulta in:
Ho dovuto aggiungere ulteriore CSS per tenere in considerazione i widget appena aggiunti. Essenzialmente ho aggiunto nel widget della barra laterale CSS del tema Twenty Eleven. Potrebbe essere necessario scrivere CSS personalizzati per i propri temi in modo che si adattino al layout, allo stile e alla colorazione per il tema. Pubblicherò il CSS alla fine della lezione.
Per garantire che la nostra barra laterale visualizzi ancora qualcosa nei casi in cui i widget non sono stati ancora aggiunti, o nell'evento esterno che le barre laterali non sono state registrate, (speriamo che nessuno stia eseguendo la versione preliminare 2 WordPress) dobbiamo estendere il codice di posizionamento con a seguire. Avviso dynamic_sidebar (1) è ancora nella prima riga di codice!
Cosa fa il codice sopra?
Linea 1 del codice controlla se hai registrato delle barre laterali all'interno del tuo file functions.php e, in tal caso, quale numero della barra laterale inserire in questa posizione.
Linea 2 funge da widget predefinito che visualizza un elenco delle categorie di post del tuo sito se non sono stati aggiunti widget dinamici. Una volta aggiunto un widget dinamico alla barra laterale all'interno della dashboard, il widget predefinito verrà sostituito da quello dinamico.
Linea 3 termina l'argomento if che inizia la riga 1. In PHP gli argomenti come if, che è un'istruzione condizionale, devono essere terminati, quindi l'argomento non ha alcun effetto sul codice php che segue. Non chiudendo il se con l'endif; romperà il tuo tema!
L'unica parte delle 3 linee del codice della barra laterale dinamica che deve essere effettivamente modificata è il numero, per indicare quale barra laterale numerata specifica viene inserita in questa particolare posizione.
Dalla documentazione WordPress (The Codex) queste sono alcune delle funzioni che possono essere utilizzate per "hard-code" i widget nelle aree della barra laterale e per includere come widget predefiniti nel codice di posizionamento della barra laterale.
wp_list_authors () - Visualizza un elenco di autori dei siti (utenti), e se l'utente ha creato dei post, il nome dell'autore viene visualizzato come collegamento ai loro post.
wp_list_categories () - Visualizza un elenco di categorie come collegamenti. Quando si fa clic su un collegamento di categoria, verranno visualizzati tutti i post di quella categoria
wp_dropdown_categories () - Visualizza o recupera l'elenco a discesa HTML delle categorie.
wp_tag_cloud () - Visualizza un elenco di tag in quello che viene chiamato "tag cloud", in cui la dimensione di ogni tag è determinata dal numero di volte in cui quel particolare tag è stato assegnato ai post.
wp_list_pages () - Visualizza un elenco di pagine WordPress come collegamenti.
wp_list_bookmarks () - Visualizza i segnalibri trovati nel pannello Amministrazione -> Collegamenti.
get_comments () - Elenca i commenti in base al numero, all'ordine e ad altri parametri.
wp_get_archives () - Questa funzione visualizza un elenco di archivi basati sulla data.
Queste funzioni possono anche essere utilizzate ovunque nel tema per generare elenchi di vari contenuti dal sito per aiutare gli utenti a trovare i contenuti più facilmente.
Potremmo quindi utilizzare questa convenzione del codice di posizionamento per posizionare il nostro numero di barra laterale 2 nella parte destra del nostro tema.
categorie
Potremmo anche includere qualsiasi altro contenuto HTML come contenuto del widget predefinito che dovrebbe essere visualizzato prima che i widget dinamici vengano aggiunti tramite l'amministratore dei widget. Questo può includere un messaggio per ricordare ai proprietari del sito di aggiungere fisicamente dei widget una volta attivato il nuovo tema.
Nessun widget aggiunto
Effettua il login e aggiungi alcuni widget a questa barra laterale
Come possiamo vedere di seguito, abbiamo inserito il codice di posizionamento della barra laterale nei contenuti predefiniti dei widget come illustrato nella barra laterale sinistra o in altri contenuti HTML, come illustrato nella barra laterale destra. Questo apparirà finché non verranno aggiunti widget dinamici tramite la dashboard dei widget. Una volta aggiunti i widget dinamici, questi verranno automaticamente sostituiti.
Ora per testare alcuni widget dinamici abbiamo aggiunto i seguenti 2 widget dinamici:
Quale risulta nel seguente aspetto.
Attualmente disponiamo di 2 codici di posizionamento con contenuti predefiniti diversi, ma estraendo la stessa area della barra laterale sia sul lato sinistro che su quello destro del nostro tema. Per rimediare, cambieremo o inseriremo il codice di posizionamento nella barra laterale destra per posizionare la sidebar numero 2 invece della sidebar 1 come segue. Come puoi vedere, abbiamo solo bisogno di cambiare il numero per qualsiasi sidebar numerato che vorremmo inserire.
Nessun widget aggiunto
Effettua il login e aggiungi alcuni widget a questa barra laterale
Ora possiamo gestire le nostre barre laterali sinistra e destra in modo indipendente.
Dopo aver aggiunto una certa quantità di barre laterali al tema, ti renderai subito conto della necessità di avere nomi anziché solo numeri. Ciò ti aiuterà a ricordare in quali regioni della tua pagina o modelli è inserita la barra laterale specifica.
Per registrare le sidebar nominate, è necessario utilizzare il seguente codice per registrare le barre laterali nel file functions.php:
L'unica differenza in termini di ciò che viene registrato qui è attualmente il nome della barra laterale. Esistono numerosi parametri per personalizzare ulteriormente l'output HTML dei widget della barra laterale come segue:
Fonte: register_sidebar
Usando alcuni di questi in formato array si ottiene la seguente struttura di codice.
'Left Side', 'before_widget' => '',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); ?>
Ciò comporterà il seguente output HTML.
Possiamo cambiare i wrapper HTML per il contenitore del widget e il titolo con qualsiasi altro HTML, classi, ID ecc.
Inoltre, per registrare più di un'area Dynamic Sidebar, duplichiamo il file register_sidebar area del codice insieme alla serie di parametri tante volte quante sono necessarie per registrare barre laterali aggiuntive.
'Left Side', 'before_widget' => '',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',));
register_sidebar (array ('name' => 'Right Side', 'before_widget' => '',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); ?>
Con questi parametri aggiuntivi possiamo controllare più facilmente l'output HTML in modo che possiamo abbinare la struttura di cui abbiamo bisogno per lo stile che stiamo cercando di ottenere. Useremo il codice qui sopra per sostituire le nostre barre laterali numerate con quelle nominate.
È importante notare che quando si modificano le registrazioni della barra laterale nel modo in cui ho appena terminato, o quando si aggiungono barre laterali aggiuntive, in particolare per i temi in esecuzione su siti Web live, i widget potrebbero essere allocati erroneamente da WordPress
WordPress generalmente cerca di mantenere i widget nelle barre laterali in base al loro ordine, quindi se una barra laterale viene rimossa o aggiunta, WordPress potrebbe riassegnare i widget esistenti alle aree della barra laterale che corrispondono all'ordinamento della barra laterale precedente. Nel nostro caso in questo momento questo non è un problema perché abbiamo ancora solo 2 barre laterali in modo che i nostri widget rimangano dove erano.
Al momento abbiamo cambiato i nomi nel nostro codice di registrazione, perché abbiamo una semplice configurazione della barra laterale, WordPress è ancora in grado di inserire le nostre barre laterali nominate nel nostro tema in base al loro ordine. Tuttavia, dobbiamo modificare il nostro codice di posizionamento della barra laterale per riflettere i nomi che abbiamo creato per evitare possibili problemi in futuro.
L'inserimento di barre laterali con nome richiede in sostanza la modifica del numero, nel nostro codice di posizionamento, nel nome della barra laterale. Quindi, utilizzando il primo codice di posizionamento con cui abbiamo iniziato, quello è il più semplice:
Il nome che utilizziamo deve essere identico al nome che ci viene dato nella barra laterale nel nostro codice di registrazione.
In termini di codice di posizionamento più esteso utilizzato per le nostre barre laterali numerate:
Nessun widget aggiunto
Effettua il login e aggiungi alcuni widget a questa barra laterale
Usando l'output HTML generato dal codice di registrazione, possiamo ora modellare i nostri elementi della barra laterale sul contenuto del nostro cuore.
Il link sottostante delinea alcuni degli elementi CSS essenziali della barra laterale / widget che dobbiamo considerare quando prepariamo i temi per la pubblicazione pubblica. Questo è così che gli utenti che aggiungono i widget più comuni avranno loro pre-stile per abbinare l'aspetto e il layout del tema.
Stili CSS predefiniti di WordPress: Jeff Star, DigWP
Ora vai avanti e widgetizza!
Accentsconagua