So erstellen Sie benutzerdefinierte Metaboxen mit CMB2

Veröffentlicht: 2016-07-25

Vor ein paar Jahren suchte ich nach einer Möglichkeit, Beiträge abzufragen und den Ort anzuzeigen, an dem ein Beitrag auf einer Google-Karte geschrieben wurde. Bei meiner Recherche bin ich auf einen Blogbeitrag gestoßen, in dem es darum geht, wie man mit CMB2 und Google Maps eine Filialsuche erstellt. Seitdem ist CMB2 zu einem meiner Lieblings-Plugins geworden und wird in den meisten meiner Projekte verwendet.

Erstens, was ist CMB2?

Nun, CMB ist ein Akronym für Custom Meta Boxes und gemäß der Beschreibung auf der Plugin-Seite „CMB2 ist eine Meta-Box, benutzerdefinierte Felder und eine Formularbibliothek für WordPress, die Sie umhauen wird.“ Es wurde von Justin Sternberg von WebDevStudios entwickelt und befand sich seit etwas mehr als zwei Jahren im Plugin-Repository. Letzten Februar haben die guten Leute im WordPress-Plugin-Repository jedoch erkannt, dass sie CMB2 als Plugin vermasselt und genehmigt haben, obwohl sie es nicht hätten tun sollen.

Sehen Sie, Plugins sind normalerweise in der Lage, sofort etwas zu tun; Sie haben einige inhärente Funktionen. CMB2 ist eigentlich ein Framework. Wie Sternberg einmal erklärte: „Es ist ein Entwickler-Framework zum einfachen Einbauen von Formularen und Feldern in Ihre Themen und Plugins.“ Tatsächlich passiert nichts, wenn Sie CMB2 installieren. Sie erhalten keine Admin-Seite und es gibt keine Admin-Benutzeroberfläche. Um CMB2 zu verwenden, müssen Sie in der Lage sein, Code zu schreiben und zu Ihrer functions.php -Datei hinzuzufügen. Aus diesem Grund nenne ich es ein „Nicht-Plugin“-Plugin.

Die gute Nachricht ist, dass das Plugin-Genehmigungsteam zugestimmt hat, es im Repository zu belassen, sodass Sie es von dort aus weiterhin herunterladen und aktualisieren können. Sie können alles über die Geschichte hier auf Justins Seite lesen.

So richten Sie CMB2 ein

Um zu beginnen, müssen Sie die Datei example-functions.php aus dem Plugin-Verzeichnis finden und in Ihr Design kopieren. Es kann direkt in den Root-Ordner des Themes kopiert werden, aber um Ihr Projekt schön organisiert zu halten, schlage ich vor, es in einen Ordner wie /lib/ oder /includes/ zu kopieren. Wenn Sie bereits wissen, wie Sie CMB2 verwenden möchten, möchten Sie vielleicht fortfahren und die Datei in einen passenderen Namen umbenennen. Wenn Sie es beispielsweise verwenden möchten, um benutzerdefinierte Felder für eine Testimonials-Seite zu erstellen, könnten Sie es testimonial-functions.php nennen.

Als Nächstes musst du sicherstellen, dass WordPress die neue Datei findet, indem du eine require_once -Anweisung zu deiner functions.php -Datei hinzufügst. Das wird in etwa so aussehen:

require_once( dirname(__FILE__) . '/lib/testimonial-functions.php');

Jetzt ist es an der Zeit, sich wirklich zu vertiefen. Öffnen Sie die Datei testimonial-functions.php (oder wie auch immer Sie sie benannt haben). Sie werden feststellen, dass Justin nicht nur ein Beispiel für fast jeden möglichen Feldtyp erstellt hat, sondern auch Funktionen zum Anzeigen der Felder nach Homepage, Kategorie, Beitrags-ID usw. erstellt hat.

So laden Sie JavaScript in WordPress

JavaScript ist eine der beliebtesten Programmiersprachen überhaupt. Es ist unglaublich nützlich beim Erstellen einer Website oder Anwendung, und es gibt unzählige JavaScript-Bibliotheken und Frameworks, auf die Sie zurückgreifen können, ...

Hinweis: Dieser Artikel soll Ihnen CMB2 vorstellen; Es wird kein vollständiges Tutorial zur Verwendung aller Aspekte davon sein, und da es sich um ein Framework handelt, das entwickelt wurde, um Programmierern zu helfen, sollten Sie ein grundlegendes Verständnis von PHP und den inneren Abläufen von WordPress haben. Wenn Sie nach einem Custom Meta Box-Plugin suchen, das über eine Admin-Benutzeroberfläche verfügt, sollten Sie sich das Advanced Custom Fields-Plugin ansehen.

Kommen wir also zurück zum Erstellen einiger benutzerdefinierter Metaboxen für etwas Einfaches wie ein Testimonial. Bestimmen Sie zunächst die Anzahl und Typen der Felder, die Sie benötigen. Nehmen wir der Einfachheit halber an, wir brauchen drei Felder. Eines für das eigentliche Zeugnis, eines für den Namen der Person, die das Zeugnis abgibt, und eines für ein Bild der Person.

Wenn Sie in der Datei testimonial-functions.php arbeiten, müssen Sie den Abschnitt zum Registrieren und Hinzufügen Ihrer neuen Funktion finden. Dieser Code sieht in etwa so aus.

add_action( 'cmb2_admin_init', 'yourprefix_register_demo_metabox' );

Als Nächstes schlage ich vor, dass Sie Ihre Funktion in etwas umbenennen, das für Ihr Thema und Projekt relevant ist.

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

Ich schlage auch vor, dass Sie das Präfix umbenennen.

