✅ WEB- och WordPress -nyheter, teman, plugins. Här delar vi tips och bästa webbplatslösningar.

Kodning för avancerade anpassade fält: en introduktion

13

Advanced Custom Fields (ACF) är ett WordPress-plugin som är ett utmärkt verktyg för att ställa in anpassad postmeta. Det låter dig enkelt bygga och konfigurera komplexa och användarvänliga metaboxar med alla typer av fält och inställningar för inläggstyper, taxonomi, användarskärmar och alternativsidor. Och det är super utvecklarvänligt.

Nu kan du ställa in dina egna metaboxar eller inställningar manuellt, men för mer komplexa inställningar kräver det att du kodar en hel del inklusive styling, Javascript, validering och hanteringssparande. Föreställ dig till exempel att manuellt skriva en repeater med en grupp inställningar, ett flerval av inlägg efter en viss fråga. Eller hantering som visar inställningar som beror på vissa variabler såsom vilken term eller sidmall som är tilldelad (vilket kräver Javascript). Advanced Custom Fields hanterar allt detta, och det gör det så vackert.

Tänk på att avancerade anpassade fält faktiskt inte kommer att mata ut någon av dina anpassade meta i dina mallar. Att skriva ut eller göra något baserat på de fält och inställningar som ställts in med ACF är upp till dig som utvecklare att hantera. Men detta görs enkelt genom att använda någon av ACF:s metoder. Det är också trevligt att veta att ACF använder WordPress kärna (post, term, användare) metafunktionalitet. Vilket innebär att den faktiskt sparar t.ex. inställningar för inlägg som postmeta – som du kan få tag i med hjälp av kärnfunktioner som get_post_meta().

Avancerade anpassade fält kommer i en gratisversion och en Pro-betald version. Gratisversionen är mer än tillräckligt för de flesta fall, men i Pro-versionen får du några ytterligare funktioner såsom ett repeaterfält, gallerifält, Gutenberg-block (se senare), och möjligheten att använda ACF för att sätta upp din egen anpassade admin alternativsidor. ACF är också så populärt att du enkelt kan hitta högkvalitativa tillägg för allt som core ACF inte täcker sig själv.

Avancerade anpassade fält: Admin-delen

När du installerar Advanced Custom Fields-plugin får du en ny adminmeny för "Custom Fields".Det är här du kan ställa in och konfigurera dina "metaboxar" eller grupper av inställningar.

Inom en grupp kan du sätta upp så många fält du vill av olika typer. De vanligaste är textinmatning, textområde, richtextredigerare, fil, bild, sant/falskt (växling), kryssrutor, alternativknappar och valruta. Andra vanliga är flera sätt att välja inlägg, välja taxonomi, välja användare, datumväljare, färgväljare, Google Maps och många, många fler. Beroende på vilken fälttyp du väljer får du en rad ytterligare alternativ för att anpassa fältet. Du kan också lägga till villkorlig logik till vilket fält som helst. Villkorlig logik är till för att dölja eller visa fält beroende på andra alternativ inom gruppen.

För varje grupp av inställningar kan du definiera i vilka fall dessa inställningar ska visas. Exempel är när du redigerar inlägg, en taxonomiterm eller redigering av en användare. Du kan ytterligare anpassa synligheten för dina inställningar på till exempel inläggstyp. Eller om ett inlägg har en viss term eller sidmall tilldelad, om ett inlägg är av en viss författare, om användarrollen är så eller så, rollen för den nuvarande inloggade användaren eller om sidan är en överordnad sida eller inte. Du kan också anpassa var metarutan ska visas. Denna funktionalitet är dock något reducerad nu med den nya Gutenberg-redigeraren.

Kodning för avancerade anpassade fält: en introduktion

Skapar en grupp

Kodning för avancerade anpassade fält: en introduktion

Inställningar för ett enskilt fält

Avancerade anpassade fält: Koddelen

Låt oss ta en titt på den mer intressanta delen: hur du kan använda avancerade anpassade fält med kod. Som nämnts tidigare är ACF super utvecklarvänlig och erbjuder ett brett utbud av anpassningsmöjligheter.

Att få tag på värden och mata ut dem i dina mallar görs enkelt med hjälp av ACF:s metoder. Till exempel the_field('your_meta_key')för att direkt eka det eller get_field('your_meta_key')för att lagra det i en PHP-variabel. Ange post-ID som andra argument om du behöver hämta data utanför loopen. Lätt som en plätt. Du kan använda get_post_meta(), men det rekommenderas att använda ACF:s metoder – eftersom ACF kan förvandla värdet till något mer meningsfullt innan det returneras till dig.

En annan sak du bör vara medveten om är exportverktyget inom ACF. Du kan exportera skapade grupper till två format; antingen en nedladdningsbar JSON-fil eller ren PHP-kod. JSON-filen är användbar om du behöver exportera inställningar mellan test- och liveservrar, eller en annan WordPress. Att exportera i ren PHP ger dig möjligheten att direkt klistra in det i ditt tema eller plugin PHP-filer.

Som du kanske kan dra slutsatsen av detta; du kan använda PHP-kod, antingen genom att skriva den manuellt eller genom att exportera den efter att ha ställt in dem i admin, för att lägga till dina grupper och fält. Detta ger mer kontroll och sätt att skapa anpassade val.

Men vänta, det finns mer! ACF erbjuder också ett brett utbud av åtgärder och filter för att anpassa fälten eller deras värden ytterligare. Det finns krokar för att spara eller rendera ett fält samt krokar för att registrera grupper efter kod (som nämns ovan), och filter för att anpassa fältets värden, inställningar eller val innan du sparar eller före rendering. Du kan vidare ange om filtret ska påverka alla fält, fält av en viss typ eller fält av en viss meta-nyckel. Alla krokar och filter är prefixerade med acf/.

Ta en titt på ACF:s dokumentationssida ; klicka på ‘Funktioner’, ‘Åtgärder’ eller ‘Filter’ för en översikt. Du hittar också bra tutorials och guider på den här webbplatsen.

En anteckning om Advanced Custom Fields och Gutenberg

Att skapa anpassade Gutenberg-block är för tillfället ganska skrämmande. Dokumentationen är inte riktigt på plats, ändringar i den sker ofta och det kräver en hel del Javascript-kunskaper för att koda. Helst behöver du kunskap om React och hur man ställer in kompilator från JSX/ES6 med webpack och Babel.

Men i version 5.8 introducerade ACF Pro en funktion för att ställa in en fältgrupp som ett Gutenberg-block – så att du kan lägga till anpassade block enbart med ACF- och PHP-kod. Inga Javascript-kunskaper krävs!

Allt du behöver göra är att ställa in grupperna i admin eller med kod som vanligt. Men sedan definiera deras plats som Gutenberg block. Allt som återstår är att lägga till lite PHP-kod för att registrera dem som ett anpassat Gutenberg-block med acf_register_block(). Till den funktionen definierar du en callback till en PHP-funktion eller mallfil som är ansvarig för att rendera blockutdata. Du skriver den här funktionen eller malldelen helt i PHP och använder välbekanta metoder som get_field()att få fram inställningsvärdena.

Kodning för avancerade anpassade fält: en introduktion

Hur ett ACF-block ser ut i Gutenberg-redigeraren

Håll ögonen öppna i kategorin Avancerade anpassade fält för tutorials om hur du använder detta plugin!

Inspelningskälla: awhitepixel.com

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer