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

Benutzer erlauben, Bilder an Ihre WordPress-Website zu senden

by
Length:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

In dieser Lektion lernen Sie, wie Sie ein Plugin erstellen, mit dem Benutzer Bilder senden und in die WordPress-Medienbibliothek hochladen können.  Außerdem erfahren Sie, wie Sie Bilder aus der Medienbibliothek von WordPress ordnungsgemäß löschen und eine grundlegende Überprüfung der heruntergeladenen Bilder durchführen.

Zuvor ...

Diese Lektion wurde auf Wunsch einiger Benutzer erstellt, die eine interessante Lektion zu den Plugins quotes gefunden haben, aber besonders daran interessiert waren, wie man mit derselben Methode Bilder von der Schnittstelle lädt.  Also, hier ist die Wiederholung dieser Lektion, die genau das tut.  Weitere Informationen zum Konfigurieren von Plug-Ins, Funktionscodes und Nonces finden Sie im vorherigen Lernprogramm.

Das Plugin wird:

  • das Bild-Upload-Formular mit einem kurzen Code anzeigen 
  • nur Bilder eines bestimmten Typs und einer maximalen Größe akzeptieren 
  • einen benutzerdefinierten Nachrichtentyp für benutzerdefinierte Bilder hinzufügen 
  • Bilder zur WordPress-Bibliothek mit dem entsprechenden angehängten Etikett hinzufügen 
  • unveröffentlichte Bilder anzeigen
  • Benutzern ermöglichen, ihre unveröffentlichten Bilder zu löschen

Wir verwenden das integrierte Textfeld für Bilder in WordPress (auch bekannt als empfohlenes Bild), um das Bild für jede Nachricht zu halten.  Es erleichtert auch die Anzeige und die Arbeit mit unserem Bild, da wir post_thumbnail Funktionen verwenden können.

Das streben wir an:

Der gesamte Code ist am Anfang dieses Handbuchs an der Quelle des Plugins verfügbar.


Schritt 1: Einstellung des Plug-ins

Erstellen Sie eine Plugin-Datei mit dem Namen submit_user_images.php im Katalog wp-content / plugins / submit-user-images.

Siehe die Plugin-Quelle für die Header-Informationen des Plugins.


Schritt 2 Plugin-Initialisierungsfunktion

Wir werden einen personalisierten Nachrichtentyp mit einem Namen user_images erstellen, um unsere Benutzerabbilder und eine benutzerdefinierte Taxonomie mit dem Namen user_image_category zu speichern.  Das ermöglicht eine sauberere Verwaltung von Bildern, anstatt sie nur regulären Nachrichten und Kategorien zuzuordnen.

Die Init-Haken und FunktionInitiative 

Wir verwenden den folgenden Initialisierungscode, um unseren benutzerdefinierten Nachrichtentyp und die benutzerdefinierte Taxonomie zu erstellen:

Was macht dieser Code:

  • verwendet den WordPress-Initiierungs-Hook, um die Plug-In-Initialisierungsfunktion aufzurufen
  • registriert einen benutzerdefinierten Nachrichtentyp mit dem Namen user_images
  • registriert eine benutzerdefinierte Taxonomie mit dem Namen user_image_category und weist sie dem Typ der Nachricht user_images zu
  • fügt der Taxonomie user_image_category standardmäßig einige Kategorien hinzu, sofern sie nicht bereits existieren

Jetzt haben wir das Menü User Images in unserem Administrator-Kontrollfeld und wie man Benutzerbilder und deren Kategorien verwaltet.


Schritt 3 Einstellung einiger Standardwerte

Wir müssen einige grundlegende Tests durchführen, also definieren wir zwei Konstanten für die spätere Verwendung:


Schritt 4 Bestimmen Sie den Funktionscode

Wir werden einen kurzen Code definieren, mit dem wir die Form des Sendens von Benutzerbildern in einer Nachricht oder auf einer Seite anzeigen (und verarbeiten) können:


Sicherheit

Da unser Plugin Daten vom Benutzer akzeptiert, implementieren wir die folgenden Sicherheitsmechanismen:

  • nur registrierte Benutzer haben Zugriff auf das Bildsendeformular
  • wir verwenden nonces, um zu überprüfen, ob die Formulare von unserem Plugin generiert wurden
  • Bilder werden mit wp_insert_post übertragen, wodurch die Daten deaktiviert werden, bevor sie in der Datenbank gespeichert werden
  • Benutzer können nur ihre eigenen Bilder anzeigen, und Nonces erlauben ihnen nicht, Nachrichten von anderen Benutzern zu löschen

Schritt 5 Die Hauptfunktion

