Dinamic adăugarea a patru zone de subsol subsol

Aceste zile, multe teme WordPress au un număr de zone widget în subsolul paginii, ceea ce înseamnă că puteți crea un "subsol gras" cu mai multe zone widget-uri unul lângă celălalt. Este ceva pe care-l folosesc pe toate temele mele.

Dar dacă tema dvs. are patru zone widget, dar doriți doar trei widget-uri? Dacă nu ești atent, vei termina cu un decalaj urât în ​​partea dreaptă, unde este a patra zonă widget widget.

În acest tutorial vă vom arăta cum să evitați acest lucru folosind o combinație de etichete condiționate în PHP și unele Object-Oriented CSS (OOCSS), care va verifica câte zone de widget pe care le-ați populat și le redimensionați automat, astfel încât fiecare să ia proporția corectă a lățimii paginii.

Ce ai nevoie

Pentru a urma acest tutorial, veți avea nevoie de:

• o instalare de dezvoltare a WordPress
• propria temă la care veți adăuga codul
• un editor de cod

Înregistrarea domeniilor Widget

Primul pas este să înregistrați cele patru zone widget pentru subsolul dvs. Dacă nu aveți deja înregistrate zone widget, va trebui să adăugați acest cod la dvs. functions.php fişier:

function tutsplus_widgets_init () // Prima zona de fundal pentru subsol, situata in subsolul paginii. Golire implicită. register_sidebar (array ('name' => __ ('First Footer Widget Area', 'tutsplus'), 'id' => 'first-footer-widget-area' zonă ',' tutsplus '),' before_widget '=>'
',' după_widget '=>'
',' anterior_title '=>'
',' după_title '=>'
',)); // Al doilea subsol Footer Widget, situat în subsolul paginii. Golire implicită. register_sidebar (array ('name' => __ ('A doua subsol de subsol de subsol', 'tutsplus'), 'id' zonă ',' tutsplus '),' before_widget '=>'
',' după_widget '=>'
',' anterior_title '=>'
',' după_title '=>'
',)); // A treia zonă de subsol pentru subsol, situată în subsolul paginii. Golire implicită. register_sidebar (array ('name' => __ ('Third Footer Widget Area', 'id' => zonă ',' tutsplus '),' before_widget '=>'
',' după_widget '=>'
',' anterior_title '=>'
',' după_title '=>'
',)); // Zona a patra subsol de subsol, aflată în subsolul paginii. Golire implicită. register_sidebar (array ('name' => __ ('A patra subsol de subsol', 'id' => zonă ',' tutsplus '),' before_widget '=>'
',' după_widget '=>'
',' anterior_title '=>'
',' după_title '=>'
',));  // Înregistrați barele laterale executând tutsplus_widgets_init () pe cârligul widgets_init. add_action ('widgets_init', 'tutsplus_widgets_init'); 

Acest lucru va adăuga patru zone de subsol pentru widget-uri pentru tema dvs. Dacă vedeți Widget-uri ecranul le veți vedea pe toate, împreună cu toate celelalte pe care le-ați înregistrat deja:

Adăugarea domeniilor widget la tema dvs.

Dacă adăugați widget-uri în acele zone widget acum, nimic nu se va întâmpla. Trebuie să le adăugați la subsolul temei. Voi lucra prin codul pe care trebuie să-l adăugați în fișierele subsolului dvs. în etape, adăugând mai multe verificări pentru numere diferite de zone widget populate pe măsură ce mergem.

Rețineți că este posibil să fie necesar să modificați unele dintre clasele și elementele care conțin codul zonal al widgetului, în conformitate cu structura și aspectul temei.

1. Verificați dacă nu sunt populate zonele widget

Primul pas este să verifici dacă nu sunt populate zone de widgeturi, caz în care nu trebuie să existe nimic. Deschideți tema footer.php fișier și adăugați codul de mai jos.

2. Verificarea dacă toate zonele widget sunt populate

Apoi, voi verifica dacă toate zonele widget sunt populate. În acest caz, tema va scoate conținutul tuturor celor patru, fiecare dintre ele plucând una lângă alta și ocupând un sfert din lățimea ecranului. Voi adăuga clasele pentru acest lucru aici, dar adăugați CSS în stilul meu mai târziu.

După citirea liniei întoarcere; dar înainte de endif; în codul pe care tocmai l-ați adăugat, adăugați aceasta:

dacă este (is_active_sidebar ('first-footer-widget-area') && is_active_sidebar ('second-footer-widget-area') && is_active_sidebar (& zona)):?> 

Acest lucru face următoarele:

• Verifică că toate zonele widgeturilor din subsol sunt populate utilizând dacă Etichete.
• Dacă da, deschide un element nou numit
• Emite toate cele patru zone widget folosind dynamic_sidebar () funcția, oferind fiecare dintre aceste clase pentru aspect.

Clasele sunt .left.quarter pentru majoritatea zonelor widget-uri, cu excepția ultimului domeniu .right.quarter.

3. Verificarea dacă sunt doar trei zone widget populare

Următorul pas este să adăugați codul pentru a afișa zonele widget dacă doar trei dintre ele sunt populate. Sub codul pe care tocmai l-ați adăugat, introduceți următoarele:

Acest lucru verifică dacă primele trei zone widget sunt populate și a patra nu este, și apoi ieșirea din primele trei folosind clase corespunzătoare înlocuirea .sfert cu .o treime.

Rețineți că atunci când populați zonele dvs. widget, trebuie să pierdeți întotdeauna ultima (celelalte) dacă nu doriți să le folosiți pe toate sau acest control nu va funcționa. Nu lasati pe primul gol si pe cele mai vechi.

4. Verificarea dacă sunt doar două zone widget populare

Pentru a scoate doar două zone widget dacă au fost populate și al treilea și al patrulea nu au, adăugați acest cod sub codul pe care tocmai l-ați adăugat:

Aceasta funcționează în mod similar cu cele două fragmente de cod anterioare, utilizând .jumătate clasă pentru aspect.

5. Verificarea faptului dacă este populată doar o zonă widget

Verificarea finală este doar pentru prima zonă widget populată. Adăugați acest cod sub codul pe care tocmai l-ați adăugat:

Aceasta va scoate conținutul unei zone widget într-un element cu lățime întreagă.

Acum salvează-ți footer.php fişier.

Adăugarea CSS

În acest moment, zonele dvs. widget nu vor funcționa corect - de fapt, dacă le apucați de toate, ele vor apărea una la cealaltă la lățime maximă. Deci, trebuie să adăugați unele OOCSS pentru a face ca aceste clase de layout să funcționeze. Adăugarea OOCSS este responsabilă, așadar am inclus interogări media pentru a redimensiona zonele miniaturilor subsolului pe ecrane mici.

1. Adăugarea de flotoare

Mai întâi, asigurați-vă că zonele widgetului plutesc unul lângă celălalt.

Deschideți tema style.css fișier și adăugați acest cod:

/ * floats * / .quarter, .one-treia, .290 / sec., .half float: left; 

2. Adăugarea lățimilor

Lățimile vor asigura că toate zonele widget-ului vor prelua proporția corectă a ecranului. Folosesc procente deoarece face codul mai flexibil și mai receptiv. Adăugați acest lucru în foaia dvs. de stil:

/ * lățimi * /. o-a treia lățime: 32%; . două treimi lățime: 65,5%;  sfert lățime: 23,5%; . trei sferturi lățime: 74,5%;  .half lățime: 48%; 

Rețineți că lățimile nu adună până la 100% deoarece spațiul trebuie să fie permis pentru margini.

3. Adăugarea marjelor

Acum, adăugați stilul pentru margini în foaia de stil:

/ * marje * /. o treime marja: 0 0.5%;  sfert, două-treimi marja: 0 0,5%;  .left, .quarter.left, .one-a treia linie (marja: 0 1% 0 0; plutește la stânga;  .right, .quarter.right, .one-third.right marja: 0 0 0 1%; float: dreapta;  .half.left (lățime: 48%; marja: 0 2% 0 0;  .half.right lățime: 48%; marja: 0 0 0 2%; . două-a treia linie (marja: 0 1% 0 0; . două-treia dreaptă marja: 0 0 0 1%; float: dreapta; 

Rețineți că marjele sunt diferite pentru elementele care au și ele .dreapta sau .stânga clase aplicate pentru ei, astfel încât ei să stea flush la marginea elementului lor care le conține.

4. Adăugarea interogărilor media

Interogările mass-media vor face două lucruri:

• Pe ecrane mici, cum ar fi tablete, patru elemente vor apărea într-o rețea de două ori câte două, ceea ce înseamnă că elementele cu .sfert clasa va avea o jumătate de lățime, iar marjele vor fi ajustate corespunzător.
• Pe ecrane foarte mici, cum ar fi smartphone-urile, toate elementele vor avea o lățime întreagă.

Adăugați interogările media din partea de jos a foii de stil împreună cu orice alte interogări media pe care le aveți:

/ * interogări media pentru ecrane mai mari, cum ar fi tablete mici în peisaj sau tablete mari în ecranul portret * / @media și (max-lățime: 780px) / * numai clasa de structură .quarter este relevantă aici - toate celelalte clase vor fi pline lățime * / sfert lățime: 48%;  .quarter.left margin-right: 2%;  .quarter.right marginea-stânga: 2%;  footer .third.quarter.widget-area clar: ambele;  / * interogări media pentru ecrane mici în modul peisaj (sau similare) * / @media ecran și (max-width: 600px) / * lățimea dimensiunea tuturor lățimea întreagă în ecrane mici * /.quarter, .one-a treia, .mulțime, două treimi, trei sferturi, o lățime totală lățime: 100%; marja: 0;  / * reglaje de umplutură * /. zonă-uriașă padding: 0 0 10px 0; 

Acum salvați foaia de stil.

Testarea codului

Acum este momentul să vedeți ce se întâmplă atunci când vă populați zonele widget.

Mai jos este o captură de ecran a unui site pe care îl gestionez, care folosește acest cod. În mod normal, subsolul are patru zone widget:

Dacă șterg widgetul din a patra zonă widget, sunt afișate doar trei, cu lățimi egale:

Și dacă șterg widget-urile din a treia zonă widget, vizitatorii vor vedea două zone widget-uri fiecare luând jumătate din lățime:

rezumat

Această tehnică este utilă dacă doriți ca tema dvs. să permită populației mai multe domenii widget de subsol, dar nu știți câte dintre aceste zone widget vor fi efectiv utilizate.

Dacă creați un cadru, o temă de pornire sau o temă pe care alți utilizatori o vor folosi pentru site-urile lor, acesta poate contribui la îmbunătățirea aspectului subsolului și la salvarea suplimentară a lucrărilor în linie, adăugând aspectul CSS.