Dynamisk legger til fire footer-widgetområder

I disse dager har mange WordPress-temaer en rekke widgetområder i bunnteksten, noe som betyr at du kan lage en "fettfot" med flere widgetområder side om side. Det er noe jeg bruker på alle mine temaer.

Men hva om temaet ditt har fire widget-områder, men du vil bare ha tre widgets? Hvis du ikke er forsiktig, vil du ende opp med et styggt gap på høyre side der det tomme fjerde widgetområdet er.

I denne opplæringen vil jeg vise deg hvordan du unngår dette ved hjelp av en kombinasjon av betingede koder i PHP og noen Objektorientert CSS (OOCSS), som vil sjekke hvor mange widgetområder du har fylt ut og automatisk endre størrelsen på dem slik at de hver tar opp den riktige andelen av sidens bredde.

Hva du trenger

For å følge denne opplæringen må du:

en utviklingsinstallasjon av WordPress
ditt eget tema som du legger til koden
en kodeditor

Registrering av widgetområdene

Det første trinnet er å registrere de fire widgetområdene for din bunntekst. Hvis du ikke allerede har noen widget områder registrert, må du legge til denne koden til din functions.php fil:

funksjon tutsplus_widgets_init () // Første footer widget området, som ligger i bunnteksten. Tøm som standard. register_sidebar (array ('name' => __ ('First Footer Widget Area', 'tutsplus'), 'id' => 'first-footer-widget-området', 'beskrivelse' => __ område ',' tutsplus '),' before_widget '=>'',' after_widget '=>'
',' before_title '=>'',' after_title '=>'
',)); // Second Footer Widget Area, som ligger i bunnteksten. Tøm som standard. register_sidebar (array ('name' => __ ('Second Footer Widget Area', 'tutsplus'), 'id' => 'andre-footer-widget-området', 'description' => __ område ',' tutsplus '),' before_widget '=>'',' after_widget '=>'
',' before_title '=>'',' after_title '=>'
',)); // Third Footer Widget Area, som ligger i bunnteksten. Tøm som standard. register_sidebar (array ('name' => __ ('Third Footer Widget Area', 'tutsplus'), 'id' => 'tredje-footer-widget-området', 'description' => __ område ',' tutsplus '),' before_widget '=>'',' after_widget '=>'
',' before_title '=>'',' after_title '=>'
',)); // Fourth Footer Widget Area, som ligger i bunnteksten. Tøm som standard. register_sidebar (array ('name' => __ ('Fourth Footer Widget Area', 'tutsplus'), 'id' => 'fjerde-footer-widget-området', 'description' => __ område ',' tutsplus '),' before_widget '=>'',' after_widget '=>'
',' before_title '=>'',' after_title '=>'
',));  // Registrer sidelinjer ved å kjøre tutsplus_widgets_init () på widgets_init hook. add_action ('widgets_init', 'tutsplus_widgets_init');

Dette vil legge til fire footer widget områder til temaet ditt. Hvis du ser på widgets skjermen vil du se dem alle der, sammen med noen andre du allerede har registrert:

Legge til widgetområdene i temaet ditt

Hvis du legger til widgets til disse widgetområdene nå, skjer ingenting. Du må legge dem til temaets bunntekst. Jeg vil jobbe gjennom koden du må legge til i din footer-fil i etapper, og legger til flere sjekker for forskjellige antall befolket widget-områder når vi går.

Vær oppmerksom på at du kanskje må endre noen av klassene og elementene som inneholder widgetens områdekode i tråd med temaets struktur og layout.

1. Kontroller om ingen widgetområder er populert

Det første trinnet er å sjekke om ingen widget-områder er fylt ut, da ikke noe skal sendes ut. Åpne temaet ditt footer.php fil og legg til koden nedenfor.

2. Kontroller om alle widgetområder er populert

Deretter sjekker jeg om alle widgetområdene er fylt ut. Hvis dette er tilfelle, vil temaet utdata innholdet i alle fire, hver av dem flyter ved siden av hverandre og tar opp fjerdedel av bredden på skjermen. Jeg legger til klassene for dette her, men legger til CSS i stilarket senere.

Etter linjelesningen komme tilbake; men før slutt om; uttalelse i koden du nettopp lagt til, legg til dette:

hvis (is_active_sidebar ('first-footer-widget-området') && is_active_sidebar ('second-footer-widget-området') && is_active_sidebar ('tredje-bunntekst-widget-området') && is_active_sidebar område ')):?>

Dette gjør følgende:

Kontrollerer at alle områder for footer-widget er fylt med hvis tags.
Hvis ja, åpner et nytt element som heter
. Dette ekstraelementet som inneholder widgetområdene, gjør det mulig for hele bunnteksten å være sentrert på siden, selv om selve bunnteksten ikke er (for eksempel hvis hele bunnteksten har en bred bakgrunn).
Utfører alle fire widgetområdene ved hjelp av dynamic_sidebar () funksjon, gi hver av disse klassene for layout.

Klassene er .left.quarter for de fleste av widgetområdene, bortsett fra den siste som har .right.quarter.

3. Kontroller om bare tre widgetområder er populert

Det neste trinnet er å legge til koden for å utdatere widgetområdene hvis bare tre av dem er fylt ut. Under koden du nettopp har lagt til, legg inn følgende:

Dette kontrollerer om de tre første widgetområdene er befolket og den fjerde ikke er, og utfører deretter de første tre ved hjelp av passende klasser som erstatter .fjerdedel med .en tredjedel.

Vær oppmerksom på at når du fyller inn widget-områdene dine, må du alltid gå glipp av den siste (e) hvis du ikke vil bruke dem alle, eller denne sjekken vil ikke fungere. Ikke la den første tømme og fylle de senere.

4. Kontroller om bare to widgetområder er populert

For å skrive ut bare to widgetområder hvis de har blitt fylt ut og den tredje og fjerde ikke har, legg til denne koden under koden du nettopp har lagt til:

Dette fungerer på samme måte som de to foregående kodene, ved hjelp av .halv klasse for layout.

5. Kontroller om bare ett widgetområde er populert

Den endelige kontrollen er at bare det første widgetområdet blir fylt. Legg til dette under koden du nettopp lagt til:

Dette vil utgive innholdet i det ene widgetområdet i et fullbreddselement.

Lagre nå footer.php fil.

Legge til CSS

For øyeblikket vil widget-områdene dine ikke fungere riktig. Faktisk, hvis du fyller dem alle, vil de vises under den andre i full bredde. Så du må legge til noen OOCSS for å gjøre disse layoutklassene jobbet. Den OOCSS jeg legger til, er responsiv, så jeg har tatt med mediaforespørsler for å endre størrelsen på footer-widgetområdene på små skjermer.

1. Legge til flyter

Først må vi sørge for at widgetområdene flyter sammen med hverandre.

Åpne temaet ditt style.css fil og legg til denne koden:

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

2. Legge til bredder

Breddene vil sikre at alle widgetområdene tar opp riktig del av skjermen. Jeg bruker prosentandeler, da det gjør koden mer fleksibel og responsiv. Legg dette til stilarket ditt:

/ * bredder * /. en tredjedel bredde: 32%; . to tredjedeler bredde: 65.5%;  .quarter width: 23.5%; . tre fjerdedeler bredde: 74,5%;  .half bredde: 48%;

Vær oppmerksom på at breddene ikke legger opp til 100% fordi plass må tillates for marginer.

3. Legge til marginer

Legg nå stylingen for marginer til stilarket ditt:

/ * marginer * /. en-tredje margin: 0 0.5%;  .quarter, .two-thirds margin: 0 0.5%;  .left, .quarter.left, .one-third.left margin: 0 1% 0 0; flyte: venstre;  .Right, .quarter.right, .one-third.right margin: 0 0 0 1%; flyte: høyre;  .halvdeflate bredde: 48%; margin: 0 2% 0 0;  .halvende bredde: 48%; margin: 0 0 0 2%;  .Two-thirds.left margin: 0 1% 0 0; . to tredjedeler. rett margin: 0 0 0 1%; flyte: høyre;

Legg merke til at margene er forskjellige for elementer som også har .Ikke sant eller .venstre klasser brukt på dem, slik at de sitter flush ved kanten av deres inneholdende element.

4. Legge til medieforespørsler

Medieforespørsmålene vil gjøre to ting:

På små skjermer som tabletter vil fire elementer vises i et to til to grid, noe som betyr at elementene med .fjerdedel klassen vil ha en halv bredde og marginene vil bli justert tilsvarende.
På svært små skjermer som smarttelefoner, vil alle elementene være full bredde.

Legg til medieforespørsmålene nederst på stilarket ditt, sammen med eventuelle andre medieforespørsler du måtte ha:

/ * media spørringer for større skjermer som små tabletter i liggende eller store tabletter i portrett * / @media skjerm og (maks bredde: 780px) / * bare .quarter layout klassen er relevant her - alle andre klasser vil ha full bredde * / .quarter bredde: 48%;  .quarter.left margin-right: 2%;  .quarter.right margin-left: 2%;  footer .third.quarter.widget-området clear: both;  / / media spørringer for små skjermer i liggende modus (eller lignende) * / @media skjerm og (maks bredde: 600px) / * bredde størrelsen alle fulle bredder i små skjermer * /. Quarter, .halv., tre tredjedeler,. tre kvartaler, .full bredde bredde: 100%; margin: 0;  / * polstringsjusteringer * / .widget-område polstring: 0 0 10px 0;

Lagre stilarket ditt nå.

Teste koden din

Nå er det på tide å se hva som skjer når du fyller ut dine widgetområder.

Nedenfor er et skjermbilde av et nettsted jeg administrerer som gjør bruk av denne koden. Normalt har bunnteksten fire widget områder:

Hvis jeg fjerner widgeten fra det fjerde widgetområdet, vises bare tre med like bredder:

Og hvis jeg fjerner widgets fra det tredje widgetområdet, vil besøkende se to widgetområder som hver tar opp halvparten av bredden:

Sammendrag

Denne teknikken er nyttig hvis du vil at temaet ditt skal tillate befolkningen i flere sidelinje-widget-områder, men du vet ikke hvor mange av disse widgetområdene faktisk vil bli brukt.

Hvis du oppretter et rammeverk, et startmål eller et tema som andre vil bruke for sine nettsteder, kan det bidra til å gjøre footeroppsettet mer tidskrevende og lagre ekstra arbeid nedover linjen legge til layout CSS.

Kode