Share
Letzte Woche haben wir vorgestellt, wie Sie benutzerdefinierte Meta-Boxen im Post-Editor erstellen und die darin gespeicherten Daten speichern können. Aber was sind einige praktische Anwendungen dieser Technik? Heute besteht das Ziel darin, drei reale Beispiele für die Verwendung benutzerdefinierter Meta-Boxen zur Verbesserung der Post-Seite durchzugehen.
Im Einführungsartikel haben Sie alles darüber erfahren, wie Sie Metaboxen implementieren und die darin gespeicherten Daten speichern / bereinigen. So großartig! Es ist jedoch an der Zeit, über die konzeptionellen Informationen hinauszugehen und diese benutzerdefinierten Meta-Boxen zu verwenden.
Das Szenario: Sie betreiben eine Website, die hauptsächlich inspirierende Inhalte veröffentlicht. Eine der Dingen, die Sie konsequent tun, ist, dass Sie in jedem Beitrag Anführungszeichen setzen. Um diese Anführungszeichen vom Inhalt zu trennen, möchten Sie sie in eine benutzerdefinierte Meta-Box verschieben.
In diesem Artikel erfahren Sie, wie Sie Metaboxen tatsächlich implementieren. Hier finden Sie eine kurze Übersicht.
Haken Sie eine Funktion in die add_meta_boxes das enthält einen Aufruf an die add_meta_box Funktion.
Erstellen Sie eine Funktion mit demselben Namen wie $ Rückruf spezifiziert in add_meta_box. Dies ist das Stück, das tatsächlich den Inhalt der Meta-Box anzeigt.
Accentsconagua
ID, '_cd_quote_content', true); $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); // Nonce zum Bestätigen der Absicht später wp_nonce_field ('save_quote_meta', 'quote_nonce'); ?>
Funktion einhängen save_post Das erledigt zunächst die Überprüfung von Berechtigungen und Absichten und reinigt und speichert dann die Daten.
Array ()); if (isset ($ _POST ['_ cd_quote_content'])) update_post_meta ($ id, '_cd_quote_content', wp_kses ($ _POST ['_ cd_quote_content'], $ allowed)); if (isset ($ _POST ['_ cd_quote_author'])) update_post_meta ($ id, '_cd_quote_author'), esc_attr (strip_tags ($ _POST ['_ cd_quote_author'])); if (isset ($ _POST ['_ cd_quote_date'])) update_post_meta ($ id, '_cd_quote_date'), esc_attr (strip_tags ($ _POST ['_ cd_quote_date'])); ?>
Wir könnten die in unseren Meta-Boxen gespeicherten Daten verwenden, indem Sie die Vorlagendateien unseres Themes bearbeiten. Das ist aber zu einfach. Um unseren Angebotscode modular zu halten (eine Plugin-Datei), verwenden wir Filter-Hooks, die Teil der Plugin-API sind. Filterhaken unterscheiden sich etwas von Aktionen. Wenn Sie sich in einen Filter einhaken, besteht der Zweck meistens darin, die Darstellung eines Inhalts auf einer Seite zu ändern. In unserem Fall haken wir uns ein der Inhalt, und wenn wir uns auf einer einzelnen Beitragsseite befinden, die ein Zitat enthält, fügen wir sie oben hinzu.
Eine andere Möglichkeit, sich Action oder Filterhaken vorzustellen, ist, dass Sie Echo Dinge in Aktionen (z. B. wp_head, siehe Abschnitt 2), aber mit Filtern nehmen Sie eine oder mehrere Variablen auf, ändern diese dann Rückkehr Sie.
Um unser Angebot anzuzeigen, haken wir uns an der Inhalt, Dabei wird standardmäßig eine Variable übergeben: der Inhalt eines bestimmten Beitrags. In unserer Hooked-Funktion stellen wir sicher, dass wir uns auf einen einzelnen Beitrag beziehen. Wenn nicht, geben Sie den Inhalt richtig zurück (keine Änderungen)..
Als nächstes bekommen wir unsere $ post Variable. Weil wir in der Schleife sind, rufen wir einfach an global $ post. Dann erhalten wir unser Angebot, wenn kein Wert zurückkommt, wissen wir, dass kein Angebot eingegeben wurde, und wir geben den Inhalt ohne Änderung erneut zurück.
ID, '_cd_quote_content', true); // Bail, wenn wir kein Angebot haben; if (empty ($ quote)) gibt $ content zurück; ?>
Nachdem wir nun sichergestellt haben, dass wir einen einzigen Beitrag haben und tatsächlich ein Angebot haben, kümmern wir uns darum, die Dinge zusammenzustellen. Zuerst rufen wir unseren Autor und ihre Termine über an get_post_meta (), dann können wir anfangen, eine Zeichenfolge in der Zeichenkette zu erstellen raus Variable. Zuerst fügen wir ein und unser Zitat. Dann prüfen wir, ob das Autorenfeld ausgefüllt wurde. Wenn dies der Fall ist, beginnen wir einen Absatz für den Autor und prüfen, ob ein Datum vorhanden ist, und fügen diesen ebenfalls dem Absatz hinzu. Zum Schluss fügen wir unseren Abschluss hinzu Etikett.
ID, '_cd_quote_content', true); // Bail, wenn wir kein Angebot haben; if (empty ($ quote)) gibt $ content zurück; // Montiere unser Zitat $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = ''. $ quote; if (! empty ($ author)) $ out. = ''; ?>-'. $ Autor; if (! empty ($ date)) $ out. = '('. $ date. ')'; $ out. = '
'; $ out. = '
Nun der entscheidende Schritt: die Kombination unserer Neuheiten zurückgeben raus Zeichenfolge, die das Zitat und den ursprünglichen Inhalt enthält $ content.
ID, '_cd_quote_content', true); // Bail, wenn wir kein Angebot haben; if (empty ($ quote)) gibt $ content zurück; // Montiere unser Zitat $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = ''. $ quote; if (! empty ($ author)) $ out. = ''; // Gib zuerst die Werte zurück: Anführungszeichen, dann den Inhalt $ out. $ content; ?>-'. $ Autor; if (! empty ($ date)) $ out. = '('. $ date. ')'; $ out. = '
'; $ out. = '
Das ist es! Sie können das Ergebnis sehen.
Das Szenario: Sie haben eine aktive Community von Lesern, die regelmäßig Ihre Artikel auf Facebook veröffentlichen. Das ist großartig und schickt viel Verkehr in Ihre Richtung. Sie stellen jedoch fest, dass die Bilder, die mit Ihren Artikeln auf Facebook angezeigt werden, nicht ideal sind. Sie sind auch nicht zufrieden mit der Veröffentlichung Ihrer Titel. Die Lösung besteht darin, Open Graph-Meta-Tags hinzuzufügen, um die Anzeige Ihrer Artikel zu steuern. Anstatt sich dies automatisch erledigen zu lassen, entscheiden Sie sich für die Implementierung einer benutzerdefinierten Meta-Box, um sich darum zu kümmern.
Vermutlich haben Sie das jetzt schon, aber hier ist der Code, um Ihre Meta-Box in Gang zu setzen.
ID, '_cd_opengraph_title', true); $ desc = get_post_meta ($ post-> ID, '_cd_opengraph_desc', true); $ image = get_post_meta ($ post-> ID, '_cd_opengraph_image', true); // Füge ein Nonce-Feld hinzu wp_nonce_field ('save_opengraph_meta', 'opengraph_nonce'); ?>
Kleine quadratische Bilder funktionieren am besten.
Damit die Schaltfläche "Bild hochladen" funktioniert, müssen wir ein wenig Javascript hinzufügen, das den eingebauten WordPress-Uploader entführt. Das bedeutet, dass wir noch einen anderen Aktionshaken verwenden werden. Diesmal ist es admin_print_script - $ page.
Beim Hinzufügen von Skripten und / oder Stilen zum Admin-Bereich von WordPress gibt es eine goldene Regel: Fügen Sie die Skripte / Stile nur dort hinzu, wo Sie sie benötigen. Dies verhindert, dass Ihr Plugin / Theme bei einem Unfall etwas anderes beschädigt. admin_print_scripts - $ page können Sie nur Skripte (über die Funktion wp_enqueue_script) nur in der einfügen $ Seite spezifizierten. In diesem Fall müssen wir unser Skript dem hinzufügen post.php und post-new.php Bildschirme. Dies erfordert, dass in beiden Funktionen die gleiche Funktion verwendet wird.
Und das Javascript.
jQuery (document) .ready (function () var ogfield = null; jQuery ('# cdog-thickbox') .click (function () ogfield = jQuery ('input # og-image') .attr ('name') tb_show (", 'media-upload.php? type = image & TB_iframe = true'); return false;); window.send_to_editor_old = window.send_to_editor; window.send_to_editor = function (html) var ogimg; if (ogfield) ! = null) ogimg = jQuery ('img', html) .attr ('src'); jQuery ('input # og-image') .val (ogimg); tb_remove (); ogfield = null; else window.send_to_editor_old (html);;); Zuerst stellen wir sicher, dass der Dickbox-Uploader angezeigt wird, wenn Sie auf die Schaltfläche klicken, und wir richten eine Variable ein, die WordPress mitteilt, dass die Schaltfläche angeklickt wurde. Als nächstes speichern wir die window.send_to_editor Funktion mit einem neuen Namen. Dies ist die Funktion, die das Bild-HTML in den Nachbearbeitungsbereich einfügt. Wir werden diese Funktion hijacken, um das src-Attribut an unser eigenes Formularfeld zu senden, aber nur, wenn die Thickbox durch unsere Schaltfläche aufgerufen wurde.
Wir werden in den Haken hängen wp_head Aktion zum Hinzufügen unserer Meta-Tags in der Sektion. Zuerst stellen wir sicher, dass wir uns auf einer einzelnen Beitragsseite befinden, und richten dann unsere ein $ post Variable. $ post sollte an dieser Stelle nicht leer sein, da WordPress bereits entschieden hat, für welche Art von Objekt es gerendert wird und welche Vorlagendatei es verwenden muss. Falls ja, rufen wir mit ab get_queried_object ().
get_queried_object (); ?>
Als nächstes können wir jede Open Graph-Variable durchgehen und alles mit abrufen get_post_custom (), und wenn es dort ist, Echo es in den Kopfbereich unserer Seite.
get_queried_object (); $ values = get_post_custom ($ post-> ID); if (isset ($ values ['_ cd_opengraph_title'])) echo ''. "\ n"; if (isset ($ values ['_ cd_opengraph_desc'])) echo ''. "\ n"; if (isset ($ values ['_ cd_opengraph_image'])) echo ''. "\ n"; ?>
Das Szenario: Sie verlassen sich stark auf die Seitenvorlagenvorlage von Twenty Eleven. Sie möchten jedoch für jede Seite zwischen linker und rechter Seitenleiste wechseln können.
Der folgende Code wäre etwas besser in der Funktionsdatei eines Themas. Das heißt, weil wir hier ein Plugin verwenden, können wir uns in das drin und mit unserem Funktions-Check, um sicherzustellen, dass Twenty Eleven das aktuelle Thema ist. Wenn nicht, deaktivieren wir das Plugin. Zuerst definieren wir jedoch eine Konstante, die die URL des Verzeichnisses enthält, in dem sich unser Plugin befindet.
Gleiche Routine wie zuvor: Fügen Sie die Meta-Box hinzu, rendern Sie sie und speichern Sie die Daten. Dieses Mal werden wir jedoch unsere Meta-Box auf dem Bearbeitungsbildschirm für Seiten anzeigen. Wir werden auch eine nette Wordpress-Funktion namens get_template_directory_uri verwenden, die einen String zurückgibt, der den URI des Verzeichnisses für das aktuelle Design enthält. Wir werden dies nutzen, um sich ein paar Bilder zu leihen, die Twenty Eleven auf der Seite mit den Themenoptionen verwendet. Wir werden auch die zuvor definierte Konstante verwenden, um ein eigenes Bild hinzuzufügen.
ID, '_cd_post_layout', wahr); // Legt unsere Layoutvariable auch für neue Beiträge fest, wenn (leer ($ layout)) $ layout = 'default'; // Design-Verzeichnis für die Ausleihe von 2011-Bildern $ dir = get_template_directory_uri (); wp_nonce_field ('save_post_layout', 'layout_nonce'); ?> Um unsere Meta-Box ein wenig zu verbessern, müssen wir auch unser eigenes Stylesheet hinzufügen. Merken admin_print_scripts - $ page aus dem zweiten Szenario oben? Es hat einen Bruder, admin_print_styles - $ page, Wie der Name schon sagt, können Sie dem WordPress-Administrator auf bestimmten Seiten Stylesheet hinzufügen. Wir müssen uns in diese Funktion einarbeiten post.php und post-new.php. Wir werden auch wp_enqueue_style () verwenden; es funktioniert genauso wie wp_enqueue_script (), das wir im zweiten Beispiel oben verwendet haben.
Und das CSS.
div.cd-layout width: 200px; Schwimmer: links; div.cd-layout input display: block; # cd-sidebar-pos .clearfix: after clear: both; Inhalt: "; Anzeige: Block; Schriftgröße: 0; Zeilenhöhe: 0; Sichtbarkeit: ausgeblendet; Breite: 0; Höhe: 0; # cd-sidebar-pos Beschriftungsspanne Anzeige: Block; Rand oben: 5px;
Twenty Eleven führt die Positionierung der Seitenleiste durch, indem sie in einen Filter namens Hook eingehängt wird body_class. Dies ist Teil der aufgerufenen Funktion , Wenn Sie zuvor ein Thema entworfen haben, haben Sie wahrscheinlich verwendet. Wenn das Standardlayout zweispaltig ist, fügt Twenty Eleven body_class einen von zwei zusätzlichen Elementen hinzu: rechte Seitenleiste oder linke Seitenleiste. Den Code dazu finden Sie im Thema inc Ordner in der Datei theme-options.php.
Unser eigener Code wird auch eingehängt body_class. Zuerst stellen wir sicher, dass wir uns auf einer Seite befinden und dass diese Seite die Seitenleistenvorlage. Dann bekommen wir die $ post Variable oder setzen Sie es, wenn es leer ist. Beachten Sie zwei zusätzliche Argumente für add_filter. 99 ist die Priorität. Wir möchten, dass dies als letztes Feuer erfolgt, daher verwenden wir eine höhere Zahl. 1 ist die Anzahl oder die Argumente, die an unsere Funktion gesendet werden sollen.
body_class sendet ein Array aller Elemente, die in den Ordner aufgenommen werden body_class () Ausgabefunktion. Von hier aus brauchen wir nur unsere eigenen Metawerte. Wenn unser Wert 'richtig' ist, suchen wir im Body-Klassen-Array nach "linker Seitenleiste". Wenn es dort ist, setzen wir es zurück und ersetzen es durch "rechte Seitenleiste". Umgekehrt, wenn unser Wert übrig bleibt.
ID, '_cd_post_layout', wahr); // Wenn wir das richtige Layout verwenden, fügen Sie Folgendes hinzu: ($ layout == 'right') $ key = array_search ('left-sidebar', $ classes); if ($ key) unset ($ classes [$ key]); $ classes [] = 'rechte Seitenleiste'; elseif ($ layout = 'left') $ key = array_search ('rechte Seitenleiste', $ classes); if ($ key) unset ($ classes [$ key]); $ classes [] = 'linke Seitenleiste'; Rückgabe von $ classes; ?> Das Obige würde funktionieren, aber wir haben ein wenig Detail ausgelassen. Wenn bei einem Benutzer die Themenoptionen von Twenty Eleven auf eine einspaltige Anzeige eingestellt waren, funktionierte keine der Optionen in unserer Meta-Box. Also lasst uns modifizieren add_meta_box ein bisschen anrufen Zuerst erhalten wir die Optionen von Twenty Eleven. Dann stellen wir sicher, dass die Design-Option für das Design nicht auf eine Spalte eingestellt ist. Wenn das Design auf eine Spalte eingestellt ist, wird das Meta-Feld nicht hinzugefügt.
Wie Sie sich vorstellen können, gibt es viele andere Verwendungsmöglichkeiten für benutzerdefinierte Meta-Boxen. Dies sind nur ein paar praktische Beispiele, damit Ihr Verstand arbeiten kann. In Kombination mit benutzerdefinierten Beitragstypen können Sie extrem benutzerdefinierte Bearbeitungsbildschirme erstellen. Die eigentliche Stärke von benutzerdefinierten Meta-Boxen liegt jedoch darin, wie Design-Designer und Plugin-Entwickler benutzerfreundlichere Schnittstellen für Einstellungen auf Post- oder Seitenebene erstellen können.
Wir hoffen, dass Ihnen das Tutorial gefallen hat!
