Benutzerfreundliche benutzerdefinierte Felder mit Meta-Boxen in WordPress

  • Erforderliche Kenntnisse: PHP, Erfahrung mit WordPress
  • Benötigt: WordPress
  • Projektzeit: 30 Minuten

In einem früheren Tutorial habe ich darüber gesprochen Post-Formate , eine neue Funktion, die in WordPress 3.1 eingeführt wurde. Ein Beitragsformat ist eine Metainformation, die einzelnen Beiträgen zugewiesen und von einem Thema verwendet werden kann, um die Präsentation dieser Beiträge anzupassen. Ich habe auch die aktuellen Einschränkungen von Post-Formaten in WordPress im Vergleich zu Diensten wie Tumblr erörtert. Bei Tumblr bestimmt das von Ihnen ausgewählte Post-Format die Formularfelder, die Ihnen angezeigt werden. In Wordpress haben Sie standardmäßig nur die Felder Titel und Post-Editor.

Wir können einem Beitrag natürlich zusätzliche Metadaten hinzufügen, indem wir verwenden Benutzerdefinierte Felder ::



Das Problem mit benutzerdefinierten Feldern ist, dass sie nicht sehr benutzerfreundlich sind. Wenn Sie für einen Kunden entwerfen, müssen Sie erklären, was er ist, was eingegeben werden muss und hoffen, dass er nicht vergisst, dies zu tun.

Hier kommen Meta-Boxen zum Einsatz!

01. Was sind Meta-Boxen?

ZU Meta Box ist ein benutzerdefinierter Abschnitt, der einem Beitrags- / Seitenbildschirm hinzugefügt werden kann. Es kann verwendet werden, um benutzerdefinierte Felder zu gruppieren und ihnen einen Kontext zu geben. Hier ist eine Meta-Box, die ich in Verbindung mit Post-Formaten für mein Blog verwende ( ryanhavoctaylor.com ):

Sie können beliebig viele Formularfelder in einer Meta-Box haben sowie andere Eingabetypen wie Kontrollkästchen und Optionsfelder verwenden. Unter dem Hud sind sie immer noch benutzerdefinierte Felder, und Sie nennen die Werte in Ihrem Thema genauso:

get_post_meta ($ post_id, $ key, $ single);

Wir machen die Benutzeroberfläche des Administrators nur mit Beschriftungen, Anweisungen und besserer Formatierung benutzerfreundlicher.

02. Erstellen Sie eine Meta Box

Wenn ich WordPress-Themes erstelle, verwende ich ständig Meta-Boxen für meine Posts und habe häufig benutzerdefinierte Post-Typen ( codex.wordpress.org/Post_Types ) registriert, dass ich auch Meta Boxes anwenden lassen möchte.

Mit dem Code, über den ich Sie jetzt sprechen werde, können Sie schnell Meta-Boxen zu allen Post-Typen Ihrer Themen hinzufügen.

Wir beginnen mit dem Hinzufügen des folgenden Codes zu unserer Vorlagendatei functions.php (wenn diese Datei in Ihrem Design nicht vorhanden ist, erstellen Sie sie):

// Wir erstellen ein Array namens $ meta_box und setzen den Array-Schlüssel auf den entsprechenden Beitragstyp
$ meta_box ['post'] = array (

// Dies ist die ID, die auf die Meta-Box angewendet wird
'id' => 'post-format-meta',

// Dies ist der Titel, der im Meta-Box-Container angezeigt wird
'title' => 'Additional Post Format Meta',

// Dies definiert den Teil der Seite, auf dem der Abschnitt zum Bearbeiten des Bildschirms angezeigt werden soll
'context' => 'normal',

// Dies legt die Priorität innerhalb des Kontexts fest, in dem die Felder angezeigt werden sollen
'Priorität' => 'hoch',

// Hier definieren wir alle gewünschten Felder im Meta-Feld
'Felder' => Array (
Array (
'name' => 'Link - URL',
'desc' => 'URL für den Link',
'id' => 'pf_link_url',
'Typ' => 'Text',
'default' => ''
),
Array (
'name' => 'Quote - Source',
'desc' => '(Optional) URL zur Angebotsquelle',
'id' => 'pf_quote_source',
'Typ' => 'Text',
'default' => ''
)
)
);

