Aggiunta dinamica di aree widget di quattro piè di pagina

Al giorno d'oggi, molti temi WordPress hanno una serie di aree widget nel footer, il che significa che puoi creare un "grassone" con più aree di widget affiancate. È qualcosa che uso su tutti i miei temi.

Ma cosa succede se il tuo tema ha quattro aree widget ma vuoi solo tre widget? Se non stai attento, ti ritroverai con un brutto spazio sul lato destro dove si trova la quarta area del widget vuota.

In questo tutorial ti mostrerò come evitarlo usando una combinazione di tag condizionali in PHP e alcuni CSS orientati agli oggetti (OOCSS), che controlleranno il numero di aree del widget che hai popolato e le ridimensioneranno automaticamente in modo che occupino ciascuna di esse la giusta proporzione della larghezza della pagina.

Cosa ti serve

Per seguire questo tutorial, avrai bisogno di:

• un'installazione di sviluppo di WordPress
• il tuo tema a cui aggiungerai il codice
• un editor di codice

Registrazione delle aree dei widget

Il primo passo è registrare le quattro aree del widget per il tuo footer. Se non hai ancora registrato alcuna area widget, dovrai aggiungere questo codice al tuo functions.php file:

function tutsplus_widgets_init () // L'area del primo footer widget, situata nel footer. Vuoto di default. register_sidebar (array ('name' => __ ('First Footer Widget Area', 'tutsplus'), 'id' => 'first-footer-widget-area', 'description' => __ ('Il primo widget del piè di pagina area ',' tutsplus '),' before_widget '=>'
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',)); // Area del secondo footer Widget, che si trova nel footer. Vuoto di default. register_sidebar (array ('name' => __ ('Second Footer Widget Area', 'tutsplus'), 'id' => 'second-footer-widget-area', 'description' => __ ('Il secondo widget footer area ',' tutsplus '),' before_widget '=>'
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',)); // Area Terzo Footer Widget, che si trova nel footer. Vuoto di default. register_sidebar (array ('name' => __ ('Third Footer Widget Area', 'tutsplus'), 'id' => 'third-footer-widget-area', 'description' => __ ('Il terzo widget footer area ',' tutsplus '),' before_widget '=>'
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',)); // Area Widget del quarto piè di pagina, situata nel footer. Vuoto di default. register_sidebar (array ('name' => __ ('Fourth Footer Widget Area', 'tutsplus'), 'id' => 'fourth-footer-widget-area', 'description' => __ ('Il quarto widget footer area ',' tutsplus '),' before_widget '=>'
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',));  // Registrare le barre laterali eseguendo tutsplus_widgets_init () sul gancio widgets_init. add_action ('widgets_init', 'tutsplus_widgets_init'); 

Questo aggiungerà quattro aree del widget footer al tuo tema. Se si visualizza il widget schermo li vedrai tutti lì, insieme a tutti gli altri che hai già registrato:

Aggiunta di aree widget al tema

Se ora aggiungi widget a quelle aree del widget, non accadrà nulla. Devi aggiungerli al piè di pagina del tuo tema. Lavorerò attraverso il codice che devi aggiungere al file footer per fasi, aggiungendo ulteriori controlli per diversi numeri di aree di widget popolate mentre procediamo.

Si noti che potrebbe essere necessario modificare alcune delle classi e degli elementi contenenti il ​​codice area del widget in linea con la struttura e il layout del tema.

1. Controllare se nessuna area dei widget è stata popolata

Il primo passo è controllare se non sono popolate aree del widget, nel qual caso non deve essere prodotto nulla. Apri i tuoi temi footer.php file e aggiungi il codice qui sotto.

2. Verifica se tutte le aree dei widget sono compilate

Successivamente, controllerò se tutte le aree del widget sono popolate. Se questo è il caso, il tema mostrerà il contenuto di tutti e quattro, con ciascuno di essi fluttuato uno accanto all'altro e occupando un quarto della larghezza dello schermo. Aggiungerò le classi per questo qui, ma aggiungerò il CSS al mio foglio di stile in seguito.

Dopo la lettura della riga ritorno; ma prima del finisci se; dichiarazione nel codice che hai appena aggiunto, aggiungi questo:

se (is_active_sidebar ('first-footer-widget-area') && is_active_sidebar ('second-footer-widget-area') && is_active_sidebar ('third-footer-widget-area') && is_active_sidebar ('fourth-footer-widget- area ')):?> 

Questo fa quanto segue:

• Controlla che tutte le aree del widget footer vengano popolate utilizzando Se tag.
• In tal caso, apre un nuovo elemento chiamato
• Emette tutte e quattro le aree del widget usando il dynamic_sidebar () funzione, dando ciascuna di queste classi per il layout.

Le classi sono .left.quarter per la maggior parte delle aree del widget, tranne per l'ultimo che ha .right.quarter.

3. Controllare se sono state compilate solo tre aree widget

Il passaggio successivo consiste nell'aggiungere il codice per generare le aree del widget se solo tre di esse sono popolate. Sotto il codice che hai appena aggiunto, inserisci quanto segue:

Questo controlla se le prime tre aree del widget sono popolate e la quarta non lo è, e quindi emette i primi tre utilizzando le appropriate classi di sostituzione .trimestre con .un terzo.

Si noti che quando si compilano le aree del widget, è sempre necessario perdere l'ultimo (i) se non si desidera utilizzarli tutti, o questo controllo non funzionerà. Non lasciare il primo vuoto e popolare quelli successivi.

4. Controllare se sono state compilate solo due aree widget

Per generare solo due aree del widget se sono state popolate e la terza e la quarta non l'hanno, aggiungi questo codice sotto il codice che hai appena aggiunto:

Funziona in modo simile ai precedenti due frammenti di codice, usando il .metà classe per il layout.

5. Controllare se una sola area del widget è popolata

Il controllo finale riguarda solo la prima area del widget che viene popolata. Aggiungi questo sotto il codice che hai appena aggiunto:

Questo produrrà i contenuti dell'area di un widget in un elemento a larghezza intera.

Ora salva il tuo footer.php file.

Aggiungere il CSS

Al momento le aree del tuo widget non funzioneranno correttamente, infatti, se le popoli tutte, appariranno una sotto l'altra a tutta larghezza. Quindi è necessario aggiungere alcuni OOCSS per far funzionare queste classi di layout. L'OOCSS che sto aggiungendo è reattivo, quindi ho incluso le media query per ridimensionare le aree del widget footer su schermi piccoli.

1. Aggiunta di galleggianti

Prima assicuriamoci che le aree del widget galleggiano l'una accanto all'altra.

Apri i tuoi temi style.css file e aggiungi questo codice:

/ * floats * / .quarter, .one-third, .two-thirds, .half float: left; 

2. Aggiunta di larghezze

Le larghezze garantiranno che tutte le aree del widget occupino la proporzione corretta dello schermo. Sto usando le percentuali in quanto rende il codice più flessibile e reattivo. Aggiungi questo al tuo foglio di stile:

/ * widths * / .one-third width: 32%; . due terzi larghezza: 65,5%;  .quarter width: 23,5%; . trilocali larghezza: 74,5%;  .half width: 48%; 

Si noti che le larghezze non aumentano fino al 100% perché è necessario lasciare spazio per i margini.

3. Aggiunta di margini

Ora aggiungi lo stile per i margini al tuo foglio di stile:

/ * margini * / .uno-terzo margine: 0 0,5%;  .quarter, .two-thirds margin: 0 0.5%;  .left, .quarter.left, .one-third.left margin: 0 1% 0 0; fluttuare: a sinistra;  .right, .quarter.right, .one-third.right margin: 0 0 0 1%; float: giusto;  .half.left width: 48%; margine: 0 2% 0 0;  .half.right width: 48%; margine: 0 0 0 2%;  .two-thirds.left margin: 0 1% 0 0;  .two-thirds.right margin: 0 0 0 1%; float: giusto; 

Si noti che i margini sono diversi per gli elementi che hanno anche il .destra o .sinistra classi applicate a loro, in modo che si siedono a filo sul bordo del loro elemento di contenimento.

4. Aggiunta di query multimediali

Le query multimediali faranno due cose:

• Su schermi piccoli come i tablet, quattro elementi appariranno in una griglia due per due, il che significa che gli elementi con il .trimestre la classe avrà metà larghezza e i margini saranno adeguati di conseguenza.
• Su schermi molto piccoli come gli smartphone, tutti gli elementi saranno a tutta larghezza.

Aggiungi le query multimediali nella parte inferiore del foglio di stile insieme a qualsiasi altra query multimediale che potresti avere:

/ * query multimediali per schermi più grandi come tavolette in orizzontale o grandi tablet in verticale * / @ media screen e (larghezza massima: 780px) / * solo la classe di layout .quarter è rilevante qui - tutte le altre classi avranno pieno width * / .quarter width: 48%;  .quarter.left margin-right: 2%;  .quarter.right margin-left: 2%;  footer .third.quarter.widget-area clear: both;  / * media query per schermi di piccole dimensioni in modalità orizzontale (o simile) * / @ media screen e (larghezza massima: 600px) / * larghezza di ridimensionamento di tutta la larghezza in piccoli schermi * / .quadrato, .uno-terzo, .half, .two-terzi, .three-quarter, .full-width width: 100%; margine: 0;  / * aggiustamenti padding * / .widget-area padding: 0 0 10px 0; 

Ora salva il tuo foglio di stile.

Test del codice

Ora è il momento di vedere cosa succede quando si popolano le aree del widget.

Di seguito è riportato uno screenshot di un sito che gestisco che utilizza questo codice. Normalmente il piè di pagina ha quattro aree widget:

Se rimuovo il widget dall'area del quarto widget, ne vengono visualizzati solo tre, con larghezza uguale:

E se rimuovo i widget dalla terza area del widget, i visitatori vedranno due aree widget occupando ciascuna metà della larghezza:

Sommario

Questa tecnica è utile se si desidera che il tema consenta la popolazione di più aree del widget del piè di pagina, ma non si sa quante di queste aree del widget saranno effettivamente utilizzate.

Se stai creando un framework, un tema di partenza o un tema che altre persone useranno per i loro siti, può aiutarti a rendere più ordinato il layout del footer e a risparmiare ulteriore lavoro aggiungendo il layout CSS.