Vakio WordPress-kentät riittävät ensimmäiseen räätälöityyn projektiisi asti. Heti kun sinun täytyy näyttää tuotetietoja kortilla, lisätä galleria sivulle tai liittää toimitusehtolohko, törmäät editorin rajoituksiin: otsikko, teksti, kategoriat, siinä kaikki.

Ulos pääsee, eikä se vaadi ACF Prota 149 dollarin vuosihintaan. Mukautetut metalaatikot lisäävät mielivaltaisia kenttiä suoraan artikkelin muokkausnäkymään ilman visuaalista rakentajaa ja ilman tusinaa tarpeetonta moduulia. CMB2 tekee juuri tämän: se tarjoaa PHP-rajapinnan metalaatikoiden kuvaamiseen koodissa, joka elää versionhallinnassa, ei tietokannassa.

Alla on koko työnkulku: lisäosan asentamisesta datan näyttämiseen julkisella puolella. Tämän artikkelin loppuun mennessä sinulla on toimiva metalaatikkotiedosto, joka mukautuu mihin tahansa sisältötyyppiin sivuista WooCommerce-tuotteisiin.

💡 Pikaopas:

• Asenna CMB2 WordPress.org-hakemistosta: lisäosa on ilmainen ja asentuu kahdella klikkauksella.
• Luo metaboxes.php-tiedosto teemakansioosi ja kuvaa tarvittavat kentät cmb2_admin_init-koukun kautta.
• Sisällytä tiedosto functions.php-tiedostoon yhdellä require_once-rivillä ja varmista metalaatikon näkyminen hallintapaneelissa.
• Näytä tallennettu data julkisella puolella get_post_meta()-funktiolla asianmukaisesti suojattuna.

Mikä CMB2 on: koodia visuaalisen rakentajan sijaan

CMB2 on kehittäjäkirjasto, joka luo metalaatikoita, mukautettuja kenttiä ja lomakkeita WordPressissä. Suoraan paketista se tukee kymmeniä kenttätyyppejä: teksti, WYSIWYG-editori, tiedostojen lähetys, päivämäärävalitsin, värivalitsin, valintanapit, pudotusvalikot, toistimet ja ryhmät.

Suurin ero ACF:ään: CMB2:ssa ei ole visuaalista rakentajaa. Kaikki metalaatikot kuvataan PHP-tiedostoissa teemassasi. Kehittäjille tämä on plussaa: konfiguraatio elää Gitissä, sitä ei voi vahingossa poistaa hallintapaneelin kautta, ja migraatio staging- ja tuotantoympäristön välillä tarkoittaa koodin käyttöönottoa. Samalla CMB2 on täysin ilmainen, kun taas ACF Pro maksaa noin 149 dollaria vuodessa toistettavista kentistä ja ryhmistä.

Kirjastoa on ylläpidetty aktiivisesti vuodesta 2014 lähtien. WordPress.orgissa lisäosalla on 5 tähden arvosana ja yli 300 000 aktiivista asennusta. GitHub-repositorio saa säännöllisesti päivityksiä: viimeisin julkaisu korjasi yhteensopivuuden PHP 8.4:n ja WordPress 6.7:n kanssa. Tämä ei ole hylätty projekti, joka jätetään pois puolen vuoden päästä.

Vaihe 1: Asenna lisäosa

Mene kohtaan Lisäosat → Lisää uusi, kirjoita hakukenttään "CMB2" ja klikkaa "Asenna". Aktivoinnin jälkeen lisäosa lataa moottorinsa, mutta ei muuta mitään hallintapaneelissa itsestään: metalaatikot ilmestyvät vasta, kun kuvaat ne koodissa.

Jos sisällytät CMB2:n manuaalisesti teemaasi asentamatta sitä hallintapaneelin kautta, lisää seuraava functions.php-tiedoston alkuun:

1
require_once __DIR__ . '/cmb2/init.php';

