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

Erstellen eines benutzerdefinierten WordPress-Plugins für die Suche nach Kategorien

by
Difficulty:IntermediateLength:LongLanguages:

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

Da auf Ihrer Wordpress-Website immer mehr Inhalte erstellt werden, müssen Ihre Benutzer unweigerlich Ihre Website durchsuchen, um diesen speziellen hilfreichen Artikel von früher zu finden. Um die Suchergebnisse einzugrenzen, zeige ich Ihnen, wie Sie ein Plugin codieren, mit dem der Benutzer anhand der Kategorie suchen kann.

Dieses Tutorial enthält einen Screencast, der Tuts+ Premium-Mitgliedern zur Verfügung steht.

Der erste Schritt in der Entwicklung unseres Plugins besteht darin, den Funktionsumfang sowie den Umfang der verfügbaren Anpassungen festzulegen. Wir möchten, dass unser Plugin die folgenden Funktionen bietet und eine vollständige Benutzeranpassung ermöglicht:

  1. Konfigurieren Sie die Suche basierend auf der ausgewählten Kategorie neu
  2. Dropdown-Liste der Kategorien
  3. Möglichkeit, Kategorien ohne Beiträge aus der Liste auszublenden
  4. Möglichkeit, untergeordnete Kategorien von der Liste auszuschließen
  5. Opton, um unser eingebautes Styling zu deaktivieren
  6. Möglichkeit, bestimmte Kategorien von der Liste auszuschließen
  7. Möglichkeit, benutzerdefinierte Werte im Suchfeld zu verwenden
  8. Möglichkeit, benutzerdefinierte Werte für die Auswahl "In allen Kategorien" zu verwenden

Erstellen des Skeletts für das Plugin

Bevor wir etwas mit unserem Plugin tun können, müssen wir zuerst das Skelett erstellen, damit das Plugin funktioniert. Wir beginnen mit der Erstellung eines neuen Ordners im Wordpress-Verzeichnis "plugins" (/wp-content/plugins) und nennen ihn "search-by-category" (gemäß Konvention sollten alle Plugin-Ordner in Kleinbuchstaben geschrieben sein und Bindestriche verwenden von Leerzeichen, damit beim Verknüpfen mit Dateien im Ordner URLs für das menschliche Auge leicht lesbar sind). Erstellen Sie eine neue PHP-Datei im Ordner "sbc.php". Diese Datei dient als Grundlage für unsere gesamte Plugin-Struktur. Füllen Sie anschließend das Plugin mit den erforderlichen Wordpress-Informationen aus, damit sie in unserem WP-Admin-Bereich angezeigt werden.



Richten Sie die Seite Optionen ein

Nachdem Wordpress unser Plugin erkannt hat, können wir mit unserer Entwicklung beginnen. Als erstes müssen wir eine Optionsseite einrichten, damit der Benutzer unser Plugin nach seinen Wünschen konfigurieren kann. Wie dies funktioniert, ist ein dreistufiger Prozess:

Zuerst erstellen wir eine Klasse, in der alle unsere Konfigurationen ausgeführt werden können.

Zweitens führen wir eine Funktion aus, um die Konfigurationsseite zu erstellen.


Einrichten der Personalisierung

Nachdem wir unsere Konfigurationsseite geöffnet haben, können wir unsere Konfigurationsoptionen hinzufügen, damit wir sie später im Plugin anwenden können. Um unsere Konfigurationsseite anzuzeigen, müssen wir eine neue Funktion namens "config_page()" erstellen, die wir mit dem Rest unseres Admin-Abschnittscodes füllen. Zuerst schreiben wir den HTML-Code für alle unsere Abschnitte.

Sie werden feststellen, dass wir bereits PHP verwenden, um auf die Variablen zu verweisen: $search_text, $focus, $hide_empty, $exclude_child, $sbc_style und $raw_excluded_cats (in der Funktion "wp_category_checklist"). Wir werden diese Variablen im nächsten Schritt erstellen und erweitern.



Vollbild



Hinzufügen unserer Optionen zur Datenbank