Diese Funktion wird in unserem kurzen Code aufgerufen.  Es zeigt und verarbeitet das Formular, um das Bild zu senden und das Bild drucken/löschen zu formen.  Wir werden sie in kleine Stücke nehmen, und in Schritt 6 wir die Hilfsfunktionen berücksichtigen.

  • überprüfen Sie, ob der Benutzer angemeldet ist
  • nehmen Sie die Variable WordPress $ current_user, die wir für unsere Benutzer-ID benötigen
  • wenn das Bild Formular eingereicht wurde, wird sui_upload_image_form_submitted Feld, das durch unsere Funktion wp_nonce_field erstellt wurde.  Dann können wir die nonce überprüfen und die angezeigte Bildverarbeitung beginnen 
  • den Test durchzuführen, indem die Eingabedatei Passing (wo die Daten gespeichert sind, Bilder heruntergeladen werden), und gibt in der Scanfunktion der Kopfdaten, sui_parse_file_errors und Anzeige jeden Fehler zurückgegeben
  • Erstellen Sie ein Array, in dem der Status der Nachricht verschoben werden soll (der Administrator jetzt zur Veröffentlichung genehmigt wird), stellen Sie die Art user_images Beiträge (unsere Art benutzerdefinierte Nachricht), und der Autor mit dem Bild des aktuellen Benutzers Anmelde eingestellt
  • Wenn eine Bildnachricht erfolgreich eingeführt wurde, speichern Sie das Bild in der Wordpress-Mediathek (sui_process_image) und schließlich die Kategorie für eine MMS-Nachricht gesetzt und eine Erfolgsmeldung angezeigt
  • wenn eine Form zum Löschen von Bildern gesendet wurde, wird ein Feld sui_form_delete_submitted angezeigt, das von unserer Funktion wp_nonce_field erstellt wurde.  Dann können wir nonce testen und zur Verarbeitung eines Arrays von Bildern gehen, die auf Löschung getestet wurden
  • wir überprüfen, ob einige Bilder tatsächlich auf Löschung geprüft wurden, indem wir $ _POST ['sui_image_delete_id'] testen.  Wenn es der Fall ist, übergeben wir sie an die Funktion sui_delete_user_images (siehe Schritt 6)
  • Wenn die Bilder gelöscht wurden, wird die Meldung über den erfolgreichen Abschluss
  • wir zeigen die Bild-Upload-Form an
  • Schließlich geben wir die Bildliste / das Löschformular aus, indem wir die Benutzer-ID der Funktion sui_get_user_images_table übergeben (siehe Schritt 6).

Schritt 6 Hilfsfunktionen

Hier sind wir auf die Funktionen suchen, die die Form erzeugen, fügen Sie das Bild in der Medienbibliothek und eine Funktion, die die ausgewählten Bilder gelöscht.

  • die Funktion benötigt 2 optionale Argumente, um die Formularfelder erneut zu füllen.  Das ist praktisch für den Benutzer.
  • das Nonce-Feld wird angezeigt, das wir überprüfen, wenn die Form gesendet wird;
  • zeigen Sie ein Dropdown-Menü für Bildkategorien an und rufen Sie sui_get_image_categories_dropdown auf (siehe nächste Funktion)
  • die Funktion benötigt 2 Argumente, einschließlich des ID-Elements der aktuell ausgewählten Kategorie
  • wir verwenden die WordPress-Funktion wp_dropdown_categories, um eine Dropdown-Liste zu erstellen, die die Kategorien von benutzerdefinierten Bildern aus der Taxonomie user_image_category (unserer benutzerdefinierten Taxonomie) auflistet
  • empfängt die Benutzer-ID, weil wir eine Liste der benutzerdefinierten Bilder für den aktuellen Benutzer erhalten müssen
  •  erstellt $ args, um unseren Benutzer, den Typ der Nachricht user_images und die ausstehenden Benutzerimages anzugeben (noch nicht vom Administrator veröffentlicht)
  • führt eine Benutzeranforderung unter Verwendung WP_Query 
  • false zurückgeben, wenn unsere Anfrage keine Bilder des Benutzers zurückgibt 
  • führen Sie die Form aus und erzeugen Sienonce für die Form 
  • blättern Sie die Bilder durch, um sicherzustellen, dass wir eine Bildkategorie der Nachricht erfassen 
  • erstellen Sie ein Kontrollkästchen nonce, um das Bild zu löschen, weisen Sie nonce einen eindeutigen Namen zu und kombinieren Sie die Bild-ID des Benutzerbildes 
  • Ausgabe einer Zeile der Tabelle, die Informationen über die Bildnachricht enthält, sowie das Löschkennzeichen

Warum fügt man nonce für jedes Bild hinzu?

Formen können im Browser manipuliert werden, um unerwartete Daten zu senden.  In unserem Fall wird jedem Flag delete der Wert der Nachricht zugewiesen.  Was aber, wenn der böswillige Benutzer diesen Wert geändert hat und unsere Löschfunktion gezwungen hat, die Nachricht zu löschen, die nicht wirklich angegeben wurde?

Eine Möglichkeit, es zu vermeiden, besteht darin, für jede Mail-Datenzeichenfolge Nicht-Zeichen zu verwenden, um die Uneinheitlichkeit des nonce-Namens sicherzustellen, während der Spaltenwert entfernt werden muss.  Dann überprüfen wir die nonce-Nachricht, wenn wir das Formular absenden, um sicherzustellen, dass es der wahre Rückgabewert ist.

  • die Funktion benötigt ein Array von ID-Nachrichtenbildern zum Löschen 
  • jede Image-Nachrichten-ID wird geprüft, um festzustellen, ob für sie nonce generiert wurde 
  • wenn nonce aktiviert ist, löschen wir den Bildanhang, der in der Medienbibliothek existiert, indem wir die Nachrichtenbild-ID an die Funktion WordPress wp_delete_attachment übergeben 
  • wir löschen die Bildnachricht auch mit der WordPress-Funktion wp_trash_post

Aber wird der Thumbnail-Anhang entfernt, wenn die Nachricht unterbrochen wird?

Nein, und das liegt daran, dass WordPress Anlagen als reguläre Datensätze in der Nachrichten-Datenbanktabelle speichert.  Überzeugen Sie sich selbst: Alle Anhänge werden in der Nachrichtentabelle mit post_type-Anhängen gespeichert.  Durch das einfache Löschen eines Benutzertyps user_images wird der zugehörige Anhang nicht in einer Miniaturansicht entfernt.  Es verbleibt in der Medienbibliothek für zukünftige Verwendung, es sei denn, wir löschen es ausdrücklich mit wp_delete_attachment.  Für unsere Zwecke dachte ich, es wäre besser, den Anhang zu löschen, wenn die Benutzernachricht gelöscht wurde.


Schritt 7 Bildverarbeitungsfunktionen

Erinnern Sie sich daran, wie die Ausgabe der HTML-Datei aussieht, wenn Sie ein Bild in Ihr Skript einfügen:

Wir übergeben dieses Array an die Funktion sui_process_image zusammen mit der Kennung des gespeicherten Benutzerbilddatensatzes und der Kopfzeile des gereinigten Bildes.

  • wir müssen WordPress-Administrator-Skripte aktivieren, die das Hochladen von Bildern nach Bild verarbeiten
  • wir rufen die Funktion media_handle_upload (die Teil media.php ist)  auf und übergeben ihr das heruntergeladene Dateiarray und die Nachrichten-ID 
  • jetzt haben wir die ID-Anlagen, die wir helfen update_post_meta verwenden können, eine Anlage zu der Nachricht in Form von Thumbnails zuzuweisen.  Hinweis: "_thumbnail_id" bezieht sich auf das Meta-Feld der internen Miniaturansicht (bearbeitetes Bild). Interne Wordpress-Felder beginnen mit einem Unterstrich.
  • wir verwenden dann die Anhangs-ID, um den Anhangskopf mit der Funktion wp_update_post zu aktualisieren.

Da Anhänge nur normale Nachrichten sind, aktualisieren wir das Feld post_excerpt für einen Anhang, indem wir das Header-Feld des Anhangs aktualisieren, wie im Bearbeitungsbildschirm der Medienbibliothek angezeigt.

Bestätigungsfunktion

Wir überprüfen auch das Array von Dateien und die Benutzersignatur des Bildes mit der Funktion sui_parse_file_errors.

  • überprüfen Sie das Datei-Array-Fehlerelement auf den HTML-Ladefehler. Wenn es gefunden wird, wird ein Array von Ergebnissen mit einem Fehler zurückgegeben
  • führen Sie einen regulären Ausdruck im Image-Header aus, um alles außer alphanumerischen Daten und Leerzeichen zu löschen und Leerzeichen zur besseren Lesbarkeit zu ersetzen 
  • wenn wir nach der Bereinigung eine leere Kopfzeile haben, geben wir einen Fehler zurück 
  • überprüfen Sie den internen Image-Typ (vertrauen Sie der Dateierweiterung nicht) mit der PHP-Funktion getimagesize mit der Konstante TYPE_WHITELIST
  • überprüfen Sie die Größe des Bildes trotz der Konstante MAX_UPLOAD_SIZE

Schritt 8 Einige Stile

Verwerfen Sie einfach diese Stilinformationen in der Datei style.css im Themenordner:


Schritt 9 Probieren Sie es aus

Aktivieren Sie das Plugin, geben Sie den Funktionscode auf der Seite ein, gehen Sie zu Ihrer Site und überprüfen Sie es.  Wenn Sie ein Bild hochladen, wird im Menü Benutzerbilder eine neue Nachricht angezeigt.  Es wird veröffentlicht.  Sie sehen außerdem ein neues Bild in Ihrer Medienbibliothek, das an Ihre neue Nachricht angehängt ist, mit dem Titel wie angegeben.

Der vollständige Quellcode für das Plugin und der Link zur Demo-Seite sind oben in dieser Lektion aufgelistet.

Der Quellordner enthält auch eine Wordpress-Seitenvorlage mit einem anpassbaren Zyklus, der veröffentlichte Bilder für alle Benutzer anzeigt.


Die letzten Gedanken

Sie sollten beim Hochladen von Bildern eine strengere Prüfung vornehmen.  Denken Sie daran, dass Sie Daten von Nutzern erfassen, die versehentlich oder inadäquat schädliche Dateien herunterladen.  Überprüfen Sie die Art und Größe der Datei ist ein guter Anfang.

Wir haben auch den Anwendungsheader erstellt, indem wir das Anschlussfeld post_excerpt aktualisiert haben. Sie können die Anhangsbeschreibung auch mit dem Anhangfeld post_content festlegen.

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.