Share
In dieser Serie wird gezeigt, wie Sie den WordPress Media Uploader in ein Plugin implementieren. Die Idee hinter dieser Serie und dem dazugehörigen Code besteht darin, ein klares Verständnis dafür zu vermitteln, wie sie funktioniert, wie wir sie in Zukunft verwenden können und wie wir sie in unsere Arbeit integrieren können.
Bis zu diesem Punkt haben wir Folgendes behandelt:
In all diesen Artikeln haben wir den Prozess des Aufbaus eines Plugins durchlaufen, das den WordPress Media Uploader verwendet, um ein gekennzeichnetes Bild in das Internet einzufügen Fußzeile unserer Blogbeiträge (und Seiten).
Es gibt jedoch ein Problem: Das Bild wird weder gespeichert noch im Inhalt des zugehörigen Blogbeitrags (oder der Seite) angezeigt..
In diesem Artikel werden wir an der Stelle weitermachen, wo wir aufgehört haben, und den Rest dieses Plugins fertigstellen. Ich nehme an, Sie haben die beiden letzten Beiträge gelesen und verstehen den Quellcode, den wir bisher behandelt haben.
Lassen Sie uns damit fortfahren.
Um sicherzustellen, dass das Bild am Frontend von WordPress angezeigt werden kann, müssen Sie die bereitgestellten Bildinformationen speichern durch WordPress.
Im vorigen Artikel haben wir einige dieser Informationen verwendet, um das Bild in der von uns erstellten Meta-Box anzuzeigen, aber keine dieser Informationen wurde tatsächlich gespeichert. Daher kann das Bild nicht im Dashboard oder im Frontend der Website angezeigt werden, da WordPress sich nicht daran erinnert.
Wir werden das beheben. Insbesondere werden wir Felder für Folgendes speichern:
Accentsconagua
src Attributalt Attribut und als Titel AttributAls Erstes müssen Sie einen weiteren Container mit drei Eingabefeldern in der admin.php Ansicht unseres Plugins. Jedes dieser Felder entspricht den oben genannten Werten.
Schau dir den Code unten an, worauf ich näher eingehen werde:
Es sollte von Anfang an leicht verständlich sein:
vorgestellte Fußzeile-Bild-Meta An diesem Punkt müssen wir wieder in unsere JavaScript-Datei springen, damit wir die über den Media Uploader zurückgegebenen Informationen übernehmen und die Eingabefelder mit diesen Informationen füllen können.
Öffnen admin.js Fügen Sie dann die folgenden drei Zeilen am unteren Rand der Handler-Funktion für die Einfügung hinzu Veranstaltung (zum file_frame):
// Speichern Sie die Bildinformationen in den Metadatenfeldern $ ('# footer-thumbnail-src') .val (json.url); $ ('# footer-thumbnail-title') .val (json.title); $ ('# footer-thumbnail-alt') .val (json.title);Navigieren Sie von hier aus zu Ihrem WordPress-Dashboard, fügen Sie einen neuen Beitrag hinzu oder bearbeiten Sie einen vorhandenen Beitrag. In diesem Fall sollten Sie etwa folgendes Bild sehen:
Vorausgesetzt, Sie haben das gesamte JavaScript direkt geschrieben, sollten Sie auf der Grundlage der Daten, die Sie im Media Uploader angegeben haben, etwas ähnliches sehen, wenn Sie ein Bild auswählen.
Beachten Sie jedoch, dass der Text beim Klicken auf "Ausgewähltes Bild entfernen" erhalten bleibt. Bevor wir uns das eigentliche Speichern dieser Informationen ansehen, beenden Sie das JavaScript, damit die Eingabefelder gelöscht werden, wenn der Benutzer das Bild entfernt.
Obwohl es mehrere Möglichkeiten gibt, dies zu tun, habe ich mich für die Verwendung des folgenden Codes entschieden:
// Zum Schluss setzen wir die Metadaten-Eingabefelder $ zurück ('# featured-footer-image-info') .children () .val (");Denken Sie daran, dass sich dies im Event-Handler für den Anker "Entferntes Bild entfernen" befinden muss. Im vorigen Artikel haben wir diese Funktion benannt resetUploadForm.
An dieser Stelle sollten Sie in der Lage sein, auf "Entferntes Bild entfernen" zu klicken und das Bild und die Eingabefelder zurückzusetzen. Wenn Sie Probleme haben, überprüfen Sie den Quellcode im GitHub-Repository, der diesem Beitrag zugeordnet ist (er wird sich im Master-Zweig befinden und ebenfalls als 1.0.0 gekennzeichnet sein)..
Jetzt müssen wir etwas Code in das Plugin einfügen, der die Werte der Eingabefelder bereinigt, sie dem Beitrag zuordnet und ihn in der Datenbank speichert, damit wir die Informationen in der Fußzeile jedes Beitrags anzeigen können.
In dem Lauf Funktion für Acme_Footer_Image, Fügen Sie die folgende Codezeile hinzu:
add_action ('save_post', array ($ this, 'save_post')));Dann müssen wir eine Funktion definieren, die dafür verantwortlich ist, die Werte der Eingabefelder tatsächlich in der Datenbank zu speichern. Es gibt zwei Dinge, die Sie über den folgenden Code wissen sollten:
/ ** * Bereinigt und speichert die Meta-Daten der Fußzeilen, die für diesen Beitrag spezifisch sind. * * @param int $ post_id Die ID des Beitrags, mit dem wir gerade arbeiten. * @since 0.2.0 * / public function save_post ($ post_id) if (isset ($ _REQUEST ['footer-thumbnail-src'])) update_post_meta ($ post_id, 'footer-thumbnail-src', sanitize_text_field ($.) _REQUEST ['footer-thumbnail-src']))); if (isset ($ _REQUEST ['footer-thumbnail-title'])) update_post_meta ($ post_id, 'footer-thumbnail-title', sanitize_text_field ($ _REQUEST ['footer-thumbnail-title'])); if (isset ($ _REQUEST ['footer-thumbnail-alt'])) update_post_meta ($ post_id, 'footer-thumbnail-alt', sanitize_text_field ($ _REQUEST ['footer-thumbnail-alt']));
Bevor wir dies testen können, müssen wir zwei weitere Änderungen an der Dashboard-Ansicht vornehmen, bevor die Bilder auf dem Frontend angezeigt werden.
Zuerst müssen wir sicherstellen, dass wir die Metadaten in die Eingabefelder zurückschicken. Springe in die admin.php und aktualisieren Sie es noch einmal, um Folgendes hinzuzufügen:
Hier rufen wir die an get_post_meta Funktion, um die Werte abzurufen, die mit der oben deklarierten Funktion gespeichert wurden.
Als Nächstes müssen wir sicherstellen, dass das Bildelement, das wir zuvor in dieser Serie erstellt haben, mit den gleichen Werten gefüllt wird:
Wenn die Metadaten leer sind, werden die Attribute natürlich nicht ausgefüllt und das Bild wird nicht angezeigt.
Wenn alles gut geht, sollten Sie das Bild und die zugehörigen Daten in den Eingabefeldern sehen, wenn Sie den Beitrag speichern. Wenn Sie das abgebildete Bild entfernen, sollten die Felder ebenfalls gelöscht und nicht mehr angezeigt werden.
Bevor wir mit der Anzeige des Bildes auf dem Frontend fortfahren, müssen wir einige kleine Dinge tun, um die Anzeige der Meta-Box aufzuräumen.
Zuerst müssen wir sicherstellen, dass alle Eingabefelder vor dem Typ waren Text sind vom Typ versteckt.
Als Nächstes müssen wir eine kleine JavaScript-Funktion schreiben, die das Bild anzeigt, sofern eines gespeichert wurde. Die Funktion prüft, ob das Eingabefeld für die Bild-URL keine leere Zeichenfolge ist.
Wenn nicht, wird das Bild angezeigt. Also fügen wir diese Funktion unserer JavaScript-Datei hinzu:
; ?> "<?php echo get_post_meta( $post->ID, 'footer-thumbnail-title', true); ?>")
/ ** * Prüft, ob das Eingabefeld für die Miniaturbildquelle einen Wert enthält. * Wenn ja, werden das Bild und der Anker 'Entferntes Bild entfernen' angezeigt. * * Andernfalls wird der Standardanker gerendert. * * @param object $ Eine Referenz auf das jQuery-Objekt. * @since 1.0.0 * / function renderFeaturedImage ($) / * Wenn diesem Bild eine Miniatur-URL zugeordnet wurde *, müssen das Bild und der Link zum Zurücksetzen angezeigt werden . * / if ("! == $ .trim ($ ('# footer-thumbnail-src') .val ())) $ ('# featured-footer-image-container') .removeClass ('hidden') ; $ ('# set-footer-thumbnail') .parent () .hide (); $ ('# remove-footer-thumbnail') .parent () .removeClass ('hidden');Rufen Sie dann die JavaScript-Funktion im Kontext der DOM-ready-Funktion auf:
renderFeaturedImage ($);
Kurz gesagt, beim Laden der Seite wird geprüft, ob in unserem Eingabefeld eine URL vorhanden ist. Wenn dies der Fall ist, wird das Bild gerendert und wir haben die Möglichkeit, es zu entfernen. Andernfalls wird nur das leere Feld mit den angezeigten Bildern angezeigt.
Wenn Sie Schwierigkeiten haben, diesem Code zu folgen, sollten Sie das zugehörige GitHub-Repository über den Link in der Seitenleiste dieser Seite auschecken.
An diesem Punkt haben wir alles getan, was wir im Dashboard tun müssen. Es ist also an der Zeit, das Bild im Frontend des Blogs anzuzeigen. Dazu müssen wir einen Hook einrichten, zu dem eine Verbindung hergestellt wird der Inhalt Aktion, überprüfen Sie, ob ein Bild vorhanden ist, und hängen Sie es gegebenenfalls an den Post-Inhalt an.
Fügen Sie dazu zuerst die folgende Zeile hinzu Lauf Methode Ihrer Acme_Footer_Image Klasse:
add_action ('the_content', array ($ this, 'the_content'));Als Nächstes müssen wir eine Funktion schreiben, die an diese Aktion gebunden ist. Diese Funktion ist dafür verantwortlich, zu überprüfen, ob wir nur eine einzige Seite sind (weil wir kein Bild an die Fußzeile eines Beitrags anhängen möchten, wenn ein Benutzer beispielsweise über a verfügt Mehr Tag als Teil ihres Inhalts markieren).
Wir machen dies mit dem folgenden Code:
/ ** * Wenn es sich bei dem aktuellen Beitrag um einen einzelnen Beitrag handelt, prüfen Sie, ob es ein gekennzeichnetes Bild gibt. * Wenn dies der Fall ist, fügen Sie den Post-Inhalt vor dem Rendern des Beitrags an. * * @param string $ content Der Inhalt des Beitrags. * @since 1.0.0 * / public function the_content ($ content) // Es ist uns nur wichtig, das Bild an einzelne Seiten anzuhängen, wenn (is_single ()) // Um ein Bild anzuhängen, muss es mindestens sein ein Quellattribut if ("! == ($ src = get_post_meta (get_the_ID (), 'footer-thumbnail-src', true))) // liest die restlichen Attribute, auch wenn sie leere Zeichenfolgen sind. $ alt = get_post_meta (get_the_ID (), 'footer-thumbnail-alt', true); $ title = get_post_meta (get_the_ID (), 'footer-thumbnail-title', true); // Erzeuge das Bildelement in seinem eigenen Container $ img_html = ''; $ img_html. = "
"; $ img_html. = '
'; // es an den Inhalt anhängen $ content. = $ img_html; return $ content; Und damit sollten wir ein voll funktionsfähiges Plugin haben, das ein hervorgehobenes Fußzeilenbild an einen Beitrag anfügt, der auf einer einzelnen Beitragsseite dargestellt wird.
In dieser Serie haben wir eine Menge Material behandelt, von dem am wenigsten der Media Uploader betroffen war. Obwohl dieser Artikel mehr Zeit darauf verwendet hat, uns die Verbindung der Daten von der Meta-Box mit dem Frontend zu zeigen, zeigt er dennoch, wie eine praktische Anwendung des Media Uploader im Kontext eines Plugins angewendet werden kann.
Darüber hinaus gibt es noch viele weitere Informationen zum Media Uploader, über die wir in zukünftigen Themen berichten könnten. Wenn Sie interessiert sind, teilen Sie mir dies bitte in den Kommentaren mit. Wenn Sie Fragen zu dem, was Sie gelesen haben, oder zu dieser Serie im Allgemeinen haben, können Sie diese auch gerne verlassen.
Vergessen Sie nicht, sich das GitHub-Repository für dieses Projekt anzuschauen - ich hoffe, dass es Ihnen bei der zukünftigen Arbeit mit dem Media Uploader gut tut!
"; $ img_html. = '