Advanced Custom Fields-handledning: Din Ultimata Guide

WordPress anpassade fält är en viktig del av det som gör WordPress till ett flexibelt innehållshanteringssystem, snarare än ”bara en bloggplattform”.

När det gäller WordPress anpassade fält, är freemium-pluginet Advanced Custom Fields ett av de mest kända namnen. Det gör det lättare att arbeta med anpassade fält i alla aspekter, och det är också ämnet för vårt inlägg idag.

Mer specifikt ska vi förklara varför Advanced Custom Fields är så värdefullt och sedan visa dig steg för steg hur du kan tillämpa det på din WordPress-webbplats.

Det här är allt du hittar i det här inlägget:

Det finns mycket att gå igenom, så låt oss komma igång!

Vad är WordPress anpassade fält? Vad låter de dig göra?

Med WordPress anpassade fält kan du lägga till, lagra och visa ytterligare information om en bit av innehåll i WordPress. På en mer teknisk nivå hjälper anpassade fält dig att lagra metadata.

Även om du inte är bekant med denna term driver anpassade fält mycket av funktionaliteten i dina favoritplugins och teman.

Till exempel använder WooCommerce, det mest populära sättet att bygga en e-handelsbutik, anpassade fält för att lagra ytterligare information om en produkt som:

• Pris
• Vikt
• Färg

Eller, om du har ett WordPress kalenderplugin, kommer det pluginet använda anpassade fält för att lagra extra information om en händelse som:

• Plats
• Start/sluttid
• Pris

Du kan också skapa egna anpassade fält för att lagra information som är relevant för dina unika behov, vilket är vad hela det här inlägget handlar om.

När borde du använda anpassade fält?

Nu kanske du undrar varför du ens behöver anpassade fält överhuvudtaget.

Om du till exempel vill lägga upp en händelse på din WordPress-webbplats, kunde du inte bara lägga all den informationen som vanlig text i WordPress-redigeraren?

Tja, du kan göra det. Men att använda anpassade fält är ett bättre tillvägagångssätt av några skäl:

• Enklare inmatning – i stället för att skriva allt från början, kommer en väl utformad Anpassad fält-grupp att göra det mycket lättare att mata in data. Till exempel, istället för att skriva ett datum kan du bara välja datum från en datumväljare.
• Konsekvens – den information du anger i dina anpassade fält visas alltid enligt dina inställningar, vilket innebär att den kommer att vara konsekvent över hela din webbplats.
• Enkla uppdateringar och underhåll – om du vill ändra något om hur den informationen visas i framtiden, kan du bara uppdatera en sak snarare än att behöva redigera varje inlägg individuellt.

WordPress inkluderar inbyggd Anpassade fält-funktionalitet

WordPress innehåller faktiskt inbyggd funktionalitet för att lägga till anpassade fält till ditt innehåll. I den klassiska TinyMCE-redigeraren kan du aktivera detta från Skärmalternativ. I den nya blockredigeraren kan du aktivera den från Alternativ.

Du kan sedan ange dina anpassade fält-data med nyckel/värdepar:

Denna inbyggda anpassade fält-funktionalitet är helt funktionell, men det är inte det mest användarvänliga sättet att göra saker, vilket är anledningen till att en hel del människor vänder sig till pluginet Advanced Custom Fields istället.

Advanced Custom Fields gör det mycket enklare

Enkelt uttryckt, Advanced Custom Fields gör det mycket lättare att arbeta med anpassade fält i WordPress i… i princip alla aspekter.

Det förenklar gränssnittet för att lägga till och hantera anpassade fält i din WordPress-panel och det förenklar också processen för att visa information från anpassade fält på frontenden på din webbplats. Detta faktum hjälper till att förklara varför det är aktivt på mer än 1 miljoner webbplatser med 4,9 stjärnor med över 1,000 recensioner.

På backenden låter det dig skapa användarvänliga metarutor som innehåller förvalda fälttyper. Så, snarare än det generiska nyckel-värdesparet (som de du såg ovan), kommer du att kunna använda datumväljare, kryssrutor och mer, så här:

Totalt erbjuder Advanced Custom Fields 30+ olika fälttyper som du kan lägga till i vilket område som helst i panelen, inklusive inlägg, användare, taxonomier, media, kommentarer och till och med anpassade alternativsidor.

Du kan visa detaljerad information om varje fälttyp här.

Advanced Custom Fields gör det också mycket lättare att visa den informationen, med väldokumenterade funktioner, kortkoder, Gutenberg-block och mer.

Du kan också hitta integrationer med andra verktyg, som vissa dra och släpp-sidbyggare för WordPress.

Advanced Custom Fields Gratis vs Pro: Vilken behöver du?

Advanced Custom Fields kommer både i en gratis samt en prisvärd premiumversion.

För de flesta grundläggande användningsområden är gratisversionen helt okej. Det ger dig tillgång till nästan alla fälttyper, liksom alla tidsbesparande och användarvänliga funktioner som beskrivs ovan.

Om du bara vill lagra lite extra information om ditt innehåll, är gratisversionen allt du behöver.

Med det sagt lägger Pro-versionen till några ganska praktiska funktioner som hjälper dig att använda Advanced Custom Fields på mer intressanta sätt:

• Upprepningsfält – dessa låter dig upprepa vissa fält/grupper av fält enskilt för varje inlägg. Om du till exempel lägger till information om en talare till en händelse, skulle ett upprepningsfält hjälpa dig att hantera situationen där det finns mer än en talare (du kan helt enkelt ”upprepa” fältet/fälten för talare så många gånger som behövs, vilket gör att du kan hantera fall där det finns flera talare).
• ACF-block – visa dina fält som ett Gutenbergblock, snarare än en metabox. Detta är särskilt praktiskt om du bygger en webbplats för en klient och vill ge dem ett enkelt sätt att mata in och visualisera anpassade fältdata.
• Flexibelt innehållsfält – skapa layouter från andra fält. Det är ungefär som en lätt sidbyggare baserad på anpassad fält-information.
• Gallerifält – ladda upp flera bilder till ett enda fält.

Det finns också några andra skillnader, som alternativsidor, möjligheten att klona fält, förbättringar av relationsfälten och andra mindre justeringar.

Du kan se alla ACF PRO-funktioner här.

ACF PRO kostar från $25 för livstidsanvändning på en enskild webbplats. Annars kan du betala $100 för livstidsanvändning på obegränsade platser.

Om du är osäker, börja med gratisversionen tills du identifierat exakt vilken funktionalitet du behöver. Du kan alltid uppgradera senare om det behövs.

Advanced Custom Fields-handledning: Så här lägger du till dina fält

Låt oss nu gräva i själva Advanced Custom Fields-handledningen så ska jag visa dig hur du skapar och visar din första uppsättning anpassade fält.

Låt oss säga att du har en blogg om löpning. Du gillar verkligen att springa och du vill dela dina dagliga träningspass med dina läsare. Specifikt, med varje blogginlägg, vill du dela en löprundas:

• Syfte – låt oss säga att du har två olika typer av löpning: ”hastighetsträning” och ”konditionsträning”.
• Avstånd – hur lång din löprunda var.
• Starttid – när du började din löprunda.
• Sluttid – när du avslutade din löprunda.
• Plats – där din löprunda ägde rum.

För att samla den informationen behöver du lägga till fem anpassade fält.

Det är viktigt att notera att de principer du lär dig i denna Advanced Custom Fields-handledning gäller för alla användningsfall. Vi väljer bara ett specifikt exempel eftersom det är hjälpsamt att ha ett konkret exempel för att förstå.

Vi kommer att dela upp denna handledning i två delar:

1. Så här lägger du till och hanterar dina anpassade fält på backenden.
2. Så här visar du anpassad fältinformation på frontenden av din webbplats.

1. Skapa en ny Fältgrupp

När du har installerat och aktiverat gratisversionen av Advanced Custom Fields från WordPress.org, gå till Anpassade Fält > Lägg till nytt för att skapa din första Fältgrupp.

Som namnet antyder är en ”Fältgrupp” en grupp av ett eller flera anpassade fält som visas tillsammans i din WordPress-panel.

I det här exemplet skapar du en fältgrupp som innehåller fem anpassade fält.

Ge din fältgrupp ett namn och välj sedan dess plats. För det här exemplet vill vi visa dessa anpassade fält för vanliga WordPress blogginlägg, så du kan lämna det som standard, vilket är Inlägg.

Men om du vill visa dina anpassade fält någon annanstans, som vid sidan av en anpassad inläggstyp eller med en taxonomi, behöver du ändra detta. Du kan också ställa in flera regler för att visa dina fält på flera platser:

2. Lägg till anpassade fält

Klicka sedan på knappen + Lägg till fält för att lägga till ditt första anpassade fält:

Detta kommer att öppna en hel del alternativ, men du behöver inte nödvändigtvis fylla i allt.

De två viktigaste valen är:

• Fältetikett – det här visas i redigeraren. Det kommer också att användas för att generera fältnamnet, vilket är vad du använder i koden. Du behöver inte ändra fältnamnet (men du kan om du behöver).
• Fälttyp – det här är den typ av information du vill samla in. Du vill till exempel att ett nummerfält samlar in nummerinformation eller att ett e-postfält ska samla in en e-postadress.

För det första fältet vill du ha en Radioknapp-fälttyp:

Längre ner kan du ange alternativ för val av radioknapp i rutan Val:

Det finns också ett antal andra val du kan göra, som om ett fält krävs eller inte och ett standardvärde. Du kan konfigurera dessa efter dina behov.

Låt oss titta på ett annat exempel: ett eget fält för att samla in avståndet för löprundan. Den här gången vill du ha en nummerfälttyp:

Du kan också göra saker och ting lite mer användarvänliga genom att välja att Lägga till avståndsenheten. Och om du vill kan du också lägga till validering med ett Lägsta värde och Högsta värde. Till exempel, du kommer förmodligen inte springa 100 mil i taget (och om du gör det… OMG, du är den ultimata Forrest Gump)!

Bara upprepa processen för alla andra anpassade fält du vill samla in. När det är klart ska det se ut så här:

3. Konfigurera inställningar och publicera

För att göra färdigt, bläddra ner till rutan Inställningar. Här kan du styra hur dina fält visas i WordPress-redigeraren

För det mesta kan du lämna dessa som de är. Men ändra det gärna om du vill. Du kan till exempel välja att visa dina anpassade fält ovanför den vanliga WordPress-redigeraren:

När du har gjort dina val, publicera din fältgrupp för att ta den live.

4. Lägg till lite information i WordPress-redigeraren

När du har publicerat din fältgrupp visas dina fält när du går till att skapa ett nytt inlägg.

Som standard visas de tillsammans under redigeraren i både den klassiska TinyMCE-redigeraren och den nya blockredigeraren:

Den information du anger här kommer att lagras i din webbplats WordPress-databas för enkel hämtning (du kommer se det i nästa del av vår Advanced Custom Fields handledning).

Utforska villkorlig logik

Innan vi går vidare, låt oss ta en snabb avstickare.

En av anledningarna till att Advanced Custom Fields är så populärt är av alla intressanta implementeringar det tillåter.

Och ett kraftfullt alternativ här är villkorlig logik, som låter dig visa/dölja fält baserat på hur ett tidigare fält besvarades.

Låt oss titta på ett snabbt exempel på hur det här fungerar…

Låt oss säga att du vill blogga om mat, dina resor eller något annat än att springa. När du skriver om ett ämne som inte handlar om löpning är det ingen idé att visa de anpassade fälten för information om löpningen, eller hur?

Tänk om du istället för att automatiskt visa alla anpassade fält du just skapat kan lägga till ett eget fält som säger ”är det här inlägget en löprunda?”:

Om du markerar rutan visas fälten för löpinformation automatiskt. Om du lämnar det omarkerat förblir de dolda:

Det är vad villkorlig logik låter dig göra!

För att ställa in detta, behöver du redigera din fältgrupp och lägga till ett nytt sant/falskt fält för ”är detta en löprunda?”:

Sedan behöver du redigera de befintliga fälten och aktivera villkorlig logik så att varje fält bara visas när ”är detta en löprunda?”-fältet är markerat:

Så här visar du Advanced Custom Fields på frontenden

Okej, vi är halvvägs genom vår Advanced Custom Fields-resa. Du kan nu lägga till information i dina anpassade fält, associera den med den relevanta inläggstypen och lagra den i din databas.

Det finns dock fortfarande ett potentiellt problem: informationen från dina anpassade fält visas inte någonstans på frontenden ännu!

Alltså; även om du har lagt till anpassade fält till redigeraren för dina blogginlägg, ser ditt blogginlägg fortfarande ut som ett vanligt blogginlägg på frontenden:

Vi ska fixa det.

Det finns några olika sätt du kan visa Advanced Custom Fields-data på frontenden av din webbplats. Vilken metod du väljer beror på dina behov och kunskapsnivå. Här är tre olika sätt att uppnå det:

1. Ditt temas mallfiler – detta kräver lite teknisk kunskap, men det är det bästa tillvägagångssättet för det mesta, speciellt om du är bekväm med att arbeta i temats mallfiler.
2. Med en kortkod – det här är superenkelt och ett bra alternativ om du bara vill infoga anpassade fält-data från fall till fall. Det kräver dock mycket mer manuellt arbete eftersom du måste lägga till kortkoder till varje inlägg.
3. Med Elementor Pro – det här är jättebra eftersom det helt eliminerar behovet av att arbeta med PHP, men det är en premiumprodukt och det betyder också att du måste använda Elementor Pro för dina mallar.

