Funktion add_meta_box() – Wie man eine eigene Meta-Box erstellen kann.

Die Funktion add_meta_box() stellt eine Alternative zu den benutzerdefinierten Feldern da. Das folgende Beispiel soll zeigen, wie man eine eigene Metabox erstellt, wo deren Eingaben gespeichert werden und wie man diese im Frontend ausgeben kann.

// Allgemein
add_meta_box(
   $id, // unique ID der MetaBox
   $title, // Name bzw. Titel der MetaBox
   $callback, // Inhalt der Meta Box
   $screen, // Bei welchen Post Types wird die Meta Box angezeigt?
   $context, // Wo soll die Meta-Box ausgegeben werden?
   $priority,  // Sortierung bzw. Priorisierung
   $callback_args
);

1. Meta Box erstellen

Im folgenden Beispiel soll die Beitragsmaske um die Meta Box „Style“ mit dem Inhalt „Beitragsklasse (CSS)“ erweitert werden.

function themename_add_post_meta_box_style() {
   add_meta_box( 
      'themename_post_meta_box_style',
      __('Style'),
      'themename_post_meta_box_style_callback',
      'post',
      'side',
      'high'
   );
}
add_action( 'add_meta_boxes', 'themename_add_post_meta_box_style', 5 );

Wenn man nun diesen Code in die functions.php einbindet, wird die Meta Box „Style“ innerhalb der Beitragsmaske angezeigt (vgl. Abb. 1).
Die Fehlermeldung zeigt, dass die benötigte Callback-Funktion noch nicht vorhanden ist.
Abb. 1
wordpress-add-meta-box-error-invalid-callback

function themename_post_meta_box_style_callback() {
   echo 'Hello World :)';
}

Diese Funktion sorgt dafür, dass die Meta Box nun so aussieht:
Abb. 2
wordpress-add-meta-box-dummy-valid-callback
Sieht zwar besser aus, bringt uns aber nichts ;)

2. Meta Box Callback

Nun geht es weiter.
Da wir ein Eingabefeld für die Beitragsklasse benötigen, müssen wir die Callback-Funktion entsprechend modifizieren.

function themename_post_meta_box_style_callback($post) {

   $value = get_post_meta( $post->ID, '_themename_mb_postclass_value_key', true );

   echo '<label for="themename_mb_postclass_field">';
   _e( 'Beitragsklasse (CSS)');
   echo '</label><br />';
   echo '<input
           type="text"
           id="themename_mb_postclass_field"
           name="themename_mb_postclass_field"
           value="' . esc_attr( $value ) . '"
           size="25"
         />';
}

Jetzt sieht die Meta Box schon besser aus (vgl. Abb. 3).
Abb. 3
wordpress-add-meta-box-callback-example
Damit wir unsere Eingabe später speichern bzw. überprüfen können, benötigen wir noch folgenden Code:

wp_nonce_field( 'themename_md_postclass', 'themename_md_postclass_nonce' );

Dieser wird in die Callback-Funktion eingebunden.

function themename_post_meta_box_style_callback($post) {

   wp_nonce_field( 'themename_md_postclass', 'themename_md_postclass_nonce' );

   $value = get_post_meta( $post->ID, '_themename_mb_postclass_value_key', true );

   echo '<label for="themename_mb_postclass_field">';
   _e( 'Beitragsklasse (CSS)');
   echo '</label><br />';
   echo '<input
           type="text"
           id="themename_mb_postclass_field"
           name="themename_mb_postclass_field"
           value="' . esc_attr( $value ) . '"
           size="25"
         />';
}

3. Eingabe(n) speichern

Jetzt wird es etwas umfangreicher. Damit unsere Eingaben (vgl. Abb. 4) auch in der Datenbank (vgl. Abb. 5) abgelegt werden, müssen wir diese entsprechend speichern.

function themename_save_md_postclass($post_id) {

// Check if nonce is set.
if(!isset($_POST['themename_md_postclass_nonce'])){
  return;
}
// Verify that the nonce is valid.
if(!wp_verify_nonce($_POST['themename_md_postclass_nonce'],'themename_md_postclass')){
  return;
}

if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE){
  return;
}
Check permission / capability.
if(!current_user_can('edit_post',$post_id)){
  return;
}
// Make sure that it is set.
if(!isset($_POST['themename_mb_postclass_field'])){
  return;
}
// Sanitize user input.
$my_postclass = sanitize_text_field($_POST['themename_mb_postclass_field']);
// Update the meta field in the database.
update_post_meta( $post_id,'_themename_mb_postclass_value_key',$my_postclass);
}
add_action('save_post','themename_save_md_postclass');

Abb. 4
wordpress-add-meta-box-callback-value
Abb. 5
wordpress-add-meta-box-datenbank-tabelle-postmeta-ansicht

4. 1. Ausgabe generieren

get_post_meta(get_the_ID(), '_themename_mb_postclass_value_key', true);
$myPostClass = get_post_meta(get_the_ID(),'_themename_mb_postclass_value_key',true);

<?php echo $custom_post_class; ?> 

4. 1. BodyClass um individuelle Beitragsklasse erweitern

Mit Hilfe des folgenden Codes wird die BodyClass body_class() um die Beitragsklasse erweitert.

function themename_body_class($classes) {

$myPostClass = get_post_meta(get_the_ID(),'_themename_mb_postclass_value_key',true);
   
   if(is_single()){
      $classes[] = $myPostClass;
   }
      return $classes;
}
add_filter( 'body_class', 'themename_body_class');



Quellen:
./wp-admin/includes/template.php
http://codex.wordpress.org/Function_Reference/add_meta_box

Tutorial-Tipp:
http://www.smashingmagazine.com/2011/10/04/create-custom-post-meta-boxes-wordpress/

Schreibe einen Kommentar

* Pflichtfelder