câmpurile personalizate WordPress sunt o parte importantă a ceea ce face WordPress un sistem flexibil de gestionare a conținutului, mai degrabă decât „doar o platformă de blogging”.

când vine vorba de câmpuri personalizate WordPress, pluginul Freemium Advanced Custom Fields este unul dintre cele mai cunoscute nume. Este mai ușor să lucrați cu câmpuri personalizate în toate aspectele și este, de asemenea, subiectul postării noastre de astăzi.mai exact, vom explica de ce câmpurile personalizate avansate sunt atât de valoroase și apoi vă vom arăta pas cu pas cum îl puteți aplica pe site-ul dvs.

iată tot ce veți găsi în acest post:
există o mulțime de a acoperi, așa că haideți să se arunca cu capul în…

ce sunt câmpurile personalizate WordPress? Ce Te Lasă Să Faci?

câmpurile personalizate WordPress vă permit să adăugați, să stocați și să afișați informații suplimentare despre o bucată de conținut în WordPress. La un nivel mai tehnic, câmpurile personalizate vă ajută să stocați metadate.chiar dacă nu sunteți familiarizați cu acest termen, câmpurile personalizate alimentează o mare parte din funcționalitatea pluginurilor și temelor preferate.

de exemplu, WooCommerce, cel mai popular mod de a construi un magazin de comerț electronic, folosește câmpuri personalizate pentru a stoca informații suplimentare despre un produs precum:

• Preț
• greutate
• culoare

sau, dacă aveți un plugin pentru calendarul evenimentelor WordPress, acel plugin va folosi câmpuri personalizate pentru a stoca informații suplimentare despre un:

• locație
• Start/end time
• Preț

puteți crea, de asemenea, propriile câmpuri personalizate pentru a stoca informații care sunt relevante pentru nevoile dvs. unice, care este ceea ce acest post întreg este de aproximativ.

cât de cool sunt câmpurile personalizate în WordPress, uh? Aflați cum să profitați de ele cu uimitorul @ wp_acf în ultimul nostru ghid! Click aici pentru a Tweet

când ar trebui să utilizați câmpuri personalizate?

acum, s-ar putea să vă întrebați De ce aveți nevoie chiar de câmpuri personalizate în primul rând.

de exemplu, dacă doriți să postați un eveniment pe site-ul dvs. WordPress, nu ați putea pune toate aceste informații ca text obișnuit în editorul WordPress?Ei bine, da, ai putea. Dar utilizarea câmpurilor personalizate este o abordare mai bună din câteva motive:

• introducere mai ușoară — mai degrabă decât tastarea lucrurilor de la zero, un grup de câmpuri personalizate bine stabilit va face mult mai ușor introducerea datelor. De exemplu, în loc să tastați o dată, puteți selecta doar Data dintr-un selector de dată.
• consistență — informațiile pe care le introduceți în câmpurile personalizate se vor afișa întotdeauna în funcție de configurarea dvs., ceea ce înseamnă că vor fi consecvente pe întregul site.
• actualizări și întreținere ușoare — dacă doriți să schimbați ceva despre modul în care aceste informații se afișează în viitor, puteți actualiza un singur lucru, mai degrabă decât să editați fiecare postare individual.

WordPress include built-in Câmpuri personalizate funcționalitate

WordPress include de fapt built-in funcționalitate pentru adăugarea de câmpuri personalizate la conținutul. În editorul clasic TinyMCE, puteți activa acest lucru din zona Opțiuni ecran. Sau, în noul editor de blocuri, îl puteți activa din zona de opțiuni:

puteți introduce apoi datele de câmp personalizate folosind perechi de chei / valori:

această funcționalitate de câmpuri personalizate native este complet funcțională, dar nu este cel mai ușor de utilizat mod de a face lucrurile, motiv pentru care o mulțime de oameni apelează la pluginul Advanced Custom Fields.

câmpuri personalizate avansate face mult mai ușor

pune pur și simplu, câmpuri personalizate avansate face mult mai ușor de a lucra cu câmpuri personalizate în WordPress în… destul de mult toate aspectele.

simplifică interfața pentru adăugarea și gestionarea câmpurilor personalizate în tabloul de bord WordPress și simplifică, de asemenea, procesul de afișare a informațiilor din câmpurile personalizate de pe interfața site-ului dvs. Acest fapt nu face decât să explice de ce este activ pe mai mult de 1 milion de site-uri web cu un rating de 4,9 stele pe peste 1.000 de recenzii.

pe backend, vă va permite să creați casete meta ușor de utilizat, care includ tipuri de câmpuri preselectate. Deci, mai degrabă decât acea interfață generică de perechi cheie-valoare( cum ar fi cele pe care le-ați văzut mai sus), veți putea utiliza culegătorii de date, casetele de selectare și multe altele:

în total, câmpurile personalizate avansate oferă peste 30 de tipuri de câmpuri diferite pe care le puteți adăuga în orice zonă din tabloul de bord, inclusiv postări, utilizatori, taxonomii, suporturi media, comentarii și chiar pagini cu opțiuni personalizate.puteți vizualiza informații detaliate despre fiecare tip de câmp aici.

câmpuri personalizate avansate, de asemenea, face mult mai ușor pentru a afișa aceste informații, cu funcții bine documentate, scurtăturile, blocuri Gutenberg, și mai mult.

sau, puteți găsi integrări cu alte instrumente, cum ar fi unii constructori de pagini WordPress drag-and-drop.

câmpuri personalizate avansate Free vs Pro: de care aveți nevoie?

Advanced Custom Fields vine atât într-o versiune gratuită, cât și într-o versiune premium accesibilă.pentru cele mai multe utilizări de bază, versiunea gratuită este complet bine. Acesta vă oferă acces la aproape toate tipurile de teren, precum și toate caracteristicile de economisire a timpului și ușor de utilizat prezentate mai sus.dacă doriți doar să stocați câteva informații suplimentare despre conținutul dvs., versiunea gratuită este tot ce aveți nevoie.

acestea fiind spuse, versiunea Pro adaugă câteva caracteristici destul de convenabile care vă ajută să utilizați câmpuri personalizate avansate în moduri mai interesante:

• Repeater fields — acestea vă permit să repetați anumite câmpuri / grupuri de câmpuri post-cu-post. De exemplu, dacă adăugați informații despre un vorbitor la un eveniment, un câmp repetor vă va ajuta să gestionați situația în care există mai multe difuzoare (puteți „repeta” câmpurile pentru difuzor de câte ori este necesar, ceea ce vă permite să gestionați cazurile de margine în care există mai multe difuzoare).
• ACF blocks-afișează câmpurile ca un bloc Gutenberg, mai degrabă decât o cutie meta. Acest lucru este deosebit de convenabil dacă construiți un site pentru un client și doriți să le oferiți o modalitate ușoară de a introduce și vizualiza date de câmp personalizate.
• câmp de conținut flexibil-creați machete din alte câmpuri. Este un fel de constructor de pagini ușor bazat pe informații de câmp personalizate.
• Galerie câmp-încărcați mai multe imagini într-un singur câmp.

există și alte diferențe, cum ar fi paginile de opțiuni, capacitatea de a clona câmpuri, îmbunătățiri ale câmpurilor de relații și alte modificări mai mici.

puteți vedea toate caracteristicile ACF PRO aici.

ACF PRO începe de la 25 USD pentru utilizarea pe viață pe un singur site. Sau puteți plăti 100 USD pentru utilizarea pe viață pe site-uri nelimitate.

când aveți dubii, începeți cu versiunea gratuită până când vă dați seama exact de ce funcționalitate aveți nevoie. Puteți oricând să faceți upgrade mai târziu, dacă este necesar.

Advanced Custom Fields Tutorial: Cum să adăugați câmpurile

să săpăm acum în tutorialul actual Advanced Custom Fields și vă voi arăta cum să creați și să afișați primul set de câmpuri personalizate.

pentru acest exemplu, să presupunem că aveți un blog despre alergare. Ești ca … într-adevăr în funcționare și doriți să împărtășiți antrenamentele de zi cu zi cu cititorii. Mai exact, cu fiecare postare pe blog, doriți să partajați o rulare:

• scop — să presupunem că aveți două tipuri diferite de rulare: „speed work” și „conditioning”.
• distanța — cât timp a fost alergarea ta.
• ora de începere — când ați început alergarea.
• timpul de finalizare — când ați terminat alergarea.
• locație — unde a avut loc alergarea ta.

pentru a colecta aceste informații, veți dori să adăugați cinci câmpuri personalizate.

este important să rețineți că principiile pe care le veți învăța în acest tutorial Advanced Custom Fields se aplică oricărui caz de utilizare. Alegem doar un exemplu specific pentru că ne ajută să avem un exemplu tangibil la care să ne conectăm.

vom rupe acest tutorial în două părți:

1. cum să adăugați și să gestionați câmpurile personalizate pe backend.
2. cum se afișează informații de câmp personalizate pe frontend-ul site-ului dvs.

creați un nou grup de câmpuri

după ce ați instalat și activat versiunea gratuită a câmpurilor personalizate avansate din WordPress.org, accesați câmpuri personalizate> Adăugați nou pentru a crea primul grup de câmpuri.

după cum sugerează și numele, un „grup de câmpuri” este un grup de unul sau mai multe câmpuri personalizate care sunt afișate împreună în tabloul de bord WordPress.

pentru acest exemplu, veți crea un grup de câmpuri care conține cinci câmpuri particularizate.

dați grupului dvs. de câmp un nume, apoi alegeți locația acestuia. Pentru acest exemplu, dorim să afișăm aceste câmpuri personalizate pentru postările obișnuite de blog WordPress, astfel încât să le puteți lăsa ca Postare implicită.

cu toate acestea, dacă doriți să afișați câmpurile personalizate în altă parte, cum ar fi alături de un tip de postare personalizată sau cu o taxonomie, doriți să modificați acest lucru. De asemenea, puteți configura mai multe reguli pentru a afișa câmpurile în mai multe locații:

adăugați câmpuri personalizate

apoi, faceți clic pe butonul + Adăugare câmp pentru a adăuga primul câmp personalizat:

aceasta va deschide o mulțime de opțiuni, dar nu trebuie neapărat să completați totul.

cele mai importante două opțiuni sunt:

• etichetă de câmp — aceasta este ceea ce va apărea în editor. Acesta va fi, de asemenea, utilizat pentru a genera numele câmpului, care este ceea ce veți folosi în cod. Nu trebuie să schimbați numele câmpului (deși puteți, dacă aveți nevoie).
• tip de câmp — acesta este tipul de informații pe care doriți să le colectați. De exemplu, doriți ca un câmp numeric să colecteze informații despre număr sau un câmp de e-mail să colecteze o adresă de e-mail.

pentru acest prim câmp, doriți un tip de câmp buton Radio:

mai jos, puteți introduce opțiunile de selectare a butonului radio în caseta de opțiuni:

există, de asemenea, o serie de alte opțiuni pe care le puteți face, cum ar fi dacă este necesar sau nu un câmp și o valoare implicită. Simțiți-vă liber să le configurați în funcție de nevoile dvs.

să ne uităm la un alt exemplu: un câmp personalizat pentru a colecta distanța de rulare. De data aceasta, doriți un tip de câmp numeric:

de asemenea, puteți face lucrurile puțin mai ușor de utilizat optând pentru adăugarea unității de distanță. Și dacă doriți, puteți adăuga și validare cu o valoare minimă și o valoare maximă. De exemplu, probabil că nu mergeți pe Curse de 1.000 de mile (și dacă faceți… OMG, sunteți ultimul Forrest Gump)!

repetați procesul pentru toate celelalte câmpuri personalizate pe care doriți să le colectați. Când ați terminat, ar trebui să arate cam așa:

configurați setările și publicați

pentru a termina lucrurile, derulați în jos până la caseta de setări. Aici, puteți controla modul în care câmpurile dvs. se afișează în editorul WordPress.

de cele mai multe ori, le puteți lăsa ca implicite. Dar poți schimba lucrurile dacă vrei. De exemplu, puteți opta să afișați câmpurile personalizate deasupra editorului WordPress obișnuit:

după ce ați făcut alegerile, publicați grupul de câmpuri pentru a-l face live.

adăugați câteva informații în editorul WordPress

după ce ați publicat grupul de câmpuri, veți vedea câmpurile dvs. când mergeți să creați o nouă postare.

în mod implicit, acestea vor apărea împreună sub editor atât în editorul clasic TinyMCE, cât și în noul editor de blocuri:

informațiile pe care le introduceți aici vor fi stocate în baza de date WordPress a site-ului dvs. pentru o regăsire ușoară (veți vedea asta în următoarea parte a tutorialului nostru de câmpuri personalizate avansate).

explorarea logica condiționată

înainte de a merge mai departe, să ia un ocol rapid.

vedeți, unul dintre motivele pentru care câmpurile personalizate avansate sunt atât de populare este din cauza tuturor implementărilor interesante pe care le permite.

și o opțiune puternică aici este logica condiționată, care vă permite să afișați / ascundeți câmpurile în funcție de modul în care a fost răspuns un câmp anterior.

să ne uităm la un exemplu rapid despre cum funcționează acest lucru…

să spunem că doriți să faceți blog despre mâncare, călătoriile dvs. sau orice altceva decât alergarea. Când scrieți despre un subiect care nu rulează, nu are prea mult sens să afișați câmpurile personalizate pentru informații despre rulare, nu?

Ce se întâmplă dacă, în loc să afișați automat toate câmpurile personalizate pe care tocmai le-ați creat, puteți adăuga un câmp personalizat care spune „este această postare o rulare?”:

Dacă bifați caseta, atunci câmpurile de informații run apar automat. Dacă îl lăsați necontrolat, acestea rămân ascunse:

asta este ceea ce logica condiționată vă permite să faceți!

pentru a configura acest lucru, ați edita grupul de câmpuri și ați adăuga un nou câmp Adevărat / Fals pentru ” este o rulare?”:

apoi, ar edita câmpurile existente și porniți logica condiționată, astfel încât fiecare câmp afișează numai atunci când „este aceasta o rulare?”câmpul este bifat:

cum se afișează câmpurile personalizate avansate pe Frontend

Ok, suntem la jumătatea călătoriei câmpurilor personalizate avansate. Acum Puteți adăuga informații în câmpurile personalizate, le puteți asocia cu tipul de postare relevant și le puteți stoca în baza de date.

cu toate acestea, există încă o problemă potențială: informațiile din câmpurile personalizate nu apar nicăieri pe frontend încă!

adică, chiar dacă ați adăugat câteva câmpuri personalizate editorului pentru postările dvs. de blog, postarea dvs. de blog arată în continuare ca o postare de blog normală pe frontend:

să remediem asta.

există câteva moduri diferite în care puteți afișa date avansate de câmpuri personalizate pe interfața site-ului dvs. Metoda exactă pe care o alegeți va depinde de nevoile și nivelul de cunoștințe. Iată trei moduri diferite de a realiza acest lucru:

1. fișierele șablon ale temei dvs. — acest lucru necesită puține cunoștințe tehnice, dar este cea mai bună abordare de cele mai multe ori, mai ales dacă vă simțiți confortabil să lucrați în Fișierele șablon ale temei.
2. cu un cod scurt — aceasta este foarte simplă și o opțiune bună dacă doriți doar să inserați date de câmp personalizate de la caz la caz. Cu toate acestea, necesită mult mai multă muncă manuală, deoarece va trebui să adăugați coduri scurte la fiecare postare.
3. cu Elementor Pro — Acest lucru este mare, deoarece elimină complet necesitatea de a lucra cu PHP, dar este un produs premium și, de asemenea, înseamnă că va trebui să utilizați Elementor Pro pentru templating dumneavoastră.

puteți face clic mai sus pentru a sări direct la o anumită metodă sau puteți citi prin toate acestea. Depinde de tine.

cum se adaugă câmpuri personalizate avansate în Fișierele șablon temă

prima modalitate de a afișa informațiile câmp personalizat este de a adăuga funcții PHP câmpuri personalizate avansate direct la fișierele șablon tema copilului dumneavoastră.

Acest lucru este un pic avansat, deoarece necesită să sape în Fișierele șablon temei dvs., dar se asigură că câmpurile personalizate va afișa automat în același loc de fiecare dată.

în mod specific, va trebui să editați șablonul unic pentru tipul de postare în cauză.