// Start with an underscore to hide fields from custom fields list
$prefix = '_yourprefix_'; //note, you can use anything you'd like here, but you need to remember what you use, because you will be using it again later.

Es stehen verschiedene Feldtypen zur Auswahl. Ich werde verwenden:

'type' =&amp;amp;gt; 'textarea_small' // for the author field
'type'    =&amp;amp;gt; 'wysiwyg' // for the testimonial in case we want to include html
'type' =&amp;amp;gt; 'file' // for the image of the project or author

$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Testimonial Author', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Who is the testimonial from', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'textarea_small',
	) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name'    =&amp;amp;gt; __( 'Testimonial', 'cmb2' ),
	'desc'    =&amp;amp;gt; __( 'add the testimonial here', 'cmb2' ),
	'id'      =&amp;amp;gt; $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    =&amp;amp;gt; 'wysiwyg',
	'options' =&amp;amp;gt; array( 'textarea_rows' =&amp;amp;gt; 5, ),
	) );

	$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Author Image', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'file',
	) );

Diese drei neuen Felder müssen der neuen Funktion hinzugefügt werden, sodass sie wie folgt aussehen würde:

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

 // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_'; //note, you can use anything you'd like here

/**
 * Start field groups here
 */

$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Testimonial Author', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Who is the testimonial from', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'textarea_small',
	) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name'    =&amp;amp;gt; __( 'Testimonial', 'cmb2' ),
	'desc'    =&amp;amp;gt; __( 'add the testimonial here', 'cmb2' ),
	'id'      =&amp;amp;gt; $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    =&amp;amp;gt; 'wysiwyg',
	'options' =&amp;amp;gt; array( 'textarea_rows' =&amp;amp;gt; 5, ),
	) );

	$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Author Image', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'file',
	) );
}

Und das ist es! Ihr endgültiger Code sollte folgendermaßen aussehen:

&amp;amp;lt;?php
/**
 * Include and set up custom metaboxes and fields. (Make sure you copy this file outside the CMB2 directory)
 *
 * Be sure to replace all instances of 'yourprefix_' with your project's prefix.
 * http://nacin.com/2010/05/11/in-wordpress-prefix-everything/
 *
 * @category YourThemeOrPlugin
 * @package  Demo_CMB2
 * @license  http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 * @link     https://github.com/WebDevStudios/CMB2
 */

/**
 * Get the bootstrap! If using the plugin from wordpress.org, REMOVE THIS!
 */

if ( file_exists( dirname( __FILE__ ) . '/cmb2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/cmb2/init.php';
} elseif ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/CMB2/init.php';
}

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

 // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_'; //note, you can use anything you'd like here

/**
 * Start field groups here
 */

// This first field group tells WordPress where to put the fields. In the example below, it is set to show up only on Post_ID=10

$cmb_demo = new_cmb2_box( array(
		'id'            =&amp;amp;gt; $prefix . 'metabox',
		'title'         =&amp;amp;gt; __( 'Homepage Custom Fields', 'cmb2' ),
		'object_types'  =&amp;amp;gt; array( 'page', ), // Post type
		'show_on'      =&amp;amp;gt; array( 'id' =&amp;amp;gt; array( 10, ) ), // Specific post IDs to display this metabox
		) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Testimonial Author', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Who is the testimonial from', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'textarea_small',
	) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name'    =&amp;amp;gt; __( 'Testimonial', 'cmb2' ),
	'desc'    =&amp;amp;gt; __( 'add the testimonial here', 'cmb2' ),
	'id'      =&amp;amp;gt; $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    =&amp;amp;gt; 'wysiwyg',
	'options' =&amp;amp;gt; array( 'textarea_rows' =&amp;amp;gt; 5, ),
	) );

	$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Author Image', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'file',
	) );
}

Wenn Sie fertig sind, sollten Sie eine Seite haben, die in etwa so aussieht:

Die Verwendung von CMB2 ist eine großartige Möglichkeit, Ihrer Website genau das zu geben, was Sie brauchen, da die Optionen wirklich endlos sind. CMB2 kann beispielsweise verwendet werden, um eine Themenoptionsseite mit Metafeldern für Logos, URLs zu Social-Media-Websites oder Videos zu erstellen. Wenn Sie eine Website für einen Kunden erstellen, eignet sich CMB2 perfekt zum Anpassen des Administrators, sodass der Kunde den Inhalt nicht so formatieren muss, dass er den Stilen Ihres Themas entspricht. Und sobald die Daten eingegeben sind, können Sie den Inhalt mit dem gesamten Styling anzeigen, das bereits in Ihrem HTML und CSS vorhanden ist.

Sobald Sie das Hinzufügen grundlegender Felder mit CMB2 gemeistert haben, versuchen Sie, die wiederholbaren Feldgruppen hinzuzufügen. Mit diesen können Sie beliebig viele Inhaltstypen hinzufügen und dann mit einer For-Each-Schleife Diashows oder Karussells erstellen.

CMB2 hat es mir ermöglicht, meine WordPress-Sites auf die nächste Stufe zu heben, und ich hoffe, dass es das Gleiche für Sie tun wird.

Was kommt als nächstes: Plugins!

Das perfekte WordPress-Plugin zu finden, das die Website-Entwicklung beschleunigt, ist ein bisschen so, als würde man versuchen, den einzelnen Tippfehler in einer Codefolge zu finden – es kann einige Zeit dauern. Und heutzutage gibt es so viele Plugins für verschiedene Aufgaben, dass es schwierig sein kann, genau zu bestimmen, welche Funktionalität eine Website benötigt (oder nicht benötigt) und welche Plugins dies auf effiziente Weise bereitstellen.

Laden Sie dieses E-Book herunter, um eine Liste unserer am meisten empfohlenen Plugins für Entwickler zu erhalten!