Aangepaste metaboxen toevoegen in WordPress-berichten en berichttypen

Wilt u aangepaste metaboxen maken voor uw WordPress-berichten, pagina's en aangepaste berichttypen? Aangepaste metaboxen worden meestal gebruikt om een ​​betere gebruikersinterface te bieden voor het toevoegen van aangepaste velden (metagegevens) aan uw inhoud. In dit artikel leggen we uit wat een aangepaste metabox is en hoe je eenvoudig aangepaste metaboxen kunt toevoegen in WordPress-berichten en berichttypen.

Wat is een aangepaste metabox in WordPress?

Aangepaste metabox is een gebruiksvriendelijkere interface om aangepaste velden (metagegevens) toe te voegen aan uw berichten, pagina's en andere aangepaste berichttypen.

WordPress wordt geleverd met een eenvoudig te gebruiken interface die u helpt bij het maken van inhoud zoals berichten en pagina's, of aangepaste berichttypen.

Normaal gesproken bestaat elk inhoudstype uit de daadwerkelijke inhoud en de bijbehorende metagegevens. Metagegevens zijn informatie met betrekking tot die inhoud, zoals datum en tijd, naam van de auteur, titel en meer. U kunt ook uw eigen metagegevens toevoegen door aangepaste velden te gebruiken.

Het toevoegen van metagegevens met het standaardveld voor aangepaste velden is echter niet erg intuïtief. Dit is waar aangepaste metaboxen binnenkomen.

Met WordPress kunnen ontwikkelaars hun eigen aangepaste metaboxen maken en toevoegen op schermen voor het bewerken van berichten. Dat is de manier waarop de populairste plug-ins verschillende opties toevoegen aan uw schermen voor het bewerken van berichten.

De SEO-titel en het metabeschrijvingsvak in de Yoast SEO-plug-in is bijvoorbeeld een aangepaste metabox:

Laten we echter zien hoe je eenvoudig aangepaste metaboxen kunt toevoegen in WordPress-berichten en berichttypen.

Aangepaste metaboxen maken in WordPress

Allereerst moet u de plug-in Advanced Custom Fields installeren en activeren. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

Na activering voegt de plug-in een nieuw menu-item met de naam 'Aangepaste velden' toe aan uw WordPress-beheerbalk. Als u hierop klikt, gaat u naar de pagina met aangepaste velden.

Deze pagina is leeg omdat u nog geen aangepaste velden hebt gemaakt. Ga je gang en klik op de knop 'Nieuw toevoegen' om verder te gaan.

U wordt naar de pagina 'Nieuwe veldgroep toevoegen' geleid.

Hier moet u een titel opgeven voor uw veldgroep. Deze titel wordt gebruikt als de titel van je metabox.

Daarna kunt u beginnen met het toevoegen van uw velden. Klik eenvoudig op de knop '+ Veld toevoegen' om uw eerste veld toe te voegen.

Hierdoor wordt het formulierinstellingenformulier weergegeven. Eerst moet je een label voor je veld opgeven. Dit label wordt weergegeven in uw metabox vóór het veld.

Daarna moet u het veldtype selecteren. Met de plug-in Advanced Custom Fields kunt u kiezen uit een hele reeks opties. Dit omvat tekst, tekstvelden, keuzerondjes, selectievakjes, volledige WYSIWYG-editor, afbeeldingen en meer.

Vervolgens moet u veldinstructies opgeven. Deze instructies zullen gebruikers vertellen wat ze in het veld moeten toevoegen.

Daaronder vindt u andere opties voor uw veld. U moet deze opties zorgvuldig bekijken en aanpassen om aan uw behoeften te voldoen.

Klik vervolgens op de knop Close field om het veld samen te vouwen.

Als u meer velden aan uw metabox wilt toevoegen, klikt u op de knop '+ Veld toevoegen' om nog een veld toe te voegen.

Zodra u klaar bent met het toevoegen van velden, kunt u naar beneden scrollen naar het locatiegedeelte. Hier kunt u bepalen wanneer en waar u uw metabox wilt weergeven.

Geavanceerde aangepaste velden worden geleverd met een handvol voorgedefinieerde regels waaruit u kunt kiezen. U kunt bijvoorbeeld posttypen, postcategorie, taxonomie, pagin ouder en meer selecteren.

Vervolgens komen de instellingen voor de metabox-opties.

