WordPress ja metakenttiä lohkoeditoriin natiivisti

Monet digitoimistot käyttävät Advanced Custom Fields -lisäosaa (ACF) hallitakseen metakenttiä WordPressissä. Tässä ohjeessa näytämme, miten metakenttiä voidaan lisätä lohkoeditorissa – ilman lisäosia!

Kun lisäät metakenttiä ja sisältötyyppejä WordPress-sivustollesi, voit tallentaa ja hallita lisätietoja, jotka ovat oleellisia juuri sinun sivustollasi.

WordPressin editori ja metakentät

Miten siis lisätään metakenttiä ilman lisäosia WordPressissä? Tavoitteenamme on hyödyntää WordPressin sisäänrakennettua toiminnallisuutta ja lisätä kolme metakenttää sisältötyypille ”Toimistot”:

• Sähköposti
• Puhelinnumero
• Verkkosivuston URL

Tämän toteuttamiseen tarvitaan kolme vaihetta:

1. Rekisteröi sisältötyyppi
2. Rekisteröi meta-kenttä
3. Rekisteröi mukautettu käyttöliittymä asetuspaneeliin (settings panel)

Lopputulos tulee näyttämään tältä:

Rekisteröi sisältötyyppi

Rekisteröidään ”office”-sisältötyyppi käyttäen register_post_type-funktiota. Huomaa, että sisältötyypin on tuettava custom-fields-ominaisuutta, tai muuten metakenttien dataa ei yhdistetä REST API:in.

register_post_type( 'office', array(
   ...
   // Add support for custom-fields
   'supports' => array( 'title', 'editor', 'custom-fields', ),
   ...
) );

Aseta myös show_in_rest arvoon true, jotta sisältötyyppi on käytettävissä lohkoeditorissa.

Katso koko koodiesimerkki tietotyypin rekisteröimisestä GitHubissa.

Rekisteröi meta-kenttä

Seuraavaksi rekisteröimme meta-kentän käyttämällä register_post_meta-funktiota. Aseta show_in_rest arvoon true, jotta meta-kenttä on käytettävissä REST API:ssa.

Tässä esimerkki office_email meta-kentän rekisteröintiin:

register_post_meta(
  'office',
  'office_email',
  array(
    'type'              => 'string',
    'description'       => 'Email address of the office',
    'single'            => true,
    'show_in_rest'      => true,
    'sanitize_callback' => 'sanitize_email',
    'auth_callback'     => function ( $allowed, $meta_key, $post_id, $user_id ) {
      // Allows anyone who can edit this post
      return current_user_can( 'edit_post', $post_id );
    },
  )
);

Huomaa, että parametrit sanitize_callback ja auth_callback ovat tärkeitä tietoturvan kannalta.

Katso koko esimerkki meta-kenttien rekisteröimiseen GitHubissa.

Rekisteröi käyttöliittymä metakenttiä varten

Lopuksi meidän täytyy rekisteröidä mukautettu käyttöliittymä, jotta metakentät saadaan näkymään WordPressissä. Ryan Welchrer on julkaissut GitHubissa erinomaisen esimerkin siitä, miten tämä tehdään käyttäen JavaScriptiä ja WordPressin komponentteja.

Jotta mukautettu käyttöliittymä saadaan näkyviin asetuspaneelin sivupalkissa, käytämme WordPressin SlotFills-komponenttia.

1. Importataan registerPlugin-funktio @wordpress/plugins-paketista.
2. Importataan lisäksi PluginDocumentSettingPanel paketista @wordpress/editor.
3. Käytä useSelect:iä sisältötyypin ja artikkelin ID:n hakuun.
4. Käytä useEntityProp:ia meta-kenttien näyttämiseen ja tallentamiseen.
5. Käytä tarvittavia komponentteja PluginDocumentSettingPanel-komponentin sisällä, kuten TextControl-komponenttia UI:n rakentamiseen.
6. Rekisteröi ”lisäosa”.

Sisältötyyppi ja artikkelin ID

Editorissa haluamme tietää, mikä on…

1. nykyinen sisältötyyppi: tämän tiedon perusteella voimme päättää millä tiedostotyypillä näytämme uuden käyttöliittymän
2. artikkelin ID: tämän tiedon perusteella voimme hakea ja päivittää meta-kenttien arvot.

Tässä esimerkki:

import {
  store as editorStore,
} from '@wordpress/editor';

const { currentPostType, currentPostId } = useSelect( ( select ) => { // eslint-disable-line
  return {
    currentPostType: select( editorStore ).getCurrentPostType(),
  currentPostId: select( editorStore ).getCurrentPostId(),
  };
}, [] );

Nyt voimme esimerkiksi päättää mille sisältötyypille näytämme käyttöliittymän:

if ( currentPostType !== 'office' ) {
  return null;
}

Hae ja päivitä meta-kenttien arvot

useEntityProp-hookilla voi hakea ja päivittää meta-kenttien arvot:

const [ meta, setMeta ] = useEntityProp( // eslint-disable-line
  'postType',
  currentPostType,
  'meta',
  currentPostId
);

Tämän jälkeen TextControl-komponentilla voimme näyttää toimiston sähköpostin (office_email meta-kenttä):

<TextControl
  label={ __( 'Email', 'example-dynamic' ) }
  value={ meta?.office_email }
  onChange={ ( office_email ) => {
    setMeta( { ...meta, office_email } );
  } }
  __next40pxDefaultSize
/>

Saman voi toistaa muille meta-kentille.

Koko käyttöliittymäkoodin paketoiminen

Muistutuksena, lopputuloksen tulisi näyttää tältä lohkoeditorin asetuspaneelin sivupalkissa:

Katso koko koodiesimerkki Githubissa.

Mitä seuraavaksi?

Nyt tiedät, miten WordPressissä rekisteröidään mukautettu sisältötyyppi, miten rekisteröidään meta-kentät ja miten luodaan mukautettu käyttöliittymä uuden mukautetun datan esittämiseen – kaikki natiivisti WordPressin sisäänrakennetuilla toiminnoilla.

Tulevissa artikkeleissa näytämme, miten meta-kenttien tietoja voidaan yhdistää Block Bindings APIn avulla.