Dynamisch toevoegen van vier Footer Widget-gebieden

Tegenwoordig hebben veel WordPress-thema's een aantal widgets in het voetgedeelte, wat betekent dat je een "dikke voettekst" kunt maken met meerdere widgetgebieden naast elkaar. Het is iets dat ik gebruik op al mijn thema's.

Maar wat als uw thema vier widgetgebieden heeft maar u slechts drie widgets wilt? Als je niet oppast, krijg je aan de rechterkant een lelijk gat waar het lege vierde widgetgebied is.

In deze zelfstudie laat ik je zien hoe je dit kunt voorkomen met behulp van een combinatie van voorwaardelijke tags in PHP en een aantal objectgeoriënteerde CSS (OOCSS), die zal controleren hoeveel widget-gebieden je hebt ingevuld en deze automatisch verkleinen zodat ze elk worden opgenomen de juiste verhouding van de breedte van de pagina.

Wat je nodig hebt

Als u deze zelfstudie wilt volgen, heeft u het volgende nodig:

• een ontwikkelingsinstallatie van WordPress
• uw eigen thema waaraan u de code zult toevoegen
• een code-editor

De widgetgebieden registreren

De eerste stap is om de vier widget-gebieden te registreren voor uw voettekst. Als u nog geen widgetgebieden heeft geregistreerd, moet u deze code aan uw toevoegen functions.php het dossier:

function tutsplus_widgets_init () // Eerste widget widget gebied, gelegen in het voettekst. Leeg standaard. register_sidebar (array ('name' => __ ('First Footer Widget Area', 'tutsplus'), 'id' => 'first-footer-widget-area', 'description' => __ ('De eerste footer-widget area ',' tutsplus '),' before_widget '=>'
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',)); // Second Footer Widget Area, bevindt zich in de voettekst. Leeg standaard. register_sidebar (array ('naam' => __ ('Second Footer Widget Area', 'tutsplus'), 'id' => 'second-footer-widget-area', 'description' => __ ('De tweede footer-widget area ',' tutsplus '),' before_widget '=>'
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',)); // Widgetgebied derde footer, gelegen in het voettekst. Leeg standaard. register_sidebar (array ('name' => __ ('Third Footer Widget Area', 'tutsplus'), 'id' => 'third-footer-widget-area', 'description' => __ ('De derde footer-widget area ',' tutsplus '),' before_widget '=>'
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',)); // Vierde Footer Widget-gebied, gelegen in de voettekst. Leeg standaard. register_sidebar (array ('name' => __ ('Fourth Footer Widget Area', 'tutsplus'), 'id' => 'fourth-footer-widget-area', 'description' => __ ('De vierde footer-widget area ',' tutsplus '),' before_widget '=>'
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',));  // Registreer zijbalken door tutsplus_widgets_init () uit te voeren op de haak widgets_init. add_action ('widgets_init', 'tutsplus_widgets_init'); 

Hiermee voegt u widgets met vier voetteksten toe aan uw thema. Als u de widgets scherm zie je ze allemaal daar, samen met alle anderen die je al hebt geregistreerd:

Widgetgebieden aan uw thema toevoegen

Als u nu widgets aan die widgetgebieden toevoegt, gebeurt er niets. U moet deze toevoegen aan het voettekst van uw thema. Ik zal de code die u nodig hebt om stapsgewijs aan uw voettekstbestand toe te voegen, door meer controles toe te voegen voor verschillende aantallen bevolkte widgetgebieden terwijl we verder gaan.

Merk op dat je misschien een aantal van de klassen en elementen met het widgetgebied moet aanpassen in overeenstemming met de structuur en lay-out van je thema.

1. Controleren of er geen widgetgebieden zijn ingevuld

De eerste stap is om te controleren of er geen widgetgebieden zijn ingevuld, in welk geval er niets moet worden uitgevoerd. Open uw thema's footer.php bestand en voeg de onderstaande code toe.

2. Controleren of alle widgetgebieden zijn ingevuld

Vervolgens zal ik controleren of alle widgetgebieden zijn ingevuld. Als dit het geval is, geeft het thema de inhoud van alle vier weer, waarbij elk ervan naast elkaar zweeft en een kwart van de breedte van het scherm in beslag neemt. Ik zal hier de klassen voor toevoegen, maar later de CSS toevoegen aan mijn stylesheet.

Na de regeluitlezing terug te keren; maar vóór de stop als; verklaring in de code die u zojuist hebt toegevoegd, voeg dit toe:

if (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- gebied ')):?> 

Dit doet het volgende:

• Hiermee wordt gecontroleerd of alle Wider-widgetgebieden worden gevuld met als labels.
• Als dit het geval is, wordt een nieuw element geopend met de naam
• Voert alle vier widgetgebieden uit met behulp van de dynamic_sidebar () functie, waarbij elk van deze klassen voor lay-out wordt gegeven.

De klassen zijn .left.quarter voor de meeste widgets, met uitzondering van de laatste widget .right.quarter.

3. Controleren of er slechts drie widgetgebieden zijn ingevuld

De volgende stap is het toevoegen van de code om de widgetgebieden uit te voeren als er slechts drie zijn ingevuld. Onder de code die u zojuist hebt toegevoegd, voert u het volgende in:

Dit controleert of de eerste drie widgetgebieden zijn gevuld en de vierde niet, en geeft vervolgens de eerste drie weer met behulp van geschikte klassen-vervanging .kwartaal met .een derde.

Merk op dat wanneer u uw widgetgebieden vult, u altijd de laatste (s) moet missen als u ze niet allemaal wilt gebruiken, anders werkt deze controle niet. Laat de eerste niet leeg en vul de volgende leeg.

4. Controleren of er slechts twee widgetgebieden zijn ingevuld

Als u slechts twee widgetgebieden wilt uitvoeren als deze zijn gevuld en de derde en vierde niet, voegt u deze code toe onder de code die u zojuist hebt toegevoegd:

Dit werkt op dezelfde manier als de vorige twee codefragmenten, met behulp van de .voor de helft klasse voor lay-out.

5. Controleren of er slechts één widgetgebied is ingevuld

De laatste controle is voor alleen het eerste widgetgebied dat wordt ingevuld. Voeg dit toe onder de code die u zojuist hebt toegevoegd:

Hierdoor wordt de inhoud van het ene widgetgebied uitgevoerd in een element met volledige breedte.

Bewaar nu je footer.php het dossier.

De CSS toevoegen

Op dit moment werken je widgetgebieden niet goed. Als je ze allemaal invult, verschijnen ze onder elkaar op de volledige breedte. Dus je moet wat OOCSS toevoegen om die layoutklassen te laten werken. De OOCSS die ik toevoeg, is responsief, dus ik heb mediaquery's opgenomen om de footer-widgetgebieden op kleine schermen te vergroten / verkleinen.

1. Floats toevoegen

Laten we eerst zorgen dat de widgetgebieden naast elkaar zweven.

Open uw thema's style.css bestand en voeg deze code toe:

/ * zweeft * / .quarter, .een-derde, .twee-derde, .half float: left; 

2. Breedten toevoegen

De breedten zorgen ervoor dat alle widgetgebieden de juiste proportie van het scherm innemen. Ik gebruik percentages omdat het de code flexibeler en responsiever maakt. Voeg dit toe aan je stylesheet:

/ * breedtes * / .een-derde breedte: 32%;  .twee-derde width: 65,5%;  .kwartier breedte: 23,5%; . Drie kwartieren breedte: 74,5%;  .half width: 48%; 

Houd er rekening mee dat de breedten niet oplopen tot 100% omdat er ruimte moet worden toegestaan ​​voor marges.

3. Marges toevoegen

Voeg nu de stijl voor marges toe aan uw stylesheet:

/ * marges * / .one-third margin: 0 0.5%;  .kwart, .twee-derde margin: 0 0,5%;  .left, .quarter.left, .one-third.left margin: 0 1% 0 0; zweven: links;  .rechts, .quarter.right, .one-third.right margin: 0 0 0 1%; zweven: rechts;  .half.left width: 48%; marge: 0 2% 0 0;  .half.right width: 48%; marge: 0 0 0 2%;  .two-thirds.left margin: 0 1% 0 0;  .two-thirds.rechts margin: 0 0 0 1%; zweven: rechts; 

Merk op dat de marges verschillend zijn voor elementen die ook de .rechts of .links klassen toegepast op hen, zodat ze flush aan de rand van hun element zitten.

4. Mediaquery's toevoegen

De mediaquery's zullen twee dingen doen:

• Op kleine schermen zoals tablets verschijnen vier elementen in een twee op twee raster, wat betekent dat elementen met de .kwartaal klasse heeft een halve breedte en de marges worden dienovereenkomstig aangepast.
• Op hele kleine schermen zoals smartphones, zullen alle elementen over de volle breedte zijn.

Voeg de mediaquery's onder aan uw stylesheet toe, samen met eventuele andere mediaquery's die u mogelijk heeft:

/ * mediaquery's voor grotere schermen, zoals kleine tablets in landschap of grote tablets in portrait * / @media-scherm en (max-width: 780px) / * alleen de .quarter-lay-outklasse is hier relevant - alle andere klassen hebben volledige width * / .quarter width: 48%;  .quarter.left margin-right: 2%;  .quarter.right margin-left: 2%;  footer .third.quarter.widget-area clear: beide;  / * mediaquery's voor kleine schermen in landscape-modus (of vergelijkbaar) * / @media-scherm en (max-width: 600px) / * breedte-aanpassing van de volledige breedte in kleine schermen * / .quarter, .een-derde, .half, .twdo-thirds, .th kwart-kwart, .full-width width: 100%; marge: 0;  / * opvulinstellingen * / .widget-area opvulling: 0 0 10px 0; 

Sla nu je stylesheet op.

Uw code testen

Nu is het tijd om te kijken wat er gebeurt als u uw widgetgebieden invult.

Hieronder ziet u een screenshot van een site die ik beheer en die gebruikmaakt van deze code. Normaal gesproken heeft de voettekst vier widgetgebieden:

Als ik de widget uit het vierde widgetgebied verwijder, worden er slechts drie weergegeven, met gelijke breedten:

En als ik widgets uit het derde widgetgebied verwijder, zien bezoekers twee widgetgebieden die elk de helft van de breedte innemen:

Samenvatting

Deze techniek is handig als u wilt dat uw thema de populatie van widgetgebieden met meerdere voetteksten toestaat, maar u weet niet hoeveel van die widgetgebieden daadwerkelijk worden gebruikt.

Als u een framework, een startersthema of een thema maakt dat andere mensen voor hun sites gebruiken, kan dit helpen de footer-lay-out netter te maken en extra werk langs de lijn te besparen door lay-out CSS toe te voegen.