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 anpassade WordPress-fält är freemium Advanced Custom Fields plugin 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.

specifikt förklarar vi varför avancerade anpassade fält är så värdefulla och visar dig steg för steg hur du kan tillämpa det på din WordPress-webbplats.

Här är allt du hittar i det här inlägget:
det finns mycket att täcka, så låt oss dyka in…

vad är WordPress anpassade fält? Vad Låter De Dig Göra?

WordPress anpassade fält låter dig lägga till, lagra och visa ytterligare information om ett 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, anpassade fält ström mycket av funktionaliteten i dina favorit plugins 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-evenemangskalenderplugin, använder det plugin 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 inlägget handlar om.

hur coola är anpassade fält i WordPress, uh? Lär dig att dra nytta av dem med den fantastiska @ wp_acf i vår senaste guide! Klicka för att tweeta

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

Nu kanske du undrar varför du ens behöver anpassade fält i första hand.

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

Ja, det kan du. Men att använda anpassade fält är ett bättre tillvägagångssätt av några anledningar:

• enklare inmatning — snarare än att skriva saker från början, kommer en väl utformad Anpassad fältgrupp att göra det mycket lättare att mata in data. Till exempel, istället för att skriva ett datum, du kan bara välja datum från en datumväljare.
• konsistens-informationen du anger i dina anpassade fält visas alltid enligt din inställning, vilket innebär att den kommer att vara konsekvent över hela webbplatsen.
• 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 innehåller inbyggda 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 området skärmalternativ. Eller i den nya blockredigeraren kan du aktivera den från alternativområdet:

Du kan sedan ange dina anpassade fältdata med nyckel / värdepar:

denna infödda 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 många människor vänder sig till avancerade anpassade fält plugin istället.

avancerade anpassade fält gör det mycket enklare

enkelt uttryckt, avancerade anpassade fält gör det mycket lättare att arbeta med anpassade fält i WordPress i… ganska mycket alla aspekter.

det förenklar gränssnittet för att lägga till och hantera anpassade fält i din WordPress-instrumentpanel och det förenklar också processen för att visa information från anpassade fält på frontend på din webbplats. Det faktum hjälper bara till att förklara varför det är aktivt på mer än 1 miljon webbplatser med ett 4,9-stjärnigt betyg på över 1000 recensioner.

på backend låter det dig skapa användarvänliga metarutor som innehåller förvalda fälttyper. Så, snarare än det generiska nyckelvärdespargränssnittet (som de du såg ovan), kan du använda datumväljare, kryssrutor och mer så här:

totalt erbjuder avancerade anpassade fält 30+ olika fälttyper som du kan lägga till i valfritt område i instrumentpanelen, inklusive inlägg, användare, taxonomier, media, kommentarer och till och med anpassade alternativsidor.

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

avancerade anpassade fält gör det också mycket lättare att visa den informationen, med väldokumenterade funktioner, kortkoder, Gutenberg-block och mer.

eller du kan hitta integrationer med andra verktyg, som vissa dra-och-släpp WordPress-sidbyggare.

avancerade anpassade fält gratis vs Pro: vilken behöver du?

avancerade anpassade fält kommer både i en gratis och en prisvärd premiumversion.

för de flesta grundläggande användningsområden är den fria versionen helt bra. 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 avancerade anpassade fält på mer intressanta sätt:

• Repeater fields — dessa låter dig upprepa vissa fält/grupper av fält efter post. Om du till exempel lägger till information om en högtalare till en händelse, skulle ett repeaterfält hjälpa dig att hantera situationen där det finns mer än en högtalare (du kan bara ”upprepa” fältet / fälten för högtalaren så många gånger som behövs, vilket låter dig hantera kantfall där det finns flera högtalare).
• ACF blocks-visa dina fält som ett block Gutenberg, snarare än en meta box. 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ältinformation.
• Gallerifält-ladda upp flera bilder till ett enda fält.

