Aan de slag met geavanceerde aangepaste velden

In deze zelfstudie laat ik je de basis zien van het gebruik van de plug-in Advanced Custom Fields (ACF). ACF is een behoorlijk grote plug-in, dus dit artikel zal absoluut niet alles uitleggen wat het biedt, maar het zou voldoende moeten zijn om je op weg te helpen met het toevoegen van je eigen metadata en het te tonen in je thema. 

Op het moment van schrijven zijn er twee versies van ACF: 4 en 5. Dit artikel is gebaseerd op versie 4, maar zou ook moeten gelden als u versie 5 gebruikt.

Wat is geavanceerde aangepaste velden?

Geavanceerde aangepaste velden is een gebruikersinterface voor het toevoegen van aangepaste velden of metagegevens aan WordPress. Met aangepaste velden kunt u uw berichten of pagina's uitbreiden met meer gegevens. Laten we naar een veelvoorkomend scenario kijken:

U hebt een berichttype gebeld film en u wilt een score van tien bij elk van uw beoordelingen toevoegen, samen met andere gegevens. Nu kunt u deze gegevens gewoon in uw bericht opnemen, maar wat als u deze gegevens later op een andere manier wilt gebruiken? Misschien wilt u de score boven uw beoordeling verplaatsen; in dit geval zou je elke beoordeling handmatig moeten bewerken en deze score handmatig moeten verplaatsen - niet geweldig.

WordPress heeft wel ingebouwde functies voor het maken van aangepaste velden, maar deze bevatten alleen basisfunctionaliteit en vereisen dat er programmeervelden worden gemaakt. ACF heeft veel ingebouwde veldtypen, waaronder enkele:

  • tekst
  • e-mail
  • WYSIWYG-editor
  • beeld
  • het dossier
  • selecteer het vakje
  • datumkiezer
  • kleur kiezer

Naast het hebben van ingebouwde velden, biedt ACF u een selectie van regels die kunnen worden gebruikt om te bepalen waar velden worden weergegeven in uw WordPress-beheerder. Dit is echt handig om je admin-omgeving zo schoon mogelijk te houden. U kunt bijvoorbeeld alleen een groep aangepaste velden weergeven als uw berichttype dit is beoordelingen en je paginasjabloon is aanbevolen recensie.

Ermee beginnen

Voordat we beginnen met het toevoegen van een aantal velden, moet u de ACF-plug-in installeren. Om dit te doen, gaat u vanuit het WordPress-dashboard naar Plug-ins> Voeg nieuw toe. Van de Plugin toevoegen scherm, zoek naar Geavanceerde aangepaste velden en klik Installeren. Zorg ervoor dat u de plug-in activeert: als deze correct is geïnstalleerd, ziet u nu een Aangepaste velden menu in uw WordPress-beheerder.

Vasthouden aan het thema van een website voor filmrecensies, gaan we een aantal relevante velden maken. Om deze tutorial te volgen, heb je een aangepast berichttype nodig film. Voor meer informatie over het maken van berichttypen, ga je naar dit andere geweldige Tuts + -artikel. Dat gezegd hebbende, de hier getoonde methoden zullen werken voor vele andere soorten aangepaste velden, en de logica voor het maken en weergeven van velden blijft hetzelfde.

Veldgroepen maken

Veldgroepen zijn precies wat ze zeggen: groepen velden. Met behulp van het voorbeeld van het hebben van een berichttype genaamd film, we willen misschien de volgende gegevens opnemen:

  • jaar van uitgave
  • regisseur
  • waardering op tien
  • IMDb-link

Deze velden behoren logisch tot een groep, omdat ze allemaal gerelateerd zijn aan hetzelfde berichttype. Met behulp van bovenstaande velden kunnen we beginnen na te denken over welke veldtypen we mogelijk nodig hebben voor deze gegevens.

  • jaar van uitgave: aantal
  • regisseur: tekst
  • waardering op tien: aantal
  • IMDb-link: tekst (er is geen url-veldtype)

Als u wilt beginnen met het toevoegen van een veldgroep, klikt u op Aangepaste velden menu in uw WordPress-dashboard. Klik nu op de Voeg nieuw toe knop. Je krijgt nu de Nieuwe veldgroep toevoegen scherm. Voordat we iets anders doen, laten we onze veldgroep een naam geven door het titelvak in te typen - ik heb de mijne genoemd Filmgegevens.

