WordPress aangepaste velden zijn een belangrijk onderdeel van wat WordPress een flexibel content management systeem maakt, in plaats van”gewoon een blogging platform”.

als het gaat om WordPress aangepaste velden, de freemium Advanced aangepaste velden plugin is een van de meest bekende namen. Het maakt het gemakkelijker om te werken met aangepaste velden in alle aspecten, en het is ook het onderwerp van onze post vandaag.

specifiek leggen we uit waarom geavanceerde aangepaste velden zo waardevol zijn en laten we u stap-voor-stap zien hoe u het kunt toepassen op uw WordPress site.

Hier is alles wat je zult vinden in dit bericht:
er is veel te behandelen, dus laten we duiken in …

Wat zijn WordPress aangepaste velden? Wat Laten Ze Je Doen?

WordPress aangepaste velden kunt u toevoegen, opslaan, en weer te geven extra informatie over een stuk van de inhoud in WordPress. Op een meer technisch niveau, aangepaste velden helpen u metadata op te slaan.

zelfs als u niet bekend bent met deze term, gebruiken aangepaste velden een groot deel van de functionaliteit in uw favoriete plugins en thema ‘ s.

bijvoorbeeld, WooCommerce, de meest populaire manier om een e-commerce winkel te bouwen, gebruikt aangepaste velden om extra informatie over een product op te slaan, zoals:

• prijs
• gewicht
• kleur

of, als u een WordPress evenementenkalender plugin hebt, zal die plugin aangepaste velden gebruiken om extra informatie over een gebeurtenis op te slaan, zoals::

• locatie
• begin / eindtijd
• prijs

u kunt ook uw eigen aangepaste velden maken om informatie op te slaan die relevant is voor uw unieke behoeften, waar dit hele bericht over gaat.

hoe cool zijn aangepaste velden in WordPress, uh? 👨 💻Leer hoe om te profiteren van hen met de verbazingwekkende @ wp_acf in onze nieuwste gids! 💪Click to Tweet

Wanneer moet u aangepaste velden gebruiken?

nu vraagt u zich misschien af waarom u zelfs aangepaste velden nodig hebt.

bijvoorbeeld, als u een evenement op uw WordPress site wilt plaatsen, kunt u dan niet gewoon al die informatie als gewone tekst in de WordPress editor zetten?

nou, ja, dat zou kunnen. Maar het gebruik van aangepaste velden is om een paar redenen een betere aanpak:

• eenvoudiger invoer — in plaats van dingen vanaf nul te typen, zal een goed uitgeruste aangepaste veldgroep het veel gemakkelijker maken om gegevens in te voeren. In plaats van een datum te typen, kunt u bijvoorbeeld gewoon de datum selecteren van een datumkiezer.
• consistentie-de informatie die u invoert in uw aangepaste velden wordt altijd weergegeven volgens uw setup, wat betekent dat het consistent zal zijn over uw hele site.
• eenvoudige updates en onderhoud-als u iets wilt veranderen over hoe die informatie in de toekomst wordt weergegeven, kunt u gewoon één ding bijwerken in plaats van elk bericht afzonderlijk te bewerken.

WordPress bevat ingebouwde aangepaste velden functionaliteit

WordPress bevat eigenlijk ingebouwde functionaliteit voor het toevoegen van aangepaste velden aan uw inhoud. In de klassieke TinyMCE-editor kunt u dit inschakelen vanuit het scherm Opties gebied. Of, in de nieuwe blokbewerker, kunt u het inschakelen vanuit het Optiegebied:

u kunt dan uw aangepaste veldgegevens invoeren met behulp van sleutel / waarde-paren:

Deze eigen custom fields-functionaliteit is volledig functioneel, maar het is niet de meest gebruiksvriendelijke manier om dingen te doen, daarom wenden veel mensen zich in plaats daarvan tot de geavanceerde Custom Fields-plugin.

geavanceerde aangepaste velden maakt het een stuk makkelijker

simpel gezegd, geavanceerde aangepaste velden maakt het een stuk gemakkelijker om te werken met aangepaste velden in WordPress in… vrijwel alle aspecten.

