• Meta box toevoegen in WordPress

    Geplaatst op 5 november 2013 11:29, gewijzigd op 3 december 2013 16:45

    In WordPress worden meta-boxes gebruikt om in de backend extra invoervelden mee te creëeren. Zo kun je posts, pages of custom posts voorzien van extra informatie.

    Je kunt zelf de positie van de meta box bepalen, in de linker- of rechterkolom en hoe hoog ten opzichte van de andere invoervelden.

    Je begint met het koppelen van de functie die de meta box registreert aan de action hook 'add_meta_boxes'. In de voorbeeldcode wordt een invoerveld toegevoegd aan de pagina's van een website. De inhoud ervan wordt op de website in een zijbalk getoond.

    add_action( 'add_meta_boxes', 'pages_add_sidebar_box');

    function pages_add_sidebar_box()
    {

    add_meta_box( 'sidebar_content', 'Content zijkolom', 'pages_sidebar_content_adminpanel', 'page', 'advanced', 'high' );

    }

    Het eerste argument van add_meta_box() is een unieke id. Die wordt binnen WordPress gebruikt en tevens in de HTML-tag als id-argument weergegeven.
    Het tweede argument is de naam van de meta box zoals je die in de backend zult gaan terugzien.
    Het derde argument, hier 'pages_sidebar_content_adminpanel', is de naam van de callback-functie die de inhoud van de meta box gaat bepalen.
    Het vierde argument geeft aan voor welk posttype de meta box bedoeld is.
    Het vijfde argument geeft aan in welke kolom (context) de box geplaatst moet worden.
    Het zesde argument hoe hoog de box in die kolom moet komen.

    Goed, dan komt nu uiteraard die callback functie die we in add_meta_box() aanroepen.

    function pages_sidebar_content_adminpanel( $post )
    {

    wp_nonce_field( 'change_sidebar_content_data', 'sidebar_nonce_field' );
    $value = get_post_meta( $post->ID, 'sidebar_content_value', true );
    echo '<textarea cols="140″ rows="10″ name="sidebar_content_value" id="sidebar_content_value">'.esc_textarea( $value ).'</textarea>';

    }

    Het is een goede gewoonte om bij invoervelden in de backend met nonce-velden te beveiligen tegen hackers. In deze code maak ik gebruik van het interne mechanisme van WordPress voor nonce-velden.

    Stel een nonce-veld in met wp_nonce_field().

    Vervolgens haal je de huidige waarde van de meta box op om als default waarde in het tekstveld te kunnen tonen. Het $post-object wordt automatisch aan de callback functie meegegeven, waardoor je hier over $post->ID kunt beschikken voor get_post_meta().

    En dan zorg je natuurlijk voor de HTML-output om in de meta box weer te geven, want daar ging het in deze functie om. In dit geval gebruiken we een <textarea> omdat er meerdere regels tekst in de zijbalk van de pagina kunnen worden geplaatst. Codeer de gebruikersinvoer voor gebruik in een textarea met esc_textarea() zodat die altijd goed leesbaar blijft.

    Op zich is de meta box nu klaar, maar je kunt er nog niets mee omdat de waarde van het invoerveld niet wordt opgeslagen. Dat gebeurt in een aparte functie die je het beste zodanig inricht dat lege invoervelden ook worden verwijderd uit de database. Wel zo fijn om geen onnodige data achter te laten.

    add_action( 'save_post', 'pages_save_sidebar_data' );

    function pages_save_sidebar_data( $postid )
    {

    if( ! current_user_can( 'edit_page', $postid ) ) return;

    if( ! isset( $_POST['sidebar_nonce_field'] )

    || ! wp_verify_nonce( $_POST['sidebar_nonce_field'], 'change_sidebar_content_data' ) ) return;

    $value = get_post_meta( $postid, 'sidebar_content_value', true )?

    get_post_meta( $postid, 'sidebar_content_value', true ):

    'NOT_SET';

    $mydata = $_POST['sidebar_content_value']?

    $_POST['sidebar_content_value']:

    'NOT_SET';

    if( ( $value == 'NOT_SET' ) && ( $mydata != 'NOT_SET' ) ):

    add_post_meta( $postid, 'sidebar_content_value', $mydata, true );

    elseif( ( $value != 'NOT_SET' ) && ( $mydata != 'NOT_SET' ) ):

    update_post_meta( $postid, 'sidebar_content_value', $mydata );

    else:

    delete_post_meta( $postid, 'sidebar_content_value' );

    endif;

    }

    Die functie met als argument de $post->ID verbind je aan de action hook 'save_post'. Omdat we data gaan vervangen of verwijderen, testen we eerst of de huidige gebruiker pagina's mag bewerken en uiteraard of de nonce klopt.

    Vervolgens vragen we de huidige waarde op met get_post_meta() en de nieuwe waarde uit $_POST. Dan met een if-elseif bepalen of de invoer moet worden opgeslagen, geüpdate of verwijderd. En de meta-box is klaar voor gebruik.

    Uiteraard kun je ook meerdere velden in een meta-box stoppen. Die moet je dan wel allemaal verschillende namen geven.

    De waarde uit de database halen voor gebruik op de website doe je met get_post_meta().

    echo get_post_meta( get_the_id(), 'sidebar_content_value', true );

  • Zoeken