Aangepaste metaboxen toevoegen in WordPress-berichten en berichttypen - DeLaatbusiness

Aangepaste metaboxen toevoegen in WordPress-berichten en berichttypen

6 min


126
6 gratis internet marketing ebooks, klik hier voor download

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.

Hoe aangepaste metaboxen in WordPress-berichten kunnen worden toegevoegd

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 feitelijke 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 .

Aangepaste velden

Het toevoegen van metadata 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:

Categorie SEO-titel en metabeschrijving in Yoast SEO

Laten we echter zien hoe je gemakkelijk 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 voor 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.

Nieuwe aangepaste veldengroep toevoegen

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.

Voeg uw vuistveld toe

Dit zal het veldinstellingenformulier oproepen. Eerst moet u een label voor uw veld opgeven. Dit label wordt weergegeven in uw metabox vóór het veld.

Een nieuw veld maken voor uw aangepaste metabox

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 doornemen en aanpassen aan uw behoeften.

Lokale instellingen

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

Als u meer velden aan uw metabox wilt toevoegen, klik dan op de knop ‘+ Veld toevoegen’ om nog een veld toe te voegen.

Sluit veld en voeg nog een toe

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.

Locatie regels

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 van 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.

Metabox-opties

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 uit te schakelen.

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

Publiceer uw veldgroep

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

Afhankelijk van je instellingen kun je nu je bericht of berichttype bezoeken om je aangepaste metabox in actie te zien.

Aangepaste metabox-preview

U kunt deze aangepaste metabox gebruiken om metagegevens aan uw berichten of berichttypen toe te voegen. 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 berichtbewerkingsscherm. 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.

Veldnamen

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 in de lus invoert, is om een ​​regel in uw code te zoeken die er als volgt uitziet:

1
<?php while ( have_posts() ) : the_post(); ?>

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

1
<?php endwhile; // end of the loop. ?>

Uw aangepaste veldcode ziet er ongeveer zo uit:

1
<h2 class="article-byline"><?php the_field('article_byline'); ?></h2>

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

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

Hier is nog een voorbeeld:

1
2
3
4
5
<blockquote class="article-pullquote">
<?php the_field('article_pullquote'); ?>
</blockquote>

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.

Aangepaste velden weergegeven op een website

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.


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format