Dies ist einfach eine Array-Deklaration, die wir an eine Reihe von Funktionen übergeben, um unsere Meta Box zu erstellen. Wir werden uns diese Funktionen als nächstes ansehen, aber sobald sie geschrieben sind, müssen Sie nur Array-Einträge wie den oben genannten zu Ihrer function.php-Datei hinzufügen, um Ihren Themen schnell Meta-Boxen hinzuzufügen.

Der obige Eintrag fügt das hinzu Zusätzliches Post-Format-Meta Box, die ich in meinem Blog zum Post-Bildschirm benutze.

Wenn Sie benutzerdefinierte Beitragstypen verwenden, können Sie ihnen auch eine Meta-Box hinzufügen, indem Sie einen weiteren Array-Eintrag hinzufügen. Hier ist ein Beispiel für einen Beitragstyp namens 'Bücher':

$ meta_box ['books'] = array (
'id' => 'Buch-Meta-Details',
'title' => 'Buch-Meta-Details',
'context' => 'normal',
'Priorität' => 'hoch',
'Felder' => Array (
Array (
'name' => 'Zusammenfassung',
'desc' => '(Max. 45 Wörter) Hinweis: Lassen Sie alle anderen Felder leer, wenn das Buch noch nicht zum Verkauf steht.',
'id' => 'book_summary',
'type' => 'textarea',
'default' => ''
),
Array (
'name' => 'Jetzt kaufen URL:',
'desc' => '',
'id' => 'book_ buy_now_link',
'Typ' => 'Text',
'default' => ''
),
Array (
'name' => 'Preis:',
'desc' => 'z.B. £ 9,95 ',
'id' => 'book_price',
'Typ' => 'Text',
'default' => ''
),
Array (
'name' => 'Buch ist im Verkauf?',
'desc' => '',
'id' => 'book_on_sale',
'type' => 'checkbox',
'default' => ''
),
Array (
'name' => 'Beispiel-PDF-URL',
'desc' => '(Optional) Link zu einem Beispiel-PDF.',
'id' => 'book_sample_url',
'Typ' => 'Text',
'default' => ''
)
)
);

Beachten Sie, dass wir den Array-Schlüssel so ändern, dass er den Beitragstyp widerspiegelt, für den der Eintrag gilt. Nachdem Sie alle gewünschten Array-Einträge erstellt haben, müssen Sie die folgende Codezeile hinzufügen, um die Funktionen auszuführen, mit denen die Meta-Box (en) tatsächlich erstellt werden.

add_action ('admin_menu', 'plib_add_box');

Beachten Sie, dass diese Zeile nur einmal ausgeführt werden muss.

03. Alles sauber halten

Dies ist ein optionaler Schritt, aber um alles in Ordnung zu halten, habe ich eine Datei namens preset-library.php erstellt, die ich zu meinen Themen hinzufüge und wie folgt oben in function.php einfüge:

include ('preset-library.php');

runde Sache auf der Rückseite des iPhones

Ich finde es einfacher, Funktionen zu trennen, die sich nie von dem Code ändern, mit dem sie aufgerufen werden, als alles zusammenzufassen.

Wenn Sie dies auch tun möchten, fügen Sie die folgenden Funktionen zu preset-library.php hinzu, andernfalls fügen Sie sie oben in functions.php hinzu.

04. Hinzufügen der Meta Box

Die erste Funktion ist relativ einfach.

// Hinzufügen von Meta-Boxen zu Post-Typen
Funktion plib_add_box () {
global $ meta_box;

foreach ($ meta_box als $ post_type => $ value) {
add_meta_box ($ value ['id'], $ value ['title'], 'plib_format_box', $ post_type, $ value ['context'], $ value ['priority']);
}}
}}

Wir durchlaufen das zuvor definierte Array $ meta_box und übergeben jeden Eintrag an die WordPress-Funktion add_meta_box ( codex.wordpress.org/Function_Reference/add_meta_box ). Sie werden sehen, dass einer der Parameter für diese Funktion ein Rückruf zu einer anderen Funktion namens plib_format_box ist. Wir werden uns als nächstes damit befassen.

05. Formatieren der Meta Box

Diese Funktion wendet die HTML-Formatierung in der Meta Box für jedes Eingabefeld an.

// Meta-Boxen formatieren
Funktion plib_format_box () {
global $ meta_box, $ post;

// Nonce zur Überprüfung verwenden
rauswerfen '';

rauswerfen '

';

foreach ($ meta_box [$ post-> post_type] ['fields'] als $ field) {
// aktuelle Post-Metadaten abrufen
$ meta = get_post_meta ($ post-> ID, $ field ['id'], true);

rauswerfen '
'.
'
'.
'
';
}}

rauswerfen '
'. $ field ['name']. '';
switch ($ field ['type']) {
Fall 'Text':
rauswerfen ''. '
'. $ field ['desc'];
brechen;
case 'textarea':
Echo ''. ($ meta? $ meta: $ field ['default']). ''. '
'. $ field ['desc'];
brechen;
case 'select':
rauswerfen '';
foreach ($ field ['options'] als $ option) {
Echo ''. $ Option. '';
}}
rauswerfen '';
brechen;
Fall 'Radio':
foreach ($ field ['options'] als $ option) {
Echo ''. $ option ['name'];
}}
brechen;
case 'checkbox':
rauswerfen '';
brechen;
}}
rauswerfen '
'.'
';

}}

Die Funktion durchläuft die Felder Abschnitt jedes Eintrags des Arrays $ meta_box und druckt die angegebenen Werte aus.

06. Speichern von Daten aus der Meta Box

Schließlich müssen wir WordPress mitteilen, dass die Felder vorhanden sind und wie sie mit der Post gespeichert werden können.

// Daten aus der Meta-Box speichern
Funktion plib_save_data ($ post_id) {
global $ meta_box, $ post;

// Nonce überprüfen
if (! wp_verify_nonce ($ _ POST ['plib_meta_box_nonce'], Basisname (__ FILE__))) {
return $ post_id;
}}

// Automatische Speicherung überprüfen
if (definiert ('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return $ post_id;
}}

// Berechtigungen prüfen
if ('page' == $ _POST ['post_type']) {
if (! current_user_can ('edit_page', $ post_id)) {
return $ post_id;
}}
} elseif (! current_user_can ('edit_post', $ post_id)) {
return $ post_id;
}}

foreach ($ meta_box [$ post-> post_type] ['fields'] als $ field) {
$ old = get_post_meta ($ post_id, $ field ['id'], true);
$ new = $ _POST [$ field ['id']];

if ($ new && $ new! = $ old) {
update_post_meta ($ post_id, $ field ['id'], $ new);
} elseif ('' == $ new && $ old) {
delete_post_meta ($ post_id, $ field ['id'], $ old);
}}
}}
}}

add_action ('save_post', 'plib_save_data');

07. Fazit

Und das ist es! Wenn Ihre Themen mehr Informationen als die grundlegenden Titel- und Post-Editor-Felder benötigen, sind Meta-Boxen eine hervorragende Möglichkeit, die Benutzerfreundlichkeit von benutzerdefinierten Feldern für den Benutzer zu verbessern, unabhängig davon, ob sie technisch sind oder nicht.

Ryan Taylor ryanhavoctaylor.com/ ist freiberuflicher Designer und Front-End-Entwickler. Er führt sein eigenes Geschäft bei Havoc Inspired ( verwüstet ), Blogs bei ryanhavoctaylor.com und Tweets unter @ryanhavoc ( twitter.com/ryanhavoc ). Er ist besessen von sauberem, effizientem und semantischem HTML, CSS und jQuery (seinem Lieblingsframework).