Articles

Advanced Custom Fields Tutorial: din ultimative Guide

brugerdefinerede felter er en vigtig del af, hvad der gør til et fleksibelt indholdsstyringssystem snarere end “bare en blogplatform”.når det kommer til 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.vi forklarer specifikt, hvorfor avancerede brugerdefinerede felter er så værdifulde, og viser dig derefter trin for trin, hvordan du kan anvende det på din hjemmeside.

Her er alt, hvad du finder i dette indlæg:
der er meget at dække, så lad os dykke ind…

hvad er Advanced Custom Fields plugin?

udviklet af Elliot Condon, avancerede brugerdefinerede felter — ofte forkortet som ACF — er et plugin, der giver dig mulighed for at tilføje og administrere brugerdefinerede felter til et sted. Det er tilgængeligt både som gratis plugin og et premium plugin, kaldet ACF PRO, der starter ved $25 for livstidsopdateringer og for 1 site.

Support

hvad er brugerdefinerede felter? Hvad Lader De Dig Gøre?

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

selvom du ikke er bekendt med dette udtryk, bruger brugerdefinerede felter meget af funktionaliteten i dine foretrukne plugins og temaer.den mest populære måde at opbygge en e-handelsbutik på, bruger brugerdefinerede felter til at gemme yderligere oplysninger om et produkt som:

  • pris
  • vægt
  • farve

eller, hvis du har et plugin til begivenhedskalender, bruger dette plugin brugerdefinerede felter til at gemme ekstra oplysninger om en begivenhed som:

  • placering
  • Start/sluttid
  • pris

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

hvor cool er brugerdefinerede felter i Eh? Lær at drage fordel af dem med den fantastiske @ i vores seneste guide!

Hvornår skal du bruge brugerdefinerede felter?

nu undrer du dig måske over, hvorfor du endda har brug for brugerdefinerede felter i første omgang.

Hvis du f. eks. vil skrive en begivenhed på din hjemmeside, kan du så ikke bare lægge alle disse oplysninger som almindelig tekst i editoren?

Nå, ja, du kunne. Men at bruge brugerdefinerede felter er en bedre tilgang af nogle få grunde:

  • lettere input — i stedet for at skrive ting fra bunden, vil en veludlagt brugerdefineret feltgruppe gøre det meget lettere at indtaste data. For eksempel, i stedet for at skrive en dato, du kan bare vælge datoen fra en datovæ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å tværs af hele din side.
  • 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 individuelt.

indeholder indbyggede brugerdefinerede felter funktionalitet

faktisk indeholder indbygget funktionalitet til at tilføje brugerdefinerede felter til dit indhold. I den klassiske TinyMCE-editor kan du aktivere dette fra Skærmindstillingsområdet. Eller i den nye blokeditor kan du aktivere den fra indstillingsområdet:

Sådan får du adgang til brugerdefinerede felter i blokeditor

Sådan får du adgang til brugerdefinerede felter i blokeditor

Du kan derefter indtaste dine brugerdefinerede feltdata ved hjælp af nøgle / værdipar:

den indbyggede brugerdefinerede feltfunktionalitet

den indbyggede brugerdefinerede feltfunktionalitet

denne indbyggede brugerdefinerede feltfunktionalitet er helt funktionel, men det er ikke den mest brugervenlige måde at gøre ting på, hvorfor mange mennesker vender sig til Advanced Custom Fields plugin i stedet.

avancerede brugerdefinerede felter gør det meget nemmere

simpelthen gør avancerede brugerdefinerede felter det meget nemmere at arbejde med brugerdefinerede felter i… stort set alle aspekter.det forenkler grænsefladen til at tilføje og administrere brugerdefinerede felter i dit dashboard, og det forenkler også processen til at vise oplysninger fra brugerdefinerede felter på forsiden af din hjemmeside. Denne kendsgerning hjælper kun med at forklare, hvorfor den er aktiv på mere end 1 million hjemmesider med en 4,9-stjernet rating på over 1.000 anmeldelser.

på backend, vil det lade dig oprette brugervenlige meta bokse, der omfatter forudvalgte felttyper. Så i stedet for den generiske nøgleværdi-pargrænseflade (som dem du så ovenfor), kan du bruge datovælgere, afkrydsningsfelter og mere som dette:

avancerede brugerdefinerede felter i blokeditoren

avancerede brugerdefinerede felter i blokeditoren

i alt tilbyder avancerede brugerdefinerede felter 30+ forskellige felttyper, som du kan tilføje til ethvert område i dit dashboard, herunder indlæg, brugere, taksonomier, medier, kommentarer og endda brugerdefinerede indstillinger sider.

Du kan se detaljerede oplysninger om hver felttype her.

avancerede brugerdefinerede felter gør det også meget nemmere at vise disse oplysninger med veldokumenterede funktioner, kortkoder, Gutenberg-blokke og meget mere.du kan også finde integrationer med andre værktøjer, f.eks.

avancerede brugerdefinerede felter Gratis vs Pro: hvilken har du brug for?

avancerede brugerdefinerede felter kommer både i en gratis såvel som en overkommelig premium-version.

for de fleste grundlæggende anvendelser, den gratis version er helt fint. 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 behøver.

Når det er sagt, tilføjer Pro — versionen nogle ret praktiske funktioner, der hjælper dig med at bruge avancerede brugerdefinerede felter på mere interessante måder:

  • Repeater fields-disse giver dig mulighed for at gentage bestemte felter / grupper af felter efter post. Hvis du f.eks. tilføjede oplysninger om en højttaler til en begivenhed, ville et repeaterfelt hjælpe dig med at håndtere situationen, hvor der er mere end en højttaler (du kan bare “gentage” feltet(E) for højttaleren så mange gange som nødvendigt, hvilket giver dig mulighed for at håndtere kantsager, hvor der er flere højttalere).ACF blocks-Vis dine felter som en blok Gutenberg, snarere end en meta boks. Dette er især praktisk, hvis du bygger et sted til en klient og ønsker at give dem en nem måde at indtaste og visualisere brugerdefinerede feltdata på.
  • fleksibelt indholdsfelt-Opret layout fra andre felter. Det er lidt som en letvægts sidebygger baseret på brugerdefinerede feltoplysninger.Galleri field-upload flere billeder til et enkelt felt.

der er også nogle andre forskelle, som f.eks indstillinger sider, evnen til at klone felter, forbedringer af relationsfelterne og andre mindre justeringer.

Du kan se alle ACF PRO-funktionerne her.

ACF PRO starter ved $25 for levetid brug på et enkelt sted. Eller, du kan betale $100 for levetid brug på ubegrænset sites.

Når 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 det er nødvendigt.

avancerede brugerdefinerede felter Tutorial: Sådan tilføjes dine felter

lad os nu grave i den faktiske Advanced Custom Fields tutorial, og jeg viser dig, hvordan du opretter og viser dit første sæt brugerdefinerede felter.

lad os i dette eksempel sige, at du har en blog om at køre. Du er ligesom…virkelig til at køre, og du ønsker at dele dine daglige træning 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 løb: “hastighedsarbejde” og “konditionering”.
  • afstand-hvor lang din løb var.
  • starttidspunkt — da du startede dit løb.
  • sluttidspunkt-når du er færdig med dit løb.
  • placering-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 tutorial om avancerede brugerdefinerede felter, gælder for enhver brugssag. Vi vælger bare et specifikt eksempel, fordi det hjælper med at have et håndgribeligt eksempel at oprette forbindelse til.

Vi deler denne tutorial i to dele:

  1. Sådan tilføjes og administreres dine brugerdefinerede felter på backend.
  2. sådan vises brugerdefinerede feltoplysninger på forsiden af din side.

Opret en ny Feltgruppe

Når du har installeret og aktiveret den gratis version af avancerede brugerdefinerede felter fra WordPress.org, gå til brugerdefinerede felter > 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 dashboard.

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

Giv din feltgruppe et navn, og vælg derefter dens placering. I dette eksempel vil vi vise disse brugerdefinerede felter til almindelige blogindlæg, så du kan lade det være som standardindlæg.

men hvis du vil vise dine brugerdefinerede felter et andet sted, som ved siden af en brugerdefineret posttype eller med en taksonomi, vil du gerne ændre dette. Du kan også oprette flere regler for at vise dine felter flere steder:

Opret en ny ACF-feltgruppe

Opret en ny ACF-feltgruppe

Tilføj brugerdefinerede felter

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

tilføj et nyt felt

tilføj et nyt felt

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

de to vigtigste valg er:

  • feltetiket — dette er hvad der vises i editoren. Det vil også blive brugt til at generere feltnavnet, hvilket er det, du vil bruge i kode. Du behøver ikke at ændre feltnavnet (selvom du kan, hvis du har brug for det).
  • felttype-dette er den type information, du vil indsamle. For eksempel vil du have et talfelt til at indsamle nummeroplysninger eller et e-mail-felt til at indsamle en e-mail-adresse.

for dette første felt vil du have en Radioknapfelttype:

konfiguration af et felt

konfiguration af et felt

længere nede kan du indtaste valgmulighederne for alternativknappen i valgfeltet:

indtast radioboksindstillinger

indtast radioboksindstillinger

Der er også en række andre valg, du kan foretage, f.eks. Du er velkommen til at konfigurere disse til dine behov.

lad os se på et andet eksempel: et brugerdefineret felt til at indsamle afstanden til kørslen. Denne gang vil du have en Talfelttype:

oprettelse af et talfelt

oprettelse af et talfelt

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 maksimal værdi. For eksempel går du sandsynligvis ikke på 1.000 kilometer (og hvis du gør… OMG, er du den ultimative Forrest Gump)!

flere feltindstillinger

flere feltindstillinger

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

5 forskellige ACF-felter

5 forskellige ACF-felter

Konfigurer indstillinger og offentliggør

for at afslutte tingene skal du rulle ned til Indstillingsfeltet. Her kan du styre, hvordan dine felter vises i editoren.

det meste af tiden kan du lade disse være standardindstillingerne. Men du er velkommen til at ændre tingene, hvis du vil.

konfiguration af ACF-feltgruppeindstillingerne

konfiguration af ACF-feltgruppeindstillingerne

Når du har foretaget dine valg, skal du udgive din feltgruppe for at gøre den levende.

Tilmeld dig nyhedsbrevet

vi voksede vores trafik 1,187% med ordtryk. Vi viser dig hvordan.

Deltag i 20.000 + andre, der får vores ugentlige nyhedsbrev med insider-tip!

Abonner nu

Tilføj nogle oplysninger i editoren

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

som standard vises de sammen under editoren i både den klassiske TinyMCE editor og den nye blokeditor:

avancerede brugerdefinerede felter i blokeditoren

avancerede brugerdefinerede felter i blokeditoren

de oplysninger, du indtaster her, gemmes i din sides Ordtryksdatabase for nem hentning (Du kan se det i den næste del af vores avancerede brugerdefinerede felter tutorial).

udforskning af betinget logik

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

se, en af grundene til, at avancerede brugerdefinerede felter er så populære, er på grund af alle de interessante implementeringer, det tillader.

og en kraftfuld mulighed her er betinget logik, 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 køre. Når du skriver om et ikke-kørt emne, giver det ikke meget mening at vise de brugerdefinerede felter for information om kørslen, ikke?

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 et løb?”:

betinget logikeksempel

betinget logikeksempel

Hvis du markerer afkrydsningsfeltet, vises felterne Kør information automatisk. Hvis du lader det være markeret, forbliver de skjulte:

de andre felter vises, når de er markeret

de andre felter vises, når de er markeret

det er, hvad betinget logik giver dig mulighed for at gøre!

for at konfigurere dette redigerer du din feltgruppe og tilføjer et nyt True / False-felt til “er dette et løb?”:

tilføjelse af et True / False-felt

tilføjelse af et True/False-felt

derefter redigerer du de eksisterende felter og tænder betinget logik, så hvert felt kun vises, når “er dette et løb?”feltet er markeret:

tilføjelse af betinget logik til andre felter

tilføjelse af betinget logik til andre felter

Sådan vises avancerede brugerdefinerede felter på Frontend

Ok, vi er halvvejs gennem vores avancerede brugerdefinerede felter rejse. Du kan nu føje oplysninger til dine brugerdefinerede felter, knytte dem til den relevante posttype 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 vil sige, selvom du har tilføjet nogle brugerdefinerede felter til editoren til dine blogindlæg, ser dit blogindlæg stadig ud som et normalt blogindlæg på frontend:

ingen brugerdefinerede felter på frontend

ingen brugerdefinerede felter på frontend

lad os rette det.

træt af problemer og en langsom vært? Vi leverer support i verdensklasse fra eksperter til rådighed 24/7 og lynhurtige servere. Tjek vores planer

der er et par forskellige måder, du kan vise Avancerede brugerdefinerede felter data på forsiden af din hjemmeside. Den nøjagtige metode, du vælger, afhænger af dine behov og videnniveau. Her er tre forskellige måder at opnå det på:

  1. dit temas skabelonfiler — dette kræver lidt teknisk viden, men det er den bedste tilgang det meste af tiden, især hvis du har det godt med at arbejde i dit temas skabelonfiler.
  2. med en kortkode — dette er super simpelt 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 kortkoder til hvert indlæg.
  3. med Elementor Pro-Det er fantastisk, fordi det helt eliminerer behovet for at arbejde med PHP, men det er et premiumprodukt, og det betyder også, at du skal bruge Elementor Pro til din templating.

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

Sådan tilføjes avancerede brugerdefinerede felter i Temaskabelonfiler

den første måde at vise dine brugerdefinerede feltoplysninger på er at tilføje avancerede brugerdefinerede Felters PHP-funktioner direkte til dit underordnede temas skabelonfiler.

