WordPress – Media Selector in Meta Box einbinden

Wenn du eigene Plugins oder Themes für WordPress programmieren möchtest, dann kann es vorkommen das du den „Media Selector“ von WordPress einbinden möchtest oder sogar musst.

WordPress - einfache Meta Box mit Bild
WordPress – einfache Meta Box mit Bild

Was ist der Media Selector?

Der Media Selector ist ein Fenster welches sich über deinen Inhalt legt und aus diesem kannst du ein Bild, Video oder eine Audiodatei wählen.

WordPress - Media Selector
WordPress – Media Selector

Wenn du den WordPress Classic Editor benutzt, dann kannst du sogar aus diesem Dialog heraus eine Galerie zu deiner Seite / deinem Beitrag einfügen.

ein kleines Projekt mit dem WordPress Media Selector

Ich möchte dir nun gerne ein kleines Projekt zeigen mit welchem du in einer MetaBox ein Bild hinzufügen kannst. Das fertige Projekt kannst du am Ende dieses Beitrages herunterladen.

eingesetzte Software & lokale Server

Für die Programmierung nutze ich den kostenfreien Editor NotePad++ und als lokale Serverlösung XAMPP.

Die kostenfreie, lokale Serverlösung XAMPP bietet eine MySQL Datenbank und einen Apache2 HTTP Server und noch ein paar weitere Programme welche wir jedoch hier nicht benötigen.

WordPress Version

Diesen Beitrag verfasse ich zu aktuellen Version 5.7 von WordPress. Da die Entwicklung von WordPress stätig weiter geht kann ich leider nicht garantieren dass, das Beispiel in einer zukünftigen Version vollumfänglich Lauffähig sein wird.

externes JavaScript für den einfachen Zugriff auf den Media Selector

Damit wir auf den WordPress Media Selector einfacher zugreifen können, nutze ich ein kleines JavaScript von Kelin Chauhan.

var customMediaLibrary = window.wp.media({
    frame: 'select',
    title: "'Bild wählen'",
    multiple: false,

    library: {
        order: 'DESC',
        orderby: 'date',
        type: 'image',
        search: null,
        uploadedTo: null
    },

    button: {
        text: 'Fertig'
    }

});

Dieses kleine Script speichern wir in dem Ordner „js“ unter dem Dateinamen „mediaselector.js“ und laden dieses Script in der functions.php.

function admin_scripts() {
	wp_enqueue_media();
	wp_enqueue_script( 'backend-mediaselector', get_template_directory_uri() . '/js/mediaselector.js', array(), '20210407', true );
}

add_action('admin_enqueue_scripts', 'admin_scripts');

erstellen eines Custom Post Types

In diesem kleinen Projekt möchte ich Custom Post Type und an diesem wiederum eine Meta Box erstellen um dann ein Bild zu speichern.

function custom_post_type() {
	$labels = array(
		'name' => 'Beispiel Einträge',
		'singular_name' => 'Beispiel',
		'menu_name' => 'Beispiel',
		'parent_item_colon' => '',
		'all_items' => 'Alle Einträge',
		'view_item' => 'Eintrag ansehen',
		'add_new_item' => 'Neuer Eintrag',
		'add_new' => 'Hinzufügen',
		'edit_item' => 'Eintrag bearbeiten',
		'update_item' => 'Update Eintrag',
		'search_items' => '',
		'not_found' => '',
		'not_found_in_trash' => '',
	);
	
	$rewrite = array(
		'slug' => 'beispiel',
		'with_front' => true,
		'pages' => true,
		'feeds' => true,
	);
	
	$args = array(
		'labels' => $labels,
		'supports' => array( 'title', 'editor', 'excerpt', 'thumbnail', 'comments', 'trackbacks', ),
		'taxonomies' => array( 'category', 'post_tag' ),
		'hierarchical' => false,
		'public' => true,
		'show_ui' => true,
		'show_in_menu' => true,
		'show_in_nav_menus' => true,
		'show_in_admin_bar' => true,
		'menu_position' => 5,
		'can_export' => false,
		'has_archive' => true,
		'exclude_from_search' => false,
		'publicly_queryable' => true,
		'rewrite' => $rewrite,
		'capability_type' => 'page',
	);
	
	register_post_type( 'beispiel', $args );
}

add_action( 'init', 'custom_post_type', 0 );

entfernen der überzähligen Meta-Boxen

Für dieses Beispiel benötigen wir lediglich eine einzige Meta Box an unserem Custom Post Type daher möchte ich die überzähligen Meta Boxen entfernen.

WordPress default Meta Boxen an einem Beitrag
WordPress default Meta Boxen an einem Beitrag

Für das entfernen der default Meta Boxen müssen wir diese in der Datei functions.php …

function remove_meta_boxes() {
   remove_meta_box('postcustom', 'beispiel', 'core');
   remove_meta_box('commentsdiv', 'beispiel', 'core');
   remove_meta_box('postexcerpt', 'beispiel', 'core');
   remove_meta_box('trackbacksdiv', 'beispiel', 'core');
   remove_meta_box('commentstatusdiv', 'beispiel', 'core');	
}

