WordPress custom kentät ovat tärkeä osa mitä tekee WordPress joustava sisällönhallintajärjestelmä, eikä ”vain blogging platform”.

WordPress-kustomoitujen kenttien osalta freemium Advanced Custom Fields-lisäosa on yksi tunnetuimmista nimistä. Se helpottaa työtä mukautettuja kenttiä kaikilla osa-alueilla, ja se on myös aihe meidän postitse tänään.

erityisesti selitämme, miksi kehittyneet Mukautetut kentät ovat niin arvokkaita ja näytämme sitten vaihe vaiheelta, miten voit soveltaa sitä WordPress-sivustoosi.

Here ’s everything you’ ll find in this post:
There ’s a lot to cover, so let’ s dive in…

mitkä ovat WordPress Custom kentät? Mitä He Antavat Sinun Tehdä?

WordPress custom kentät Voit lisätä, tallentaa ja näyttää lisätietoja pala sisältöä WordPress. Teknisemmällä tasolla Mukautetut kentät auttavat tallentamaan metatietoja.

vaikka et tuntisikaan tätä termiä, Mukautetut kentät valtaavat suuren osan suosikkilaajennustesi ja teemojesi toiminnallisuudesta.

esimerkiksi WooCommerce, suosituin tapa rakentaa verkkokauppa, käyttää mukautettuja kenttiä tallentaakseen lisätietoja tuotteesta, kuten:

• Hinta
• Paino
• väri

tai, jos sinulla on WordPress-tapahtumakalenteri, kyseinen liitännäinen käyttää mukautettuja kenttiä tallentaakseen lisätietoa tapahtumasta, kuten:

• Location
• Start/end time
• Price

Voit myös luoda omia mukautettuja kenttiä tallentamaan tietoja, jotka ovat relevantteja sinun yksilöllisiin tarpeisiisi, mistä tässä koko postauksessa on kyse.

kuinka hienoja ovat muokatut kentät WordPressissä, uh? 👨 💻Opi hyödyntämään niitä hämmästyttävä @ wp_acf uusimmassa oppaassa! 💪Klikkaa Twiitataksesi

milloin sinun pitäisi käyttää mukautettuja kenttiä?

nyt saatat ihmetellä, miksi ylipäätään edes tarvitset mukautettuja kenttiä.

esimerkiksi, jos haluat julkaista tapahtuman WordPress-sivustollasi, etkö voisi vain laittaa kaiken tuon tiedon tavalliseksi tekstiksi WordPress-editoriin?

no, kyllä sinä voisit. Mukautettujen kenttien käyttäminen on kuitenkin parempi lähestymistapa muutamasta syystä:

• helpompi syöttää — sen sijaan, että kirjoittaisi asioita tyhjästä, hyvin laadittu mukautettu kenttäryhmä tekee tietojen syöttämisestä paljon helpompaa. Esimerkiksi sen sijaan, että kirjoittaisit päivämäärän, voit vain valita päivämäärän päivämääränvalitsimesta.
• johdonmukaisuus — mukautettuihin kenttiin syöttämäsi tiedot näkyvät aina asetuksiesi mukaisesti, mikä tarkoittaa, että ne ovat yhdenmukaisia koko sivustossasi.
• Helpot päivitykset ja huolto — Jos haluat muuttaa jotain siitä, miten tiedot näkyvät tulevaisuudessa, voit vain päivittää yhden asian sen sijaan, että joudut muokkaamaan jokaista viestiä erikseen.

WordPress sisältää sisäänrakennetut Mukautetut kentät toiminnallisuus

WordPress itse asiassa sisältää sisäänrakennetut toiminnot mukautettujen kenttien lisäämiseksi sisältöön. Klassisessa TinyMCE-Editorissa voit ottaa tämän käyttöön näytön asetukset-alueelta. Tai, uudessa lohkoeditorissa, voit ottaa sen käyttöön Asetukset-alueelta:

voit syöttää mukautetut kenttätiedot avain/arvopareja käyttäen:

tämä native custom fields toiminnallisuus on täysin toimiva, mutta se ei ole kaikkein käyttäjäystävällinen tapa tehdä asioita, minkä vuoksi monet ihmiset kääntyvät Advanced Custom Fields plugin sijaan.

Advanced Custom Fields Makes It a Lot easily

Put simply, Advanced Custom Fields makes it a lot easily to work with custom fields in WordPress in… pretty much all aspects.

se yksinkertaistaa käyttöliittymää muokattujen kenttien lisäämiseen ja hallintaan WordPress-kojelaudassa ja se myös yksinkertaistaa prosessia, jossa näytetään Tietoja mukautetuista kentistä sivustosi etuosassa. Tämä seikka vain auttaa selittämään, miksi se on aktiivinen yli 1 miljoonaa verkkosivustoa, joilla on 4,9 tähden luokitus yli 1,000 arvostelua.

taustapuolelle voit luoda käyttäjäystävällisiä metalaatikoita, jotka sisältävät ennalta valitut kenttätyypit. Niin, sen sijaan, että yleinen avain-arvo pari käyttöliittymä (kuten näit edellä), voit käyttää päivämäärä poimijat, valintaruudut, ja enemmän näin:

in total, Advanced Custom Fields in the block editor

in total, Advanced Custom Fields in you can add to any area in your dashboard, including posts, users, taxonomies, media, comments, and even custom options pages.

voit katsoa tarkemmat tiedot jokaisesta kenttätyypistä täältä.

Advanced Custom kentät tekee myös paljon helpompi näyttää, että tiedot, hyvin dokumentoitu toimintoja, lyhytnumeroita, Gutenberg lohkot, ja enemmän.

tai, voit löytää integraatioita muiden työkalujen kanssa, kuten jotkut vedä ja pudota WordPress-sivun rakentajat.

Advanced Custom Fields Free vs Pro: Which One Do You Need?

Advanced Custom Fields on sekä ilmainen että edullinen premium-versio.

useimmissa peruskäytössä ilmaisversio on täysin kunnossa. Sen avulla pääset käsiksi lähes kaikkiin kenttätyyppeihin sekä kaikkiin edellä kuvattuihin aikaa säästäviin ja käyttäjäystävällisiin ominaisuuksiin.

Jos haluat vain tallentaa hieman ylimääräistä tietoa sisällöstäsi, ilmainen versio on kaikki mitä tarvitset.

kun tämä on sanottu, Pro — versio lisää joitakin melko käteviä ominaisuuksia, joiden avulla voit käyttää kehittyneitä mukautettuja kenttiä mielenkiintoisemmilla tavoilla:

• Toistinkenttiä-näillä voit toistaa tiettyjä kenttiä / kenttäryhmiä post-by-post-periaatteella. Esimerkiksi, jos olet lisäämällä tietoa kaiuttimesta tapahtumaan, toistin kenttä auttaisi sinua käsittelemään tilannetta, jossa on enemmän kuin yksi puhuja(voit vain ”toistaa” kentän (t) puhuja niin monta kertaa kuin tarvitaan, jonka avulla voit käsitellä reuna tapauksissa, joissa on useita kaiuttimia).
• ACF blocks — Näytä kenttäsi Gutenbergin blokkina, ei metalaatikkona. Tämä on erityisen kätevää, jos olet rakentamassa sivustoa asiakkaalle ja haluat antaa heille helpon tavan syöttää ja visualisoida mukautettuja kenttätietoja.
• joustava sisältökenttä — luo ulkoasuja muista kentistä. Se on vähän kuin kevyt sivunrakentaja, joka perustuu mukautettuihin kenttätietoihin.
• Galleriakenttä — lataa useita kuvia yhteen kenttään.

pelissä on myös joitakin muita eroja, kuten vaihtoehtosivut, kyky kloonata kenttiä, parannuksia suhdekenttiin ja muita pienempiä hienosäätöjä.

näet kaikki ACF Pron ominaisuudet täältä.

ACF PRO alkaa 25 dollarista elinikäiseen käyttöön yhdellä sivustolla. Tai voit maksaa $100 elinikäisestä käytöstä rajoittamattomilla sivustoilla.

Jos olet epävarma, aloita ilmaisversiosta, kunnes selvität tarkalleen, mitä toimintoja tarvitset. Voit aina päivittää myöhemmin tarvittaessa.

Advanced Custom Fields Tutorial: Kuinka lisätä kenttiä

nyt kaivaa todellinen Advanced Custom Fields opetusohjelma ja näytän, miten luoda ja näyttää ensimmäisen joukon mukautettuja kenttiä.

tässä esimerkissä sanotaan, että sinulla on blogi juoksemisesta. Olet todella innostunut juoksemisesta ja haluat jakaa päivittäisiä treenejäsi lukijoiden kanssa. Tarkemmin sanottuna jokaisen blogikirjoituksen yhteydessä haluat jakaa juoksun:

• tarkoitus — sanotaan, että sinulla on kaksi erilaista juoksulajia: ”nopeustyö” ja ”ehdollistaminen”.
• Etäisyys-kuinka pitkä juoksusi oli.
• Start Time-when you started your run.
• viimeistelyaika — kun suoritit juoksusi loppuun.
• sijainti-missä juoksusi tapahtui.

tietojen keräämiseksi haluat lisätä viisi mukautettua kenttää.

on tärkeää huomata, että periaatteet opit tässä Advanced Custom Fields opetusohjelma sovelletaan mihin tahansa käyttötapaukseen. Valitsemme vain tietyn esimerkin, koska se auttaa olemaan konkreettinen esimerkki, johon voi olla yhteydessä.

murramme tämän opetusohjelman kahteen osaan:

1. miten voit lisätä ja hallita omia kenttiäsi backendissä.
2. miten voit näyttää mukautetut kenttätiedot sivustosi etupuolella.

Luo uusi kenttäryhmä

kun olet asentanut ja aktivoinut kehittyneiden kustomoitujen kenttien ilmaisen version WordPress.org, siirry mukautettuihin kenttiin > lisää uusia luodaksesi ensimmäisen kenttäryhmän.

kuten nimestä voi päätellä, ”kenttäryhmä” on ryhmä, jossa on yksi tai useampi mukautettu kenttä, jotka näkyvät yhdessä WordPress-kojelaudassa.

tässä esimerkissä luodaan yksi kenttäryhmä, joka sisältää viisi mukautettua kenttää.

Anna kenttäryhmällesi nimi ja valitse sitten sen sijainti. Tässä esimerkissä, haluamme näyttää näitä mukautettuja kenttiä säännöllisesti WordPress blog posts, joten voit jättää sen oletuksena postitse.

kuitenkin, jos haluat näyttää Mukautetut kentät muualla, kuten mukautetun post-tyypin rinnalla tai taksonomian kanssa, haluat muuttaa tätä. Voit myös määrittää useita sääntöjä näyttääksesi kenttäsi useissa paikoissa:

Add Custom Fields

next, click the + Add Field button to add your first custom field:

Tämä avaa paljon vaihtoehtoja, mutta kaikkea ei välttämättä tarvitse täyttää.

kaksi tärkeintä vaihtoehtoa ovat:

• Kenttämerkintä — tämä näkyy editorissa. Sitä käytetään myös luomaan Kentän nimi, jota käytät koodissa. Sinun ei tarvitse muuttaa kentän nimeä (vaikka voit, jos tarvitset).
• kenttätyyppi — tämän tyyppisiä tietoja haluat kerätä. Esimerkiksi, haluat Numerokentän kerätä numerotietoja tai sähköpostikentän kerätä sähköpostiosoitteen.

tähän ensimmäiseen kenttään haluaisi Radionappikenttätyypin:

alempana, voit syöttää radionapin valintavaihtoehdot valintaruutuun:

on myös useita muita valintoja, joita voit tehdä, kuten tarvitaanko kenttää ja oletusarvo. Voit vapaasti määrittää nämä tarpeisiisi.

katsotaanpa toista esimerkkiä: oma kenttä, jolla kerätään juoksumatka. Tällä kertaa toivoisi Lukukenttätyyppiä:

asioista voisi tehdä myös hieman käyttäjäystävällisempiä valitsemalla etäisyysyksikön liittämisen. Ja jos haluat, voit myös lisätä validoinnin vähimmäis – ja Enimmäisarvolla. Esimerkiksi, et todennäköisesti ole menossa 1,000-mile runs (ja jos teet… OMG, olet perimmäinen Forrest Gump)!

toista prosessi kaikille muille muokatuille kentille, jotka haluat kerätä. Tehtynä sen pitäisi näyttää jokseenkin tältä:

määritä asetukset ja julkaise

Viimeistele asiat, vieritä Asetusruutuun. Tässä, voit hallita, miten kentät näkyvät WordPress editor.

useimmiten voit jättää nämä oletuksiksi. Mutta voit vapaasti muuttaa asioita, jos haluat. Esimerkiksi, voit valita näyttää mukautettuja kenttiä yllä säännöllisesti WordPress editor:

kun olet tehnyt valintasi, Julkaise kenttäryhmäsi jotta se elää.

lisää tietoa WordPress-muokkaimeen

kun olet julkaissut kenttäryhmäsi, näet kenttiesi ilmestyvän, kun lähdet luomaan uutta viestiä.

oletuksena ne näkyvät yhdessä muokkaimen alla sekä klassisessa TinyMCE-muokkaimessa että uudessa lohkomuokkaimessa:

