Standard WordPress-fält räcker tills ditt första skräddarsydda projekt. Så fort du behöver visa produktspecifikationer på ett kort, lägga till ett galleri på en sida eller bifoga ett block med fraktvillkor slår du i redigerarens begränsningar: titel, text, kategorier, det är allt.

Det finns en utväg, och det är inte ACF Pro för $149 per år. Anpassade metaboxar lägger till godtyckliga fält direkt i inläggsredigeringsgränssnittet utan en visuell byggare och utan ett dussin onödiga moduler. CMB2 gör precis det: det tillhandahåller ett PHP-API för att beskriva metaboxar i kod som lever i versionshantering, inte i databasen.

Här är det kompletta arbetsflödet: från att installera tillägget till att visa data på frontend. När du har läst klart den här artikeln kommer du att ha en fungerande metabox-fil som anpassar sig till vilken innehållstyp som helst, från sidor till WooCommerce-produkter.

💡 Snabb översikt:

• Installera CMB2 från WordPress.org-katalogen: tillägget är gratis och installeras med två klick.
• Skapa en fil metaboxes.php i din temamapp och beskriv de nödvändiga fälten via hooken cmb2_admin_init.
• Inkludera filen i functions.php med en enda require_once-rad och verifiera metaboxen i adminpanelen.
• Visa sparad data på frontend via get_post_meta() med korrekt escaping.

Vad är CMB2: kod istället för en visuell byggare

CMB2 är ett utvecklarbibliotek som skapar metaboxar, anpassade fält och formulär i WordPress. Direkt ur lådan stöder det dussintals fälttyper: text, WYSIWYG-redigerare, filuppladdning, datumväljare, färgväljare, radioknappar, rullgardinsmenyer, repeaters och grupper.

Den största skillnaden mot ACF: CMB2 har ingen visuell byggare. Alla metaboxar beskrivs i PHP-filer i ditt tema. För utvecklare är detta ett plus: konfigurationen lever i Git, den kan inte raderas av misstag via adminpanelen, och migrering mellan staging och produktion handlar om koddeployment. Samtidigt är CMB2 helt gratis, medan ACF Pro kostar dig runt $149 per år för repeterbara fält och grupper.

Biblioteket har underhållits aktivt sedan 2014. På WordPress.org har tillägget 5 stjärnor i betyg och över 300 000 aktiva installationer. GitHub-repositoriet får regelbundna uppdateringar: den senaste releasen åtgärdade kompatibilitet med PHP 8.4 och WordPress 6.7. Det här är inte ett övergivet projekt som kommer att läggas ner om sex månader.

Steg 1: Installera tillägget

Gå till Tillägg → Lägg till nytt, skriv "CMB2" i sökrutan och klicka på "Installera". Efter aktivering laddar tillägget sin motor men ändrar ingenting i adminpanelen av sig självt: metaboxar visas först efter att du har beskrivit dem i kod.

Om du inkluderar CMB2 manuellt i ditt tema utan att installera det via adminpanelen, lägg till följande i början av functions.php:

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

Två viktiga punkter. För det första: init.php bör laddas så tidigt som möjligt, utanför alla hookar. Slå inte in den i if ( ! class_exists(...-kontroller; CMB2 hanterar konflikter vid dubblettladdning själv. För det andra: med manuell inkludering måste du uppdatera CMB2 manuellt, till skillnad från automatiska uppdateringar via adminpanelen.

Steg 2: Skriv metabox-filen

Skapa en mapp cmb2-metaboxes i roten av ditt barntema och en fil metaboxes.php inuti den. Den här filen kommer att innehålla alla dina fältdefinitioner.

Här är fungerande kod som lägger till en textredigerare, en kort beskrivning och en märkesväljare till WooCommerce-produkter. Kopiera in den 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
}

Vad som händer här: hooken cmb2_admin_init aktiveras när adminpanelen laddas och registrerar metaboxen på produktredigeringssidan. new_cmb2_box() skapar en behållare med titeln "Ytterligare produktinformation", och tre add_field()-anrop lägger till fält i den: en WYSIWYG-redigerare, ett kompakt textfält och en rullgardinsmeny med fördefinierade alternativ. Varje fält får ett unikt id med prefixet _sdstudio_ för att undvika konflikter med andra tillägg.

Om du behöver vanliga sidor istället för WooCommerce, ersätt 'object_types' => array( 'product' ) med 'object_types' => array( 'page' ). För flera innehållstyper, lista dem: array( 'page', 'post' ).

För den fullständiga listan över fälttyper, se den officiella CMB2-dokumentationen på GitHub. Dussintals alternativ är tillgängliga direkt: från vanlig text och WYSIWYG-redigerare till filuppladdningar, färgväljare, radioknappar och taxonomier. Välj rätt typ för din specifika uppgift baserat på dokumentationen, inte gissningar.

Steg 3: Inkludera den i functions.php

Nu måste du ladda filen du skapade. Öppna functions.php i ditt barntema och lägg till en enda rad före den avslutande ?>-taggen, eller i slutet av filen om det inte finns någon avslutande tagg:

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

Innan du lägger till koden, säkerhetskopiera functions.php. Ett syntaxfel i require_once kommer att krascha sajten med ett fatalt PHP-fel, och du kommer bara att kunna återställa filen via FTP eller din hostingspanel. Efter att du har sparat, öppna valfri produkt i adminpanelen och verifiera att metaboxen "Ytterligare produktinformation" visas under innehållsredigeraren.

Fyll i testfälten och klicka på "Uppdatera". CMB2 sparar automatiskt data till tabellen wp_postmeta. Inga ytterligare save_post-hookanrop krävs: biblioteket fångar upp inläggssparandet och bearbetar sina fält på egen hand.

Steg 4: Visa data på frontend

Datan är sparad i databasen; nu måste du visa den för besökare. Öppna temafilen som ansvarar för produktsidan, vanligtvis single-product.php eller content-single-product.php. Lägg till koden inuti 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

Genomgång: get_post_meta() hämtar värdet via fält-ID. För ett WYSIWYG-fält, använd wp_kses_post(), som tillåter tillåtna HTML-taggar och filtrerar bort potentiellt farliga. För vanlig text eller en select är esc_html() tillräckligt: det konverterar specialtecken till HTML-entiteter och förhindrar XSS.

Om metaboxen är skapad för sidor ('object_types' => array( 'page' )), placera samma kod i page.php eller content-page.php. Mekaniken är densamma: get_post_meta() inuti loopen, escaping baserat på fälttyp.

Video: CMB2 från installation till en fungerande metabox

I denna 20-minuters handledning går författaren igenom hela arbetsflödet: installation, fältskapande, filinkludering och frontend-datavisning. Användbar att titta på om textinstruktionerna lämnade luckor.

⁉️🤔 Vanliga frågor

Hur skiljer sig CMB2 från ACF?

ACF tillhandahåller en visuell fältbyggare direkt i adminpanelen: du kan sätta ihop en metabox utan att skriva en enda rad kod. CMB2 kräver att du beskriver fält i PHP-filer i ditt tema. För utvecklare som lagrar konfiguration i Git är CMB2 bekvämare: metaboxar är inte beroende av databasens tillstånd, de kan inte raderas av misstag via adminpanelen, och migrering mellan staging och produktion handlar om koddeployment. ACF Pro kostar från $149 per år för repeterbara fält och grupper; CMB2 är gratis.

Kan CMB2 användas utan att installera tillägget?

Ja. Kopiera CMB2-mappen inuti ditt tema och inkludera init.php i functions.php, som visas i steg 1. Detta tillvägagångssätt är praktiskt för premiumteman som ska fungera direkt efter aktivering utan att kräva att användaren installerar ett tredjepartstillägg. Nackdelen: du måste uppdatera CMB2 manuellt med varje ny version.

Fungerar CMB2-fält i Gutenberg-redigeraren?

Ja, CMB2-metaboxar visas under Gutenberg-redigeraren på det välbekanta sättet, i sektionen under innehållet. De integreras dock inte direkt i redigeringsblock. Om du behöver bädda in ett fält direkt i ett block krävs ytterligare utveckling via CMB2 API och register_block_type().

Vad ska jag göra om metaboxen inte visas i adminpanelen?

Kontrollera tre saker. För det första: matchar object_types den typ av inlägg som redigeras? För WooCommerce-produkter behöver du 'product', inte 'post'. För det andra: finns det ett PHP-syntaxfel? Aktivera WP_DEBUG i wp-config.php och kontrollera loggen. För det tredje: krockar fältets id-prefix med ett annat tillägg? Använd ett unikt prefix som _sdstudio_.

Kan jag skapa repeterbara fältgrupper?

Ja. CMB2 stöder repeterbara fält via flaggan 'repeatable' => true och repeterbara grupper via $cmb->add_group_field(). En grupp låter dig lägga till ett block "Egenskap: värde" och skapa nya instanser med en "Lägg till rad"-knapp direkt i adminpanelen.

Fungerar CMB2 med multisite?

Ja, tillägget är fullt kompatibelt med WordPress Multisite. Metaboxar kan registreras globalt i functions.php för det aktiva nätverkstemat eller individuellt för varje sajt. get_post_meta()-anropet fungerar likadant i båda lägena.

CMB2 eller ACF: vilket tillvägagångssätt ska du välja för din uppgift

CMB2 löser exakt en uppgift: att skapa anpassade metaboxar genom kod, med konfiguration lagrad i temafiler snarare än databasen. Valet handlar om ditt arbetsflöde, inte ett abstrakt "vilket som är bäst".

• Om du är utvecklare och lagrar all projektkonfiguration i Git, välj CMB2. Metaboxar lever i metaboxes.php, deployas med ditt tema och kräver inte databassynkronisering mellan staging och produktion.

• Om du behöver en visuell byggare, repeterbara flexibla fält och färdiga Gutenberg-block utan att skriva kod, välj ACF Pro. Prenumerationen som börjar på $149 årligen betalar sig i prototyphastighet.

• Om ditt projekt redan använder CMB2 och metaboxarna fungerar tillförlitligt, stanna kvar vid det. Biblioteket är inte övergivet, kräver ingen akut migrering och får regelbundet kompatibilitetsuppdateringar.

Testa båda tillvägagångssätten på en testsajt: bygg samma metabox i CMB2 och i ACF. Skillnaden i tillvägagångssätt blir uppenbar på 20 minuter. Vilket verktyg använder du? Dela med dig i kommentarerna.