add_action( 'admin_menu', 'remove_meta_boxes' );

erstellen einer Meta Box

In einer Meta Box kannst du zusätzliche Felder für dein Custom Post Type oder aber auch für eine Seite / Beitrag hinterlegen. Diese Felder kannst du dann wiederum in deiner Seite auslesen und darstellen.

eine einfache Meta Box in WordPress
eine einfache Meta Box in WordPress

Für die Erstellung einer Meta Box müssen wir die „Action Hook“ admin_menu implementieren und dort auf eine Funktion verweisen. In dieser Funktion rufen wir nun die Funktion „add_meta_box“ von WordPress auf und übergeben die Paramater.

Die wichtigsten Parameter sind:

  • sample_metabox_callback – die Funktion welche aufgerufen werden soll, wenn die Meta Box erstellt wird
  • beispiel – unser zuvor erstelltes Custom Post Type, hier könnte auch post oder page stehen,
  • side – die Position der Meta Box
  • core – Reihenfolge in der Position
function add_metabox() {
 
	add_meta_box(
		'sample_metabox', // metabox ID
		'Sample - Meta Box with Media Selector', // title
		'sample_metabox_callback', // callback function
		'beispiel', // post type or post types in array
		'side', // position (normal, side, advanced)
		'core' // priority (default, low, high, core)
	);
 
}

add_action( 'admin_menu', 'add_metabox' );

In der Callback Funktion bauen wir die Eingabefelder für die Meta Box auf. Die Meta Box mit seinen Funktionen wie Toggle und Rahmen brauchen wir nicht extra programmieren / stylen, dieses wird uns quasi von WordPress geliefert.

function sample_metabox_callback( $post ) {
	
	$image_url = esc_attr(get_post_meta( $post->ID, 'imagePath', true ));
	
	echo ' 
	<div>
		<button class="imgSelectorBtn" data-refinput="imagePath" data-refimage="image">Bild öffnen</button>
		<input type="text" id="imagePath" name="imagePath" value="' . $image_url . '" class="regular-text"/>
		<img id="image" name="image" src="' . $image_url . '" width="500px" height="*"/>
	</div>
	';
	?>
	<script>
		var inputElement = '-undefined-';
		var imageElement = '-undefined-';

		jQuery( '.imgSelectorBtn' ).on( 'click', function( e ) {
			inputElement = jQuery(this).data("refinput");
			imageElement = jQuery(this).data("refimage");
			e.preventDefault();
			customMediaLibrary.open();
		});

		jQuery(function() {
			customMediaLibrary.on( 'select', function() {
				var selectionCollection = customMediaLibrary.state().get('selection').first().toJSON();
				jQuery('#'+inputElement).val(selectionCollection.url);
				jQuery('#'+imageElement).attr("src",selectionCollection.url);
			});
		});
	</script>
	<?php
}

Das laden des Bildes erfolgt in dem JavaScript Block.

Wenn ein Bild ausgewählt & die Schaltfläche „Fertig“ betätig wird, kann am „state“ die „selection“ ausgelesen werden. Da wir immernur ein Bild auswählen entnehmen wir den ersten eintrag und wandeln diesen in ein JSON um.

Nun müssen wir nurnoch die URL auslesen und können das Eingabefeld für den Pfad sowie die Quelle für das Bild setzen.

jQuery(function() {
			customMediaLibrary.on( 'select', function() {
				var selectionCollection = customMediaLibrary.state().get('selection').first().toJSON();
				jQuery('#'+inputElement).val(selectionCollection.url);
				jQuery('#'+imageElement).attr("src",selectionCollection.url);
			});
		});

Das fertige Layout mit einem bereits geladenen Bild.

WordPress - einfache Meta Box mit Bild
WordPress – einfache Meta Box mit Bild

Speichern der Daten

Für das Speichern der Daten hängen wir uns in die Kette der Aufrufe ein. D.h. wenn der Benutzer die Schaltfläche „Aktualsieren“ oder auch „Veröffentlichen“ betätigt, so werden auch unsere Daten aus der Meta Box gespeichert.

function save_meta( $post_id, $post ) {
	$post_type = get_post_type_object( $post->post_type );
	 
	if ( ! current_user_can( $post_type->cap->edit_post, $post_id ) ) {
		return $post_id;
	}
 
	if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) {
		return $post_id;
	}
 
	if( $post->post_type != 'beispiel' ) {
		return $post_id;
	}
	
	error_log('do update');
		
	updateOrDeleteMeta($post_id, 'imagePath');
}

add_action( 'save_post', 'save_meta',10,3 );

function updateOrDeleteMeta($post_id, $metatag){
		
	if( isset( $_POST[ $metatag ] ) ) {
		$field = sanitize_text_field( $_POST[ $metatag ] );
		
		error_log($field);
		
		update_post_meta( $post_id, $metatag, sanitize_text_field( $_POST[ $metatag ] ) );
	} else {
		delete_post_meta( $post_id, $metatag );
	}	
}

Download des Beispielprojektes

Hier nun das kleine WordPress Pojekt mit einer Meta box und dem Media Selector zum download.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert