Käyttöliittymälomakkeen luominen ACF:llä

Tässä opetusohjelmassa näytän sinulle, kuinka voit luoda käyttöliittymälomakkeen Advanced Custom Fields (ACF) -kentillä. Kerron yksityiskohtaisesti, kuinka se toimii ja kuinka voit muokata sitä tarpeidesi mukaan.

Advanced Custom Fields (ACF) on ilmainen laajennus, jonka avulla voit lisätä useiden tyyppisten kenttäasetuksia lähes kaikentyyppiseen WordPressin sisältöön. Voit lisätä kenttiä viesteihin, taksonomioihin, valikoihin, widgeteihin, käyttäjiin ja jopa mukautetuille järjestelmänvalvojan sivuille. Sen pääkäyttö on järjestelmänvalvojalle, mutta voit käyttää sitä myös kenttien luomiseen käyttöliittymässä.

Sovelluksia ACF-kenttien lisäämiseksi käyttöliittymään on monia; voit lisätä lomakkeen julkaisujen, luokkien tai käyttäjien luomista ja päivittämistä varten. Jollakin koodilla voit jopa luoda yleisen yhteydenottolomakkeen, jossa vastaukset tallennetaan mukautettuina postaustyyppisinä viesteinä ja koodi laukaisee sähköposti-ilmoitukset lomakevastauksista. Aivan kuten normaali yhteydenottolomake. ACF-käyttöliittymän lomaketoimintojen käyttäminen lomakkeiden luomiseen ja vierailijoiden luoda tai muokata sivuston sisältöä ilman kirjautumista ovat yleisiä käyttötarkoituksia. Mutta käytä tätä varoen. Tämä avaa helposti roskapostia ja väärinkäyttöä, ja pahimmassa tapauksessa vierailijat voivat tuhota sivustosi sisällön tai asetukset. Sinun tulisi ainakin vaatia vierailijoita kirjautumaan sisään kelvollisilla käyttäjillä, jotta he pääsevät käyttämään lomakkeita, jotka voivat muuttaa kriittistä WordPress-sisältöä (käyttäjäprofiili, viestit jne.).

Mitä teemme

Oletan, että WordPress-sivusto on määrittänyt joukon lisäkenttiä käyttäjille, joilla on mukautettu rooli (‘ member‘) ACF:n avulla. Näillä käyttäjillä ei ole lainkaan järjestelmänvalvojan oikeuksia, mutta haluamme tarjota heille mahdollisuuden muokata omia kenttiään profiilissaan. Ratkaisu, jonka olen valinnut, on luoda mukautettu sivumalli heidän profiilinsa päivittämistä varten ja näyttää lomakkeen vain, jos he ovat kirjautuneita ja heillä on oikea rooli.

Pidän sen tässä opetusohjelmassa melko yksinkertaisena, joten en sisällytä esimerkkiä tavallisten käyttäjäprofiilikenttien lisäämisestä WordPressiin (sähköposti, salasana jne.). Se jää hieman tämän opetusohjelman ulkopuolelle. Sallin vain ACF-kenttien muokkaamisen tällä muokkausprofiilisivulla.

ACF:n avulla olen luonut kenttäryhmän, jossa on joukko asetuksia jäsenkäyttäjille:

Ja minulla on teemassani mukautettu sivumalli, joka näyttää tällä hetkellä tältä – tällä hetkellä vain tavallinen yhden sivun malli;

Tarkistamme rivillä #11, onko nykyinen käyttäjä kirjautunut sisään ja onko hänellä mukautettu rooli member. Muuta rooli tai vähimmäissääntö mihin tahansa, johon haluat sallia tämän käyttöliittymälomakkeen. Muista vain, että jopa WordPressin alimmilla roolilla, subscriber, on oikeus muokata profiiliaan hallintapaneelissa.

Lyhyesti sanottuna haluamme lisätä nämä kentät jokaiselle jäsenelle tälle mukautetulle käyttöliittymälle:

Kuinka ACF-käyttöliittymälomakkeet toimivat

Sinun on lisättävä kaksi funktiokutsua malliin, johon haluat käyttöliittymälomakkeen; [acf_form_head](https://www.advancedcustomfields.com/resources/acf_form_head/)()ja [acf_form](https://www.advancedcustomfields.com/resources/acf_form/)().

Funktio acf_form_head()on sijoitettava mallin yläosaan ennen tulosta. Yleensä mallissa tämä tarkoittaa ennen [get_header](https://developer.wordpress.org/reference/functions/get_header/)(). Funktiokutsu varmistaa, että kaikki komentosarjat ja tyylit lisätään, jotta ACF-kentät hahmonnetaan oikein, sekä kaikki toiminnot työn käsittelyä, validointia ja lähettämistä varten. Meidän ei tarvitse lisätä parametreja tähän funktioon.

Funktio acf_form()on se, joka hahmontaa käyttöliittymälomakkeen, ja se tulee sijoittaa kohtaan, jossa haluat lomakkeen näkyvän. Se hyväksyy joukon asetuksia. Meidän on vähintään ilmoitettava, mitkä kentät tai ryhmät näytetään ja mihin ne tallennetaan.

Kun on päätettävä näytettävät kentät, sinun on yleensä annettava kenttäryhmä (ominaisuus field_groups). Mutta acf_form()toiminto tukee myös tiettyjen yksittäisten kenttien tarjoamista (ominaisuus fields). Voit myös määrittää useita kenttiä tai kenttäryhmiä yhdistääksesi ne samaan lomakkeeseen. Tämän vuoksi field_groupsodottaa array. Joten vaikka haluat näyttää vain yhden kenttäryhmän, sinun on annettava kyseinen tunnus tai slug taulukon sisällä.

Toinen pakollinen ominaisuus, joka sinun on annettava lomakkeella, acf_form()on se, mistä tiedot ladataan ja mihin ne tulisi tallentaa, omaisuuteen post_id. Älä mene lankaan nimestä "posti". Säännöt post_idovat samat käytettäessä get_field(), jos olet perehtynyt ACF:n kanssa työskentelyyn aikaisemmin. Jos kentät koskevat viestiä (viesti, sivu, mukautetun postaustyypin viesti), sinun tarvitsee vain antaa tunnus tähän. Mutta jos haluat ladata ja päivittää tietoja käyttäjistä, noudata tätä muotoa: user_{user ID}. Samoin luokan kenttien kanssa: category_{category ID}. Tarkista kaikki säännöt otsikon "Hae arvo eri kohteista" alta ACF:n dokumentaatiossa osoitteessaget_field().

ACF-käyttöliittymälomakkeen lisääminen malliimme

Ensin lisäämme merkin acf_form_head()aivan yläreunaan, juuri ennen get_header()– mutta jälkeen sivumallin ilmoituksen (rivi #3). Sitten paikkaan, jossa haluamme hahmontaa lomakkeen, lisäämme acf_form()kahdella ominaisuudella.

Meidän on selvitettävä kenttäryhmämme tunnus. Jos lisäsit kenttäryhmän koodin mukaan (minulla on viesti, jossa käsitellään perusteellisesti ACF-kenttien lisäämistä koodin mukaan ), olet jo toimittanut kenttäryhmän etanan. Antaisit sitten etanan field_groupskiinteistöön joukkona. Jos lisäsit kenttäryhmän hallintapaneeliin, sinun on avattava ryhmä selaimessa ja tarkistettava URL-osoite. Olemme kiinnostuneita tunnuksesta, joka näkyy " ?post=" jälkeen:

Esimerkissäni tunnus on 1145. Sitten tarjoan sen joukossa field_groups.

PS: En suosittele tunnuksen kovakoodausta, koska tämä tunnus on erilainen jokaisessa WordPress-esiintymässä! Jos työskentelet paikallisen asennuksen sekä lavastus- ja tuotantopalvelimen parissa, suosittelen ehdottomasti lisäämään kentät koodin mukaan. Näin voit määrittää kenttäryhmän nimen ja se toimii kaikkialla.

Mitä tulee post_idomaisuuteen, saan nykyisen käyttäjätunnuksen WordPress-toiminnolla [get_current_user_id](https://developer.wordpress.org/reference/functions/get_current_user_id/)(). Yhdistän merkkijonon " user_" ja tämän funktion palautuksen muodossa post_id.

Ja siinä se periaatteessa on!

Jos käyn tällä sivulla kirjautuneena sisään jäsenkäyttäjänä, saisin kyseisen käyttäjän nykyiset arvot. Kaikki ACF-kenttätyypit toimivat ja näyttävät hyvältä. Ja voin päivittää arvot käyttöliittymälomakkeella ja nähdä, että ne päivitetään myös adminissa.

Lomakkeen muokkaaminen edelleen

Voimme säätää edelleen käyttäjälle siirrettyjä asetuksia acf_form(). Katso kaikki mahdolliset asetukset ACF:n dokumentaatiosta acf_form() -muodossa .

Tällä hetkellä käyttäjäprofiililomakkeessamme näkyy "Päivitetty", kun asetukset on lähetetty. Tämä ei ole järkevää profiiliasetuksissa. Voimme mukauttaa viestin kiinteistön mukaan updated_message.

Jos haluat, voit määrittää toisen URL-osoitteen, johon ohjataan lomakkeen lähettämisen jälkeen. Oletuksena sama sivu latautuu uudelleen GET-parametrilla ‘ ?updated=true‘. Voit määrittää kiitossivulle tietyn URL-osoitteen, tai jos lomake on viestiä varten, voit halutessasi ohjata tarkastelemaan kyseistä viestiä. Voimme toimittaa URL-osoitteen kiinteistöön return.

Jos haluamme eri tekstin lomakkeen lähetyspainikkeeseen, voimme määrittää tämän ominaisuudessa submit_value.

Voit myös kieltää tagin acf_form()hahmontamisen. <form>Jos haluat yhdistää ACF:n lomakkeen omaan mukautettuun lomakkeeseen, voit määrittää formja kirjoittaa falsemanuaalisesti. Jos teet tämän, ACF voi silti päivittää arvot, mutta sinun on huolehdittava mukautetun lomakkeen muiden kenttien päivittämisestä.<form>``<input type="submit"/>

Toimintojen käynnistäminen lomakkeen lähetyksen yhteydessä

Joskus saatat haluta käynnistää mukautetun toiminnon tai tapahtuman, kun käyttöliittymälomake päivitetään. Yleinen esimerkki on funktion kirjoittaminen, joka lähettää sähköposti-ilmoituksen jokaisen lomakkeen lähetyksen yhteydessä.

Advanced Custom Fields tarjoaa kaksi hyödyllistä koukkua kenttiä päivitettäessä; toiminta [acf/save_post](https://www.advancedcustomfields.com/resources/acf-save_post/)ja suodatin [acf/pre_save_post](https://www.advancedcustomfields.com/resources/acf-pre_save_post/). Jälleen, älä mene lankaan nimestä "posti". Ne käynnistetään kaikissa ACF-kenttien päivityksessä, mukaan lukien kentät käyttäjälle, kategorialle, valikoille ja niin edelleen.

Suodatin acf/pre_save_postsuoritetaan vain käyttöliittymälomakkeissa, joissa käytetään acf_form(). Tämän suodattimen parametrina saamme post_id, saman arvon kuin olemme syöttäneet post_idyllä acf_form(). Suodatin odottaa sinun palaavan post_id. Muista, että meidän on jäsennettävä tämä, jos emme viittaa viestitunnukseen. Esimerkiksi käyttäjälle sinun on tehtävä jotain:

add_filter('acf/pre_save_post', function($post_id) {
    if (strpos($post_id, 'user_') === false) {
        return $post_id;
    }
 
    $user_id = intval(substr($post_id, 5));  // Extracts the user ID
 
    // Do your thing. You'll find the submitted values in $_POST
 
    return $post_id;
});

Vaihtoehtoisesti voit käyttää koukkua acf/save_post– mutta muista, että se laukeaa myös adminissa. Tämän koukun parametrina saat post_idsaman kuin acf/pre_save_post. Tärkeä asia, joka on muistettava käytettäessä acf/save_post, että voit käyttää koukkuprioriteettia määrittääksesi, suoritetaanko funktio ennen kenttien tallentamista vai sen jälkeen. Toiminto, joka on kytketty prioriteettiin 10 tai korkeammalle, käynnistyy, kun kentät on tallennettu. Ja prioriteetti, joka on alle 10, laukeaa ennen kuin ACF tallentaa arvot.

add_action('acf/save_post', function($post_id) {
    // You can fetch the values with standard get_field()
});
 
add_action('acf/save_post', function($post_id) {
    // You can access the submitted values in $_POST
}, 8);

Kun olet kytkenyt toiminnon ennen tallennusta (prioriteetti alle 10), voit verrata lähetettyjä arvoja siihen, mitä ACF tallentaa. Voit get_field()saada nykyisen arvon ja verrata niitä vastaavaan arvoon kohdassa $_POST.

Jos haluat tehdä jotain vasta, kun kentät on päivitetty käyttöliittymässä, voit yksinkertaisesti tarkistaa, olemmeko järjestelmänvalvojassa [is_admin](https://developer.wordpress.org/reference/functions/is_admin/)(). Alla on esimerkki siitä, kuinka voit määrittää sähköposti-ilmoitukset, kun käyttäjä päivittää asetuksiaan käyttöliittymässä.

add_action('acf/save_post', function($post_id) {
    if (strpos($post_id, 'user_') === false) {
        return $post_id;
    }
 
    if (is_admin()) {
        return;  // Bail if we are updating in admin
    }
 
    $user_id = intval(substr($post_id, 5));
 
    // Use get_field() to get the saved/submitted values if needed
    // Then use wp_mail() to send an email
});