Über Rochester Oliveira
Ich bin ein Webdesigner und Unternehmer aus Itajubá (MG), Brasilien. Ich liebe es, über obskure Themen zu schreiben und coole Sachen zu machen.
Wir haben schon viel gesehen Blogging Tipps und Werkzeuge. Nun, heute lernen wir, wie Sie ein gutes Tool für Ihr Blog erstellen - ein Plugin für FAQ-Seiten. Das Wichtigste ist jedoch nicht nur das Plugin selbst, sondern auch, was Sie mit diesem Prinzip tun können. Sie erfahren, wie Sie alle Arten von Daten auf Ihrer WP-Site speichern und in externe Bibliotheken (wie die jQuery-Benutzeroberfläche) integrieren, um benutzerdefinierte Komponenten für Ihre Site zu erstellen. Lass uns anfangen!
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, mit dem diese Komponente (PHP) generiert wird.
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.
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 für die Metada einfach so etwas am Anfang Ihrer Plugins-Datei hinzu (direkt danach
Was bedeutet:
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:
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).
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:
Die Frage ist jetzt: Wie nennen wir es?
Dafür gibt es 2-Ansätze:
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:
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:
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):
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:
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:
Vergiss nicht, deine Gedanken in den Kommentaren zu hinterlassen! Und hier ist unsere Herausforderung für Sie: Ist es möglich, dass Sie eine Option "Standardelement" 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?