Vervolgens kunnen we al onze velden toevoegen. Klik op de Voeg veld toe knop om te beginnen. U ziet nu een formulier met de volgende velden:

  • veld Label is de naam die verschijnt tijdens het bewerken. Ik vind het nuttig om te beginnen met hetzelfde voorvoegsel op elk van mijn velden, bijvoorbeeld. Filmjaar, Filmregisseur, enz.
  • Veldnaam is de naam die u in uw code zult gebruiken om het veld weer te geven. Nadat u het veldlabel hebt ingevoerd, moet dit automatisch worden ingevuld. Dit is een enkel woord zonder spaties, maar streepjes en koppeltekens zijn toegestaan. Bijvoorbeeld, Filmjaar zoals een veldlabel zou veranderen movie_year als een veldnaam.
  • Veld soort is een standaard tekstveld (hoewel ACF ook meer geavanceerde opties biedt).
  • Veldinstructies zijn instructies die auteurs kunnen zien bij het toevoegen van de gegevens op het bewerkingsscherm, bijvoorbeeld "Het filmjaar moet altijd de Amerikaanse releasedatum zijn".
  • Verplicht is een radio doos waar u ja of nee kiest. Als u "Ja" kiest, betekent dit dat het veld moet worden ingevuld om op het berichtbewerkingsscherm op te slaan.
  • Standaardwaarde is de waarde die automatisch wordt weergegeven bij het maken van een nieuw bericht.
  • Placeholder-tekst verschijnt binnen uw invoer op het bewerkingsscherm.
  • Vooraan toevoegen definieertwat er vóór de invoer op het bewerkingsscherm verschijnt.
  • toevoegen definieert wat er verschijnt na de invoer op het bewerkingsscherm.
  • opmaak geeftu twee keuzes: "HTML converteren naar tags" (de standaardinstelling) of "geen opmaak". HTML naar tags converteren betekent dat elke HTML in uw invoer op het scherm wordt weergegeven; geen opmaak betekent dat HTML wordt genegeerd.
  • Tekenlimiet staat ons toe om het aantal tekens voor een invoer te beperken. Bijvoorbeeld op onze jaar invoer moeten we de tekens beperken tot vier.
  • Voorwaardelijke logica is een geavanceerdere functie waar we in dit artikel niet naar zullen kijken.

Deze velden verschijnen allemaal voor de tekst veldtype-op sommige andere veldtypen sommige van deze opties worden mogelijk niet weergegeven of er kunnen enkele extra opties zijn. Omdat we ook de. Zullen gebruiken aantal veldtype, er zijn enkele extra opties beschikbaar voor ons:

  • Minimale waarde is de minimum aantalwaarde die in het veld moet worden toegestaan. Voor onze score op tien velden zou het redelijk zijn om dit op één te zetten, omdat we niets als nul zullen scoren.
  • Maximale waarde is de maximale nummerwaarde die in het veld kan worden toegestaan. Nogmaals, we kunnen dit gebruiken voor onze score uit tien velden en we hebben de waarde als tien, omdat we niet willen dat deze waarde wordt overschreden.
  • Stapgrootte definieert de waarde waarmee een getal toeneemt wanneer een pijl wordt ingedrukt. In het geval van de filmscore, zou het een goed idee zijn om dit als één in te stellen.

Dit is hoe ik mijn velden heb ingesteld:

  • Veld Label: Filmjaar
  • Veldnaam: movie_year
  • Veld soort: Aantal
  • Verplicht: Ja
  • Minimale waarde: 1900
  • Maximale waarde: 2050

Let op de minimum- en maximumwaarden hier: ik heb deze ingesteld om een ​​aantal zeer eenvoudige validaties toe te voegen, omdat het onwaarschijnlijk is dat we een film ouder dan 1900 en een nieuwer dan 2050 in de levensduur van de website zullen hebben.

  • Veld Label: Filmregisseur
  • Veldnaam: filmregisseur
  • Veld soort: Tekst
  • Verplicht: Ja
  • opmaak: Geen opmaak

Omdat we onze output in onze HTML zullen opmaken, willen we niet dat redacteurs hier HTML kunnen toevoegen die onze lay-out kan verstoren. Daarom is hier "geen formattering" gekozen.

  • Veld Label: Movie Score
  • Veldnaam: movie_score
  • Veld soort: Aantal
  • Verplicht: Ja
  • Minimale waarde: 1
  • Maximale waarde: 10
  • Stapgrootte: 1

Nogmaals, we hebben hier een minimum- en een maximumwaarde ingesteld om enige validatie toe te voegen; onze scores zijn op tien, dus we willen niet dat redacteuren een hogere score kunnen invoegen. Evenzo willen we niet dat er scores worden ingevoegd die lager zijn dan één.

  • Veld Label: Movie IMDb Link
  • Veldnaam: movie_imdb_link
  • Veld soort: Tekst
  • Veld instructies: Plak hier de volledige IMDb-URL. bijv. http://www.imdb.com/title/tt2015381/
  • Verplicht: Ja
  • opmaak: Geen opmaak

Ik heb een aantal veldinstructies toegevoegd aan deze ingang, omdat er geen is URL veldtype, dus het is moeilijk te valideren. De instructies moeten het voor redacteuren gemakkelijker maken om te begrijpen hoe het veld moet worden gebruikt.

Nadat u al uw velden hebt toegevoegd, klikt u op de Bijwerken knop. Zodra je erop hebt geklikt kom je terug op de Veldgroep bewerken pagina. Er zijn nog een paar dingen die we op dit scherm moeten doen om ervoor te zorgen dat uw velden correct werken.


Onder het veldgebied wordt een vak genoemd Plaats-Hiermee kunnen we bepalen waar onze aangepaste velden worden weergegeven. We willen alleen onze aangepaste velden laten zien als het berichttype is film. Selecteer in de eerste vervolgkeuzelijst Berichttype, in de tweede keuzelijst selecteren is gelijk aan, en in de derde selecteren film.

Het laatste wat we hier moeten doen is instellen waar ons aangepaste veld op het bewerkingsscherm verschijnt. Blader hiervoor iets verder naar beneden opties sectie. Dit stelt ons in staat te kiezen waar de metabox voor het aangepaste veld zal verschijnen en welk type het is, en het geeft ons de mogelijkheid om andere dingen te verbergen in ons bewerkingsscherm.

De opties zijn als volgt:

  • Bestelnr: als u meerdere veldgroepen hebt, worden deze in de volgorde van laag naar hoog gemaakt.
  • Positie heeft drie opties:
    • Kant
    • Hoog (na titel)
    • Normaal (na inhoud)
  • Stijl: standaard of naadloos (zie onderstaande afbeelding voor het verschil tussen deze).
  • Verberg op het scherm: dit is een lijst met selectievakjes waarmee u dingen kunt verbergen die u misschien niet nodig hebt, zoals tags, categorieën of opmerkingen.

De opties die ik heb gebruikt zijn:

  • Positie: Kant
  • Stijl: Normaal

De rest bleef achter als hun standaardwaarden.

U kunt controleren of uw velden correct worden weergegeven door een nieuw bericht te plaatsen (in dit geval in de film berichttype). Als alles goed is verlopen, zie je je metabox. Dit is een goed moment om wat testgegevens toe te voegen.

Velden aan uw thema toevoegen

Nu u uw veldgroepen hebt gemaakt en wat testgegevens hebt, kunt u beginnen met het weergeven van de gegevens binnen uw thema of kindthema.

U kunt de standaard WordPress gebruiken get_post_meta () functie met ACF, maar het wordt aanbevolen dat u de eigen functies van ACF gebruikt, omdat ACF de waarden opmaakt, afhankelijk van het veldtype dat u hebt gemaakt. We gaan ACF's gebruiken het veld() functie. Deze functie geeft uw aangepaste veld weer en neemt een parameter van de veldnaam, bijvoorbeeld:

Laten we onze metagegevens aanpakken. We zullen al deze informatie in een single hebben div.

  • :
  • :
  • : / 10
  • "target =" _ blank ">

Deze code is vrij eenvoudig - we gebruiken de _e functie om onze strings te internationaliseren en te echoën, en vervolgens de ACF te gebruiken het veld() methode om de waarde van het veld dat we hebben gemaakt te herhalen. Dit alles is op een ongeordende lijst geplaatst, in een div element met een klasse van reviews-meta, zodat we het kunnen richten met onze CSS.

Waar gaat deze code naartoe? In dit geval is het het beste om een ​​nieuwe sjabloon voor uw berichttype te maken. Maak hiertoe een kopie van uw thema's single.php bestand en noem het single-postname.php-in ons geval single-movie.php. elk single.php ziet er anders uit, maar ze moeten allemaal één ding gemeen hebben: een WordPress-lus. Uw WordPress-lus zou er ongeveer zo uit moeten zien:

  

Uw aangepaste velden kunnen buiten de lus vallen en precies waar u ze plaatst, is afhankelijk van hoe u de pagina eruit wilt laten zien. In mijn geval (met het standaard Twenty Fourteen-thema) heb ik ze net onder de lus geplaatst en wat basisstyling toegepast op de .reviews-meta CSS-klasse.


Conclusie

We hebben de basisbeginselen van de plug-in Advanced Custom Fields besproken. Dat wil zeggen dat we enkele velden hebben toegevoegd en deze nu op onze site weergeven. Maar er is nog veel meer bij ACF en we hebben net de oppervlakte ingekrast. Er zijn veel meer veldtypen die u kunt gebruiken, evenals geavanceerdere functies zoals voorwaardelijke logica.

Aarzel niet om vragen, opmerkingen en algemene feedback achter te laten in het onderstaande formulier!