het vereenvoudigt de interface voor het toevoegen en beheren van aangepaste velden in uw WordPress dashboard en het vereenvoudigt ook het proces voor het weergeven van informatie uit aangepaste velden op de frontend van uw site. Dat feit helpt alleen maar verklaren waarom het actief is op meer dan 1 miljoen websites met een 4,9-sterren rating op meer dan 1.000 beoordelingen.

op de backend kunt u gebruiksvriendelijke metaboxen maken die vooraf geselecteerde veldtypen bevatten. Dus, in plaats van dat generieke key-value pair interface (zoals die je hierboven zag), zult u in staat zijn om datumkiezers, checkboxes, en meer zoals dit te gebruiken:

in totaal biedt geavanceerde aangepaste velden meer dan 30 verschillende veldtypen die u kunt toevoegen aan elk gebied in uw dashboard, inclusief berichten, gebruikers, taxonomieën, media, opmerkingen en zelfs pagina ‘ s met aangepaste opties.

u kunt hier gedetailleerde informatie over elk veldtype bekijken.

geavanceerde aangepaste velden maakt het ook een stuk gemakkelijker om die informatie weer te geven, met goed gedocumenteerde functies, shortcodes, Gutenberg blokken, en meer.

of, u kunt integraties vinden met andere tools, zoals sommige drag-and-drop WordPress pagina bouwers.

geavanceerde aangepaste velden gratis vs Pro: Welke heb je nodig?

geavanceerde aangepaste velden komen zowel in een gratis als een betaalbare premium versie.

voor de meeste basisgebruiken is de gratis versie helemaal in orde. Het geeft u toegang tot bijna alle veldtypen, evenals alle tijdbesparende en gebruiksvriendelijke functies hierboven beschreven.

Als u alleen wat extra informatie over uw inhoud wilt opslaan, is de gratis versie alles wat u nodig hebt.

met dat gezegd hebbende, voegt de Pro-versie een aantal handige functies toe die u helpen geavanceerde aangepaste velden op interessantere manieren te gebruiken:

• Repeater velden — Hiermee kunt u bepaalde velden/groepen van velden herhalen op een post-by-post basis. Als u bijvoorbeeld informatie over een spreker aan een evenement toevoegt, helpt een repeater-veld u om te gaan met de situatie waarin er meer dan één spreker is (U kunt het veld(en) voor de spreker zo vaak als nodig “herhalen”, waarmee u edge-gevallen kunt behandelen waarin er meerdere luidsprekers zijn).
• ACF blokken-toon uw velden als een blok Gutenberg, in plaats van een meta box. Dit is vooral handig als je het bouwen van een site voor een klant en willen ze een gemakkelijke manier om input en visualiseren van aangepaste veldgegevens.
• flexibel inhoudsveld-maak lay-outs van andere velden. Het is een soort lichtgewicht pagina bouwer gebaseerd op aangepaste veld informatie.
• Gallery field-upload meerdere afbeeldingen naar een enkel veld.

er zijn ook enkele andere verschillen, zoals opties pagina ‘ s, de mogelijkheid om velden te klonen, verbeteringen aan de relatie velden, en andere kleinere tweaks.

U kunt alle ACF PRO functies hier zien.

ACF PRO begint bij $ 25 voor lifetime gebruik op een enkele site. Of, u kunt betalen $ 100 voor levenslange gebruik op onbeperkte sites.

bij twijfel, begin met de gratis versie totdat u precies weet welke functionaliteit u nodig hebt. U kunt altijd later upgraden indien nodig.

geavanceerde aangepaste velden Tutorial: Hoe uw velden toe te voegen

laten we nu graven in de werkelijke geavanceerde aangepaste velden tutorial En Ik zal u laten zien hoe u uw eerste set van aangepaste velden te maken en weer te geven.

voor dit voorbeeld, laten we zeggen dat je een blog hebt over het draaien. Je bent als … echt in hardlopen en je wilt je dagelijkse workouts delen met je lezers. Specifiek, met elke blog post, wil je een run ‘ s delen:

• doel — laten we zeggen dat je twee verschillende types van running hebt: “speed work” en “conditioning”.
• afstand – Hoe lang uw run was.
• starttijd-wanneer u uw run begon.
• eindtijd-wanneer u klaar bent met uitvoeren.
• locatie-waar uw run plaatsvond.

