So erstellen Sie eine benutzerdefinierte WordPress-Metabox
Veröffentlicht: 2015-06-09Was ist eine benutzerdefinierte WordPress-Metabox?
Benutzerdefinierte Meta-Boxen ermöglichen das Hinzufügen zusätzlicher Informationen zu Posts, Seiten und benutzerdefinierten Post-Typen, abgesehen von den Standard-Meta-Boxen, die automatisch direkt „out of the box“ in WordPress verfügbar sind und im WordPress-Kern enthalten sind.
Ob Sie sich dessen bewusst waren oder nicht, Sie verwenden Metaboxen schon seit einiger Zeit. Dinge wie Dashboard-Widgets, Editor, benutzerdefinierte Felder, vorgestelltes Bild, Kategorien und Tags sind Beispiele für Metaboxen.
So erstellen Sie eine benutzerdefinierte WordPress-Metabox
Was passiert, wenn Sie eine zusätzliche Metabox erstellen müssen, vielleicht etwas, das für Ihr Projekt etwas individueller ist? Es gibt vorhandene Plugins, die beim Erstellen benutzerdefinierter Metaboxen helfen, was großartige Optionen sein können. Selbst wenn Sie sich für diesen Weg entscheiden, ist es dennoch wichtig, die grundlegenden Konzepte dessen zu verstehen, was unter der Haube von benutzerdefinierten Metaboxen vor sich geht.
Verwenden Sie CSS-Sprites, um Ihr Logo responsive zu machen
Erinnern Sie sich an CSS-Sprites? Sie sind eine Gruppe verschiedener Grafiken, die in einer Datei kombiniert sind, und wir werden sie verwenden, um ein ansprechendes Logo zu erstellen. Es ist eine Technik, die verwendet wird, um die Browserleistung zu optimieren, weil ...
Wir werden Konzepte auf sehr hohem Niveau durchgehen, wenn wir diese sehr einfache Meta-Box erstellen. Wenn wir fertig sind, haben wir eine benutzerdefinierte Metabox, in der wir einen Produkttitel eingeben können.
Auch wenn wir einfach anfangen, denken Sie daran, dass diese Idee für komplexere Anforderungen erweitert werden kann. Es gibt viele Optionen und zusätzliche Funktionen, die in eine benutzerdefinierte Metabox aufgenommen werden können. Dinge wie Kontrollkästchen, Datei-Upload usw. sind alles mögliche Funktionen einer benutzerdefinierten Metabox. In diesem Tutorial wird davon ausgegangen, dass Sie mit CSS vertraut sind, das zum Gestalten der Felder erforderlich ist. Wir werden nicht sehr ins Detail gehen, um das Styling zu besprechen, aber dies ist etwas, das leicht erledigt werden kann, nachdem Ihre Meta-Box eingerichtet ist und läuft.
Entwicklung der benutzerdefinierten Metabox
Benutzerdefinierter Code für Metaboxen kann in die functions.php oder in ein Plugin eingefügt werden. Dieses Beispiel enthält den benötigten Code in Form eines Plugins. Dies kann Schritt für Schritt kopiert werden, um eine vollständige Datei zu erstellen, die sofort verwendet werden kann.
Der Kodex ist Ihr Leitfaden
Der Codex wird Ihr bester Freund sein, wenn er es nicht schon ist. Unterschiedliche Argumente haben unterschiedliche Möglichkeiten, und der Kodex wird dies ausführlich erläutern. Erwähnenswert ist, dass man den Codex gut kennen lernen sollte.
Testen Sie zuerst lokal
Hier ist der einzige Haftungsausschluss für dieses Tutorial. Bitte versuchen Sie dies zuerst in einer lokalen Entwicklungsumgebung. Obwohl wir alle ein kleines Abenteuer in unserem Leben schätzen, mag niemand den weißen Bildschirm des Todes, besonders auf einer Live-Website. Wir werden dieses Tutorial Schritt für Schritt durchgehen, und es gibt Abhängigkeiten, die auftreten, während wir es durchgehen. Aus diesem Grund besteht eine gute Chance, dass ein Speichern in der Mitte einen Fehler verursacht.
Schritt eins: Erstellen Sie eine Überschrift und fügen Sie sie in das Plugin ein
Das Erstellen eines Plugins mag komplex klingen, aber nicht alle Plugins müssen Hunderte von Zeilen umfassen. Plugins können sehr einfach sein, und dies ist ein großartiges Beispiel dafür. Wenn du zum wp-content-Ordner gehst, siehst du einen Plugins-Ordner . Erstellen Sie einen neuen Ordner namens custom-post-meta-box mit einer Datei custom-post-meta-box.php darin. Dies ist die Datei, mit der Sie arbeiten werden.
Stellen Sie beim Erstellen eines Plugins sicher, dass diese Informationen vor Ihrem benutzerdefinierten Code angezeigt werden:
<?php /* Plugin Name: Custom Meta Box Plugin URI: www.yourwebsite.com Description: Creates a meta box in WordPress Version: 1.0.0 Author: Your Name Author URI: www.yourwebsite.com License: GPL2 */
Aktivieren Sie das Plugin
Obwohl wir dort noch keinen Code eingefügt haben, können wir das Plugin aktivieren, indem wir zu Plugins gehen und nach Custom Meta Box suchen und Activate auswählen. Bitte bedenken Sie, dass sich noch nichts ändern wird.
Optionales CSS
Dies ist optional, aber wenn Sie vorhaben, benutzerdefinierte CSS hinzuzufügen, kopieren Sie dies in Ihre Plugin-Datei. Stellen Sie sicher, dass sich die .css -Datei im CSS -Ordner Ihres Plugins befindet.
function cmb_add_admin_styles() {
wp_enqueue_style('cmb-admin', plugins_url( 'custom-post-meta-box/css/admin.css' ) );
}
add_action( 'admin_enqueue_scripts', 'cmb_add_admin_styles' );
Schritt zwei: Hinzufügen der Meta-Box
Die Funktion add_meta_box wird verwendet, um benutzerdefinierte Metaboxen zu erstellen. Diese Funktion ist nur für die Registrierung und Anzeige von benutzerdefinierten Metaboxen verantwortlich.
function cmb_add_meta_box() {
add_meta_box(
'custom_post_metabox',
'Our Products',
'cmb_display_meta_box',
'post',
'normal',
'high'
);
}
add_action( 'add_meta_boxes', 'cmb_add_meta_box' );
Werfen Sie einen Blick auf das Dashboard, der Titel „Unsere Produkte“ wird angezeigt, aber es gibt kein Textfeld, in das wir unseren Text eingeben können.
Schritt drei: Hinzufügen des Meta-Box-Felds im Admin
Wir müssen sicherstellen, dass es eine Bezeichnung und ein Feld für die Informationen gibt. Durch die Verwendung von html ist dies möglich.
function cmb_display_meta_box( $post ) {
wp_nonce_field( plugin_basename(__FILE__), 'cmb_nonce_field' );
$html = '<label id="product-title" for="product-title">';
$html .= 'Product Title';
$html .= '</label>';
$html .= '<input type="text" id="product-title" name="product-title" value="' . get_post_meta( $post->ID, 'product-title', true ) . '" placeholder="What is the Product Title?" />';
echo $html;
}
// this echoes a single stream of html
Sehen Sie, wie die Dinge in <label> verpackt sind? Wir sehen den beschreibenden Text „Produkttitel“, der dem Benutzer hilft zu verstehen, was das Feld ist und welche Art von Informationen eingegeben werden sollten. Beachten Sie auch, dass Platzhaltertext vorhanden ist, der ebenfalls hilfreiche Informationen hinzufügt.
Ihre Eingabe ist möglicherweise nicht so breit. Einige benutzerdefinierte CSS wurden erstellt, damit der gesamte Platzhaltertext angezeigt werden konnte. das Etikett hat eine Breite von 100 %.
Schritt vier: Speichern der Daten und die Bedeutung der Verwendung einer Nonce
Möglicherweise haben Sie in Schritt 3 Text eingegeben und festgestellt, dass er nicht wirklich gespeichert oder auf der Seite angezeigt wird. In diesem Schritt passiert wirklich die ganze Magie.
function cmb_save_meta_box_data( $post_id ) {
if ( cmb_user_can_save( $post_id, 'cmb_nonce_field' ) ) {
if ( isset( $_POST['product-title'] ) && 0 < count( strlen( trim( $_POST['product-title'] ) ) ) ) {
$product_title = stripslashes( strip_tags( $_POST['product-title'] ) );
update_post_meta( $post_id, 'product-title', $product_title );
}
}
}
add_action( 'save_post', 'cmb_save_meta_box_data' );
function cmb_display_product( $content ) {
if ( is_single () ){
$html = 'The Product Title is: ' . get_post_meta( get_the_ID(), 'product-title', true );
$content .= $html;
}
return $content;
}
add_action('the_content', 'cmb_display_product');
function cmb_user_can_save( $post_id, $nonce ) {
$is_autosave = wp_is_post_autosave( $post_id );
$is_revision = wp_is_post_revision( $post_id );
$is_valid_nonce = ( isset( $_POST[ $nonce ] ) && wp_verify_nonce( $_POST [ $nonce ], plugin_basename( __FILE__ ) ) );
return ! ( $is_autosave || $is_revision ) && $is_valid_nonce;
}
Hier ist einiges los. Grundsätzlich ist die Funktion cmb_save_meta_box_data das, was wir brauchen, damit das gesamte Speichern stattfinden kann. Wir werden uns auf Sicherheit mit einem einmaligen Wert konzentrieren. Dies ist eine Sicherheitsmaßnahme, die sicherstellt, dass die zu speichernden Daten aus der richtigen Quelle stammen. Außerdem möchten wir sicherstellen, dass der Beitrag keine automatische Speicherung oder Revision ist. Dann wird die Nonce validiert und der Benutzer kann speichern.
Jetzt, da wir sicher speichern können, erscheinen die Metainformationen auf der Seite. Wie Sie sehen können, könnte es leicht gestylt werden, aber es funktioniert und Daten werden gespeichert.
Weiterführende Lektüre und Hausaufgaben
Wie Sie sehen können, können Sie in nur wenigen Schritten eine benutzerdefinierte Metabox erstellen. Wie bei den meisten Entwicklungsprojekten gibt es mehrere Möglichkeiten, dasselbe zu erreichen, sodass Sie möglicherweise andere Ansätze für dieselbe Aufgabe finden.
Wir haben uns benutzerdefinierte Metaboxen auf sehr hohem Niveau angesehen, also möchten Sie vielleicht einen tieferen Blick auf diese Konzepte werfen. Wenn Sie feststellen, dass Sie einen größeren Bedarf an benutzerdefinierten Metaboxen haben, finden Sie hier einige großartige Quellen für weitere Entdeckungen:
- Weitere Informationen zu Nonces
- MetaBox-Plugin
- Optionen für die add_meta_box-Funktion