Kaksi tärkeää huomiota. Ensinnäkin: init.php tulisi ladata mahdollisimman aikaisin, kaikkien koukkujen ulkopuolella. Älä kääri sitä if ( ! class_exists(... -tarkistuksiin; CMB2 hoitaa päällekkäisen latauksen ristiriidat itse. Toiseksi: manuaalisella sisällytyksellä joudut päivittämään CMB2:n käsin, toisin kuin hallintapaneelin kautta tapahtuvissa automaattipäivityksissä.

Vaihe 2: Kirjoita metalaatikkotiedosto

Luo cmb2-metaboxes-kansio lapsiteemasi juureen ja metaboxes.php-tiedosto sen sisään. Tämä tiedosto sisältää kaikki kenttämäärittelysi.

Alla on toimiva koodi, joka lisää tekstieditorin, lyhyen kuvauksen ja tunnusvalitsimen WooCommerce-tuotteisiin. Kopioi se metaboxes.php-tiedostoon:

1
add_action( 'cmb2_admin_init', 'sdstudio_register_metaboxes' );
2
 
3
function sdstudio_register_metaboxes() {
4
 
5
    $prefix = '_sdstudio_';
6
 
7
    $cmb = new_cmb2_box( array(
8
        'id'           => 'product_extra_info',
9
        'title'        => __( 'Дополнительная информация о товаре', 'cmb2' ),
10
        'object_types' => array( 'product' ),
11
        'context'      => 'normal',
12
        'priority'     => 'high',
13
        'show_names'   => true,
14
    ) );
15
 
16
    $cmb->add_field( array(
17
        'name'    => __( 'Описание для карусели на главной', 'cmb2' ),
18
        'desc'    => __( 'Текст, который будет показан в слайдере товаров.', 'cmb2' ),
19
        'id'      => $prefix . 'carousel_desc',
20
        'type'    => 'wysiwyg',
21
        'options' => array(
22
            'textarea_rows' => 5,
23
        ),
24
    ) );
25
 
26
    $cmb->add_field( array(
27
        'name' => __( 'Короткое описание', 'cmb2' ),
28
        'desc' => __( 'Одна строка — для карточки товара в сетке.', 'cmb2' ),
29
        'id'   => $prefix . 'short_desc',
30
        'type' => 'textarea_small',
31
    ) );
32
 
33
    $cmb->add_field( array(
34
        'name' => __( 'Бейдж товара', 'cmb2' ),
35
        'desc' => __( 'Метка «Новинка», «Хит» или «Распродажа».', 'cmb2' ),
36
        'id'   => $prefix . 'badge',
37
        'type' => 'select',
38
        'show_option_none' => true,
39
        'options'          => array(
40
            'new'   => __( 'Новинка', 'cmb2' ),
41
            'hit'   => __( 'Хит', 'cmb2' ),
42
            'sale'  => __( 'Распродажа', 'cmb2' ),
43
        ),
44
    ) );
45
 
46
}

Mitä tässä tapahtuu: cmb2_admin_init-koukku laukeaa, kun hallintapaneeli latautuu, ja rekisteröi metalaatikon tuotteen muokkaussivulle. new_cmb2_box() luo säiliön, jonka otsikko on "Tuotteen lisätiedot", ja kolme add_field()-kutsua lisää siihen kenttiä: WYSIWYG-editorin, kompaktin tekstikentän ja pudotusvalikon valmiilla vaihtoehdoilla. Jokainen kenttä saa yksilöllisen id-tunnisteen _sdstudio_-etuliitteellä, jotta vältetään ristiriidat muiden lisäosien kanssa.

Jos tarvitset tavallisia sivuja WooCommercen sijaan, korvaa 'object_types' => array( 'product' ) rivillä 'object_types' => array( 'page' ). Useille sisältötyypeille listaa ne: array( 'page', 'post' ).

Täydellinen lista kenttätyypeistä löytyy virallisesta CMB2-dokumentaatiosta GitHubissa. Kymmeniä vaihtoehtoja on saatavilla suoraan paketista: tavallisesta tekstistä ja WYSIWYG-editoreista tiedostojen lähetykseen, värivalitsimiin, valintanappeihin ja taksonomioihin. Valitse oikea tyyppi omaan tehtävääsi dokumentaation perusteella, älä arvaamalla.

Vaihe 3: Sisällytä se functions.php-tiedostoon

Nyt sinun täytyy ladata luomasi tiedosto. Avaa functions.php lapsiteemassasi ja lisää yksi rivi ennen sulkevaa ?>-tagia tai tiedoston loppuun, jos sulkevaa tagia ei ole:

1
require_once __DIR__ . '/cmb2-metaboxes/metaboxes.php';

Ennen koodin lisäämistä varmuuskopioi functions.php. Syntaksivirhe require_once-rivissä kaataa sivuston fataalilla PHP-virheellä, ja voit palauttaa tiedoston vain FTP:n tai hallintapaneelisi kautta. Tallenna ja avaa mikä tahansa tuote hallintapaneelissa ja varmista, että "Tuotteen lisätiedot" -metalaatikko ilmestyy sisältöeditorin alapuolelle.

Täytä testikentät ja klikkaa "Päivitä". CMB2 tallentaa datan automaattisesti wp_postmeta-tauluun. Ylimääräisiä save_post-koukkukutsuja ei tarvita: kirjasto sieppaa artikkelin tallennuksen ja käsittelee kenttänsä itse.

Vaihe 4: Näytä data julkisella puolella

Data on tallennettu tietokantaan; nyt se täytyy näyttää vierailijoille. Avaa teematiedosto, joka vastaa tuotesivusta, yleensä single-product.php tai content-single-product.php. Lisää koodi WordPress-silmukan sisään:

1
<?php
2
$carousel_desc = get_post_meta( get_the_ID(), '_sdstudio_carousel_desc', true );
3
$badge         = get_post_meta( get_the_ID(), '_sdstudio_badge', true );
4
 
5
if ( ! empty( $carousel_desc ) ) : ?>
6
    <div class="product-carousel-desc">
7
        <?php echo wp_kses_post( $carousel_desc ); ?>
8
    </div>
9
<?php endif; ?>
10
 
11
<?php if ( ! empty( $badge ) ) : ?>
12
    <span class="product-badge product-badge--<?php echo esc_attr( $badge ); ?>">
13
        <?php echo esc_html( $badge ); ?>
14
    </span>
15
<?php endif; ?>
16

Erillinen selitys: get_post_meta() hakee arvon kentän ID:n perusteella. WYSIWYG-kentälle käytä wp_kses_post()-funktiota, joka sallii sallitut HTML-tagit ja suodattaa mahdollisesti vaaralliset. Pelkälle tekstille tai valinnalle esc_html() riittää: se muuntaa erikoismerkit HTML-entiteeteiksi ja estää XSS:n.

Jos metalaatikko on luotu sivuille ('object_types' => array( 'page' )), sijoita tämä sama koodi tiedostoon page.php tai content-page.php. Mekaniikka on sama: get_post_meta() silmukan sisällä, suojaus kenttätyypin mukaan.

Video: CMB2 asennuksesta toimivaan metalaatikkoon

Tässä 20 minuutin opetusvideossa tekijä käy läpi koko työnkulun: asennus, kenttien luonti, tiedoston sisällytys ja datan näyttäminen julkisella puolella. Hyödyllinen katsottavaksi, jos tekstiohjeet jättivät aukkoja.

⁉️🤔 Usein kysytyt kysymykset

Miten CMB2 eroaa ACF:stä?

ACF tarjoaa visuaalisen kenttärakentajan suoraan hallintapaneelissa: voit koota metalaatikon kirjoittamatta riviäkään koodia. CMB2 vaatii kenttien kuvaamisen PHP-tiedostoissa teemassasi. Kehittäjille, jotka säilyttävät konfiguraation Gitissä, CMB2 on kätevämpi: metalaatikot eivät ole riippuvaisia tietokannan tilasta, niitä ei voi vahingossa poistaa hallintapaneelin kautta, ja migraatio staging- ja tuotantoympäristön välillä tarkoittaa koodin käyttöönottoa. ACF Pro maksaa alkaen 149 dollaria vuodessa toistettavista kentistä ja ryhmistä; CMB2 on ilmainen.

Voiko CMB2:ta käyttää asentamatta lisäosaa?

Kyllä. Kopioi CMB2-kansio teemaasi ja sisällytä init.php tiedostossa functions.php, kuten vaiheessa 1 näytettiin. Tämä lähestymistapa on kätevä premium-teemoille, joiden tulisi toimia heti aktivoinnin jälkeen ilman, että käyttäjän tarvitsee asentaa kolmannen osapuolen lisäosaa. Huono puoli: joudut päivittämään CMB2:n manuaalisesti jokaisen uuden version yhteydessä.

Toimivatko CMB2-kentät Gutenberg-editorissa?

Kyllä, CMB2-metalaatikot näkyvät Gutenberg-editorin alapuolella tutulla tavalla, sisällön jälkeisessä osiossa. Ne eivät kuitenkaan suoraan paketista integroidu editorin lohkoihin. Jos sinun täytyy upottaa kenttä suoraan lohkoon, tarvitaan lisäkehitystä CMB2 API:n ja register_block_type()-funktion kautta.

Mitä teen, jos metalaatikko ei näy hallintapaneelissa?

Tarkista kolme asiaa. Ensinnäkin: vastaako object_types muokattavan artikkelin tyyppiä? WooCommerce-tuotteille tarvitset 'product', et 'post'. Toiseksi: onko PHP-syntaksivirhettä? Ota WP_DEBUG käyttöön wp-config.php-tiedostossa ja tarkista loki. Kolmanneksi: onko kentän id-etuliite ristiriidassa toisen lisäosan kanssa? Käytä yksilöllistä etuliitettä, kuten _sdstudio_.

Voinko luoda toistettavia kenttäryhmiä?

Kyllä. CMB2 tukee toistettavia kenttiä 'repeatable' => true -lipun kautta ja toistettavia ryhmiä $cmb->add_group_field()-funktion kautta. Ryhmän avulla voit lisätä "Ominaisuus: arvo" -lohkon ja luoda uusia ilmentymiä "Lisää rivi" -painikkeella suoraan hallintapaneelissa.

Toimiiko CMB2 multisiten kanssa?

Kyllä, lisäosa on täysin yhteensopiva WordPress Multisiten kanssa. Metalaatikot voidaan rekisteröidä globaalisti aktiivisen verkkoteeman functions.php-tiedostossa tai yksilöllisesti jokaiselle sivustolle. get_post_meta()-kutsu toimii samalla tavalla molemmissa tiloissa.

CMB2 vai ACF: kumpi lähestymistapa valita tehtävääsi

CMB2 ratkaisee täsmälleen yhden tehtävän: mukautettujen metalaatikoiden luomisen koodin kautta, konfiguraation ollessa tallennettuna teematiedostoihin tietokannan sijaan. Valinta riippuu työnkulustasi, ei abstraktista "kumpi on parempi" -kysymyksestä.

• Jos olet kehittäjä ja säilytät kaiken projektin konfiguraation Gitissä, valitse CMB2. Metalaatikot elävät metaboxes.php-tiedostossa, otetaan käyttöön teemasi mukana eivätkä vaadi tietokannan synkronointia staging- ja tuotantoympäristön välillä.

• Jos tarvitset visuaalisen rakentajan, toistettavia joustavia kenttiä ja valmiita Gutenberg-lohkoja ilman koodin kirjoittamista, valitse ACF Pro. 149 dollarista vuodessa alkava tilaus maksaa itsensä takaisin prototyyppien rakentamisen nopeudessa.

• Jos projektisi käyttää jo CMB2:ta ja metalaatikot toimivat luotettavasti, pysy siinä. Kirjastoa ei ole hylätty, se ei vaadi kiireellistä migraatiota ja saa säännöllisesti yhteensopivuuspäivityksiä.

Kokeile molempia lähestymistapoja testisivustolla: rakenna sama metalaatikko CMB2:lla ja ACF:llä. Ero lähestymistavassa käy ilmeiseksi 20 minuutissa. Mitä työkalua sinä käytät? Jaa kommenteissa.