om die informatie te verzamelen, wilt u vijf aangepaste velden toevoegen.

Het is belangrijk op te merken dat de principes die je leert in deze geavanceerde aangepaste velden tutorial van toepassing zijn op elke use case. We kiezen gewoon een specifiek voorbeeld omdat het helpt om een tastbaar voorbeeld te hebben om mee te verbinden.

we splitsen deze tutorial in twee delen:

1. Hoe voeg je je eigen velden toe aan de backend en beheer je ze.
2. Hoe kunt u aangepaste veldinformatie weergeven op de frontend van uw site.

Maak een nieuwe veldgroep

aan nadat u de gratis versie van geavanceerde aangepaste velden hebt geà nstalleerd en geactiveerd vanuit WordPress.org, ga naar aangepaste velden > nieuw toevoegen om uw eerste veldgroep aan te maken.

zoals de naam al doet vermoeden, is een “veldgroep” een groep van een of meer aangepaste velden die samen worden weergegeven in uw WordPress dashboard.

in dit voorbeeld maakt u één veldgroep aan die vijf aangepaste velden bevat.

geef uw veldgroep een naam en kies vervolgens de locatie. Voor dit voorbeeld, we willen deze aangepaste velden weer te geven voor de reguliere WordPress blog posts, zodat u kunt laten als de standaard bericht.

echter, als u uw aangepaste velden elders wilt weergeven, zoals naast een aangepast posttype of met een taxonomie, wilt u dit wijzigen. U kunt ook meerdere regels instellen om uw velden op meerdere locaties weer te geven:

Aangepaste Velden Toevoegen

Vervolgens klik je op de + Veld Toevoegen knop voor het toevoegen van uw eerste eigen veld:

Dit opent veel mogelijkheden, maar je hoeft niet per se te vul alles.

de twee belangrijkste keuzes zijn:

• veldlabel-dit is wat in de editor zal verschijnen. Het zal ook worden gebruikt om de naam van het veld te genereren, dat is wat je zult gebruiken in code. U hoeft niet om de naam van het veld te veranderen (hoewel je kunt als je nodig hebt).
• veldtype-dit is het type informatie dat u wilt verzamelen. U wilt bijvoorbeeld dat een nummerveld nummerinformatie verzamelt of dat een e-mailveld een e-mailadres verzamelt.

voor dit eerste veld wilt u een keuzerondje veldtype:

verder naar beneden kunt u de keuzerondjes selecteren in het keuzevakje:

Er zijn ook een aantal andere keuzes die u kunt maken, zoals of een veld vereist is en een standaard waarde. Voel je vrij om deze aan uw behoeften te configureren.

laten we eens kijken naar een ander voorbeeld: een aangepast veld om de afstand van de run te verzamelen. Deze keer wilt u een getalveld type:

u kunt het ook wat gebruiksvriendelijker maken door de afstandeenheid toe te voegen. En als u wilt, kunt u ook validatie toevoegen met een minimale waarde en maximale waarde. Bijvoorbeeld, je bent waarschijnlijk niet gaan op 1.000-mijl runs (en als je dat doet… OMG, je bent de ultieme Forrest Gump)!

herhaal het proces voor alle andere aangepaste velden die u wilt verzamelen. Als u klaar bent, ziet het er ongeveer zo uit:

instellingen configureren en publiceren

om het af te maken, scroll naar beneden naar het Instellingenvak. Hier kunt u bepalen hoe uw velden weer te geven in de WordPress-editor.

meestal kunt u deze als standaardinstellingen laten. Maar voel je vrij om dingen te veranderen als je wilt. U kunt er bijvoorbeeld voor kiezen om uw eigen velden boven de gewone WordPress-editor weer te geven:

zodra u uw keuzes hebt gemaakt, Publiceer uw field group om het live te maken.

voeg wat informatie toe in de WordPress-Editor

zodra u uw veldgroep hebt gepubliceerd, ziet u uw velden verschijnen wanneer u een nieuw bericht aanmaakt.

standaard verschijnen ze samen onder de editor in zowel de klassieke TinyMCE-editor als de nieuwe blok-editor:

de informatie die u hier invoert zal worden opgeslagen in de WordPress-database van uw site voor eenvoudig ophalen (U zult dat zien in het volgende deel van onze tutorial geavanceerde aangepaste velden).

conditionele Logica verkennen

voordat we verder gaan, laten we een snelle omweg maken.

zie, een van de redenen waarom geavanceerde aangepaste velden zo populair is, is vanwege alle interessante implementaties die het toelaat.

en een krachtige optie hier is Conditional Logic, die u toelaat om velden te tonen / verbergen op basis van hoe een vorig veld werd beantwoord.

laten we eens kijken naar een snel voorbeeld van hoe dit werkt…

laten we zeggen dat u wilt bloggen over voedsel, uw reizen, of iets anders dan draaien. Wanneer u over een niet-run onderwerp schrijft, heeft het niet veel zin om de aangepaste velden weer te geven voor informatie over de run, toch?

Wat als u, in plaats van automatisch alle aangepaste velden weer te geven die u zojuist hebt gemaakt, een aangepast veld kunt toevoegen dat zegt ” Is dit bericht een run?”:

Als u het vakje aanvinkt, verschijnen de informatievelden automatisch. Als u het niet aangevinkt laat, blijven ze verborgen:

dat is wat conditionele logica u toestaat om te doen!

om dit in te stellen, zou u uw veldgroep bewerken en een nieuw True / False veld toevoegen voor ” Is this a run?”:

dan zou u de bestaande velden bewerken en conditionele Logica inschakelen zodat elk veld alleen wordt weergegeven als ” is dit een run?”field is checked:

geavanceerde aangepaste velden weergeven op de Frontend

Ok, we zijn halverwege onze reis met geavanceerde aangepaste velden. Je bent nu in staat om informatie toe te voegen aan uw aangepaste velden, associëren met de relevante post type, en opslaan in uw database.

echter, er is nog steeds een potentieel probleem: de informatie uit uw aangepaste velden verschijnt nog nergens op de frontend!

dat wil zeggen, ook al hebt u een aantal aangepaste velden toegevoegd aan de editor voor uw blogberichten, uw blogpost ziet er nog steeds uit als een normale blogpost op de frontend:

laten we dat oplossen.

Er zijn een paar verschillende manieren waarop u geavanceerde aangepaste velden gegevens kunt weergeven op de frontend van uw site. De exacte methode die u kiest zal afhangen van uw behoeften en kennisniveau. Hier zijn drie verschillende manieren om dat te bereiken:

1. De templatebestanden van uw thema — dit vereist een beetje technische kennis, maar het is meestal de beste aanpak, vooral als u comfortabel werkt in de templatebestanden van uw thema.
2. met een shortcode-dit is super eenvoudig en een goede optie als u alleen aangepaste veldgegevens per geval wilt invoegen. Echter, het vereist veel meer handmatig werk, omdat je nodig hebt om shortcodes toe te voegen aan elke post.
3. met Elementor Pro-Dit is geweldig omdat het de noodzaak om met PHP te werken volledig elimineert, maar het is een premium product en het betekent ook dat je Elementor Pro moet gebruiken voor je templating.

U kunt hierboven klikken om direct naar een specifieke methode te springen of u kunt ze allemaal lezen. Dat is aan jou.

geavanceerde aangepaste velden toevoegen in Themasjabloonbestanden

de eerste manier om uw aangepaste veldinformatie weer te geven is door de PHP-functies van geavanceerde aangepaste velden rechtstreeks toe te voegen aan de templatebestanden van uw kindthema.

Dit is een beetje geavanceerd omdat het vereist dat u in de templatebestanden van uw thema moet graven, maar het zorgt ervoor dat uw aangepaste velden automatisch elke keer op dezelfde plek worden weergegeven.

specifiek moet u de enkele sjabloon voor het posttype in kwestie bewerken.

voor een gewone blogpost is dit single.php. Of, sommige thema ‘ s breken dingen in template delen. Bijvoorbeeld, voor de twentynineteen thema, je eigenlijk nodig hebt om de inhoud te bewerken-single.php template deel.

Als u zich hier verloren voelt, kunt u een andere methode gebruiken.

zodra u het thema template bestand voor uw enkele post hebt gevonden, kunt u gebruik maken van geavanceerde aangepaste velden’ the_field() functie om de informatie van een veld weer te geven. Bijvoorbeeld,