det finns också några andra skillnader, som alternativsidor, förmågan att klona fält, förbättringar av relationsfälten och andra mindre tweaks.

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

ACF PRO börjar på $25 för livstid användning på en enda plats. Eller, du kan betala $100 för livstid användning på obegränsade platser.

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

avancerade anpassade fält handledning: Så här lägger du till dina fält

Låt oss nu gräva i själva avancerade anpassade fält handledning och jag ska visa dig hur du skapar och visar din första uppsättning anpassade fält.

För det här exemplet, låt oss säga att du har en blogg om att köra. Du är som … verkligen att springa och du vill dela dina dagliga träningspass med dina läsare. Specifikt, med varje blogginlägg vill du dela en körning:

• syfte — låt oss säga att du har två olika typer av körning: ”speed work” och ”conditioning”.
• avstånd – hur länge din körning var.
• starttid — när du startade din körning.
• sluttid — när du är klar med din körning.
• plats – där din körning ägde rum.

för att samla in den informationen Vill du lägga till fem anpassade fält.

det är viktigt att notera att de principer du lär dig i denna avancerade anpassade fält handledning gäller för alla användningsfall. Vi väljer bara ett specifikt exempel eftersom det hjälper till att ha ett konkret exempel att ansluta till.

vi delar denna handledning i två delar:

1. så här lägger du till och hanterar dina anpassade fält på backend.
2. så här visar du anpassad fältinformation på frontend på din webbplats.

skapa en ny Fältgrupp

När du har installerat och aktiverat den fria versionen av avancerade anpassade fält 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 med ett eller flera anpassade fält som visas tillsammans i din WordPress-instrumentpanel.

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. I det här exemplet vill vi visa dessa anpassade fält för vanliga WordPress-blogginlägg, så att du kan lämna det som standardpost.

men om du vill visa dina anpassade fält någon annanstans, som tillsammans med en anpassad posttyp eller med en taxonomi, vill du ändra detta. Du kan också ställa in flera regler för att visa dina fält på flera platser:

Lägg till anpassade fält

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

detta öppnar många alternativ, men du behöver inte nödvändigtvis fylla i allt.

de två viktigaste valen är:

