So fügen Sie ganz einfach Beitragsfilter zu Ihrer WordPress-Site hinzu
Veröffentlicht: 2015-01-25Eine häufige Anfrage, auf die ich stoße, ist die Möglichkeit, Benutzer Beiträge auf dem Front-End ihrer Website filtern oder sortieren zu lassen.
Vielleicht möchten Benutzer Posts alphabetisch anzeigen oder vielleicht nur die Posts mit Miniaturansichten sehen? Dies ist bereits für normale Posts sinnvoll, kann aber bei Produkten, Fotos oder anderen Inhaltstypen noch aussagekräftiger sein.
Im heutigen Wochenend-WordPress-Projekt gebe ich Ihnen einen kurzen Überblick darüber, wie Sie eine Funktion wie diese im Twenty Fifteen-Theme implementieren können. Lassen Sie uns knacken!
- Erstellen eines Child-Themes
- Steuerelemente erstellen
- Ändern der Abfrage
- Intelligentere Formulare
- WordPress-Verhalten
- Fazit
Erstellen eines Child-Themes
Wie immer braucht man ein Child-Theme. Wir haben hier auf WPMU DEV einen Leitfaden zu untergeordneten Themen. Ich empfehle, diesen zu lesen, wenn Sie mit untergeordneten Themen nicht vertraut sind.
Steuerelemente erstellen
Lassen Sie uns drei Steuerelemente hinzufügen: eines zum Sortieren der Beiträge, eines zum Festlegen der Sortierrichtung und eines zum Anzeigen nur von Beiträgen mit Miniaturansichten.
Der erste Schritt besteht darin, die index.php des Parent-Themes in unser Child-Theme zu kopieren.
Öffnen Sie die Datei index.php in Ihrem untergeordneten Design und fügen Sie den folgenden HTML-Code unter dem Hauptcontainer ein (der sich in Zeile 20 befinden sollte):
Und so sieht es im Frontend aus:
Wie Sie sehen können, fehlt uns ein wenig Styling. Lassen Sie uns das lösen, indem Sie dem Stylesheet einige Stile hinzufügen:
Eine Reaktion, die ich häufig von Neulingen in der Programmierung höre, ist: „Woher wusste er, dass dies die Stile sind, die es in das Thema einfügen werden?“
Die Lösung ist ziemlich einfach: Ich betrüge. Ich verwende die Entwicklertools in Chrome, um die regulären Artikelelemente zu überprüfen. In diesem Fall konnte ich sehen, wie die Elemente ihren Rahmenschatten und ihre Ränder erhalten, und ich habe diese Regeln einfach auf mein eigenes Element angewendet.
Ändern der Abfrage
Wählen wir „nach Titel sortieren“, „aufsteigend“ und „Beiträge mit Vorschaubildern“ und senden das Formular ab. Sie sollten tatsächlich eine Änderung sehen, ohne etwas am Code zu ändern.
Um zu sehen warum, sehen wir uns die URL an. Es sollte ungefähr so sein:
http://ihredomain.com/?orderby=post_title&order=DESC&thumbnail=only_thumbnailed
Die Leckerbissen an Informationen können in unseren PHP-Skripten mithilfe der $_GET Variablen abgerufen werden. WordPress kennt bereits die Bedeutung der Parameter order und orderby und verwendet sie in der Standardabfrage. Wenn wir also nur die Bestellung und die Bestellrichtung brauchen, sind wir eigentlich schon fertig.
Das ist alles großartig, aber nochmal, woher weiß ich das? Ich hätte statt „orderby“ auch „order_by“ als Parameter verwenden können. In diesem Fall greift WordPress unsere Absichten nicht auf. Ich habe mir die WP_Query-Dokumentation im WordPress-Codex angesehen, wo es eine Reihe von Parametern gibt, von denen viele in URLs verwendet werden können.
Lassen Sie uns nun unseren Post-Thumbnail-Parameter implementieren. Ein Beitrag hat ein Thumbnail, wenn ihm Metadaten mit dem Schlüssel _thumbnail_id zugeordnet sind. Wir müssen unsere Abfrage ändern, um sicherzustellen, dass dies berücksichtigt wird. Machen wir das jetzt mit query_posts() .
Fügen Sie den folgenden Code über der Funktion get_header() am Anfang der Datei ein:
Wir führen die Parameter der ursprünglichen Abfrage mit unseren eigenen neuen Parametern zusammen, was zu einer anderen Gruppe von Beiträgen führt. Unser Formular funktioniert jetzt, aber es erinnert sich nicht an unsere Auswahl. Lassen Sie uns das beheben, indem wir unser Formular umschreiben und etwas PHP verwenden.
Intelligentere Formulare
Zusätzlich zur Auflistung aller Optionen der Bestellung nach Selektor benötigen wir eine Möglichkeit, um anzuzeigen, welche ausgewählt ist. Wenn wir dies ohne Schleife machen würden, würde es ungefähr so aussehen:
Verstehst du etwas davon? Ich mache dir keine Vorwürfe! Innerhalb jeder Option prüfen wir, ob der aktuell ausgewählte Wert gleich dem Wert der Option ist. Wenn ja, geben wir die ausgewählte Eigenschaft aus. Machen wir das mit einer Schleife viel sauberer:
Das ist etwas länger, aber nur, weil wir drei Möglichkeiten haben. Dies ist ein viel besseres Format, um jede Art von Auswahl zu verwalten. Erweitern wir dies auf das gesamte Formular:
Alles erledigt. Das Formular sollte sich jetzt unsere Auswahl basierend auf den $_GET Variablen in der URL merken.
WordPress-Verhalten
Erinnern Sie sich, wie ich erwähnt habe, dass ich weiß, wie man „order“ und „orderby“ verwendet, weil ich mir die WP_Query-Dokumentation angesehen habe? Dies ist eine bewährte Vorgehensweise, kann jedoch zu unerwarteten Ergebnissen führen. Finden Sie den Slug einer Kategorie, die Sie haben, sagen Sie, diese Kategorie ist „Wordpress“.
Verwenden Sie nun die folgende URL: http://yourwebsite.com/?category_name=wordpress. Sie sollten Ihr Kategoriearchiv sehen, das alle Ihre WordPress-Beiträge auflistet. Das ist in Ordnung, aber wir haben zwei Probleme:
Wenn Sie hübsche Permalinks aktiviert haben (was Sie sollten), wurde die Seite auf eine neue URL umgeleitet, höchstwahrscheinlich http://yourwebsite.com/category/wordpress. Unsere Filter sind nicht sichtbar, da die Datei archive.php diese Ansicht verarbeitet, nicht index.php . Außerdem wird unser Kategoriename nicht als URL-Parameter übergeben, sodass wir einige zusätzliche Tricks anwenden müssen, damit unsere Filter funktionieren.
Die Abkürzung, um dies zum Laufen zu bringen, besteht darin, absichtlich nicht die gleichen Parameter zu verwenden, die WordPress verwendet. Sie könnten den Kategorienamen mit dem catname Parameter in der URL übergeben, da WordPress dies nicht aufgreift. Sie können dies dann mit dem richtigen Parameternamen in die Abfrage einspeisen. Etwas wie das:
Die Alternative wäre, eine Funktion zu verwenden, anstatt unser Formular unverändert in index.php . Sie müssten die Kategorie aus der WordPress-Abfrage selbst erkennen und basierend darauf die aktuelle Auswahl anzeigen.
Fazit
Das Hinzufügen eigener Filter ist nicht allzu schwierig, erfordert aber ein wenig Fummelei. In unserem Fall möchten Sie vielleicht sicherstellen, dass die Paginierung entfernt wird, wenn die Reihenfolge auf zufällig eingestellt ist. Es könnte durch eine Schaltfläche „mehr Zufälligkeit anzeigen“ ersetzt werden, die die Seite einfach neu lädt.
Hoffentlich hat Ihnen dieser Artikel die Grundlagen gegeben, wie Sie dies selbst erreichen können, und Sie werden in der Lage sein, die Filter zu erstellen, die Sie benötigen.
Stichworte: