Advanced Custom Fields tutorial: Din ultimative guide

WordPress brugerdefinerede felter er en vigtig del af det, der gør WordPress til et fleksibelt content management system, snarere end “bare en blogplatform”.

Når det kommer til WordPress brugerdefinerede felter, er freemium Advanced Custom Fields plugin et af de mest kendte navne. Det gør det lettere at arbejde med brugerdefinerede felter i alle aspekter, og det er også emnet for vores indlæg i dag.

Specifikt forklarer vi, hvorfor advanced custom fields er så værdifulde, og viser dig derefter trin for trin, hvordan du kan anvende det på dit WordPress-sted.

Her er alt, hvad du finder i dette indlæg:

Der er meget at dække, så lad os dykke ind…

Hvad er WordPress brugerdefinerede felter? Hvad lader de dig gøre?

WordPress brugerdefinerede felter giver dig mulighed for at tilføje, gemme og vise yderligere oplysninger om et stykke content i WordPress. På et mere teknisk niveau hjælper brugerdefinerede felter dig med at gemme metadata.

Selv hvis du ikke er bekendt med dette udtryk, bruger brugerdefinerede felter meget af funktionaliteten i dine foretrukne plugins og temaer.

For eksempel bruger WooCommerce, den mest populære måde at oprette en eCommerce-butik på, brugerdefinerede felter til at gemme yderligere oplysninger om et produkt som:

• Pris
• Vægt
• Farve

Eller, hvis du har et WordPress event calendar plugin, bruger det plugin brugerdefinerede felter til at gemme ekstra information om en begivenhed, såsom:

• Beliggenhed
• Start / sluttid
• Pris

Du kan også oprette dine egne brugerdefinerede felter til at gemme oplysninger, der er relevante for dine unikke behov, og det er det, dette hele indlæg handler om.

Hvornår skal du bruge brugerdefinerede felter?

Nu kan du undre dig over, hvorfor du endda har brug for brugerdefinerede felter i første omgang.

Hvis du f.eks. vil sende en begivenhed på dit WordPress-sted, kunne du så ikke bare placere alle disse oplysninger som almindelig tekst i WordPress-editoren?

Nå, ja, det kunne du. Men at bruge brugerdefinerede felter er en bedre tilgang af et par grunde:

• Nemmere input – snarere end at skrive ting fra bunden af, en veludformet brugerdefineret feltgruppe vil det gøre det meget lettere at indtaste data. I stedet for at skrive en dato kan du f.eks. bare vælge datoen fra en datavælger.
• Konsistens – de oplysninger, du indtaster i dine brugerdefinerede felter, vises altid i henhold til din opsætning, hvilket betyder, at de vil være konsistente på hele dit websted.
• Nemme opdateringer og vedligeholdelse – hvis du vil ændre noget om, hvordan disse oplysninger vises i fremtiden, kan du bare opdatere en ting i stedet for at skulle redigere hvert indlæg hver for sig.

WordPress inkluderer indbyggede brugerdefinerede feltfunktioner

WordPress inkluderer faktisk indbygget funktionalitet til tilføjelse af brugerdefinerede felter til dit indhold. I classic TinyMCE-editor kan du aktivere dette fra området Skærmindstillinger. Eller i den nye blokeditor kan du aktivere det fra området Indstillinger:

Du kan derefter indtaste dine brugerdefinerede feltdata vha. key / value pairs:

Denne oprindelige brugerdefinerede feltfunktionalitet er fuldstændig funktionel, men det er ikke den mest brugervenlige måde at gøre ting på, hvilket er grunden til, at mange mennesker henvender sig til det avancerede tilpassede felt-plugin i stedet.

Advanced Custom Fields gør det meget lettere

Kort sagt, Advanced Custom Fields gør det meget lettere at arbejde med brugerdefinerede felter i WordPress i… stort set alle aspekter.

Det forenkler grænsefladen til at tilføje og administrere brugerdefinerede felter i dit WordPress-dashboard, og det forenkler også processen til visning af oplysninger fra brugerdefinerede felter på fronten af ​​dit websted. Denne kendsgerning hjælper kun med at forklare, hvorfor den er aktiv på mere end 1 million websteder med en 4.9-stjerneklassificering på over 1.000 anmeldelser.

På backend giver det dig mulighed for at oprette brugervenlige meta bokse, der indeholder forudvalgte felttyper. Så snarere end den generiske grænseflade for nøgle-værdipar (som dem, du så ovenfor), kan du bruge dataplukkere, afkrydsningsfelter og mere som dette:

I alt tilbyder advanced custom fields 30+ forskellige felttyper, som du kan tilføje til ethvert område i dit dashboard, herunder indlæg, brugere, taksonomier, medier, kommentarer og endda sider med tilpassede indstillinger.

Du kan se detaljerede oplysninger om hver felttype her.

Advanced custom fields gør det også meget lettere at få vist disse oplysninger med veldokumenterede funktioner, kortkoder, Gutenberg-blokke med mere.

Eller du kan finde integrationer med andre værktøjer, som nogle drag-and-drop WordPress page builders.

Advanced Custom Fields gratis vs pro: Hvilken skal du bruge?

Advanced custom fields findes både i en gratis og en overkommelig premium-version.

Til de fleste basale anvendelser er den gratis version helt fin. Det giver dig adgang til næsten alle felttyper samt alle de tidsbesparende og brugervenlige funktioner, der er beskrevet ovenfor.

Hvis du bare vil gemme nogle ekstra oplysninger om dit indhold, er den gratis version alt hvad du har brug for.

Når det er sagt tilføjer Pro-versionen nogle ret praktiske funktioner, der hjælper dig med at bruge advanced custom fields på mere interessante måder:

• Repeater fields – disse giver dig mulighed for at gentage bestemte felter / grupper af felter post-for-post-basis. For eksempel, hvis du tilføjede oplysninger om en højttaler til en begivenhed, ville et repeater-felt hjælpe dig med at håndtere situationen, hvor der er mere end en højttaler (du kan bare “gentage” felt (er) for højttaleren så mange gange som nødvendigt , som giver dig mulighed for at håndtere kant-tilfælde, hvor der er flere højttalere).
• ACF-blokke – vis dine felter som en blok Gutenberg snarere end en metaboks. Dette er især praktisk, hvis du bygger et websted til en klient og ønsker at give dem en nem måde at indtaste og visualisere tilpassede feltdata.
• Fleksibelt indholdsfelt – opret layout fra andre felter. Det er ligesom en let sidebygger baseret på brugerdefinerede feltoplysninger.
• Gallerifelt – upload flere billeder til et enkelt felt.

Der er også nogle andre forskelle, f.eks. indstillingssider, muligheden for at klone felter, forbedringer af relationsfelterne og andre mindre justeringer.

Du kan se alle ACF PRO-funktionerne her.

ACF PRO starter ved 25 USD for livstids brug på et enkelt sted. Eller du kan betale 100 USD for livstid på ubegrænsede websteder.

Hvis du er i tvivl, skal du starte med den gratis version, indtil du finder ud af nøjagtigt, hvilken funktionalitet du har brug for. Du kan altid opgradere senere, hvis nødvendigt.

Avanceret brugerdefinerede felt tutorial: Sådan tilføjes dine felter

Lad os nu grave dig ind i den egentlige guiden til advanced custom fields og jeg viser dig, hvordan du opretter og viser dit første sæt tilpassede felter.

For dette eksempel, lad os sige, at du har en blog om at køre. Du har lyst til … virkelig at løbe, og du vil dele dine daglige træningspunkter med dine læsere. Specifikt, med hvert blogindlæg, vil du dele et løb:

• Formål – lad os sige, at du har to forskellige typer kørsel: “speed arbejde” og “conditioning”.
• Afstand – hvor lang tid dit løb var.
• Starttid – da du startede dit løb.
• SLuttid – når du er færdig med løbet.
• Lokation – hvor dit løb fandt sted.

For at indsamle disse oplysninger skal du tilføje fem brugerdefinerede felter.

Det er vigtigt at bemærke, at de principper, du lærer i denne vejledning til advanced custom fields, gælder for enhver brugssag. Vi vælger bare et specifikt eksempel, fordi det hjælper med at have et konkret eksempel at oprette forbindelse til.

Vi opdeler denne tutorial i to dele:

1. Sådan tilføjes og administreres dine brugerdefinerede felter på backend.
2. Sådan vises brugerdefinerede feltoplysninger på fronten på dit websted.

1. Opret en ny feltgruppe

Når du har installeret og aktiveret den gratis version af advanced custom fields fra WordPress.org, skal du gå til Advanced custom fields > Tilføj nyt for at oprette din første feltgruppe.

Som navnet antyder er en “Feltgruppe” en gruppe af et eller flere brugerdefinerede felter, der vises sammen i dit WordPress-dashboard.

I dette eksempel opretter du en feltgruppe, der indeholder fem brugerdefinerede felter.

Giv din feltgruppe et navn, og vælg derefter dens lokation. I dette eksempel ønsker vi at vise disse brugerdefinerede felter til almindelige WordPress-blogindlæg, så du kan forlade det som standard indlæg.

Hvis du imidlertid vil vise dine brugerdefinerede felter andre steder, som ved siden af ​​en brugerdefineret posttype eller med en taksonomi, vil du gerne ændre dette. Du kan også konfigurere flere regler til at vise dine felter flere steder:

2. Tilføj brugerdefinerede felter

Klik derefter på knappen + Tilføj felt for at tilføje dit første brugerdefinerede felt:

Dette åbner mange muligheder, men du behøver ikke nødvendigvis at udfylde alt.

De to vigtigste valg er:

• Feltmærke – det er, hvad der vises i editoren. Det vil også blive brugt til at generere feltnavnet, som er det, du vil bruge i koden. Du behøver ikke at ændre feltnavnet (skønt du kan, hvis du skal).
• Felttype – dette er den type information, du vil indsamle. For eksempel vil du have et nummerfelt til at indsamle nummeroplysninger eller et e-mail felt for at indsamle en e-mail-adresse.

I dette første felt ønsker du en feltknap for radioknap:

Længere nede kan du indtaste valgmulighederne for valg af alternativknapper i boksen Valg:

Der er også en række andre valg, du kan tage, som om et felt er påkrævet eller en standardværdi. Du er velkommen til at konfigurere disse til dine behov.

Lad os se på et andet eksempel: et brugerdefineret felt til at samle afstanden til løbet. Denne gang vil du have en nummer felttype:

Du kan også gøre tingene lidt mere brugervenlige ved at vælge at tilføje afstandsenheden. Og hvis du vil, kan du også tilføje validering med en minimumsværdi og en maksimal værdi. For eksempel starter du sandsynligvis ikke på 1000 km løb (og hvis du gør … OMG, så er du den ultimative Forrest Gump)!

Gentag bare processen for alle de andre brugerdefinerede felter, du vil indsamle. Når det er gjort, skal det se sådan ud:

3. Konfigurer indstillinger og offentliggør

For at afslutte tingene skal du rulle ned til indstillings feltet. Her kan du kontrollere, hvordan dine felter vises i WordPress-editoren.

Det meste af tiden kan du lade disse være som standard. Men ændre gerne lidt i tingene, hvis du vil. For eksempel kan du vælge at vise dine brugerdefinerede felter over den almindelige WordPress-editor:

Når du har truffet dine valg, skal du offentliggøre din feltgruppe for at sætte den live.

4. Tilføj nogle oplysninger i WordPress Editor

Når du har offentliggjort din feltgruppe, ser du dine felter vises, når du går til at oprette et nyt indlæg.

Som standard vises de sammen under redaktøren i både den klassiske TinyMCE-editor og den nye blokeditor:

De oplysninger, du indtaster her, gemmes i dit websteds WordPress-database for en let hentning (du ser det i den næste del af vores vejledning til advanced custom fields).

Udforskning af conditional logic

Før vi går videre, lad os tage en hurtig omvej.

Se, en af grundene til, at advanced custom fields er så populær, er på grund af alle de interessante implementeringer, det tillader.

Og en kraftfuld mulighed her er Conditional Logic, som lader dig vise / skjule felter baseret på, hvordan et tidligere felt blev besvaret.

Lad os se på et hurtigt eksempel på, hvordan dette fungerer…

Lad os sige, at du vil blogge om mad, dine rejser eller andet end at løbe. Når du skriver om et ikke-kørt emne, giver det ikke meget mening at vise de tilpassede felter til information om kørslen, ik?

Hvad hvis du i stedet for automatisk at vise alle de brugerdefinerede felter, du lige har oprettet, kunne tilføje et brugerdefineret felt, der siger “Er dette indlæg kørt?”:

Hvis du markerer afkrydsningsfeltet, vises feltoplysningerne om kørsel automatisk. Hvis du lader det ikke være markeret, forbliver de skjult:

Det er hvad conditional logic giver dig mulighed for!

For at konfigurere dette, redigerer du din feltgruppe og tilføjer et nyt sandt / falskt felt til “Er dette et løb?”:

Derefter redigerer du de eksisterende felter og aktiverer Conditional Logic, så hvert felt kun vises, når feltet “Er dette et løb?” Er markeret:

Sådan vises advanced custom fields på frontend

Ok, vi er halvvejs gennem vores avancerede Custom Fields-rejse. Du kan nu tilføje oplysninger til dine brugerdefinerede felter, knytte dem til den relevante indlægstype og gemme dem i din database.

Der er dog stadig et potentielt problem: Oplysningerne fra dine brugerdefinerede felter vises ikke nogen steder på frontend endnu!

Det er, selvom du har tilføjet nogle brugerdefinerede felter til redigeringsprogrammet til dine blogindlæg, ligner dit blogindlæg stadig bare et normalt blogindlæg på frontend:

Lad os fixe det.

Der er nogle få forskellige måder, du kan vise data om advanced custom fields på fronten af ​​dit websted. Den nøjagtige metode, du vælger, afhænger af dine behov og vidensniveau. Her er tre forskellige måder at opnå dette:

1. Dit temas skabelonfiler – dette kræver lidt teknisk viden, men det er den bedste fremgangsmåde det meste af tiden, især hvis du har det godt med at arbejde i dit temas skabelonfiler.
2. Med en shortcode – dette er superenkelt og en god mulighed, hvis du bare vil indsætte brugerdefinerede feltdata fra sag til sag. Det kræver dog meget mere manuelt arbejde, fordi du bliver nødt til at tilføje shortcodes til hvert indlæg.
3. Med Elementor Pro – dette er fantastisk, fordi det helt eliminerer behovet for at arbejde med PHP, men det er et premiumprodukt, og det betyder også, at du bliver nødt til at bruge Elementor Pro til din templering.

Du kan klikke ovenfor for at springe direkte til en bestemt metode, eller du kan læse dem alle igennem. Op til dig.

Sådan tilføjes advanced custom fields i tema-skabelonfiler

Den første måde at få vist dine brugerdefinerede feltoplysninger er at tilføje advanced custom fields PHP-funktioner direkte til dit child themes skabelonfiler.

Dette er lidt avanceret, fordi det kræver, at du grave i dit temas skabelonfiler, men det sikrer, at dine brugerdefinerede felter automatisk vises på samme sted hver gang.

Specifikt skal du redigere den enkelte skabelon for den pågældende indlægstype.

For et regelmæssigt blogindlæg er dette single.php. Eller nogle temaer opdeler ting i skabelondele. For f.eks. TwentyNineteen-temaet skal du faktisk redigere skabelondelen content-single.php.

Hvis du føler dig fortabt her, kan du bruge en anden metode.

Når du har fundet temaskabelonfilen til dit enkelt indlæg, kan du bruge advanced custom fields ‘the_field() -funktionen til at få vist et feltoplysninger. For eksempel,

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

Lær mere om det her.

For eksempel, for at vise feltet “Purpose”, skal du bruge

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

Du kan finde feltnavnet, når du redigerer en feltgruppe:

Så hvis du kombinerer en lille HTML-markering med PHP, får du muligvis noget lignende til at vise alle felterne:

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

For at tilføje dette over det almindelige indlægs-indhold skal du tilføje dette til din temaskabelon-fil over the_content():

Og nu, efter at du har opdateret blogindlægget, kan du se de brugerdefinerede feltdata over det almindelige WordPress-indhold:

Hvis du vil vide mere, kan du se de fulde dokumentation på Advanced Custom Fields.

Sådan vises avancerede brugerdefinerede feltdata med en short code

For en meget enklere måde at få vist dine brugerdefinerede feltdata kan du også bruge shortcodes. Ulempen her er dog, at du bliver nødt til at tilføje shortcode den hver gang du ønsker at få vist et brugerdefineret felt. Der er ingen nem måde at automatisere denne opgave på.

shortcode er denne:

[acf field="FIELD_NAME"]

Hvis du f.eks. indtastede dette i WordPress-editoren:

Derefter ser fronten på dit websted nøjagtigt ud som den foregående temaskabelonmetode:

Sådan vises aadvanced custom fields med Elementor Pro

Elementor er en af de mest populære WordPress-sidebygere. Det giver dig mulighed for at opbygge dine designs ved hjælp af visuel, drag-n-drop-redigering. En lille sidenote, Elementor er en af Kinstas officielle partnere.

Med Elementor Pro, den betalte tilføjelse, kan du også opbygge dit temas skabelonfiler, herunder en mulighed for at indsætte dynamiske brugerdefinerede feltdata fra advanced custom fields i dine design.

Dette er en fantastisk mulighed, hvis du vil have fleksibiliteten til automatisk at inkludere brugerdefinerede feltdata i dine skabeloner, men ikke har det godt med at udføre direkte kodeændringer til dit temas skabelonfiler.

For at komme i gang skal du gå til Skabeloner > Temabygger og oprette en ny Elementor-skabelon til dit indlæg Enkelt:

Du kan tilføje de almindelige Elementor-widgets til dit indlægstitel og dit indhold. For at få vist de brugerdefinerede feltdata tilføjede du almindelige tekstredigerings-widgets. Den eneste forskel her i stedet for at redigere teksten, ville du vælge den Dynamic indstilling:

Efter dette kan du vælge ACF-field i rullemenuen:

Derfra kan du vælge det specifikke felt, du tilføjede med advanced custom fields:

Og du kan også bruge fanen Advanced accordion til at afhænge eller tilføje oplysninger, som giver dig mulighed for at tilføje etiketter og enheder:

Let, ikke? Gentag nu bare for andre brugerdefinerede felter!

Resumé

Ved hjælp af advanced custom fields kan du berige dine sider og blogindlæg med mere data og information med en brugervenlig løsning. Mere: du kan begynde at indsamle yderligere oplysninger om ethvert indhold på dit websted og derefter vise det på fronten for dine besøgende.

For at gøre det har du 3 muligheder:

• Dit temas skabelonfiler
• Med en kort kode
• Med Elementor Pro

Den viden, du har fået i dette indlæg, giver dig mulighed for at låse op for WordPress’ dybe potentiale til at opbygge 100% brugerdefinerede websteder, der går langt ud over WordPress’ bloggerødder.

Det eneste spørgsmål, der er tilbage, er dette:

Hvad opretter du med advanced custom fields? Del det med os i kommentarerne herunder.

Matteo Duò Kinsta

Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.

• Hjemmeside
• LinkedIn
• Twitter