Standard WordPress-felt er nok frem til ditt første tilpassede prosjekt. I det øyeblikket du trenger å vise produktspesifikasjoner på et kort, legge til et galleri på en side, eller feste en blokk med fraktvilkår, treffer du redaktørens begrensninger: tittel, tekst, kategorier, det er alt.

Det finnes en utvei, og det er ikke ACF Pro til $149 per år. Egendefinerte metabokser legger til vilkårlige felt direkte i redigeringsgrensesnittet for innlegg uten en visuell bygger og uten et dusin unødvendige moduler. CMB2 gjør akkurat dette: det tilbyr et PHP API for å beskrive metabokser i kode som lever i versjonskontroll, ikke i databasen.

Nedenfor finner du den komplette arbeidsflyten: fra installasjon av utvidelsen til visning av data på frontend. Innen du er ferdig med denne artikkelen, vil du ha en fungerende metaboksfil som tilpasser seg enhver innholdstype fra sider til WooCommerce-produkter.

💡 Rask oversikt:

• Installer CMB2 fra WordPress.org-katalogen: utvidelsen er gratis og installeres med to klikk.
• Opprett en metaboxes.php-fil i temamappen din og beskriv de nødvendige feltene via cmb2_admin_init-hooken.
• Inkluder filen i functions.php med en enkelt require_once-linje og bekreft metaboksen i administrasjonspanelet.
• Vis lagrede data på frontend via get_post_meta() med korrekt escaping.

Hva er CMB2: kode i stedet for en visuell bygger

CMB2 er et utviklerbibliotek som oppretter metabokser, egendefinerte felt og skjemaer i WordPress. Ut av boksen støtter det dusinvis av felttyper: tekst, WYSIWYG-editor, filopplasting, datovelger, fargevelger, radioknapper, nedtrekkslister, repeterbare felt og grupper.

Hovedforskjellen fra ACF: CMB2 har ingen visuell bygger. Alle metabokser beskrives i PHP-filer i temaet ditt. For utviklere er dette en fordel: konfigurasjonen lever i Git, den kan ikke slettes ved et uhell via administrasjonspanelet, og migrering mellom staging og produksjon reduseres til kodeutrulling. Samtidig er CMB2 helt gratis, mens ACF Pro vil koste deg rundt $149 per år for repeterbare felt og grupper.

Biblioteket har vært aktivt vedlikeholdt siden 2014. På WordPress.org har utvidelsen en 5-stjerners vurdering og over 300 000 aktive installasjoner. GitHub-repositoriet mottar jevnlige oppdateringer: den siste utgivelsen adresserte kompatibilitet med PHP 8.4 og WordPress 6.7. Dette er ikke et forlatt prosjekt som vil bli droppet om seks måneder.

Steg 1: Installer utvidelsen

Gå til Utvidelser → Legg til ny, skriv "CMB2" i søkefeltet, og klikk "Installer." Etter aktivering laster utvidelsen motoren sin, men endrer ikke noe i administrasjonspanelet av seg selv: metabokser vil bare vises etter at du har beskrevet dem i kode.

Hvis du inkluderer CMB2 manuelt i temaet ditt uten å installere det via administrasjonspanelet, legg til følgende i begynnelsen av functions.php:

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

To viktige punkter. For det første: init.php bør lastes så tidlig som mulig, utenfor noen hooks. Ikke pakk den inn i if ( ! class_exists(...-sjekker; CMB2 håndterer konflikter ved duplikat lasting selv. For det andre: med manuell inkludering må du oppdatere CMB2 manuelt, i motsetning til automatiske oppdateringer via administrasjonspanelet.

Steg 2: Skriv metaboksfilen

Opprett en cmb2-metaboxes-mappe i roten av barnetemaet ditt og en metaboxes.php-fil inni den. Denne filen vil inneholde alle feltdefinisjonene dine.

Nedenfor er fungerende kode som legger til en tekstredigerer, en kort beskrivelse og en merkvelger til WooCommerce-produkter. Kopier den inn i metaboxes.php:

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
}

Det som skjer her: cmb2_admin_init-hooken utløses når administrasjonspanelet lastes og registrerer metaboksen på produktredigeringssiden. new_cmb2_box() oppretter en beholder med tittelen "Ytterligere produktinformasjon", og tre add_field()-kall legger til felt i den: en WYSIWYG-editor, et kompakt tekstfelt og en nedtrekksliste med forhåndsdefinerte alternativer. Hvert felt får en unik id med _sdstudio_-prefikset for å unngå konflikter med andre utvidelser.

Hvis du trenger vanlige sider i stedet for WooCommerce, erstatt 'object_types' => array( 'product' ) med 'object_types' => array( 'page' ). For flere innholdstyper, list dem opp: array( 'page', 'post' ).

For den fullstendige listen over felttyper, se den offisielle CMB2-dokumentasjonen på GitHub. Dusinvis av alternativer er tilgjengelige ut av boksen: fra ren tekst og WYSIWYG-editorer til filopplastinger, fargevelgere, radioknapper og taksonomier. Velg riktig type for din spesifikke oppgave basert på dokumentasjon, ikke gjetning.

Steg 3: Inkluder den i functions.php

Nå må du laste filen du opprettet. Åpne functions.php i barnetemaet ditt og legg til en enkelt linje før den avsluttende ?>-taggen, eller på slutten av filen hvis det ikke er noen avsluttende tagg:

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

Før du legger til koden, ta en sikkerhetskopi av functions.php. En syntaksfeil i require_once vil krasje nettstedet med en fatal PHP-feil, og du vil bare kunne gjenopprette filen via FTP eller vertskontrollpanelet ditt. Etter lagring, åpne et hvilket som helst produkt i administrasjonspanelet og bekreft at metaboksen "Ytterligere produktinformasjon" vises under innholdsredigereren.

Fyll ut testfeltene og klikk "Oppdater." CMB2 lagrer automatisk dataene til wp_postmeta-tabellen. Ingen ekstra save_post-hook-kall er nødvendig: biblioteket fanger opp innleggslagringen og behandler feltene sine på egen hånd.

Steg 4: Vis data på frontend

Dataene er lagret i databasen; nå må du vise dem til besøkende. Åpne temafilen som er ansvarlig for produktsiden, vanligvis single-product.php eller content-single-product.php. Legg til koden inne i WordPress-loopen:

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

Gjennomgang: get_post_meta() henter verdien etter felt-ID. For et WYSIWYG-felt, bruk wp_kses_post(), som tillater tillatte HTML-tagger og filtrerer potensielt farlige. For ren tekst eller en select, er esc_html() tilstrekkelig: den konverterer spesialtegn til HTML-entiteter og forhindrer XSS.

Hvis metaboksen er opprettet for sider ('object_types' => array( 'page' )), plasser den samme koden i page.php eller content-page.php. Mekanikken er den samme: get_post_meta() inne i loopen, escaping basert på felttype.

Video: CMB2 fra installasjon til en fungerende metaboks

I denne 20-minutters veiledningen går forfatteren gjennom hele arbeidsflyten: installasjon, feltopprettelse, filinkludering og frontend-datavisning. Nyttig å se hvis tekstinstruksjonene etterlot hull.

⁉️🤔 Ofte stilte spørsmål

Hvordan er CMB2 forskjellig fra ACF?

ACF tilbyr en visuell feltbygger rett i administrasjonspanelet: du kan sette sammen en metaboks uten å skrive en eneste linje kode. CMB2 krever at du beskriver felt i PHP-filer i temaet ditt. For utviklere som lagrer konfigurasjon i Git, er CMB2 mer praktisk: metabokser er ikke avhengige av databasetilstanden, de kan ikke slettes ved et uhell via administrasjonspanelet, og migrering mellom staging og produksjon reduseres til kodeutrulling. ACF Pro koster fra $149 per år for repeterbare felt og grupper; CMB2 er gratis.

Kan CMB2 brukes uten å installere utvidelsen?

Ja. Kopier CMB2-mappen inn i temaet ditt og inkluder init.php i functions.php, som vist i steg 1. Denne tilnærmingen er praktisk for premiumtemaer som skal fungere umiddelbart etter aktivering uten å kreve at brukeren installerer en tredjepartsutvidelse. Ulempen: du må oppdatere CMB2 manuelt med hver nye versjon.

Fungerer CMB2-felt i Gutenberg-editoren?

Ja, CMB2-metabokser vises under Gutenberg-editoren på den velkjente måten, i seksjonen under innholdet. Imidlertid integreres de ikke i editorblokker ut av boksen. Hvis du trenger å bygge inn et felt direkte i en blokk, vil ytterligere utvikling via CMB2 API og register_block_type() være nødvendig.

Hva bør jeg gjøre hvis metaboksen ikke vises i administrasjonspanelet?

Sjekk tre ting. For det første: samsvarer object_types med typen innlegg som redigeres? For WooCommerce-produkter trenger du 'product', ikke 'post'. For det andre: er det en PHP-syntaksfeil? Aktiver WP_DEBUG i wp-config.php og sjekk loggen. For det tredje: er feltets id-prefiks i konflikt med en annen utvidelse? Bruk et unikt prefiks som _sdstudio_.

Kan jeg opprette repeterbare feltgrupper?

Ja. CMB2 støtter repeterbare felt via 'repeatable' => true-flagget og repeterbare grupper via $cmb->add_group_field(). En gruppe lar deg legge til en "Egenskap: verdi"-blokk og opprette nye forekomster med en "Legg til rad"-knapp direkte i administrasjonspanelet.

Fungerer CMB2 med multisite?

Ja, utvidelsen er fullt kompatibel med WordPress Multisite. Metabokser kan registreres globalt i functions.php til det aktive nettverkstemaet eller individuelt for hvert nettsted. get_post_meta()-kallet fungerer likt i begge modusene.

CMB2 eller ACF: hvilken tilnærming du bør velge for din oppgave

CMB2 løser nøyaktig én oppgave: å opprette egendefinerte metabokser gjennom kode, med konfigurasjon lagret i temafiler i stedet for databasen. Valget koker ned til arbeidsflyten din, ikke et abstrakt "hva som er best."

• Hvis du er utvikler og lagrer all prosjektkonfigurasjon i Git, gå for CMB2. Metabokser lever i metaboxes.php, rulles ut med temaet ditt, og krever ikke databasesynkronisering mellom staging og produksjon.

• Hvis du trenger en visuell bygger, repeterbare fleksible felt og ferdige Gutenberg-blokker uten å skrive kode, gå for ACF Pro. Abonnementet som starter på $149 årlig lønner seg i prototypehastighet.

• Hvis prosjektet ditt allerede bruker CMB2 og metaboksene fungerer pålitelig, hold deg til det. Biblioteket er ikke forlatt, krever ikke akutt migrering, og mottar jevnlig kompatibilitetsoppdateringer.

Prøv begge tilnærmingene på et testnettsted: bygg den samme metaboksen i CMB2 og i ACF. Forskjellen i tilnærming vil bli åpenbar i løpet av 20 minutter. Hvilket verktøy bruker du? Del i kommentarene.