<?php the_field('FIELD_NAME'); ?>

leer hier meer over.

om bijvoorbeeld het veld “doel” weer te geven, gebruikt u

<?php the_field('purpose'); ?>

u kunt de veldnaam vinden wanneer u een veldgroep bewerkt:

dus als je een kleine HTML-opmaak combineert met PHP, krijg je misschien iets als dit om alle velden weer te geven:

<div class="run-information"><ul><li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li><li><strong>Distance:</strong> <?php the_field('distance'); ?></li><li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li><li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li><li><strong>Location:</strong> <?php the_field('location'); ?></li></ul></div>

To voeg dit boven de reguliere post inhoud, je zou dit toevoegen aan uw thema template bestand boven the_content():

en nu, na het vernieuwen van de blogpost, kunt u de aangepaste veldgegevens zien boven de reguliere WordPress-inhoud:

voor meer informatie kunt u de volledige documentatie van geavanceerde aangepaste velden bekijken.

geavanceerde aangepaste veldgegevens weergeven met een Shortcode

voor een veel eenvoudiger manier om de gegevens van uw aangepaste velden weer te geven, kunt u ook shortcodes gebruiken. Het nadeel hier, hoewel, is dat je nodig hebt om de shortcode toe te voegen elke keer dat u wilt een aangepast veld weer te geven. Er is geen gemakkelijke manier om deze taak te automatiseren.

de shortcode is als volgt:

bijvoorbeeld, als u dit in de WordPress editor hebt ingevoerd:

Daarna de frontend van uw website zou er precies hetzelfde als de vorige thema sjabloon methode:

Hoe Geavanceerde Aangepaste Velden met Elementor Pro

Elementor is een van de meest populaire WordPress pagina bouwers. Hiermee kunt u uw ontwerpen te bouwen met behulp van visuele, drag-and-drop bewerken. Elementor is een van Kinsta ‘ s officiële partners.

met Elementor Pro, de betaalde add-on, kunt u ook sjabloonbestanden van uw thema bouwen, inclusief een optie om dynamische aangepaste veldgegevens uit geavanceerde aangepaste velden in te voegen in uw ontwerpen.

Dit is een geweldige optie als u de flexibiliteit wilt om automatisch aangepaste veldgegevens in uw sjablonen op te nemen, maar u voelt zich niet comfortabel om directe code-bewerkingen aan te maken aan de sjabloonbestanden van uw thema.

aan de slag Te gaan, je zou gaan om Sjablonen > Thema-editor en maak een nieuwe Elementor sjabloon voor je post Enkel:

Je zou kunnen toevoegen dat de reguliere Elementor widgets voor je Post Titel en Post de Inhoud. Vervolgens, om de aangepaste veldgegevens weer te geven, je zou toevoegen reguliere tekstverwerker widgets. Het enige verschil hier, in plaats van het bewerken van de tekst, zou u de dynamische optie te selecteren:

hierna kunt u ACF-veld selecteren uit de drop-down:

vanaf daar kunt u het specifieke veld selecteren dat u hebt toegevoegd met geavanceerde aangepaste velden:

En u kunt ook gebruik maken van de Geavanceerde accordeon tabblad te gaan of voeg informatie, waarmee u labels toevoegen en eenheden:

Makkelijk, toch? Nu gewoon herhalen voor andere aangepaste velden!

samenvatting

met behulp van geavanceerde aangepaste velden kunt u uw pagina ‘ s en blogberichten verrijken met meer gegevens en informatie met een eenvoudig te gebruiken oplossing. Meer: u kunt beginnen met het verzamelen van aanvullende informatie voor alle inhoud op uw site en vervolgens weer te geven op de frontend voor uw bezoekers.

om dat te doen, hebt u 3 opties:

• De templatebestanden van uw thema
• met een shortcode
• met Elementor Pro

De kennis die u in dit bericht hebt opgedaan, laat u het diepe potentieel van WordPress ontsluiten om 100% aangepaste sites te bouwen die veel verder gaan dan WordPress’ blogging roots.

de enige vraag die overblijft is deze:

wat gaat u maken met geavanceerde aangepaste velden? Deel het met ons in de reacties hieronder