dette er lidt avanceret, fordi det kræver, at du graver ind 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 posttype.

for et almindeligt blogindlæg er dette enkelt.php. Eller nogle temaer bryder tingene op i skabelondele. For eksempel, for det tyveårige tema, skal du faktisk redigere indholdet-single.php skabelon del.

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

når du har fundet temaskabelonfilen til dit enkelt indlæg, kan du bruge funktionen Advanced Custom Fields’ the_field() til at vise et felts oplysninger. For eksempel

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

Lær mere her om det.

for eksempel for at vise feltet” Formål “skal du bruge

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

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

Hvor finder man ACF-feltnavn

hvor finder man ACF-feltnavn

så ved at kombinere en lille HTML-markering med PHP kan du få noget som dette 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æg indhold, vil du tilføje dette til dit tema skabelon fil over the_content():

hvor skal du tilføje kode i temaskabelonfil

hvor skal du tilføje kode i temaskabelonfil

og nu, efter opdatering af blogindlægget, kan du se de brugerdefinerede feltdata over det almindelige Ordtryksindhold:

du kan nu se felter på frontend

Du kan nu se felter på frontend

for at lære mere, tjek advanced custom fields’ fulde dokumentation.

Sådan vises avancerede brugerdefinerede feltdata med en kortkode

for en meget enklere måde at vise dine brugerdefinerede felters data på, kan du også bruge kortkoder. Ulempen her er dog, at du skal tilføje kortkoden hver gang du vil vise et brugerdefineret felt. Der er ingen nem måde at automatisere denne opgave på.

kortkoden er dette:

Hvis du f. eks. indtastede dette i editoren:

brug af kortkoder til at vise ACF-data

brug af kortkoder til at vise ACF-data

derefter vil frontenden af din side se nøjagtigt ud som den forrige temaskabelonmetode:

kortkoderne ser identiske ud med temaskabelonfilen

kortkoderne ser identiske ud med temaskabelonfilen

Sådan vises avancerede brugerdefinerede felter med Elementor pro

Elementor er en af de mest populære sidebyggere. Det giver dig mulighed for at opbygge dine designs ved hjælp af visuel, træk-og-slip-redigering. På en sidenote er Elementor 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 avancerede brugerdefinerede felter i dine designs.

dette er en god mulighed, hvis du vil have fleksibiliteten til automatisk at inkludere brugerdefinerede feltdata i dine skabeloner, men ikke har det godt med at foretage 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 Single:

Opret en ny Elementor-enkelt skabelon

Opret en ny Elementor-enkelt skabelon

Du kan tilføje de almindelige Elementor-kontroller til din posttitel og dit indlægs indhold. For at få vist de brugerdefinerede feltdata skal du derefter tilføje regelmæssige tekstredigeringsprogrammer. Den eneste forskel her, i stedet for at redigere teksten, vælger du den dynamiske indstilling:

Elementor Pro "Dynamic" valgmulighed"Dynamic" option

efter dette kan du vælge ACF-felt fra rullemenuen:

vælg"ACF-felt""ACF Field"

vælg “ACF-felt”

derfra kan du vælge det specifikke felt, du tilføjede med avancerede brugerdefinerede felter:

Vælg det specifikke felt, du vil vise

Vælg det specifikke felt, du vil vise

og du kan også bruge fanen Avanceret harmonika til at forberede eller tilføje oplysninger, som giver dig mulighed for at tilføje etiketter og enheder:

Prepend eller tilføj information

Prepend eller tilføj information

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

oversigt

Ved hjælp af avancerede brugerdefinerede felter kan du berige dine sider og blogindlæg med flere data og oplysninger med en brugervenlig løsning. Mere: du kan begynde at indsamle yderligere oplysninger for indhold på din hjemmeside og derefter vise det på frontend for dine besøgende.

for at gøre det har du 3 muligheder:

  • dit temas skabelonfiler
  • med en kortkode
  • med Elementor Pro

den viden, du har fået i dette indlæg, giver dig mulighed for at låse op for det dybe potentiale ved at oprette 100% brugerdefinerede sider, der går langt ud over blogging-rødderne.

det eneste spørgsmål tilbage er dette:

Hvad vil du oprette med avancerede brugerdefinerede felter? Del det med os i kommentarerne nedenfor

Hvis du nød denne artikel, så vil du elske Kinstas hostingplatform. Turbolad din hjemmeside og få 24/7 support fra vores team. Vores Google Cloud-baserede infrastruktur fokuserer på automatisk skalering, ydeevne og sikkerhed. Lad os vise dig Kinsta forskellen! Tjek vores planer