Share
Bei der Veröffentlichung von WordPress 3.5 wurde am Media Uploader eine der wichtigsten Änderungen vorgenommen. Eine genauere Beschreibung der Änderung wäre vielleicht als Zusatz eines neuen Media Uploader.
Die alte Version des Media Uploader ist immer noch vorhanden und kann parallel zur aktuellen Medienbibliothek ausgeführt werden. Dies ist jedoch durch die richtige Hinzufügung und Verwendung von Skripts, Stil und allen anderen abhängigen Funktionen erforderlich.
Wie bei jeder Software werden Funktionen und Funktionen, die über einen längeren Zeitraum hinweg vorhanden sind, zugunsten neuer Funktionen oder Funktionen abgelehnt. In unserem Fall ist die Medienbibliothek keine Ausnahme. Obwohl es nicht mehr von WordPress Core verwendet wird, gibt es viele Plugins und andere Dienstprogramme von Drittanbietern, die immer noch die alte Version der Medienbibliothek verwenden.
Die Herausforderung, die mit so vielen Kopien des Codes der älteren Funktionalität verbunden ist, besteht darin, dass wir die Medienbibliothek selbst nutzen können, um am Ende Beispiele für die ältere Funktionalität zu finden.
Da es sich bei der neuen Medienbibliothek um den neuen Standard in WordPress handelt und es nicht viele Dokumentationen für die Verwendung gibt, werfen wir einen Blick auf die Funktionalität in den nächsten Artikeln, um die neuen Medien kennenzulernen Die Bibliothek ist so aufgebaut, wie wir sie in unserer eigenen Arbeit implementieren können und wie wir die verschiedenen Funktionen nutzen können, die bereits in WordPress Core enthalten sind.
Der neue WordPress Media Uploader bietet gegenüber der vorherigen Iteration eine Reihe von Vorteilen:
Es ist jedoch wichtig anzumerken, dass die neueste Version des Uploaders mit einer Reihe völlig anderer Technologien als der vorherigen erstellt wird. Dies bedeutet, dass der Code, den Sie einmal geschrieben haben, um die benutzerdefinierte Medienverwaltung zu implementieren, möglicherweise weiterhin funktioniert (bis der Thickbox-Kerncode nicht mehr verwendet wird), er wird jedoch im Vergleich zu dem aussehen, was Benutzer derzeit erleben, wenn sie ihre Medien darin verwalten WordPress.
Bevor Sie sich einen Überblick darüber verschaffen, wie Sie diesen Code in unseren eigenen Code integrieren und eine eigene Implementierung erstellen können, müssen Sie die Grundlagen der neuen Medienbibliothek verstehen.
Wie bereits erwähnt, verwendete die vorherige Ausgabe des Media-Uploaders eine Bibliothek, die als Thickbox bezeichnet wurde, um die Dinge zu erstellen, die wir gesehen haben. In der neuesten Implementierung verwendet WordPress jedoch beide Unterstriche (nicht mit dem Unterstrich zu verwechseln) theme) und Backbone - zwei JavaScript-Technologien, die zusammenarbeiten, um die Benutzeroberfläche zu steuern und die Ereignisse des Medien-Uploaders zu verwalten.
Obwohl wir uns nicht in diese Bibliotheken vertiefen, ist es wichtig, die Rolle zu verstehen, die jede im Media Uploader spielt.
Zuerst Rückgrat:
Backbone.js strukturiert Webanwendungen, indem Modelle mit Schlüsselwertbindung und benutzerdefinierten Ereignissen, Sammlungen mit einer umfangreichen API mit zahlbaren Funktionen, Ansichten mit deklarativer Ereignisbehandlung bereitgestellt und über eine RESTful-JSON-Schnittstelle mit Ihrer vorhandenen API verbunden werden.
Und Unterstrich:
Underscore ist eine JavaScript-Bibliothek, die eine Fülle nützlicher funktionaler Programmierhilfen zur Verfügung stellt, ohne eingebaute Objekte zu erweitern. Es ist die Antwort auf die Frage: „Wenn ich mich vor einer leeren HTML-Seite hinsetze und sofort produktiv werden möchte, was brauche ich dann?“… Und die Verbindung zu jQuerys Smoking und den Backbone-Hosenträgern.
Natürlich können Sie auf den jeweiligen Seiten mehr über diese erfahren, aber ich wollte sie jetzt erwähnen. Wenn wir uns also mit der Verwaltung der Benutzeroberfläche und der Ereignisse für die Implementierung unserer benutzerdefinierten Medienbibliothek beschäftigen, haben wir ein klareres Verständnis davon Was macht der Code eigentlich?.
Beachten Sie schließlich, dass dies ist nicht jQuery. Wenn Sie es gewohnt sind, mit dieser Bibliothek zu arbeiten - und viele von uns sind -, sind diese beiden Bibliotheken völlig getrennt. Sie können - und wir werden - jQuery neben den von Backbone und Underscore hinzugefügten Funktionen verwenden.
Lassen Sie uns nun tatsächlich Code schreiben.
In unserem Beispiel betrachten wir, wie wir eine Basisversion der Medienbibliothek in ein vorhandenes WordPress-Design integrieren. In unserem Beispiel bauen wir dies als Plugin auf. Die Umgebung, die wir verwenden werden, besteht jedoch aus den folgenden:
Und das ist es. Der Rest des Codes wird in unserem Plugin enthalten sein. Natürlich wirft dies immer noch die Frage auf Was Unser Plugin wird es tatsächlich tun.
Kurz gesagt, wir werden an der Nachahmung der "Featured Image" -Funktionalität von WordPress arbeiten, aber anstatt ein Bild am Anfang des Beitrags (oder am oberen Rand des Beitrags) hinzuzufügen, werden wir ein "einführen". Featured Footer Image ', das das Bild am unteren Rand des Beitrags hinzufügt.
Die Funktionalität ist offensichtlich trivial - der Schwerpunkt liegt auf der Implementierung der neuen Medienbibliothek.
Der gesamte Quellcode wird in einem mit diesem Artikel verknüpften GitHub-Repository zur Überprüfung zur Verfügung gestellt. Sie können den Code während des Fortschritts des Artikels folgen und den Code herunterladen, um nach jedem Artikel weitere Informationen zur weiteren Überprüfung zu erhalten.
In dem WP-Inhalt / Plugins Erstellen Sie ein neues Verzeichnis mit dem Namen acme-footer-image. Hier speichern wir unsere Projektdateien. Danach erstellen Sie leere Dateien wie folgt:
Accentsconagua
README.txtLIZENZacme-footer-image.phpDie ersten drei Dateien sollten selbsterklärend sein. Das acme-footer-image.php In der Datei definieren wir den Plugin-Header und beginnen mit der Ausführung des Plugins. Beachten Sie, dass class-acme-footer-image.php ist die Klasse, die einige der ursprünglichen Funktionen unseres Plugins definiert.
Als Nächstes erstellen Sie ein Verzeichnis im Plugin-Verzeichnis mit dem Namen Administrator da hier alle Verwaltungsfunktionen erhalten bleiben. Dieses Verzeichnis sollte enthalten:
admin / class-admin-footer-image.phpadmin / js / admin.jsSchließlich erstellen Sie eine Ansichten Verzeichnis innerhalb der Administrator Unterverzeichnis, da hier das Markup für unsere Meta-Box platziert wird. Wir werden uns dies später in diesem Artikel genauer ansehen.
Um sicherzustellen, dass wir einen gut organisierten Satz von Dateien erstellen, von denen jede seine eigenen Verantwortlichkeiten hat, werden wir uns jede dieser Dateien genauer ansehen und das Tutorial durcharbeiten. Im Moment sollte dies jedoch alles beinhalten, was wir brauchen, um loszulegen.
Bevor Sie sich mit dem eigentlichen Code beschäftigen, geben Sie zunächst einige der Standardinformationen ein, beginnend mit dem README.
=== Acme Footer Image === Mitwirkende: tommcfarlin Link für Spenden: http://tommcfarlin.com/ Tags: Featured images Erforderlich mindestens: 3.9.2 Getestet bis: 3.9.2 Stable-Tag: 0.1.0 Lizenz: GPLv2 oder später Lizenz-URI: http://www.gnu.org/licenses/gpl-2.0.html Hängen Sie ein gekennzeichnetes Bild am Ende des Inhalts eines Beitrags oder einer Seite an. == Beschreibung == Füge ein gekennzeichnetes Bild am unteren Rand des Inhalts eines Beitrags oder einer Seite an. Wird als Demo für ein Tuts + Code-Tutorial verwendet. == Installation == Dieser Abschnitt beschreibt, wie Sie das Plugin installieren und funktionsfähig machen. z.B. 1. Laden Sie 'plugin-name.php' in das Verzeichnis '/ wp-content / plugins /'. 1. Aktivieren Sie das Plugin über das Menü 'Plugins' in WordPress 1. Platzieren Sie ''in Ihren Vorlagen == Änderungsprotokoll == = 0.1.0 = * Erste Version
Beachten Sie, dass dieses auch das Änderungsprotokoll enthält.
Als Nächstes müssen wir den Code für die Core-Plug-In-Klasse definieren. Diese Klasse ist für Folgendes verantwortlich:
Im Allgemeinen finde ich nicht, dass dies der beste Weg ist, Plugins objektorientiert zu entwickeln, da diese Klasse, wie Sie sehen, bereits mehr als eine Sache tut. Das ist schlechte Praxis. Da jedoch die Menge an Code so gering ist und der Schwerpunkt dieser Serie im Wesentlichen auf JavaScript gerichtet sein wird, das die Medienbibliothek steuert, ist dies ein Opfer, das ich bereit bin zu tun.
Schauen wir uns die Klasse in ihrer Gesamtheit an und betrachten wir einige der einzelnen Komponenten:
* / class Acme_Footer_Image / ** * Die ID dieses Plugins. * * @since 0.1.0 * @access private * @var string $ name Die ID dieses Plugins. * / privater $ name; / ** * Die aktuelle Version des Plugins. * * @since 0.1.0 * @access private * @var string $ version Die Version des Plugins * / private $ version; / ** * Initialisiert das Plugin durch Definition der Eigenschaften. * * @since 0.1.0 * / public function __construct () $ this-> name = 'acme-footer-image'; $ this-> version = '0.1.0'; / ** * Definiert die Hooks, mit denen JavaScriot * registriert wird, und die Meta-Box, die die Option rendert. * * @since 0.1.0 * / public function run () add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_scripts')); add_action ('add_meta_boxes', array ($ this, 'add_meta_box')); / ** * Rendert die Meta-Box auf dem Post und den Seiten. * * @since 0.1.0 * / public function add_meta_box () $ screens = array ('post', 'page'); foreach ($ bildschirme als $ screen) add_meta_box ($ this-> name, 'Footer Featured Image', Array ($ this, 'display_featured_footer_image'), $ screen, 'side'); / ** * Registriert das JavaScript für die Handhabung des Medien-Uploaders. * * @since 0.1.0 * / public function enqueue_scripts () wp_enqueue_media (); wp_enqueue_script ($ this-> name, plugin_dir_url (__FILE__). 'js / admin.js', array ('jquery'), $ this-> version, 'all'); / ** * Rendert die Ansicht, in der der Inhalt der Meta-Box zum Auslösen der Meta-Box angezeigt wird. * * @param WP_Post $ post Das Postobjekt * @since 0.1.0 * / public function display_featured_footer_image ($ post) include_once (dirname (__FILE__). '/views/admin.php'); Der größte Teil des Codes sollte durch die Kommentare selbsterklärend sein. Wenn nicht, zögern Sie nicht, einen Kommentar zu hinterlassen, aber lassen Sie uns in der Zwischenzeit die folgenden zwei Bereiche betrachten:
Zuerst die Definition der Meta-Box.
Name, 'Footer Featured Image', Array ($ this, 'display_featured_footer_image'), $ screen, 'side');
Beachten Sie, dass wir die Meta-Box auf beiden Seiten und Posttypen unterstützen. Diese Funktion bezieht sich auch auf eine Rückruffunktion display_featured_footer_image das ist für das Rendern des HTML der Meta-Box verantwortlich:
öffentliche Funktion display_featured_footer_image ($ post) include_once (dirname (__FILE__). '/views/admin.php');
Das Markup für diese Datei ist sehr einfach. Es ist ein Anker mit einer ID, auf die wir über unser JavaScript zugreifen können, auf die wir kurz einen Blick werfen.
Festgelegtes Bild einstellen
Wir werden das für das Laden der Medienbibliothek erforderliche JavaScript aufnehmen.
öffentliche Funktion enqueue_scripts () wp_enqueue_media (); wp_enqueue_script ($ this-> name, plugin_dir_url (__FILE__). 'js / admin.js', array ('jquery'), $ this-> version, 'all'); Beachten Sie, dass wir vor der Registrierung unseres eigenen JavaScript einen Aufruf an erstellen wp_enqueue_media. Gemäß dem Codex lautet diese Funktion:
Stellt alle Skripts, Stile, Einstellungen und Vorlagen in eine Reihe ein, die zur Verwendung aller Medien-JavaScript-APIs erforderlich sind.
Und dies ist notwendig, um sicherzustellen, dass wir die notwendigen Abhängigkeiten haben, um den neuen Media Uploader zu laden.
Lassen Sie uns als Nächstes das JavaScript betrachten, das wir schreiben müssen, um sicherzustellen, dass wir die zum Einrichten der Medienbibliothek erforderliche Funktionalität nutzen und sicherstellen, dass sie angezeigt wird, wenn der Benutzer auf den entsprechenden Link klickt.
Der Code ist stark kommentiert und sollte daher leicht zu folgen sein. Wenn nicht, zögern Sie nicht, einen Kommentar im Feed unter dem Beitrag zu hinterlassen!
/ ** * Callback-Funktion für das 'click'-Event des Ankers' Set Footer Image '* in seiner Meta-Box. * * Zeigt den Medien-Uploader zum Auswählen eines Bildes an. * * @since 0.1.0 * / function renderMediaUploader () 'use strict'; var file_frame, image_data; / ** * Wenn bereits eine Instanz von file_frame vorhanden ist, können Sie sie öffnen *, anstatt eine neue Instanz zu erstellen. * / if (undefined! == file_frame) file_frame.open (); Rückkehr; / ** * Wenn wir so weit sind, gibt es keine Instanz, also müssen wir unsere eigene erstellen. * * Verwenden Sie hier die Bibliothek wp.media, um die Einstellungen für den Media * Uploader festzulegen. Wir entscheiden uns für den "post" -Frame, der eine Vorlage * ist, die in WordPress-Core definiert ist, und initialisieren den Dateirahmen * mit dem "Einfügen" -Zustand. * * Der Benutzer darf auch nicht mehr als ein Bild auswählen. * / file_frame = wp.media.frames.file_frame = wp.media (frame: 'post', Zustand: 'insert', multiple: false); / ** * Richten Sie einen Ereignishandler ein, um festzulegen, was zu tun ist, wenn ein Bild ausgewählt wurde. * * Da wir den 'view'-Status beim Initialisieren des * file_frame verwenden, müssen wir sicherstellen, dass der Handler * an das insert-Ereignis angehängt ist. * / file_frame.on ('insert', function () / ** * Wir werden das in der nächsten Version behandeln. * /); // Zeige jetzt den aktuellen file_frame file_frame.open (); (function ($) 'use strict'; $ (function () $ ('# set-footer-thumbnail')) .on ('click', function (evt) // Stoppen Sie das Standardverhalten des Ankers evt. avoidDefault (); // Anzeigen des Medien-Uploaders renderMediaUploader ();););) (jQuery);Beachten Sie, dass dies nur zeigt die Medienbibliothek an. Nachdem wir ein Bild hochgeladen und / oder ausgewählt haben, tut es nichts.
Der letzte Schritt besteht darin, unsere Kern-Bootstrap-Datei zu definieren, um das Plugin zu starten:
* @license GPL-2.0 + * @link http://tommcfarlin.com * @copyright 2014 Tom McFarlin * * @ wordpress-plugin * Name des Plugins: Acme Footer Image * Plugin-URI: TODO * Beschreibung: Hängt ein hervorgehobenes Bild an unten im Inhalt eines Beitrags oder einer Seite. * Version: 0.1.0 * Autor: Tom McFarlin * Autoren-URI: http://tommcfarlin.com * Lizenz: GPL-2.0 + * Lizenz-URI: http://www.gnu.org/licenses/gpl-2.0.txt * / // Wenn diese Datei direkt aufgerufen wird, brechen Sie den Vorgang ab. if (! defined ('WPINC')) die; / ** * Enthält die Core-Plugin-Klasse für die Ausführung des Plugins. * / required_once (plugin_dir_path (__FILE__). 'admin / class-acme-footer-image.php'); / ** * Beginnt mit der Ausführung des Plugins. * * Da alles innerhalb des Plugins über Hooks registriert wird, wirkt sich * der Start des Plugins ab diesem Punkt in der Datei * nicht auf den Seitenlebenszyklus aus. * * @since 0.1.0 * / function run_acme_footer_image () $ plugin = new Acme_Footer_Image (); $ plugin-> run (); run_acme_footer_image (); Hier sollte alles relativ vertraut sein: Wir stellen sicher, dass wir zum Laden des Plugins berechtigt sind, fügen die Abhängigkeit für das Dashboard hinzu, instanziieren das Widget und setzen es in Bewegung.
An diesem Punkt lesen wir, um das Plugin zu aktivieren. Gehen Sie dazu im Dashboard des Plugins Ihrer WordPress-Installation vor und navigieren Sie zu einem beliebigen Post- oder Seitenbildschirm. Sie sollten ein "Footer Featured Image" sehen. Wenn Sie dann auf den Anker klicken, sollte die Medienbibliothek angezeigt werden.
Wenn nicht, überprüfen Sie die mit Ihrer JavaScript-Datei verknüpften Pfade und stellen Sie sicher, dass sie ordnungsgemäß geladen werden.
Von hier aus können Sie Bilder auswählen und hochladen, obwohl davon nichts anderes stammt. Im nächsten Artikel werden wir uns ansehen, wie Sie die vom Medien-Uploader abgerufenen Daten nutzen können.
Hier haben wir uns die neueste Version des WordPress Media Uploader angesehen, wie er funktioniert und wie wir eine Grundlage schaffen können, um sie in unserem Code zu nutzen. Im nächsten Artikel werden wir uns ansehen, wie Sie mithilfe von JavaScript die zum Media Uploader hinzugefügten Daten abrufen können, damit wir wiederum tun können, was wir wollen.
Außerdem werden wir uns ansehen, wie wir zusätzliche Felder in den Media Uploader einfügen können, indem Sie vorhandene Vorlagen verwenden, die im Lieferumfang von WordPress enthalten sind. Später werden wir sehen, wie wir zusätzliche Felder neben dem Media Uploader implementieren können, um noch mehr Informationen zu speichern.
Spielen Sie zunächst mit dem in diesem Artikel bereitgestellten Code, prüfen Sie, ob Sie ihn im Kontext Ihrer eigenen Projekte zum Laufen bringen können, und hinterlassen Sie Fragen und / oder Feedback, das Sie im Kommentar-Feed unten haben!
Vergessen Sie nicht, dass Sie diesen Code aus dem mit diesem Beitrag verbundenen zugehörigen GitHub-Repository auschecken können.