Eerst moet u het bestelnummer kiezen. Als u meerdere veldgroepen hebt gedefinieerd voor één locatie, kunt u het ordernummer selecteren zodat ze kunnen worden weergegeven. Als je het niet zeker weet, laat het dan als 0 staan.

Vervolgens moet je de metabox-positie op de pagina kiezen. U kunt ervoor kiezen om het weer te geven na de inhoud, vóór de inhoud of in de rechterkolom.

Daaronder moet je een stijl kiezen voor je metabox. Je kunt ervoor kiezen dat het lijkt op alle andere WordPress-metaboxen, of je kunt kiezen dat het naadloos is (zonder metabox).

Als u het niet zeker weet, selecteert u de optie Standaard (WP Meta-vak).

Ten slotte ziet u een lijst met velden die normaal worden weergegeven op een berichtbewerkingsscherm. Als u een bepaald veld op uw bewerkingsscherm wilt verbergen, kunt u dit hier controleren. Als je het niet zeker weet, is het het beste om ze niet aan te vinken.

Als u klaar bent, klikt u op de knop Publiceren om uw veldgroep levend te maken.

Gefeliciteerd, je hebt met succes je aangepaste metabox gemaakt voor je WordPress-bericht of berichttype.

Afhankelijk van uw instellingen kunt u nu uw bericht of berichttype bezoeken om uw aangepaste metabox in actie te zien.

U kunt deze aangepaste metabox gebruiken om metagegevens toe te voegen aan uw berichten of berichttypen. Deze gegevens worden opgeslagen in uw WordPress-database wanneer u het bericht opslaat of publiceert.

Uw aangepaste metabox-gegevens weergeven in WordPress-thema

Tot nu toe hebben we met succes een aangepaste metabox gemaakt en weergegeven op ons bewerkingsscherm voor berichten. De volgende stap is om de gegevens die zijn opgeslagen in die velden op uw WordPress-thema weer te geven.

Eerst moet u de aangepaste veldgroep bewerken die u eerder hebt gemaakt. Op de pagina 'Veldgroep bewerken' ziet u uw aangepaste velden en hun namen.

U hebt deze veldnamen nodig om ze op uw website weer te geven.

Met geavanceerde aangepaste velden kunt u dat op twee verschillende manieren doen.

Ten eerste kunt u een shortcode gebruiken om een ​​aangepast veld in uw bericht weer te geven.

[acf field = "article_byline"]

U kunt ze ook weergeven door code toe te voegen aan uw WordPress-themabestanden. Als je dit nog niet eerder hebt gedaan, bekijk dan onze beginnershandleiding voor het kopiëren en plakken van code in WordPress.

U moet het themabestand bewerken waar u de gegevens uit deze velden wilt weergeven. Bijvoorbeeld single.php, content.php, page.php, enzovoort.

U moet ervoor zorgen dat u de code in de WordPress-lus toevoegt. De eenvoudigste manier om ervoor te zorgen dat u de code binnen de lus invoert, is om een ​​regel in uw code te zoeken die er als volgt uitziet:

U kunt uw code achter deze regel plakken en vóór de regel die de lus beëindigt:

Uw aangepaste veldcode ziet er ongeveer zo uit:

Deze code geeft de gegevens weer die zijn ingevoerd in het veld Artikelregel van onze aangepaste metabox.

Merk op hoe we de code hebben verpakt in een h2-kop met een CSS-klasse. Dit helpt ons het aangepaste veld later op te maken en vorm te geven door aangepaste CSS toe te voegen aan ons thema.

Hier is nog een voorbeeld:

Vergeet niet om de veldnamen te vervangen door uw eigen veldnamen.

U kunt nu het bericht bezoeken waar u de gegevens al hebt ingevoerd in uw aangepaste velden. U zou kunnen zien dat uw aangepaste metagegevens worden weergegeven.

Geavanceerde aangepaste velden is een zeer krachtige plug-in met veel opties. Deze tutorial krast alleen het oppervlak. Als u meer hulp nodig heeft, vergeet dan niet om de documentatie van de plug-in te raadplegen over hoe u deze verder kunt uitbreiden.

We hopen dat dit artikel je heeft geholpen om aangepaste metaboxen in WordPress-berichten en berichttypen toe te voegen. Wellicht wilt u ook onze stapsgewijze handleiding over het verbeteren van WordPress-snelheid en -prestaties voor beginners.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.