Du kan klicka ovan för att hoppa direkt till en viss metod eller så kan du läsa igenom dem alla. Det är upp till dig.

Så här lägger du till Advanced Custom Fields i temats mallfiler

Det första sättet att visa din anpassade fält-information är att lägga till Advanced Custom Fields PHP-funktioner direkt till ditt barntemas mallfiler.

Det här är lite avancerat eftersom det kräver att du gräver i temats mallfiler, men det säkerställer att dina anpassade fält automatiskt visas på samma plats varje gång.

Specifikt måste du redigera single-mallen för inläggstypen i fråga.

För ett vanligt blogginlägg är detta single.php. Vissa teman delar upp saker och ting i malldelar. För TwentyNineteen-temat behöver du till exempel faktiskt redigera malldelen content-single.php.

Om du känner dig vilse här, kanske du borde använda en annan metod.

När du har hittat temamallfilen för ditt inlägg kan du använda Advanced Custom Fields the_field()-funktion för att visa ett fälts information. Exempelvis,

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

Läs mer här om det.

Om du till exempel vill visa fältet ”syfte” använder du

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

Du kan hitta fältnamnet när du redigerar en fältgrupp:

Så att kombinera liten HTML-kod med PHP, kan ge dig något som detta för att visa alla fält:

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

Om du vill lägga till detta ovanför det vanliga innehållet i inlägget lägger du till det här i ditt temas mallfil ovanför the_content():

Och nu, efter att ha uppdaterat blogginlägget, kan du se anpassade fältdata ovanför det vanliga WordPress-innehållet:

Om du vill veta mer kan du kolla in Advanced Custom Fields fullständiga dokumentation.

Så här visar du Advanced Custom Fields data med en kortkod

För ett mycket enklare sätt att visa dina anpassade fältdata kan du också använda kortkoder. Nackdelen här är dock att du måste lägga till kortkoden varje gång du vill visa ett anpassat fält. Det finns inget enkelt sätt att automatisera denna uppgift.

Kortkoden är detta:

[acf field="FIELD_NAME"]

Till exempel, om du har angett detta i WordPress-redigeraren:

Då skulle frontenden av din webbplats se exakt likadan ut som föregående temamallmetod:

Så här visar du Advanced Custom Fields med Elementor Pro

Elementor är en av de mest populära sidbyggarna för WordPress. Det låter dig bygga dina designer med hjälp av visuell, dra och släpp-redigering. Elementor en av Kinstas officiella partners.

Med Elementor Pro, det betalda tillägget, kan du också bygga ditt temas mallfiler, inklusive ett alternativ för att infoga dynamiska anpassade fältdata från Advanced Custom Fields i din design.

Det här är ett bra alternativ om du vill ha flexibiliteten att automatiskt inkludera anpassade fältdata i dina mallar, men känner dig inte bekväm att göra direkta kodredigeringar till ditt temas mallfiler.

För att komma igång behöver du gå till Mallar > Temabyggare och skapa en ny Elementor-mall för ditt inläggs Single:

Du kan lägga till vanliga Elementor-widgets för din Inläggstitel och Inläggsinnehåll. För att visa anpassade fältdata, behöver du sedan lägga till vanliga Textredigerare-widgets. Den enda skillnaden här är att du istället för att redigera texten, skulle välja det Dynamiska alternativet:

Därefter kan du välja ACF-fält från rullgardinsmenyn:

Därifrån kan du välja det specifika fält du lagt till med Advanced Custom Fields:

Och du kan också använda dragspelsfliken Avancerat för att förbereda eller lägga till information, som låter dig lägga till etiketter och enheter:

Lätt, eller hur? Upprepa nu bara för de andra anpassade fälten!

Sammanfattning

Med hjälp av Advanced Custom Fields kan du berika dina sidor och blogginlägg med mer data och information med en lättanvänd lösning. Dessutom kan du börja samla in ytterligare information för innehåll på din webbplats och sedan visa den på frontenden för dina besökare.

För att göra det har du 3 alternativ:

• Mallfiler för ditt tema
• Med en kortkod
• Med Elementor Pro

Den kunskap du har fått i det här inlägget låter dig låsa upp den enorma potentialen hos WordPress för att bygga 100% anpassade webbplatser som går långt utöver WordPress bloggrötter.

Den enda frågan som kvarstår är denna:

Vad kommer du skapa med Advanced Custom Fields? Dela det med oss i kommentarerna nedan!