• fältetikett — det här är vad som kommer att visas i redigeraren. Det kommer också att användas för att generera fältnamnet, vilket är vad du ska använda i kod. Du behöver inte ändra fältnamnet (även om 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 ska samla in nummerinformation eller ett e-postfält för att samla in en e-postadress.

För det här första fältet vill du ha en Alternativknappsfälttyp:

längre ner kan du ange alternativknappens valalternativ 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. Känn dig fri att konfigurera dessa till dina behov.

låt oss titta på ett annat exempel: ett anpassat fält för att samla avståndet för körningen. Den här gången vill du ha en Talfälttyp:

Du kan också göra saker 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 minimivärde och Maximivärde. Till exempel går du förmodligen inte på 1000 mil körningar (och om du gör… OMG, du är den ultimata Forrest Gump)!

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

konfigurera inställningar och publicera

för att avsluta saker, bläddra ner till inställningsrutan. Här kan du styra hur dina fält visas i WordPress-redigeraren.

För det mesta kan du lämna dessa som standardvärden. Men känn dig fri att ändra saker 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 göra den live.

Lägg till lite Information i WordPress-redigeraren

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

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

informationen du anger här lagras i din webbplats WordPress-databas för enkel hämtning (du ser det i nästa del av vår avancerade anpassade Fälthandledning).

utforska villkorlig logik

innan vi går vidare, Låt oss ta en snabb omväg.

se, en av anledningarna till att avancerade anpassade fält är så populära är på grund av alla intressanta implementeringar som 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 detta 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 körs är det inte mycket meningsfullt att visa de anpassade fälten för information om körningen, eller hur?

vad händer om du istället för att automatiskt visa alla anpassade fält du just skapat kan lägga till ett anpassat fält som säger ”är det här inlägget en körning?”:

om du markerar rutan visas körinformationsfälten automatiskt. Om du lämnar det okontrollerat förblir de dolda:

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

för att ställa in detta skulle du redigera din fältgrupp och lägga till ett nytt sant / falskt fält för ”är det här en körning?”:

då skulle du redigera de befintliga fälten och aktivera villkorlig logik så att varje fält bara visas när ” är det här en körning?”fält är markerat:

hur man visar avancerade anpassade fält på Frontend

Ok, vi är halvvägs genom vår avancerade anpassade fältresa. Du kan nu lägga till information i dina anpassade fält, associera den med relevant posttyp 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å frontend ännu!

det vill säga, även om du har lagt till några anpassade fält i redigeraren för dina blogginlägg, ser ditt blogginlägg fortfarande bara ut som ett vanligt blogginlägg på frontend:

låt oss fixa det.

det finns några olika sätt att Visa avancerade anpassade fältdata på frontend på din webbplats. Den exakta metoden 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, särskilt om du är bekväm att arbeta i temas mallfiler.
2. med en kortkod – det här är super enkelt och ett bra alternativ om du bara vill infoga anpassade fältdata 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. With Elementor Pro-det här är bra 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 din mall.

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

så här lägger du till avancerade anpassade fält i Temamallfiler

det första sättet att visa din anpassade fältinformation är att lägga till avancerade anpassade fält PHP-funktioner direkt till ditt barns temas mallfiler.

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

specifikt måste du redigera den enskilda mallen för den aktuella posttypen.

för ett vanligt blogginlägg är detta singel.php. Eller, vissa teman Dela upp saker i malldelar. Till exempel, för TwentyNineteen-temat behöver du faktiskt redigera innehållet-singel.php Mall del.

om du känner dig förlorad här kanske du vill använda en annan metod.

När du har hittat temamallfilen för ditt enda inlägg kan du använda funktionen Advanced Custom Fields’ the_field() för att visa ett fälts information. Till exempel

<?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å genom att kombinera en liten HTML-markering med PHP kan du få något liknande 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>

för att lägga till detta ovanför det vanliga postinnehållet lägger du till det här i din temamallfil ovanför the_content():

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

för att lära dig mer, kolla in avancerade anpassade fält fullständiga dokumentation.

hur man visar avancerade anpassade fältdata 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:

Om du till exempel angav detta i WordPress-redigeraren:

då skulle frontend på din webbplats se exakt ut som den tidigare temamallmetoden:

hur man visar avancerade anpassade fält med Elementor Pro

Elementor är en av de mest populära WordPress-sidbyggarna. Det låter dig bygga dina mönster med visuell, dra-och-släpp redigering. På en sidenote är 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 avancerade anpassade fält i dina mönster.

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

för att komma igång, skulle du gå till mallar> Tema Builder och skapa en ny Elementor mall för ditt inlägg enda:

Du kan lägga till de vanliga Elementor widgets för ditt inlägg titel och inlägg innehåll. Sedan, för att visa anpassade fältdata, lägger du till vanliga textredigerare widgets. Den enda skillnaden här, istället för att redigera texten, skulle du välja det dynamiska alternativet:

därefter kan du välja ACF-fält i rullgardinsmenyn:

därifrån kan du välja det specifika fältet du lagt till med avancerade anpassade fält:

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

lätt, eller hur? Nu bara upprepa för andra anpassade fält!

sammanfattning

med avancerade anpassade fält kan du berika dina sidor och blogginlägg med mer data och information med en lättanvänd lösning. Mer: du kan börja samla in ytterligare information för allt innehåll på din webbplats och sedan visa det på frontend för dina besökare.

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

• ditt temas mallfiler
• med en kortkod
• med Elementor Pro

den kunskap du har fått i det här inlägget låter dig låsa upp WordPress djupa potential att bygga 100% anpassade webbplatser som går långt bortom WordPress blogging rötter.

den enda frågan kvar är detta:

vad skapar du med avancerade anpassade fält? Dela det med oss i kommentarerna nedan