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:

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

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.

Hvor seje er brugerdefinerede felter i WordPress ik? 👨‍💻 Lær hvordan du kan drage fordel af dem med det fantastiske @wp_acf i vores seneste guide! 💪Click to Tweet

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:

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:

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 vha. key / value pairs:

Den indbyggede WordPress-brugerdefinerede feltfunktionalitet

Den indbyggede WordPress-brugerdefinerede feltfunktionalitet

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:

Advanced custom fields i blokeditoren

Advanced custom fields i blokeditoren

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:

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:

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:

Opret en ny ACF-feltgruppe

Opret en ny ACF-feltgruppe

2. 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:

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

Konfiguration af et felt

Konfiguration af et felt

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

Angiv indstillinger for radioboks

Angiv indstillinger for radioboks

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:

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

More fields indstillinger

More fields indstillinger

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

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:

Konfiguration af ACF-feltgruppe indstillinger

Konfiguration af ACF-feltgruppe indstillinger

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:

Conditional logic eksempel

Conditional logic eksempel

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?”:

Conditional logic eksempel

Conditional logic example

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

De andre felter vises, når det er markeret

De andre felter vises, når det er markeret

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?”:

Tilføjelse af et sandt / falsk felt

Tilføjelse af et sandt / falsk felt

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:

Tilføjelse af conditional logic til andre felter

Tilføjelse af conditional logic til andre felter

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:

Ingen brugerdefinerede felter på frontend

Ingen brugerdefinerede felter på frontend

Lad os fixe det.

Kæmper med nedetid og WordPress-problemer? Kinsta er hostingløsningen designet til at spare din tid! Tjek vores funktioner

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:

Hvor finder du ACF-feltnavnet

Hvor finder du ACF-feltnavnet

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():

Hvor tilføjes kode i tema skabelonfil

Hvor tilføjes kode i tema skabelonfil

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

Du kan nu se felter på fronten

Du kan nu se felter på fronten

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:

Brug af shortcodes til at vise ACF-data

Brug af shortcodes til at vise ACF-data

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

shortcodes ser identiske ud med temaskabelonfilen

shortcodes ser identiske ud med temaskabelonfilen

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:

Opret en ny Elementor-skabelon

Opret en ny Elementor-skabelon

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:

Elementor Pro “Dynamic” mulighed

Elementor Pro “Dynamic” mulighed

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

Vælg

Vælg “ACF Field”

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

Vælg det specifikke felt, du vil vise

Vælg det specifikke felt, du vil vise

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:

Forbered eller tilføj oplysninger

Forbered eller tilføj oplysninger

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:

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.


Hvis du godt kunne lide denne artikel, så vil du elske Kinstas WordPress hostingplatform. Boost dit website og få 24/7 support fra vores WordPress-ekspertteam. Vores Google Cloud-drevne infrastruktur fokuserer på automatisk skalering, ydeevne og sikkerhed. Lad os vise dig Kinsta-forskellen! Tjek vores planer