pentru o postare obișnuită pe blog, aceasta este unică.php. Sau, unele teme rupe lucrurile în părți șablon. De exemplu, pentru tema TwentyNineteen, trebuie să editați conținutul-single.parte șablon php.

dacă vă simțiți pierdut aici, poate doriți să utilizați o altă metodă.

după ce ați găsit fișierul șablon de temă pentru postarea dvs. unică, puteți utiliza funcția The_field() Advanced Custom Fields pentru a afișa informațiile unui câmp. De exemplu,

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

Aflați mai multe aici despre el.

de exemplu, pentru a afișa câmpul „scop”, utilizați

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

puteți găsi numele câmpului atunci când editați un grup de câmpuri:

deci, combinând puțin marcaj HTML cu PHP, s-ar putea să obțineți ceva de genul acesta pentru a afișa toate câmpurile:

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

pentru a adăuga acest lucru deasupra conținutului postării obișnuite, ați adăuga acest lucru în fișierul șablon de temă de deasupra the_content():

și acum, după reîmprospătarea postării pe blog, puteți vedea datele de câmp personalizate deasupra conținutului WordPress obișnuit:

pentru a afla mai multe, consultați documentația completă a câmpurilor personalizate avansate.

cum se afișează câmpurile personalizate avansate de date cu un cod scurt

pentru un mod mult mai simplu de a afișa datele câmpuri personalizate, puteți utiliza, de asemenea scurtăturile. Dezavantajul aici, totuși, este că va trebui să adăugați codul scurt de fiecare dată când doriți să afișați un câmp personalizat. Nu există o modalitate ușoară de a automatiza această sarcină.

codul scurt este acesta:

de exemplu, dacă ați introdus acest lucru în editorul WordPress:

apoi, frontend de site-ul dvs. ar arata exact la fel ca metoda șablon temă anterioară:

cum de a afișa câmpuri personalizate avansate cu Elementor pro

Elementor este una dintre cele mai populare constructori de pagini WordPress. Vă permite să vă construiți desenele folosind editare vizuală, drag-and-drop. Pe o notă laterală, Elementor este unul dintre partenerii oficiali ai Kinsta.

cu Elementor Pro, Add-on plătit, puteți construi, de asemenea, fișiere șablon tema dvs., inclusiv o opțiune pentru a insera date dinamice câmp personalizat din câmpuri personalizate avansate în desenele tale.

aceasta este o opțiune excelentă dacă doriți ca flexibilitatea să includă automat date de câmp personalizate în șabloanele dvs., dar nu vă simțiți confortabil făcând modificări directe de cod în Fișierele șablon ale temei.

pentru a începe, veți merge la șabloane> Theme Builder și creați un nou șablon Elementor pentru postarea dvs. unică:

puteți adăuga widget-urile Elementor obișnuite pentru titlul postării și conținutul postării. Apoi, pentru a afișa datele de câmp personalizate, ați adăuga widget-uri obișnuite ale editorului de Text. Singura diferență aici, în loc să editați textul, ați selecta opțiunea dinamică:

după aceasta, puteți selecta câmpul ACF din meniul derulant:

de acolo, puteți selecta câmpul specific pe care l-ați adăugat cu câmpuri personalizate avansate:

și puteți utiliza, de asemenea, fila acordeon avansat pentru a pregăti sau adăuga informații, ceea ce vă permite să adăugați etichete și unități:

ușor, nu? Acum repetați doar pentru alte câmpuri personalizate!

rezumat

folosind câmpuri personalizate avansate, vă puteți îmbogăți paginile și postările de pe blog cu mai multe date și informații cu o soluție ușor de utilizat. Mai mult: puteți începe să colectați informații suplimentare pentru orice conținut de pe site-ul dvs. și apoi să îl afișați pe frontend pentru vizitatorii dvs.

pentru a face acest lucru, aveți 3 opțiuni:

• fișierele șablonului temei dvs.
• cu un cod scurt
• cu Elementor Pro

cunoștințele pe care le-ați câștigat în acest post vă vor permite să deblocați potențialul profund al WordPress pentru a construi site-uri personalizate 100% care depășesc rădăcinile blogurilor WordPress.

singura întrebare rămasă este aceasta:

ce veți crea cu câmpuri personalizate avansate? Împărtășește-l cu noi în comentariile de mai jos