Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Creative Coding

So integrieren Sie den WordPress Media Uploader in Design- und Plugin-Optionen

by
Length:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Willkommen WordPress Theme und Plugin Entwickler!  Wir alle möchten, dass unsere Theme-Benutzer ihre eigenen Bilder oder Logos hochladen können, indem sie eine von uns erstellte Theme-Options-Seite (einschließlich Plug-In-Seiten) verwenden. Wie programmiert man das?  Verwenden Sie den WordPress Media Uploader (z. B. wenn Sie ein gekennzeichnetes Bild hochladen oder ein Bild in einen Beitrag einfügen) oder fügen Sie einfach ein Dateieingabefeld hinzu und vergessen Sie alle anderen Dinge.  Laden Sie Bilder ordnungsgemäß in einen Upload-Ordner hoch?  Hängen Sie das Bild an die WordPress-Medienbibliothek an?  Und das ist ein wichtiger Punkt: Löschen Sie die Datei (wenn der Benutzer dies wünscht) richtig?  Nun, es ist an der Zeit, unsere Theme Options-Seite mithilfe der WordPress-Oberfläche zu gestalten.  Wir wollen glückliche Benutzer, wir wollen eine benutzerfreundliche Oberfläche.

Dieses Tutorial konzentriert sich auf das Hochladen von Bildern auf eine Seite mit Motivoptionen. Wenn Sie sich also nicht ganz sicher sind, wie Sie eines erstellen möchten, empfehle ich Ihnen zunächst, das erstaunliche Tutorial von Tom McFarlin zu lesen. Das vollständige Handbuch zu den WordPress-Einstellungen API-Serie.


Was machen wir in diesem Tutorial?

  • Wir werden unserem Formular eine Schaltfläche hinzufügen, um Bilder oder Logos in unser Server-Dateisystem hochzuladen, und eine weitere Schaltfläche, um dieses Bild zu löschen.
  • Wir erstellen ein Eingabefeld zur Vorschau des Bildes.
  • Wir werden den WordPress Media Uploader verwenden, um die Datei hochzuladen oder eine vorhandene auszuwählen, sodass wir uns nicht um den gesamten Prozess kümmern müssen.  Es wird auch möglich sein, das Bild in den richtigen Ordner hochzuladen und es an die WordPress Media Library anzuhängen.
  • Wir können das Bild selbst sowie den dazugehörigen WordPress Media Library-Anhang löschen.  Wir möchten keinen Serverplatz verschwenden.

Vorbereitung Erstellen einer Seite mit Designoptionen

Wir müssen einen Ordner mit dem Namen "wptuts-options" im Stammordner des Designs erstellen, der eine Datei mit dem Namen "wptuts-options.php" enthält, in der der gesamte Code definiert wird, der zum Erstellen unserer Seite "Theme-Optionen" erforderlich ist.  Wir müssen auch einen Ordner namens js erstellen, in dem die JavaScript-Dateien gespeichert werden, die wir benötigen.

Zunächst müssen wir unsere Datei wptuts-options.php aus unserer functions.php aufrufen:

In unserer Datei wptuts-options.php erstellen wir eine Funktion, in der wir die Standardwerte angeben.  In diesem Fall ist der Wert die Bild-URL auf unserem Server.  Wir werden standardmäßig eine leere Zeichenfolge zuweisen, aber wir können auch die URL eines Bildes zuweisen, das wir bereits in einem Themenordner haben.

Jetzt erstellen wir eine Funktion, die, wenn unsere Option nicht in der Datenbank vorhanden ist (wir nennen sie theme_wptuts_options), sie mit den Werten unserer vorherigen Funktion initiieren wird.

Jetzt ist es an der Zeit, unsere Theme Options-Seite zu erstellen, sie dem Admin-Panel hinzuzufügen und ein Formular zu erstellen.

Zusammenfassend: Mit dem Hook admin_menu haben wir unsere Seite im Admin Panel unter Appearance -> WPTuts Options hinzugefügt und können durch die Slug-wptuts-settinngs identifiziert werden. Danach haben wir ein Formular erstellt, das noch kein Eingabefeld hat, das auf den Funktionen setting_fields und do_settings_sections basiert. Wie ich bereits gesagt habe, ist es nicht das Ziel dieses Tutorials, zu beschreiben, wie diese Funktionen funktionieren, daher werden wir nicht erklären, wozu sie dienen. Sie können Toms Serie darüber lesen.

Beachten Sie jedoch, dass wir nicht nur den Button Submit erstellen, sondern auch einen Reset-Button erstellt haben.  Wenn Sie darauf drücken, wird der Bildwert standardmäßig festgelegt.

Abschließend erstellen wir einen Button zum Hochladen von Bildern und ein Eingabefeld, in dem nach dem Hochladen die URL angezeigt wird.

Hier gibt es nicht mehr viel zu sagen, nur dass der Wert des Logo-Feldes die URL des Escape-Images angibt.  Im Moment zeigt dies unser Bildschirm:

Und vergessen Sie nicht unsere Datenvalidierungsfunktion:

Speichern Sie den Wert des Logofeldes genauso wie es ist, wenn Sie das Formular absenden oder mit dem Standardwert belassen, wenn Sie das Formular zurücksetzen.  Es empfiehlt sich, den Wert des Eingabefelds zu überprüfen und die URLs zu überprüfen.

Wenn wir an diesem Punkt angekommen sind (ich hoffe es) und wir sind nicht wirklich müde, können wir das Formular ausprobieren.  Wir werden sehen, dass der Wert des Eingabefelds ohne Probleme gespeichert wird und dass danach eine URL als Wert angezeigt wird.

Lassen Sie uns nun mit dem fortfahren, was wirklich wichtig ist.


Schritt 1 Hinzufügen des erforderlichen JavaScript

Wenn der WordPress Media Uploader ordnungsgemäß funktionieren soll, müssen mehrere JavaScript-Bibliotheken sowie einige zusätzliche CSS importiert werden:

  • Thickbox (JS) - Verantwortlich für die Verwaltung des modalen Fensters, in das wir Dateien ziehen oder auswählen können.  Es wird von WordPress Core bereitgestellt.
  • Thickbox (CSS) - Stellt die für dieses Fenster erforderlichen Stile bereit.  Es kommt auch mit der WordPress-Installation.
  • Media Upload (JS) - Bietet alle Funktionen, die zum Hochladen, Validieren und Formatieren von Dateien erforderlich sind.  Es ist das WordPress Media Uploader-Herz.
  • Unser eigener JS - Er initialisiert die Parameter, um das Fenster richtig anzuzeigen.

Wir müssen den folgenden Code in die Datei wptuts-options.php einfügen:

Es gibt ein paar Dinge, die wir klären müssen: In der ersten Zeile registrieren wir ein Skript (über das wir noch nicht gesprochen haben), das den Prozess behandelt, der darauf abzielt, das Modellfenster zu öffnen und Bilddaten zu sammeln.  Wie wir bereits erklärt haben, erstellen wir einen Ordner namens js.  Eine Besonderheit dieses Skripts ist, dass es von einer Reihe anderer Bibliotheken wie jQuery, Media-Upload und Thickbox abhängt, die alle bei der Installation von WordPress zur Verfügung stehen.

In der zweiten Zeile verwenden wir die Funktion get_current_screen(), die uns den Slug der Seite liefert, an der wir gerade arbeiten.  Diese Funktion kann nicht immer verwendet werden. Abhängig von dem verwendeten Hook ist sie verfügbar oder nicht.  Mit dem Hook admin_enqueue_scripts funktioniert die Funktion problemlos.  get_current_screen () -> id gibt uns einen Slug der Seite, an der wir gerade arbeiten.  Für die standardmäßig im WordPress Admin Panel enthaltenen Seiten können dies "Themes", "Edit-Post", "Plugins" usw. sein.  Erinnern Sie sich appearance_page_{OUR_SLUG},  Den wir in der Funktion add_theme_page definiert haben?  Nun, unsere Theme-Options-Seite hat endlich folgenden Slug: appearance_page_wptuts-settings.  Daher laden wir Skripte nur bei Bedarf.

Die anderen beiden Zeilen fügen die Javascript-Bibliotheken jQuery, Thickbox, Media Upload und unsere JS, wptuts-upload.js hinzu.  Außerdem fügen wir das Thickbox-CSS hinzu.

Unser Skript: wptuts-upload.js

Trotz des Aussehens wird unser Skript einfacher als es den Anschein hat.  Es ist nur erforderlich, einige Thickbox-Funktionen und den Media Uploader kennenzulernen, damit es funktioniert.  Das Problem ist, dass es schwierig ist, Informationen darüber zu finden, und als gute Programmierer haben wir keine andere Wahl, als mit Code zu arbeiten.  Wie wir gerade sehen wollen, ist das wirklich einfach.  Fahren wir direkt mit unserem ersten Versionscode fort:

Erfolg!  Wenn Sie jetzt auf die Upload Logo hochladen klicken, wird der WordPress Media Uploader angezeigt.  Toll, wir sind fertig, bis bald!  Nein, das stimmt nicht, aber es dauert nicht lange, bis unsere Seite mit den Themenoptionen auf einfache Weise funktioniert.

Bei der Überprüfung des Codes können wir feststellen, dass wir der Schaltfläche, die eine Thickbox-Funktion zum Anzeigen des modalen Fensters startet, ein Klickereignis zugewiesen hat.  Diese Funktion akzeptiert drei Parameter:

  • Name des Fensters - In unserem Fall 'Logo hochladen'
  • URL - Führt eine WordPress-Bibliothek aus, die Dateien verarbeitet und validiert sowie Inhalte für das Fenster erstellt.
  • imageGroup - Wir haben die Option false gewählt, weil wir nicht mit Gruppen von Bildern arbeiten werden, sondern nur mit einer.

Unter ihnen ist die URL die interessanteste.  WordPress verwendet eine Datei namens media-upload.php, um das Fenster zu verwalten, und ermöglicht auch mehrere $_GET-Parameter.  Wir müssen bedenken, dass & Zeichen mit ihrer HTML-Entität codiert werden müssen, damit die URL problemlos funktioniert.

  • referer - Dieser Parameter ist optional.  Wir werden es später verwenden, um einen kleinen Trick auszuführen.
  • type - Dies ist der Dateityp.  Es kann Video, Audio, Image oder File sein.
  • TB_iframe - Es muss immer true ausgewählt werden, damit das Fenster in einem Iframe angezeigt wird oder nicht funktioniert.  Obwohl Sie dies vielleicht kaum glauben können, ist dies der wichtigste Parameter, und jetzt werden wir sehen, warum.
  • post_id - Wird verwendet, um anzuzeigen, dass das Bild nicht an einen Beitrag angehängt wird und frei ist wie ein kleiner Vogel.

Nun, ich möchte dich nicht anlügen.  Nur einer dieser drei Parameter ist wirklich notwendig: TB_iframe.  Wir können die anderen vergessen.  Vor einigen Versionen hat WordPress seinen Media Uploader vereinheitlicht, um beliebige Dateitypen hochzuladen, ohne dass Bilder von Videos oder Musik unterschieden werden müssen. Daher ist der type nicht erforderlich, und die Beitrags-ID ist standardmäßig auf 0 gesetzt.  Jedenfalls ist es nicht schaden, sie zu verlassen, nur für den Fall, dass wir Probleme mit der Kompatibilität haben.  Es wäre interessant, post_id anzugeben, wenn es sich um eine Meta-Box in einem Beitrag handelt.

Der folgende Teil unseres JavaScript muss die folgende Funktion enthalten:

send_to_editor ist ein Ereignis, das in der Bibliothek für WordPress JavaScript Media Uploader enthalten ist.  Es liefert Bilddaten im HTML-Format, sodass wir sie an jedem beliebigen Ort platzieren können.

Dieses Ereignis liefert einen Parameter an die Handler-Funktion, html, der den folgenden Code enthält (als Beispiel):

So ist es einfach, die Image-URL zu extrahieren, sobald sie in den Server geladen wurde, indem die Zeile $('img',html).attr('src') verwendet wird.  dann wird es in unserem Eingabefeld mit der Zeile $('#logo_url').val(image_url);.

Die Funktion tb_remove schließt das modale Fenster, das ist alles.  Jetzt können wir das Formular bereits absenden und die Bild-URL in der Datenbank speichern.  Wir könnten jetzt aufhören, aber das Ergebnis sieht nicht sehr schön oder benutzerfreundlich aus, also verbessern wir es.

Wenn wir das Bild mit dem Media Uploader hochladen, können wir die Bild-URL über die Insert into Post einfügen in unser Eingabefeld einfügen.  Dies könnte den Benutzer verwirren.  Aus diesem Grund können wir diesen Text mithilfe von Filtern in WordPress ändern.  Wir geben den folgenden Code in unsere Datei wptuts-options.php ein:

Mit dem Hook admin_init überprüfen wir, ob die Seiten, an denen wir arbeiten, vom Media Uploader verwendet werden.  Diese Seiten sind: media-upload.php und async-upload.php.  Das erste öffnet das modale Fenster und das zweite wird geladen, sobald das Bild hochgeladen wurde.  Um zu bestätigen, dass wir an einem von ihnen arbeiten, müssen wir die globale Variable $pagenow und nicht die Funktion get_current_screen() verwenden, da admin_init diese Funktion immer noch nicht zulässt.

Warum verwenden wir nun die referer-Variable?  Ok, das ist etwas knifflig und es funktioniert so:

  • Wenn Sie auf die Schaltfläche Bild hochladen klicken, lautet die Verweis-URL wie http://www.ourdomain.com/.../wp-admin/themes.php?page=wptuts_settings
  • Wenn wir dann auf eine Registerkarte wie Media Library im Media Uploader klicken, ändert sich die Referrer-URL und nimmt den nächsten Wert an: http://localhost/.../wp-admin/media-upload.php?referer=wptuts-settings&type=image 
  • Das gleiche passiert, wenn wir ein neues Bild hochladen.  Die Verweis-URL ändert sich und nimmt denselben Wert an.

Sehen Sie jetzt, warum wir den referer-Parameter in unser JavaScript aufgenommen haben.  Wir müssen wissen, von welcher Seite wir den Media Uploader starten, da wir den Einfügen- Insert into Post Text in der Schaltfläche nur auf unserer Theme-Options-Seite und nicht beispielsweise in einer Post-Seite ersetzen müssen. Deshalb habe ich den referer-Parameter eingefügt.  Mit der Funktion wp_get_referer() erhalten wir nun die Referrer-URL und müssen nur die Zeichenfolge wptuts-settings in dieser URL finden.  Mit dieser Methode ersetzen wir sie im richtigen Kontext.

Wir wenden jetzt den gettext-Filter an und ersetzen jeden Satz mit "Insert in Post" durch "I want this to be my logo!".  Wenn wir das Thickbox-Fenster erneut öffnen und eine neue Datei laden, wird der Text der Schaltfläche geändert.  Wenn Sie nicht ganz sicher sind, wie der gettext-Filter verwendet werden soll, und da es sich nicht um eines der Ziele dieses Tutorials handelt, können Sie den WordPress-Codex besuchen.

Einige Verbesserungen wurden vorgenommen, nicht wahr?


Schritt 2 Vorschau des Bildes

Der Benutzer muss immer beobachten, was auf dem Bildschirm passiert.  Es reicht nicht aus, dass der Benutzer ein Bild hochlädt und auf der Seite nachschaut, ob das Bild vorhanden ist.  Jetzt fügen wir unserer Themenoptionen-Seite ein Eingabefeld hinzu, damit der Benutzer das schöne Bild bereits sehen kann.

Wir müssen den folgenden Code in unsere Funktion wptuts_options_settings_init() schreiben:

Und wir müssen auch eine neue Funktion für die Vorschau erstellen:

Wenn wir jetzt ein neues Bild hochladen und das Formular absenden, sehen wir Folgendes:

Cool!  Nimm es ruhig, renne nicht.  Es gibt zwei Schritte, zuerst müssen wir das Bild hochladen und dann müssen wir das Formular absenden, wenn wir die Änderungen speichern möchten.  Der Benutzer könnte denken, wenn das Bild hochgeladen ist, wo zum Teufel ist mein Logo?  Muss ich das Formular absenden? Vermeiden Sie es, sich aufzuregen, indem Sie unserem JavaScript einige einfache Zeilen hinzufügen:

Wir laden das Bild hoch und können sehen, dass das Formular übermittelt wurde!  Einfach einen Satz hinzufügen: Jetzt, wenn das Bild geladen ist, lösen wir das click ereignis auf die Schaltfläche Submit aus, und das Formular wird sofort gesendet, wobei die Datenbank und die Bildvorschau gleichzeitig aktualisiert werden.  Perfekt!

Was unnötig ist, entfernen

Bis jetzt ist die Form attraktiv, verwendbar und funktioniert mehr als ok, aber es gibt etwas, was uns zu stören beginnt.  Warum brauchen wir das Eingabefeld?  Hey, wir brauchen es, um die Bild-URL zu speichern.  Sehen wir uns das anders an: Warum braucht der Benutzer ein Eingabefeld?  Für nichts.  Es reicht aus, dem Benutzer das hochgeladene Bild anzuzeigen, und es funktioniert alles ordnungsgemäß.

Lassen Sie uns unser Formular mit der Funktion wptuts_setting_logo() etwas mehr konvertieren:

Wenn Sie nichts bemerkt haben, ändern wir nur den Eingabetyp des Formulars.  Wir sprechen jetzt über ein hidden Eingabefeld und nicht über ein Texteingabefeld.  Das Formular behält die gleiche Funktionalität, ist jedoch für den Benutzer viel angenehmer:


Schritt 3 Bild löschen

Natürlich möchte der Benutzer das Bild irgendwann löschen.  Um dies zu erleichtern, erstellen wir eine Schaltfläche zum Löschen.  Das Bild sollte jedoch nicht nur gelöscht werden, wenn der Benutzer auf die Schaltfläche klickt. Es sollte auch entfernt werden, wenn ein neues Bild hochgeladen wird, oder das Formular wird zurückgesetzt.

Das wichtigste zuerst.  Wir werden die neue Schaltfläche in der Funktion wptuts_setting_logo() erstellen:

Wenn wir aufpassen, wird die neue Schaltfläche nur angezeigt, wenn bereits ein Logo geladen ist.  Außerdem handelt es sich um eine Schaltfläche zum Senden, also senden wir das Formular ab, wenn wir darauf klicken.

Wir müssen die folgende Validierungsfunktionalität hinzufügen, damit die Schaltfläche wie gewünscht fungiert wptuts_options_validate():

Also gut, was machen wir hier?  Wir haben eine neue $wptuts_options-Variable hinzugefügt, um zu überprüfen, ob der Benutzer auf die Schaltfläche Delete Logo geklickt hat.  Wenn der Benutzer dies tut, wird die Funktion delete_image ausgeführt und der Wert der Logo-URL wird als leere Zeichenfolge festgelegt. Außerdem wird das Logo gelöscht, wenn wir es abschicken, und wir laden ein anderes als das bereits vorhandene Bild hoch oder sogar, wenn wir das Formular zurücksetzen.

Vorsichtig!  Das Zurücksetzen des Formulars und das Löschen des Bildes müssen nicht identisch sein.  In unserem Fall ist der Standardwert eine leere Zeichenfolge, sodass sie übereinstimmen.

Jetzt fügen wir die Funktion delete_image() hinzu:

Die Wahrheit ist, dass dieser Schritt einer tieferen Erklärung bedarf, aber es ist wirklich einfach.  Als Erstes führen wir eine Abfrage aus, die die Meta-ID unseres Images in der Datenbank ermittelt.  Sie denken vielleicht, dass es eine Lüge ist, aber unsere Bilddaten befinden sich in der Tabelle wp_posts.  Nun, die Abfrage versucht, die Register auszuwählen, deren Guid (das Bild, die Post- oder Seiten-URL) mit unseren Bildern und post_type = 'attachment' übereinstimmen wird (es ist ein Anhang, nicht wahr?).  Wir speichern diese ID (es sollte nicht mehr als eine sein) in $results und übergeben sie als Parameter an die WordPress-Funktion wp_delete_attachment(), die das Bild selbst und die Anlage aus der Medienbibliothek löscht.  Es ist einfach, sauber und optimal.


Schritt 4 Zeigen unseres Logos in unserem Site-Header

Mal sehen, wohin uns dieses ganze Chaos geführt hat.  Wir benötigen die Vorlage header.php, in der wir ein Leerzeichen für unser liebes Logo einfügen, in das wir diesen Code an der Stelle einfügen, an der wir das Beste mögen:

Hier ist das Ergebnis:


Abschließende Anmerkungen

Die Wahrheit ist, dass es nicht mehr viel zu sagen gibt.  Kann man das auch anders machen?  Natürlich, und in der Tat finde ich ständig Beispiele, aber aus meiner Sicht ist der WordPress Media Uploader sehr nützlich und einmal bekannt, macht er das Leben wirklich einfach.  Wir speichern Code und Validierung (im Tutorial haben wir nicht viel verwendet, wir hätten mehr verwenden sollen und empfehlen, dass Sie sich darüber informieren) und verwenden das Dateisystem, das WordPress zur Verfügung stellt.  Dies sind alle Vorteile für den Benutzer, der es gewohnt ist, mit der WordPress-Benutzeroberfläche zu arbeiten, und kann sehen, wie alles ordnungsgemäß und gemäß der Standardfunktionen von WordPress funktioniert.  Es kann sogar angenommen werden, dass es sich um eine WordPress-Standardfunktionalität handelt.


Externe Ressourcen

Obwohl wir über bestimmte WordPress-Funktionen gesprochen haben, ist die Wahrheit, dass es viel Zwischenwissen gibt, das notwendig ist.  Hier haben wir eine Liste mit verwandten Ressourcen:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.