So erstellen Sie ein einfaches FAQ-Plugin für WordPress

Wir haben schon viel gesehen Tipps und Tools zum Bloggen. Heute lernen wir, wie Sie ein gutes Tool für Ihr Blog erstellen - ein FAQ-Seiten-Plugin. Das Wichtigste ist jedoch nicht nur das Plugin selbst, sondern auch, was Sie mit diesem Prinzip tun können. Sie erfahren, wie Sie beliebige Datentypen in Ihrer WP-Site speichern und in externe Bibliotheken (z. B. die jQuery-Benutzeroberfläche) integrieren, um benutzerdefinierte Komponenten für Ihre Site zu erstellen. Lass uns anfangen!

Die Idee, Demo & Download

Unser Ziel ist es, ein Plugin zu erstellen, das für viele Dinge verwendet werden kann, aber für FAQ-Seiten ziemlich gut passt.

Abgesehen davon wird unsere wichtigste Leistung die Verständnis von WordPress benutzerdefinierte Posttypen, Kurzcodes, Interaktionen mit externem JS / jQuery-Plugin. Mit dieser Idee könnten Sie eine Menge Dinge erstellen, die auf anderen verrückten Plugins basieren, die Sie dort finden können. Dies ist nur der Ausgangspunkt für Sie, lieber Padawan.

So Hier finden Sie die jQuery API-Demo für die Komponente, die wir verwenden werden - aber das wirklich coole Zeug ist der Code, der zum Generieren dieser Komponente (PHP) verwendet wird.

Oh, und natürlich findest du das Plugin-Dateien zum Download hier Sie können also einfach in Ihrer WP-Site installieren.

Aufwärmen - Plugin-Datei und benutzerdefinierter Beitragstyp

Zunächst müssen wir einen benutzerdefinierten Beitragstyp erstellen, um unsere Daten zu speichern.

Benutzerdefinierte Post-Typen sind ein großer Teil der Magie von WP. Sie ermöglichen das Erstellen eines neuen Datentyps (ähnlich wie Posts, Seiten, Anhänge usw.), damit er mit den Funktionen von WP aufgerufen und bearbeitet werden kann. Dies mag für Anfänger einfach erscheinen, aber nur die alten PHP-Programmierer (ist das noch eine Sache?) Wissen, wie schwierig es war, Daten in Ihrer Datenbank zu verbinden und zu speichern. Geschweige denn, neue Datentypen dynamisch zu erstellen, ist subtil, ermöglicht aber eine große Flexibilität in unserem Code.

Damit wir das haben, brauchen wir ein Plugin, aber wahrscheinlich kennen Sie dieses Konzept bereits. Plugins sind wie Legoblöcke für WordPress. Sie fügen die aktuelle Funktionalität hinzu oder wandeln sie um, indem sie Code verwenden, der einfach (duh!) Gesteckt oder auch entfernt werden kann, wenn Sie möchten.

Um ein Plugin so zu erstellen, dass WP es erkennt, benötigen Sie 2-Dinge:

1. Erstellen Sie eine Datei in Ihrem WP-Inhalt / Plugins /
2. Fügen Sie am Anfang dieser Datei Metadaten hinzu, damit WP verstehen kann, worum es geht

Denken Sie daran, dass der Dateiname eindeutig sein muss, sodass bei der Installation eines Plugins (auch von Ihnen selbst) keine Konflikte mit den aktuellen Plugins auftreten. In unserem Fall für eine bessere Organisation fügen wir einen neuen Ordner mit dem Namen faq-whsr und darin eine Datei namens faq-whsr.php hinzu.

Fügen Sie nun für die Metada etwas Ähnliches am Anfang Ihrer Plugins-Datei hinzu (direkt nach <? Php):

Was bedeutet:

• Plugin-Name: Der nette Name, der in der Schnittstelle von wp-admin> plugins angezeigt wird
• Plugin-URI: Wenn Sie einen Link zu der Seite Ihres Plugins hinzufügen möchten (Dokumente, Beispiele, Verkaufsseite)
• Beschreibung: Dies ist der kleine Absatz, der in der Benutzeroberfläche von wp-admin> plugins angezeigt wird. Halten Sie es einfach, damit sich die Benutzer daran erinnern können, wozu es dient
• Author / Author URI: Die Person / Firma, die das Plugin erstellt hat, und einen Link für Credits
• Lizenz: Damit Benutzer wissen, was sie mit Ihrem Plugin machen können / nicht können

Ok, jetzt haben wir unser Plugin erstellt und einige relevante Metadaten hinzugefügt. Sobald Sie Ihre Plugin-Datei gespeichert haben, sollten Sie sie in Ihrer wp-admin-Oberfläche sehen können

Lassen Sie es uns aktivieren und sehen, was passiert.

Warte, nichts? Nun, das ist eine gute Sache, wenn jetzt irgendetwas nicht stimmt, wird ein Fehler angezeigt. Lassen Sie uns jetzt zu unserer benutzerdefinierten Beitragstyperstellung übergehen.

In unserem Fall handelt es sich bei dem CPT um FAQ-Artikel. Sie können jedoch Bücher, Videos, Testimonials usw. erstellen. Wichtig ist hierbei zu beachten: Funktionsnamen sollten eindeutig sein. Wiederholen Sie es jetzt mit mir: Funktionsnamen sollten eindeutig sein, Funktionsnamen sollten eindeutig sein. Ich habs? Gut, das erspart Ihnen eine Menge Ärger, bis wir OOP verwenden können (vielleicht im nächsten Tutorial).

Die Zauberei ist mit diesem Code erledigt:

Und das bedeuten die relevanten Teile:

• $ labels - ist ein Array mit den Labels und dem Text für verschiedene Bereiche Ihres WP-Admin-Bereichs. WP weiß also, wie wir unsere Artikel richtig aufrufen können
• unterstützt - hier erfahren Sie, was Sie auf dem neuen Bildschirm unter wp-admin> FAQ> sehen können. In unserem Fall haben wir den Titel, den Editor (das Hauptinhaltsfeld), den Autor, die Überarbeitungen und benutzerdefinierte Felder (falls Sie sie möchten).
• Taxonomien - hier teilen Sie der WP mit, welche Taxonomien zulässig sind (Kategorien, Tags oder benutzerdefinierte Taxonomien)
• register_post_type ('faq_whsr', $ args) - das sagt WP "Hey, erstellen Sie einen neuen benutzerdefinierten Beitragstyp mit der ID faq_whsr mit den Argumenten von $ args.".

Speichern Sie es und halten Sie den Atem an. Sie sollten jetzt einen neuen Abschnitt in Ihrem wp-admin-Menü sehen

Warten Sie, das ist es? Ja. Mit diesem Snippet wird die gesamte CPT-Funktionalität erstellt. Wenn Sie das nicht cool finden, warten Sie, bis es im nächsten Abschnitt kühler wird.

Bevor wir den wp-admin verlassen, fügen Sie einige Dummy-Daten hinzu (einige FAQs mit mindestens 2-Kategorien).

Front-End - WP x jQuery-Interaktion

Jetzt ist es endlich an der Zeit, etwas zu sehen und wir werden es nutzen jQuery UI Accordion-Element dafür.

Die jQuery-Benutzeroberfläche hat die gleichen Vorteile wie jQuery selbst:

• Viele Entwickler arbeiten daran
• Browserübergreifender und mobil bereiter Code
• Gut dokumentiert
• Spielt gut mit WP (WP selbst verwendet sie)

Die Frage ist jetzt: Wie nennen wir es?

Dafür gibt es 2-Ansätze:

1. Die fehlerhaften reinen <script> / <style> -Tags in Ihrem WP-Kopf
2. Der schöne wp_enqueue

Wir werden heute nicht zu viel Zeit verlieren, wenn wir falsch vorgehen, aber der Gute sagt WP im Grunde "Hey Kumpel, wir werden irgendwann in unserem Code eine jQuery-Benutzeroberfläche benötigen. Bitte fügen Sie sie der Seite hinzu.". Auf diese Weise kann WP prüfen, ob andere Personen bereits eine oder eine andere Version davon enthalten, und vermeidet Ärger mit doppelten Bibliotheken. Ok, wie kann man diesen netten Chat in Code übersetzen?

Verwendung der Enqueue-Funktion:

Der Kurzcode

Und jetzt sind wir wieder beim WP-Admin. Wir haben die FAQ-Elemente und die Bibliothek, um die Elemente so zu gestalten, wie wir möchten. Was fehlt noch? Nun, wir müssen die Artikel anrufen!

Wir haben viele Möglichkeiten dafür, aber am einfachsten ist es, einen Shortcode zu erstellen. Shortcode ist etwas, das Sie Ihrem Inhaltsfeld hinzufügen (für Seiten, Beiträge, CPTs…), und WP sucht tatsächlich nach einer Funktion, die darauf ausgeführt werden kann. Es gibt 2-Typen von Kurzwahlen:

1. [selbst einschließend] - Wie die Tags <hr /> oder <br /> ruft diese Art von Shortcode irgendwann eine Funktion auf - dies ist unser Typ
2. [wrapped] Content [/ wrapped] - Dies ist wie die Tags <p> </ p> oder <div> </ div> und kann tatsächlich den Inhalt umwandeln oder den Inhalt als Argumente verwenden.

Mal sehen, wie es dann funktioniert. Erstellen Sie eine neue Seite in Ihrem WP-Admin und fügen Sie diesen Code dort hinzu:

[faq-whsr]

Speichern und besuchen Sie diese Seite und sehen Sie, was passiert…

Nur ein Scherz, es wird nichts richtig? Nun, das liegt daran, dass wir noch keine Funktion dafür erstellt haben.

Fügen Sie dies in Ihre Plugin-Datei ein:

Jetzt aktualisieren Sie Ihre Seite und ich verspreche Ihnen, dass etwas wirklich Cooles passieren wird.

Cool was? Jetzt können Sie sehen, dass es läuft und der Himmel die Grenze für Sie ist. Dieser Code teilt WP nur mit, dass es einen Kurzcode gibt, der als [faq-whsr] bezeichnet wird. Wenn WP es findet, sollte WP an diesem Punkt der Seite eine Funktion ausführen.

In unserem Fall müssen wir diese Struktur für das zu erstellende jQuery-Benutzeroberflächenpanel erstellen:

Und dafür schaffen wir eine WP-Abfrage, laden Sie unsere FAQs und deren Inhalte. Ersetzen Sie die Kurzcode-Funktion durch diese Funktion:

Ok, jetzt werden deine FAQ Items aufgerufen. Was wir getan haben, ist, die wp_query aufzurufen, um unseren benutzerdefinierten Beitragstyp aufzurufen, und ihn dann an die Shortcode-Rückgabe zu übergeben, damit WP alle Einträge entsprechend der gewünschten Struktur anzeigt.

Es ist gut, aber es fehlt etwas, oder? Was ist mit einigen Optionen dort? Nun, wir können Optionen für einen Shortcode hinzufügen. Sehen wir uns an, wie Sie einige WP_Query-Argumente in unserem Shortcode erstellen:

Auf diese Weise können Sie Elemente mit den folgenden Argumenten aufrufen (Sie können beliebig viele kombinieren):

• cat - category ID (mehrfach als Array hinzugefügt) [faq-whsr cat = 1]
• category_name - Kategoriename [faq-whsr category_name = "Essen"]
• order - ASC oder DESC (DESC ist Standard) [faq-whsr order = ”ASC”]
• orderby - Ändern Sie die Kriterien für die Bestellung von Artikeln [faq-whsr orderby = "title"]
• posts_per_page - Anzahl der geladenen Elemente ändern [faq-whsr posts_per_page = 5]

Aber wie gesagt, der Himmel ist die Grenze für dich, mein Freund. Hier sind ein paar Optionen für WP_Query, die Sie implementieren und verwenden können:

• Autor
• Kategorie (Hinzufügen von Ausschlussoptionen mit not_in)
• Suchen (cool, wenn Sie Benutzern die Möglichkeit geben möchten, sie zu durchsuchen)
• Benutzerdefiniertes Feld (da FAQ-Elemente vorhanden sind, können Sie Elemente mit bestimmten benutzerdefinierten Feldern und Werten laden)

Jetzt sind Sie dran

Dies ist nur ein Ausgangspunkt für Sie, wie Sie sehen können. Wir alle können eine Menge anderer cooler Dinge lernen, um dieses einfache Plugin zu verbessern. Hier sind einige Vorschläge, wie Sie tiefer graben können:

• Responsive Design
• Widget-Erstellung
• Plugins aktivieren / deaktivieren Haken
• Internationalisierung
• OOP
• Einreihen nur bei Bedarf (für bestimmte Seiten)

Vergiss nicht, deine Gedanken in den Kommentaren zu hinterlassen! Und hier ist unsere Herausforderung für Sie: Ist es möglich, dass Sie eine "Standardelement" -Option für den Shortcode anwenden (wenn also die Seite geladen wird, wird ein anderes Element geöffnet, das nicht das erste ist)? Wie würdest du es machen?