Een WordPress-thema maken vanuit statische HTML - Widgets toevoegen

In deze serie hebt u geleerd hoe u een statisch HTML-bestand converteert naar een WordPress-thema en hoe u het headerbestand bewerkt.

Tot nu toe heb je:

bereidde je markup voor op WordPress
converteerde uw HTML naar PHP en splitst uw bestand op in sjabloonbestanden
bewerkte de stylesheet en uploadde je thema naar WordPress
een lus toegevoegd aan uw indexbestand
toegevoegde metatags, de wp_head hook en de titel en beschrijving van de site in uw header-bestand
een navigatiemenu toegevoegd.

In deze zelfstudie laat ik u zien hoe u widgetgebieden in uw thema kunt registreren en deze op verschillende locaties kunt weergeven. Je voegt een widget-gebied toe aan de koptekst voor contactgegevens (of wat je maar wilt!) En aan de zijbalk voor zijbalk-widgets.

Wat je nodig hebt

uw coderedacteur naar keuze
een browser om uw werk te testen
een WordPress-installatie, lokaal of op afstand
Als u lokaal werkt, heeft u MAMP, WAMP of LAMP nodig om WordPress in te schakelen.
Als u op afstand werkt, hebt u FTP-toegang tot uw site en een beheerdersaccount nodig in uw WordPress-installatie.

1. Widgets registreren

Om widgets te registreren, gebruikt u de register_sidebar () functie. U maakt een functie in uw functiesbestand om alle zijbalken op te nemen die u moet registreren en vervolgens activeert u dit via de widgets_init actie haak.

Opmerking: hoewel deze functie het woord 'zijbalk' in de naam bevat, betekent dit niet dat uw widgetgebieden alleen in de zijbalk moeten staan - dit is een kater uit de begintijd van WordPress als een blogplatform toen widgets zich net in de buurt bevonden zijbalk.

Open je functions.php bestand en voeg vervolgens de volgende code toe vóór de regel helemaal aan het einde ?>:

 functie wptutsplus_widgets_init () // in koptekst-widgetgebied, gelegen aan de rechterkant van de koptekst, naast de sitetitel en beschrijving. Leeg standaard. register_sidebar (array ('name' => 'In Header Widget Area', 'id' => 'in-header-widget-area', 'description' => 'Een widget-gebied aan de rechterkant van de header, naast de titel en beschrijving van de site. ',' before_widget '=>'',' after_widget '=>'
',' before_title '=>'',' after_title '=>'
',)); // Zijbalk-widgetgebied, gelegen in de zijbalk. Leeg standaard. register_sidebar (array ('naam' => 'Sidebar Widget Area', 'id' => 'sidebar-widget-area', 'description' => 'Het sidebar-widgetgebied', 'before_widget' => '',' after_widget '=>'
',' before_title '=>'',' after_title '=>'
',));  add_action ('widgets_init', 'wptutsplus_widgets_init'); ?>

Dit registreert twee widgetgebieden: één in de kop en één in de zijbalk zelf. De parameters van register_sidebar () zijn:

naam - een unieke naam voor het widgetgebied dat wordt weergegeven op het Widgets-beheerdersscherm.
ID kaart - een unieke ID voor het widgetgebied dat u binnenkort zult gebruiken om uw widgetgebied toe te voegen aan de juiste locatie in uw thema.
Omschrijving - een beschrijving om weer te geven in het Widgets-beheerdersscherm.
before_widget - de opmaak die voorafgaat aan elke widget in het widgetgebied. Dit helpt bij het stylen.
after_widget - de opmaak om elk widgetgebied te volgen. Zorg ervoor dat u alle elementen afsluit die u hebt geopend met behulp van de before_widget parameter
before_title - opmaak voorafgaan aan de titel van elke widget - ik heb een toegevoegd h3 element met een klasse die helpt bij het stylen.
after_title - de opmaak om alle elementen te sluiten die je voor de widgettitel hebt geopend.

Bewaar nu uw functiesbestand.

Als u uw sitebeheerder opent, ziet u dat u nu toegang hebt tot de widgets beheerderspagina, waarop de twee widgetgebieden zijn toegevoegd:

Widgets die u hier toevoegt, worden echter nog niet weergegeven in uw thema, omdat u ze nog steeds aan uw sjabloonbestanden moet toevoegen.

2. Widgetgebieden toevoegen aan uw sjabloonbestanden

Eerst voeg ik het widgetgebied voor de koptekst en vervolgens de zijbalk toe.

Een widgetgebied toevoegen aan de koptekst

Open je header.php bestand en zoek de volgende code:

   Dit wordt een widgetgebied in de kop - adresgegevens (of iets anders dat u wilt) komen hier.

Vervang het hiermee:

Sla het bestand op.

Het Zijbalk Widget-gebied toevoegen

Open nu je thema's sidebar.php en zoek deze code:

Vervang het door het volgende:

Sla tot slot het bestand op.

3. Widgets toevoegen via de Widgets-beheerder

De laatste stap is om enkele widgets toe te voegen via het widgets-beheerdersscherm. Ik ga twee widgets aan het header widget-gebied toevoegen:

een tekstwidget met contactgegevens
een zoekvak

En ik voeg twee widgets aan de zijbalk toe:

de widget "Recente berichten"
de "Meta" -widget

Zodra ik dat heb gedaan, ziet mijn "Widgets" beheerdersscherm er als volgt uit:

Ten slotte kan ik, als ik mijn site in mijn browser open, de widgets zien die in het thema zijn ingevuld:

Er is nog wat werk nodig bij het stylen - de zoekbalk is bijvoorbeeld een beetje breed, maar de inhoud is er. Je hebt nu widgetgebieden in je thema!

Samenvatting

In deze zelfstudie heb ik je laten zien hoe widgetgebieden kunnen worden geregistreerd en ze op twee plaatsen in je thema kunnen worden toegevoegd: de koptekst en de zijbalk. U kunt widget-gebieden toevoegen waar u maar wilt in uw thema. Ze kunnen erg handig zijn om inhoud toe te voegen aan uw pagina's of berichten via widgets.

Voorbeelden zijn:

een widgetgebied voor en na de inhoud, misschien voor het weergeven van gerelateerde berichten of gedeelde knoppen op sociale media of een call-to-action knop
een widgetgebied voor of na de navigatie
widget-gebieden in de voettekst - u voegt deze toe aan dit thema in de volgende zelfstudie
widget-gebieden voor slechts één inhoudstype - in deel 11 van deze tutorial zal ik u laten zien hoe u een aangepast archiefsjabloon kunt maken en u zult zien hoe verschillende sjablonen voor verschillende inhoudstypes kunnen worden gecombineerd met meerdere widgetgebieden om de zijbalken in jouw site.

In de volgende tutorial voltooit u de footer.php bestand in uw thema, het toevoegen van meerdere widget gebieden in een 'fat footer', plus een colofon voor copyright-informatie en de wp_footer actie haak.

Middelen

De widget-API
De functie register_sidebar ()

Code