Jetzt, da die Administrationsseite aktiv ist, können wir damit Optionen zur Datenbank hinzufügen. Dazu erstellen wir einfach eine Variable vor dem "if (! class_exists( 'SBC_Admin' )) {" und verwenden dann die Wordpress-Funktion "add_option('entry-title', 'value')" to Fügen Sie es in die Tabelle wp_options der Datenbank ein. Hier ist die Liste der Variablen, die wir in unserem Plugin verwenden werden:

  • $focus - Der Standardtext, den der Betrachter in der Auswahl-Dropdown-Liste sieht
  • $hide_empty - true oder false, entfernt Kategorien mit 0 Posts aus der Dropdown-Liste
  • $excluded_cats - ein durch Kommas getrenntes Array der ausgeschlossenen Kategorien
  • $raw_excluded_cats - Array der ausgeschlossenen Kategorien
  • $search_text - Der Standardtext im Suchfeld des Formulars
  • $exclude_child - true oder false, entfernt untergeordnete Kategorien aus der Dropdown-Liste
  • $sbc_style - true oder false, verwenden Sie das benutzerdefinierte SBC-Stylesheet

Nachdem wir unsere Standardeinstellungen festgelegt und zur Datenbank hinzugefügt haben, können wir die Funktion "get_option('entry-title')" von Wordpress in unserer Funktion config_page verwenden, damit unsere Werte in den Formularen wiedergegeben werden.


Nachdem unsere Optionsseite die Daten aus der Datenbank verwendet, richten wir den Aktualisierungsprozess ein. Zunächst starten wir eine neue if-Anweisung, die überprüft, ob unsere Senden-Schaltfläche aktiviert ist. Als Nächstes vergleichen wir unser wpnonce, um zu überprüfen, ob der Benutzer die Seite besucht hat, bevor wir versuchen, die Optionen zu aktualisieren. Dann führen wir eine weitere if-Anweisung aus, um zu überprüfen, ob der Strom die Einstellungen ändern darf, indem wir die WP-Funktion "current_user_can('manage_options')" ausführen. Wenn dies nicht möglich ist, beenden wir das Skript.

Jetzt aktualisieren wir die zuvor definierten Variablen mit dem Eingabewert aus dem Formular. Da wir Kontrollkästchen für die Liste der ausgeschlossenen Kategorien verwenden, ist es am besten, eine andere if-Anweisung zu deklarieren und zu überprüfen, ob "post_category" (die von der WP-Funktion für die Liste angegebene ID) festgelegt ist. Wenn es vorhanden ist, nehmen wir seine Rohform und setzen es wieder in die Variable "$raw_excluded_cats" von früher ein, damit die Kontrollkästchen aktiviert bleiben. Wir werden dieselben Rückgabewerte auch verwenden, um ein "hübsches" durch Kommas getrenntes Array für die spätere Verwendung zu erstellen, indem wir am Anfang des Arrays einen zusätzlichen Wert hinzufügen (dies ist eine Korrektur für einen Fehler später in einer anderen Funktion) und dann implodiere das Array.

Aufgrund der Natur von Kontrollkästchen haben sie nur dann einen Rückgabewert, wenn sie aktiviert sind. Daher müssen wir einen Fang schreiben, wenn sie nicht aktiviert sind. Dazu verwenden wir eine einfache if-Anweisung, die prüft, ob unsere Variablen leer sind (da das Formular keinen Rückgabewert enthält, mit dem es ausgefüllt werden kann). Wenn es leer ist, setzen wir den Wert auf "0" (falsch).

Jetzt besteht unser letzter Schritt darin, die Datenbank mit unseren neuen Werten mithilfe der Wordpress-Funktion "update_option('entry-title', 'new-value')" zu aktualisieren. Wir werden auch die Werte, die wir in die Datenbank einfügen, mit der Funktion mysql_real_escape_string() umschließen, um eine SQL-Injection zu verhindern.


Unser Code Bisher:


Formular erstellen

Nachdem wir unser Back-End eingerichtet und bereit für die Bereitstellung haben, ist es an der Zeit, das Front-End-Formular zu schreiben, das alle Besucher sehen und verwenden können. Damit unser Benutzer unser Formular an einer beliebigen Stelle auf seiner Website platzieren kann, werden wir unser Formular in eine neue Funktion mit dem Titel "sbc()" einschließen, die direkt außerhalb unserer Klassendeklaration platziert wird. Die ersten Code-Bytes, die wir hinzufügen müssen, deklarieren eine globale $wp_query und $post, damit wir später auf diese Funktionen zugreifen können, wenn wir dies wünschen, aber für unsere Zwecke werden wir sie nicht benötigen. Der nächste Schritt besteht darin, unsere Variablenwerte erneut aus der Datenbank abzurufen.

Sobald wir das getan haben, können wir eine weitere Variable namens "$list" erstellen, deren Wert die WP-Funktion wp_dropdown_categories($settings) ist (lesen Sie hier mehr zu dieser Funktion). In dieser Variablen "$settings" werden die meisten unserer Anpassungen angewendet.

Nachdem das Dropdown-Menü des Formulars konfiguriert wurde, können wir eine weitere Variable erstellen, "$form", die unser Formular-HTML über einen Hypertext-Präprozessor enthält. dann geben wir unsere neue Variable $form wieder.


Hinzufügen im benutzerdefinierten Styling

Zuvor hatten wir dem Benutzer die Möglichkeit gegeben, unser benutzerdefiniertes Styling für das Formular zu verwenden. Wenn diese Option im Einstellungsmenü aktiviert bleibt, müssen wir unser Stylesheet zur Kopfzeile hinzufügen. Der einfachste Weg, dies zu tun, besteht darin, eine neue if-Anweisung zu erstellen, die prüft, ob unsere Variable "$sbc_style" wahr ist (in unserem Code: 1). Innerhalb dieser Prüfung fügen wir eine neue Funktion "style_insert()" hinzu, die die URL zu unserem Stylesheet wiedergibt. Auch im if (aber außerhalb der Funktion) schreiben wir eine neue Aktion für "wp_head", um sie in unsere Funktion "style_insert()" einzufügen.

Erstellen Sie für unser Styling eine neue Datei mit dem Namen sbc-style.css und füllen Sie sie mit:


In Safari werden Sie feststellen, dass das Standard-Abwärtsdreieck in unserer Dropdown-Box fehlt. Dies liegt daran, dass wir das -khtml-appearance: none in der Dropdown-Liste, um zu verhindern, dass Safari das Thema "Schnee" erzwingt. Eine Möglichkeit, dies zu beheben, besteht darin, ein HTML-Zeichen zu verwenden, um das Dreieck zu simulieren, und es gibt zufällig ein sehr ähnliches Zeichen namens "∇ Nabla". Wir werden eine Kombination aus Leerzeichen, nicht unterbrechenden Leerzeichen und dieser Nabla in den Dropdown-Einstellungen verwenden, um dieses Problem zu beheben.



Rückgabe der Suchergebnisse

Sobald wir unser Formular erstellt haben, können wir endlich die Suchergebnisse abrufen, die wir unseren Besuchern geben möchten. Zu Beginn erstellen wir eine neue Funktion mit dem Namen return_only_selected_category(), in der wir eine neue if-Anweisung erstellen, die überprüft, ob unsere Schaltfläche zum Senden der Suche aktiviert ist. Darin müssen wir eine neue global $wp_query erstellen. Als nächstes nehmen wir die ausgewählte Kategorie zurück und platzieren sie in einer Variablen namens $desired_cat. Falls der Benutzer die Option für alle Kategorien ausgewählt hat, müssen wir den Wert "*" prüfen und auf "" zurücksetzen.

Jetzt müssen wir eine weitere Variable erstellen, $excluded, deren Wert die WP-Funktion get_categories() ist. Wir werden dieser Funktion 2 Argumente hinzufügen. Erstens ist "hide_empty=false", damit alle Kategorien in die Liste aufgenommen werden, und zweitens ist "exclude={$desired_cat}", damit alle Kategorien, aus denen der Benutzer Beiträge anzeigen möchte, aus der Liste entfernt werden.

Sobald diese Variable festgelegt ist, können wir sie endlich so gestalten, dass nur Beiträge aus der ausgewählten Kategorie in den Ergebnissen angezeigt werden. Für diesen Effekt werden wir die Abfrage-Vars so ändern, dass Wordpress Beiträge aus jeder Kategorie entfernt, die wir auflisten (und es kommt einfach so vor, dass wir eine Variable voller Kategorien ausschließen müssen).

Durch Hinzufügen eines Bindestrichs vor der Liste der Kategorien weisen wir Wordpress an, diese aus der Abfrage zu entfernen. Eine sehr effektive Methode für uns. Jetzt müssen Sie nur noch einen neuen WP-Filter für "pre_get_posts" hinzufügen, der in unserer neuen Funktion hinzugefügt wird.


So fügen Sie unser Formular ein


Unser fertiger Code

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.