tässä antamasi tiedot tallennetaan sivustosi WordPress-tietokantaan helppoa hakua varten (näet sen seuraavassa osassa meidän Advanced Custom Fields tutorial).

tutkitaan ehdollista logiikkaa

ennen kuin edetään, tehdään nopea kiertotie.

katso, yksi syy siihen, miksi Advanced Custom-kentät ovat niin suosittuja, on kaikki sen mahdollistamat mielenkiintoiset toteutukset.

ja yksi tehokas vaihtoehto tässä on ehdollinen logiikka, jonka avulla voit näyttää / piilottaa kentät sen perusteella, miten edelliseen kenttään vastattiin.

katsotaan nopea esimerkki, miten tämä toimii…

sanotaan, että haluat blogata ruuasta, matkoistasi tai muusta kuin juoksemisesta. Kun kirjoitat ei-suorita aihe, se ei ole paljon järkeä näyttää mukautettuja kenttiä tietoja ajaa, eikö?

Mitä jos sen sijaan, että näyttäisit automaattisesti kaikki juuri luomasi Mukautetut kentät, voisit lisätä mukautetun kentän, jossa lukee ”Is this post a run?”:

Jos valitset ruudun, suorita-tietokentät ilmestyvät automaattisesti. Jos jätät sen valitsematta, ne pysyvät piilossa:

sen ehdollisen logiikan avulla voit tehdä!

tämän perustamiseksi muokkaisit kenttäryhmääsi ja lisäisit uuden True / False-kentän ” Is this a run?”:

silloin muokattaisiin olemassa olevia kenttiä ja kytkettäisiin ehdollinen logiikka päälle niin, että jokainen kenttä näyttää vain, kun ” onko tämä ajo?”kenttä on tarkistettu:

miten näyttää Advanced Custom Fields Frontend

Ok, olemme puolivälissä Advanced Custom Fields-matkaamme. Voit nyt lisätä tietoja mukautettuihin kenttiin, liittää ne asiaankuuluvaan post-tyyppiin ja tallentaa ne tietokantaasi.

on kuitenkin vielä yksi potentiaalinen ongelma: mukautettujen kenttien tiedot eivät näy vielä missään frontendissa!

toisin sanoen, vaikka olet lisännyt muokkaimeen muokattuja kenttiä blogikirjoituksiasi varten, blogikirjoituksesi näyttää silti aivan tavalliselta blogikirjoitukselta frontendissa:

korjataan se.

on olemassa muutamia eri tapoja, joilla voit näyttää edistyneitä mukautettuja kenttien tietoja sivustosi etuosassa. Valitsemasi tarkka menetelmä riippuu tarpeistasi ja tietämystasostasi. Tässä on kolme eri tapaa saavuttaa se:

1. teeman mallitiedostot — tämä vaatii hieman teknistä tietämystä, mutta se on paras lähestymistapa suurimman osan ajasta, varsinkin jos olet mukava työskennellä teeman mallitiedostoja.
2. lyhytnumerolla — tämä on super yksinkertainen ja hyvä vaihtoehto, jos haluat vain lisätä mukautettuja kenttätietoja tapauskohtaisesti. Kuitenkin, se vaatii paljon enemmän manuaalista työtä, koska sinun täytyy lisätä lyhytnumeroita jokaiseen virkaan.
3. Elementor Pron kanssa — tämä on hienoa, koska se poistaa kokonaan tarpeen työskennellä PHP: n kanssa, mutta se on premium-tuote ja se tarkoittaa myös sitä, että sinun täytyy käyttää Elementor Pro: ta temppuiluusi.

voit klikata yllä hypätäksesi suoraan tiettyyn menetelmään tai voit lukea ne kaikki läpi. Sinä päätät.

kuinka lisätä kehittyneitä mukautettuja kenttiä Teemapohjatiedostoihin

ensimmäinen tapa näyttää mukautetut kenttätiedot on lisätä Advanced Custom Fieldsin PHP-toiminnot suoraan lapsesi teeman mallitiedostoihin.

Tämä on hieman edistynyt, koska se vaatii sinua kaivautumaan teeman mallitiedostoihin, mutta se varmistaa, että mukautetut kentät näkyvät automaattisesti samassa kohdassa joka kerta.

erityisesti sinun on muokattava kyseisen postityypin yksittäistä mallia.

tavalliselle blogikirjoitukselle tämä on Sinkku.php. Tai, jotkut teemat hajottaa asioita mallin osiin. Esimerkiksi TwentyNineteen-teemaa varten on oikeasti muokattava sisältöä-Sinkku.php malli osa.

Jos tunnet olevasi eksyksissä täällä, kannattaa käyttää toisenlaista menetelmää.

kun olet löytänyt yhden viestisi teemapohjatiedoston, voit käyttää Advanced Custom Fields’ the_field () – toimintoa kentän tietojen näyttämiseen. Esimerkiksi

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

Lue siitä lisää täältä.

esimerkiksi ”Käyttötarkoitus” – kentän näyttämiseksi käyttäisit

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

löydät kentän nimen, kun muokkaat kenttäryhmää:

mistä löytää ACF-kentän nimi

niin, yhdistämällä vähän HTML-merkintää PHP: hen, saattaa saada jotain tällaista näyttämään kaikki kentät:

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

lisätäksesi tämän tavallisen viestisisällön yläpuolelle, lisäisit tämän teemapohjatiedostoosi the_contentin yläpuolelle():

Ja nyt blogikirjoituksen päivittämisen jälkeen näet mukautetun kenttätiedon tavallisen WordPress-sisällön yläpuolella:

saadaksesi lisätietoja, tutustu advanced custom fields’ täydellinen dokumentaatio.

Kuinka näyttää kehittyneitä mukautettuja kenttien tietoja Lyhytnumerolla

paljon yksinkertaisempi tapa näyttää mukautettuja kenttien tietoja, voit myös käyttää lyhytnumeroita. Haittapuoli tässä, vaikka, on, että sinun täytyy lisätä lyhytnumeroon joka ikinen kerta, kun haluat näyttää mukautetun kentän. Ei ole helppoa tapaa automatisoida tätä tehtävää.

lyhytnumero on tämä:

esimerkiksi, jos tämän antoi WordPress-muokkaimessa:

silloin sivustosi julkisivu näyttäisi täsmälleen samalta kuin edellinen teemapohjamalli:

miten näyttää kehittyneitä mukautettuja kenttiä Elementor Pro

Elementor on yksi suosituimmista WordPress-sivun rakentajista. Sen avulla voit rakentaa malleja käyttäen visuaalista, vedä ja pudota editointi. Elementor on yksi Kinstan virallisista yhteistyökumppaneista.

Elementor Prolla, maksullisella lisäosalla, voit myös rakentaa teeman mallitiedostoja, mukaan lukien mahdollisuuden lisätä dynaamisia mukautettuja kenttätietoja edistyneistä mukautetuista kentistä malleihisi.

Tämä on loistava vaihtoehto, jos haluat joustavuuden automaattisesti sisällyttää mukautettuja kenttätietoja malleihisi, mutta älä koe mukavaksi tehdä suoria koodimuokkauksia teeman mallitiedostoihin.

aloittaaksesi menisit Templateihin > Theme Builder ja loisit uuden Elementor-mallin postisinglellesi:

voit lisätä tavalliset Elementor-widgetit post-otsikkoon ja-sisältöön. Sitten, näyttää mukautetun kentän tiedot, voit lisätä säännöllisesti tekstieditori widgetit. Ainoa ero tässä, sen sijaan, että muokkaat tekstiä, voit valita Dynaaminen vaihtoehto:

tämän jälkeen voit valita ACF-kentän pudotusvalikosta:

sieltä voit valita tietyn kentän, jonka olet lisännyt kehittyneillä mukautetuilla kentillä:

Valitse tietty kenttä, jonka haluat näyttää

ja voit myös käyttää Advanced Harmony-välilehteä tietojen ennakkoon tai liittämiseen, jolloin voit lisätä nimikkeitä ja yksiköitä:

easy, right? Nyt vain toistaa muita mukautettuja kenttiä!

Yhteenveto

käyttämällä kehittyneitä mukautettuja kenttiä voit rikastuttaa sivujasi ja blogikirjoituksiasi lisätiedoilla ja informaatiolla helppokäyttöisellä ratkaisulla. Lisää: voit alkaa kerätä lisätietoja mistä tahansa sivustosi sisällöstä ja näyttää sen sitten vierailijoillesi tarkoitetussa käyttöliittymässä.

siihen sinulla on 3 vaihtoehtoa:

• teeman mallitiedostot
• lyhytnumerolla
• Elementor Pro

tässä viestissä saamasi tiedon avulla voit avata WordPress-sivuston syviä mahdollisuuksia rakentaa 100% mukautettuja sivustoja, jotka menevät paljon pidemmälle kuin WordPress ” blogging roots.

jäljelle jää vain tämä kysymys:

mitä luot edistyneillä mukautetuilla kentillä? Jaa se meille kommenteissa alla