Advanced Custom Fields Tutorial: Din Ultimate Guide
wordpress tilpassede felt er en viktig del av Det Som gjør WordPress til et fleksibelt innholdsstyringssystem, i stedet for «bare en bloggplattform».
når Det gjelder WordPress tilpassede felt, er freemium Advanced Custom Fields plugin et av de mest kjente navnene. Det gjør det enklere å jobbe med egendefinerte felt i alle aspekter, og det er også temaet i innlegget vårt i dag.Spesielt vil Vi forklare hvorfor Avanserte Tilpassede Felt er så verdifulle og deretter vise deg trinnvis hvordan du kan bruke Den På WordPress-nettstedet ditt.
her er alt du finner i dette innlegget:
Det er mye å dekke, så la oss dykke i…
Hva Er Advanced Custom Fields plugin?Utviklet Av Elliot Condon, Advanced Custom Fields — ofte forkortet SOM ACF — Er Et WordPress-plugin som lar deg legge Til Og administrere WordPress Tilpassede Felt på et nettsted. Den er tilgjengelig både som gratis plugin og en premium plugin, KALT ACF PRO, som starter på $25 for livstidsoppdateringer og for 1 nettsted.
hva er wordpress egendefinerte felt? Hva Lar De Deg Gjøre?
wordpress tilpassede felt lar deg legge til, lagre og vise tilleggsinformasjon om et innhold i WordPress. På et mer teknisk nivå hjelper egendefinerte felt deg med å lagre metadata.
selv om du ikke er kjent med dette begrepet, egendefinerte felt strøm mye av funksjonaliteten i din favoritt plugins og temaer.For Eksempel Bruker WooCommerce, den mest populære måten å bygge en e-handelsbutikk, egendefinerte felt for å lagre tilleggsinformasjon om et produkt som:
- Pris
- Vekt
- Farge
eller, hvis Du har En wordpress event calendar plugin, som plugin vil bruke egendefinerte felt for å lagre ekstra informasjon om en hendelse som:
- Sted
- Start/sluttid
- Pris
Du kan også lage dine egne felt for å lagre informasjon som er relevant for dine unike behov, som er hva hele dette innlegget handler om.
hvor kult er egendefinerte felt I WordPress, uh? 👨 💻Lær hvordan du kan dra nytte av dem med den fantastiske @wp_acf i vår nyeste guide! 💪Klikk for Å Tweet
Når Bør Du Bruke Egendefinerte Felt?
nå lurer du kanskje på hvorfor du selv trenger egendefinerte felt i utgangspunktet.hvis du for eksempel vil legge inn en hendelse på WordPress-nettstedet ditt, kan du ikke bare legge all den informasjonen som vanlig tekst i WordPress-editoren?
Vel, ja, det kan du. Men å bruke egendefinerte felt er en bedre tilnærming av noen grunner:
- Lettere inngang-i stedet for å skrive ting fra bunnen av, vil en godt lagt ut tilpasset feltgruppe gjøre det mye enklere å legge inn data. For eksempel, i stedet for å skrive en dato, kan du bare velge datoen fra en datovelger.
- Konsistens-informasjonen du skriver inn i dine egendefinerte felt vil alltid vises i henhold til oppsettet ditt, noe som betyr at det vil være konsistent på hele nettstedet ditt.Enkle oppdateringer Og vedlikehold – hvis du vil endre noe om hvordan denne informasjonen vises i fremtiden, kan du bare oppdatere en ting i stedet for å måtte redigere hvert innlegg individuelt.
WordPress Inkluderer Innebygd Tilpassede Feltfunksjonalitet
WordPress inneholder faktisk innebygd funksjonalitet for å legge til egendefinerte felt i innholdet ditt. I den klassiske TinyMCE-editoren kan du aktivere dette fra Skjermalternativområdet. Eller i den nye blokkeditoren kan du aktivere den fra Alternativområdet:
slik får du tilgang til egendefinerte felt i blokkeditoren
du kan deretter skrive inn egendefinerte feltdata ved hjelp av nøkkel/verdipar:
denne innfødte custom fields funksjonalitet er helt funksjonell, men Det er ikke den mest brukervennlige måten å gjøre ting, som er grunnen til at mange mennesker slår Til Advanced Custom Fields plugin i stedet.
Avanserte Egendefinerte Felt Gjør det Mye Enklere
Enkelt Sagt, Avanserte Egendefinerte Felt gjør Det mye enklere å jobbe med egendefinerte felt I WordPress i … stort sett alle aspekter.Det forenkler grensesnittet for å legge til og administrere egendefinerte felt i WordPress dashbordet, og det forenkler også prosessen for å vise informasjon fra egendefinerte felt på forsiden av nettstedet ditt. Det faktum bidrar bare til å forklare hvorfor det er aktivt på mer enn 1 million nettsteder med en 4,9-stjerners rangering på over 1000 anmeldelser.
på backend, vil det la deg lage brukervennlige meta bokser som inkluderer forhåndsvalgte felttyper. Så, i stedet for det generiske nøkkelverdipargrensesnittet (som de du så over), kan du bruke datovelgere, avkrysningsbokser og mer som dette:
Avanserte Egendefinerte Felt i blokkredigereren
I alt Tilbyr Avanserte Egendefinerte Felt 30+ forskjellige felttyper som du kan legge til i et hvilket som helst område i dashbordet ditt, inkludert innlegg, brukere, taksonomier, media, kommentarer og til og med tilpassede alternativer sider.
du kan se detaljert informasjon om hver felttype her.Avanserte Tilpassede Felt gjør det også mye enklere å vise denne informasjonen, med veldokumenterte funksjoner, kortkoder, Gutenberg-blokker og mer.
Eller du kan finne integrasjoner med andre verktøy, som noen dra-Og-slipp WordPress-sidebyggere.
Avanserte Egendefinerte Felt Gratis vs Pro: Hvilken Trenger Du?
Advanced Custom Fields kommer både i en gratis så vel som en rimelig premium versjon.
for de fleste grunnleggende bruksområder er den gratis versjonen helt fin. Det gir deg tilgang til nesten alle felttyper, samt alle tidsbesparende og brukervennlige funksjoner som er skissert ovenfor.
hvis du bare vil lagre litt ekstra informasjon om innholdet ditt, er den gratis versjonen alt du trenger.Med Det blir sagt, Gjør Pro-versjonen legge noen ganske praktiske funksjoner som hjelper Deg å bruke Avanserte Egendefinerte Felt i mer interessante måter: Repeater felt-disse lar deg gjenta visse felt / grupper av felt på en post-by-post basis. Hvis du for eksempel legger til informasjon om en høyttaler i en hendelse, vil et repeaterfelt hjelpe deg med å håndtere situasjonen der det er mer enn en høyttaler(du kan bare «gjenta» feltet (e) for høyttaleren så mange ganger som nødvendig, noe som lar deg håndtere kantsaker der det er flere høyttalere).
Det er også noen andre forskjeller, som alternativer sider, muligheten til å klone felt, forbedringer i forholdet felt, og andre mindre tweaks.
DU kan se ALLE ACF PRO funksjoner her.ACF PRO starter på $ 25 for livstidsbruk på et enkelt nettsted. Eller du kan betale $100 for livstidsbruk på ubegrensede nettsteder.
når du er i tvil, start med gratisversjonen til du finner ut nøyaktig hvilken funksjonalitet du trenger. Du kan alltid oppgradere senere hvis nødvendig.
Avansert Tilpassede Felt Tutorial: Slik Legger Du Til Feltene
La oss nå grave inn i Den Faktiske Avanserte Egendefinerte feltopplæringen, og jeg vil vise deg hvordan du lager og viser ditt første sett med egendefinerte felt.
for dette eksemplet, la oss si at du har en blogg om å kjøre. Du er som … virkelig i å løpe, og du vil dele dine daglige treningsøkter med leserne dine. Spesielt med hvert blogginnlegg vil du dele et løp:
- Formål-la oss si at du har to forskjellige typer løp: «speed work «og»conditioning».
- Avstand-hvor lenge løp var.
- Starttid — når du startet løpingen.
- Sluttid-når du er ferdig med løp.
- Plassering – hvor løpingen din fant sted.
hvis du vil samle inn denne informasjonen, må du legge til fem egendefinerte felt.
det er viktig å merke seg at prinsippene du vil lære i Denne Avanserte Egendefinerte felt opplæringen gjelder for alle brukstilfelle. Vi velger bare et bestemt eksempel fordi det hjelper å ha et konkret eksempel å koble til.
vi vil bryte denne opplæringen i to deler:
- hvordan legge til og administrere egendefinerte felt på backend.
- hvordan vise tilpasset feltinformasjon på frontend av nettstedet ditt.
Opprett En Ny Feltgruppe
Når du har installert og aktivert den gratis versjonen Av Avanserte Egendefinerte Felt fra WordPress.org, gå til Egendefinerte Felt > Legg Til Ny for å opprette din Første Feltgruppe.
som navnet antyder, er En «Feltgruppe» en gruppe av ett eller flere egendefinerte felt som vises sammen i WordPress-dashbordet.
i dette eksemplet oppretter du en feltgruppe som inneholder fem egendefinerte felt.
Gi feltgruppen et navn, og velg Deretter Plasseringen. For dette eksemplet vil vi vise disse egendefinerte feltene for vanlige WordPress-blogginnlegg, slik at du kan legge det som standardinnlegg.
hvis du imidlertid vil vise de egendefinerte feltene andre steder, for eksempel ved siden av en egendefinert innleggstype eller med en taksonomi, vil du endre dette. Du kan også konfigurere flere regler for å vise feltene på flere steder:
Opprett EN NY ACF-feltgruppe
Legg Til Egendefinerte Felt
Klikk deretter på + Legg Til Felt for å legge til ditt første egendefinerte felt:
legg til et nytt felt
dette åpner mange alternativer, Men DU TRENGER IKKE nødvendigvis å fylle ut alt.
De to viktigste valgene er:
- Feltetikett — dette er hva som vises i redaktøren. Det vil også bli brukt til å generere Feltnavnet, som er det du vil bruke i kode. Du trenger ikke å endre feltnavnet (selv om du kan hvis du må).
- Felttype — dette er typen informasjon du vil samle inn. Du vil for eksempel at Et Tallfelt skal samle inn tallinformasjon eller Et e-Postfelt skal samle inn en e-postadresse.
for dette første feltet vil Du ha En Radioknappfelttype:
Konfigurere et felt
Lenger ned kan du angi valgalternativene for alternativknapper i Valg-boksen:
skriv inn radioboksalternativer
det finnes også En rekke andre valg du kan gjøre, som om Et Felt er påkrevd og en standardverdi. Føl deg fri til å konfigurere disse til dine behov.
La oss se på et annet eksempel: et tilpasset felt for å samle avstanden til kjøringen. Denne gangen vil du ha En tallfelttype:
Opprette et tallfelt
Du kan også gjøre ting litt mer brukervennlig ved Å Velge Å Legge til avstandsenheten. Og hvis du vil, kan du også legge til validering med En Minimumsverdi og Maksimumsverdi. For eksempel går du sannsynligvis ikke på 1000 kilometer (og hvis du gjør… OMG, er du den ultimate Forrest Gump)!
flere feltinnstillinger
bare gjenta prosessen for alle de andre egendefinerte feltene du vil samle inn. Når du er ferdig, bør det se slik ut:
Konfigurer Innstillinger og Publiser
for å fullføre ting, bla ned til Innstillingsboksen. Her kan du kontrollere hvordan feltene vises I WordPress-editoren.
Mesteparten av tiden, kan du la disse som standard. Men føl deg fri til å endre ting opp hvis du vil. For eksempel kan du velge å vise dine egendefinerte felt over den vanlige WordPress-editoren:
Konfigurere acf-feltgruppeinnstillingene
Når du har gjort dine valg, Publiser feltgruppen din for å gjøre den live.
Registrer Deg For Nyhetsbrevet
vi vokste vår trafikk 1,187% Med WordPress. Vi viser deg hvordan.
Bli med 20,000 + andre som får vårt ukentlige nyhetsbrev med insider WordPress tips!
Abonner nå
Legg Til Litt Informasjon i WordPress-Editoren
Når du har publisert feltgruppen din, ser du at feltene dine vises når du går for å opprette et nytt innlegg.
som standard vises de sammen under redigeringsprogrammet i både den klassiske TinyMCE-editoren og den nye blokkredigereren:
Avanserte Egendefinerte Felt i blokkeditoren
informasjonen du oppgir her, lagres i Nettstedets WordPress-database for enkel gjenfinning (du vil se det i neste del av Vår Avanserte Egendefinerte feltopplæring).
Utforske Betinget Logikk
Før Vi går videre, la oss ta en rask omvei.
Se, en av grunnene Til At Avanserte Egendefinerte Felt er så populære er på grunn av alle de interessante implementeringer det tillater.
Og et kraftig alternativ her Er Betinget Logikk, som lar deg vise / skjule felt basert på hvordan et tidligere felt ble besvart.
La oss se på et raskt eksempel på hvordan dette fungerer…
La oss si at du vil blogge om mat, dine reiser eller noe annet enn å løpe. Når du skriver om et ikke-kjørt emne, gir det ikke mye mening å vise de egendefinerte feltene for informasjon om løp, ikke sant?
hva om, i stedet for automatisk å vise alle de egendefinerte feltene du nettopp opprettet, kan du legge til et egendefinert felt som sier «Er dette innlegget et løp?”:
Betinget logikk eksempel
hvis du merker av i boksen, vises feltene kjør informasjon automatisk. Hvis du lar det være ukontrollert, forblir de skjult:
de andre feltene vises når merket
det er hva betinget logikk lar deg gjøre!
for å sette opp dette, vil du redigere feltgruppen din og legge til et Nytt True / False-felt for «Er dette en løp?”:
Legge Til Et Sant / Falskt felt
deretter vil du redigere eksisterende felt og slå På Betinget Logikk slik at hvert felt bare vises når «Er dette et løp?»feltet er merket:
Legge til betinget logikk i andre felt
Slik Viser Du Avanserte Egendefinerte Felt på Frontend
Ok, vi er halvveis gjennom Vår Avanserte Egendefinerte Feltreise. Du kan nå legge til informasjon i de egendefinerte feltene, knytte den til den relevante innleggstypen og lagre den i databasen.
det er imidlertid fortsatt et potensielt problem: informasjonen fra dine egendefinerte felt vises ikke hvor som helst på frontend ennå!
det vil si, selv om du har lagt til noen egendefinerte felt til redaktøren for blogginnleggene dine, ser blogginnlegget ditt fortsatt ut som et vanlig blogginnlegg på frontend:
Ingen egendefinerte felt på frontend
La oss fikse det.
Lei Av WordPress problemer og en treg vert? Vi tilbyr verdensklasse støtte Fra WordPress eksperter tilgjengelig 24/7 og lynrask servere. Sjekk ut våre planer
Det er noen forskjellige måter Du kan vise Avanserte Egendefinerte Feltdata på frontend av nettstedet ditt. Den nøyaktige metoden du velger vil avhenge av dine behov og kunnskapsnivå. Her er tre forskjellige måter å oppnå det:dette krever litt teknisk kunnskap, men det er den beste tilnærmingen mesteparten av tiden, spesielt hvis du er komfortabel med å jobbe i temaets malfiler.
du kan klikke ovenfor for å hoppe rett til en bestemt metode, eller du kan lese gjennom dem alle. Opp til deg.
Hvordan Legge Til Avanserte Egendefinerte Felt I Tema Malfiler
Den første måten å vise din egendefinerte feltinformasjon er å legge Til Avanserte Egendefinerte Felt ‘ PHP funksjoner direkte til barnet tema malfiler.
dette er litt avansert fordi det krever at du graver inn i temaets malfiler, men det sikrer at dine egendefinerte felt automatisk vises på samme sted hver gang.
Spesielt må du redigere enkeltmalen for den aktuelle innleggstypen.
for et vanlig blogginnlegg er dette enkelt.php. Eller, noen temaer bryte ting opp i mal deler. For Eksempel, For TwentyNineteen-temaet, må du faktisk redigere innholdet-enkelt.php mal del.
hvis du føler deg tapt her, vil du kanskje bruke en annen metode.
når du har funnet temamalfilen for ditt enkelt innlegg, kan Du bruke Advanced Custom Fields ‘ the_field () – funksjonen til å vise feltets informasjon. For eksempel,
<?php the_field('FIELD_NAME'); ?>Lær mer her om det.
for eksempel, for å vise «Formål» – feltet, vil du bruke
<?php the_field('purpose'); ?>du kan finne feltnavnet når du redigerer en feltgruppe:
hvor DU finner ACF-feltnavn
så, kombinere en LITEN HTML-markering med PHP, kan du få noe slikt for å vise alle feltene:
<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 å legge til dette over det vanlige innleggsinnholdet, legger du til dette i temamalfilen din over the_content():
Hvor du skal legge til kode i temamalfilen
Og nå, etter å ha oppdatert blogginnlegget, kan du se de egendefinerte feltdataene over Det vanlige WordPress-innholdet:
du kan nå se felt På Frontend
for å lære mer, sjekk ut advanced custom fields’ full dokumentasjon.
Hvordan Vise Avanserte Egendefinerte Felt Data med En Snarvei
for en mye enklere måte å vise dine egendefinerte felt data, kan du også bruke kortkoder. Ulempen her er imidlertid at du må legge til kortnummeret hver gang du vil vise et tilpasset felt. Det er ingen enkel måte å automatisere denne oppgaven på.
kortnummeret er dette:
Hvis du for eksempel skrev inn Dette I WordPress-editoren:
deretter vil frontend av nettstedet ditt ser nøyaktig det samme som forrige tema mal metode:
kortkodene ser identiske ut til tema Malfilen
hvordan vise avanserte tilpassede felt med ELEMENTOR pro
elementor er en av de mest populære wordpress-sidebyggerne. Den lar deg bygge dine design ved hjelp av visuell, dra-og-slipp redigering. På en sidenote Er Elementor En Av Kinstas offisielle partnere.Med Elementor Pro, det betalte tillegget, kan du også bygge temaets malfiler, inkludert et alternativ for å sette inn dynamiske tilpassede feltdata Fra Avanserte Egendefinerte Felt i designene dine.
Dette er et flott alternativ hvis du vil at fleksibiliteten automatisk skal inkludere egendefinerte feltdata i malene dine, men ikke føler deg komfortabel med å gjøre direkte koderedigeringer til temaets malfiler.
For å komme I gang går Du til Maler> Temabygger og lager en Ny Elementor-mal for innlegget Ditt:
Opprett en Ny Elementor-mal
du kan legge til de vanlige elementor widgets for innlegget ditt tittel og innlegg innhold. Deretter, for å vise egendefinerte feltdata, vil du legge til vanlige tekst Editor widgets. Den eneste forskjellen her, i stedet for å redigere teksten, velger Du Alternativet Dynamisk:
ETTER DETTE kan DU velge ACF-Felt fra rullegardinmenyen:
velg «acf field»
Derfra kan Du velge det spesifikke feltet du la til med avanserte Egendefinerte Felt:
Velg det spesifikke feltet du vil vise
Og du Kan også bruke Fanen Avansert trekkspill til å legge til eller legge til informasjon, som lar deg legge til etiketter og enheter:
prepend eller tilføy informasjon
enkelt, ikke sant? Nå bare gjenta for andre egendefinerte felt!
Oppsummering
Ved Hjelp Av Avanserte Egendefinerte Felt kan du berike sidene og blogginnleggene dine med mer data og informasjon med en brukervennlig løsning. Mer: du kan begynne å samle tilleggsinformasjon for innhold på nettstedet ditt og deretter vise det på frontend for besøkende.
For å gjøre det, har du 3 alternativer:
- temaets malfiler
- Med en snarvei
- Med Elementor Pro
kunnskapen du har fått i dette innlegget vil la deg låse opp det dype potensialet I WordPress for å bygge 100% tilpassede nettsteder som går langt utover WordPress’ blogging røtter.
det eneste spørsmålet igjen er dette:
Hva vil du opprette Med Avanserte Egendefinerte Felt? Del det med oss i kommentarene nedenfor
hvis du likte denne artikkelen, vil Du elske Kinstas WordPress hosting plattform. Turbolad ditt nettsted og få 24/7 support fra vår veteran WordPress team. Vår Google Cloud-drevne infrastruktur fokuserer på automatisk skalering, ytelse og sikkerhet. La Oss vise Deg Kinsta forskjellen! Sjekk ut våre planer
Leave a Reply