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

Erstellen eines Widgets mit Registerkarten für benutzerdefinierte Beitragstypen

by
Length:LongLanguages:

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

Benutzerdefinierte Beitragstypen bieten Ihnen unbegrenzte Möglichkeiten zum Erstellen von Inhalten. Der Trick besteht darin, Ihren Benutzern alles zu präsentieren. Wir sprechen hier von Absprungrate. Eine der besten Möglichkeiten, Ihre Absprungrate zu verringern und Benutzer auf Ihrer Website zu halten, besteht darin, so viele Inhalte wie möglich sauber und organisiert zu präsentieren. Dieses Tutorial bietet eine Lösung, indem es Ihnen zeigt, wie Sie ein benutzerdefiniertes Widget mit Registerkarten erstellen, das Ihre neuesten Artikel aus mehreren benutzerdefinierten Beitragstypen abruft, und als Bonus zeigt, wie Sie neben jedem Beitrag Sternebewertungen anzeigen!


Überblick. Unser Angriffsplan

In diesem Lernprogramm wird erläutert, wie Sie ein vorhandenes Thema ändern (nicht ein Plugin erstellen), indem Sie neue benutzerdefinierte Beitragstypen hinzufügen und anschließend ein benutzerdefiniertes Widget erstellen, das mithilfe eines ausgefallenen jQuery-Übergangs zwischen den neuen benutzerdefinierten Beitragstypen wechselt. Außerdem erfahren Sie, wie Sie benutzerdefinierte Metafelder für die neuen benutzerdefinierten Beitragstypen verwenden, um eine Sternebewertung zuzuweisen, die in dem von uns erstellten benutzerdefinierten Widget angezeigt wird.

Schließlich kann das Widget die benutzerdefinierten Beitragstypen nach Datum oder Bewertung sortieren. Hier ist eine Blaupause unseres Endprodukts und woher jedes der Elemente kommt:

Es gibt nur drei Dateien, die Sie ändern müssen, um diese Funktionalität zu Ihrem Thema hinzuzufügen. Das sind Standarddateien, die praktisch alle WP-Themen enthalten:

  1. functions.php
  2. header.php
  3. style.css

Ich werde in diesem Tutorial das Standard-WP 3.0-Thema namens TwentyTen verwenden, aber die Methode ist für jedes Thema, das Sie ändern möchten, dieselbe. Sie werden diese drei Dateien trotzdem bearbeiten (oder erstellen, wenn sie nicht vorhanden sind) Welches Thema ändern/erstellen Sie? Die benutzerdefinierten Beitragstypen, die ich erstellen werde, sind Filmkritiken, Musikkritiken und Spielkritiken:


Schritt 1. Erstellen Sie die benutzerdefinierten Beitragstypen

Bevor wir das Widget erstellen, das unsere Bewertungen anzeigt, müssen wir zuerst die Bewertungen selbst erstellen. Dazu müssen wir drei neue benutzerdefinierte Beitragstypen erstellen. In diesem Tutorial wird davon ausgegangen, dass Sie mit dem Erstellen benutzerdefinierter Beitragstypen vertraut sind. Wenn Sie dies also auffrischen müssen, bevor Sie fortfahren, wird im Codex ausführlich erläutert, wie Sie neue Beitragstypen registrieren. Jetzt erstellen wir unseren Filmkritiken-Beitragstyp Öffnen Sie die Datei functions.php und fügen Sie am Ende den folgenden Code hinzu:

Dadurch wird ein Beitragstyp mit dem Namen oswc_movie_reviews erstellt, WP mitgeteilt, wie alle Beschriftungen des Beitragstyps lauten sollen, der Beitragstyp wird öffentlich gemacht, direkt nach dem Kommentare-Menü in der WP-Administratormenüstruktur eingefügt und der Slug des Beitragstyps neu geschrieben (hübscher) in Permalinks) weist WP an, bestimmte Attribute für den Beitragstyp zu aktivieren (z. B. eine Miniaturansicht und einen Auszug), und weist WP schließlich an, dem Benutzer Kategorien und Tags wie bei normalen Beiträgen Kategorien und Tags zuweisen zu lassen.

Der Kürze halber werden wir keine benutzerdefinierten Taxonomien definieren, da das Widget, das wir erstellen, in keiner Weise mit Taxonomien interagiert. In einer realen Situation würden Sie wahrscheinlich benutzerdefinierte Taxonomien wie Filmgenre, Filmregisseur, Schauspieler usw. erstellen. Informationen zum Erstellen benutzerdefinierter Taxonomien finden Sie im oben verlinkten WordPress-Codex.

"Wenn Sie Ihre eigenen Funktionen und Variablen schreiben, ist es immer eine gute Idee, ein Präfix im Namen zu verwenden, um sicherzustellen, dass es nicht denselben Namen wie andere WP- oder Plugin-Funktionen oder -Variablen von Drittanbietern hat. Sie werden dies bemerken Das Tutorial stellt entweder die Zeichenfolge oswc_ vor oder enthält in allen Funktions- und Variablennamen. "

Als Nächstes erstellen wir die beiden anderen benutzerdefinierten Beitragstypen, die wir in diesem Widget verwenden. Die Logik entspricht genau der Art von Filmkritiken, die wir gerade hinzugefügt haben. Wir ändern lediglich den Code, um Musikrezensionen bzw. Spielkritiken widerzuspiegeln. Fügen Sie diesen Code nach dem oben hinzugefügten Code hinzu:

Laden Sie Ihre geänderte Datei functions.php hoch und Sie sehen nun Menüelemente für alle drei benutzerdefinierten Beitragstypen. Ihr Admin-Panel sollte folgendermaßen aussehen:


Schritt 2. Schreiben Sie einige Bewertungen

Die Überprüfung

Nachdem wir die Option zum Hinzufügen von Bewertungen aktiviert haben, schreiben wir einige! Klicken Sie im Filmkritiken-Menü auf Neue Rezension hinzufügen und schreiben Sie die Rezension so, als würden Sie einen normalen Beitrag schreiben. Geben Sie ihm einen Titel, veröffentlichen Sie Inhalte, Kategorien, Tags und ein ausgewähltes Bild.

Das Rating

Was müssen wir also tun, damit die Bewertung eine Sternebewertung hat, die im Widget angezeigt wird? Einfach: Fügen Sie ein benutzerdefiniertes Feld hinzu. Stellen Sie zunächst sicher, dass das Bedienfeld Benutzerdefinierte Felder in Ihrem Werkzeugkasten für Bildschirmoptionen aktiviert ist, indem Sie die Registerkarte Bildschirmoptionen umschalten und Benutzerdefinierte Felder auswählen:

Fügen Sie bei sichtbaren benutzerdefinierten Feldern ein neues benutzerdefiniertes Feld mit dem Namen Bewertung hinzu. Geben Sie einen Zahlenwert von 0 bis 5 ein, der um .5 erhöht wird. Die verfügbaren Werte wären also 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5.

"Der einzige Teil, den Sie hinzufügen müssen, damit dieses Widget funktioniert, ist der Titel und das benutzerdefinierte Feld. Alles andere ist beispielsweise vorhanden. Was Sie hinzufügen, hängt davon ab, wie Sie Ihre spezifische Site einrichten möchten."

Fügen Sie Bewertungen für die beiden anderen Bewertungstypen genauso hinzu. Fügen Sie mindestens einige Bewertungen für jeden der drei Typen hinzu, damit das Widget etwas anzeigen kann. Mit unseren Inhalten können wir jetzt das Widget erstellen, das unsere Bewertungen anzeigt. Wir werden das Widget in drei Phasen angreifen: PHP, dann jQuery und schließlich CSS.


Schritt 3. Erstellen Sie das benutzerdefinierte Widget PHP

Das ist der aufwendigste Schritt des Tutorials. In diesem Schritt schreiben wir den PHP-Code, der unser benutzerdefiniertes Widget erstellt und zu WordPress hinzufügt, und schreiben dann eine benutzerdefinierte PHP-Funktion, die sich um die Anzeige der Sternebewertungen für jede Bewertung kümmert.

Das benutzerdefinierte Widget

Beim Erweitern der WP_Widget-Klasse müssen vier Funktionen hinzugefügt werden, um unser Widget hinzuzufügen. Hier ist die Struktur des Codes, mit dem wir die Klasse erweitern werden:

Wie Sie sehen können, benötigen wir eine Funktion, die das Widget benennt und erstellt, eine Funktion, die steuert, wie es im Front-End angezeigt wird, eine Funktion, die das Aktualisieren der Widget-Optionen übernimmt, und eine Funktion, die steuert, wie es im Admin-Bereich angezeigt wird (die Seite WordPress >> Aussehen >> Widgets). Nachdem wir das alles getan haben, registrieren wir das Widget bei WordPress.

Einzelheiten zum Entwickeln von Widgets finden Sie im Codex, in dem die WordPress-Widgets-API näher erläutert wird.

Lassen Sie uns jede Funktion ausbauen und alles für unser benutzerdefiniertes Widget einzigartig machen. Zuerst verpacken wir alles in eine Klasse mit unserem Widget-Namen:

Dann fügen wir die erste Funktion innerhalb dieser Klasse hinzu. Diese Funktion hat denselben Namen wie die Klasse, die der Name unseres Widgets ist. Wir werden den schönen Namen unseres Widgets einrichten, der auf der Widgets-Seite angezeigt wird, sowie einige Standardeinstellungen für das Widget:

Fügen wir nun die nächste Funktion hinzu. Zuerst greifen wir die Variablen aus unserem Widget (das wir in der nächsten Funktion einrichten) und erstellen dann eine Variable, um zu sehen, wie wir das Widget sortieren:

Dann beginnen wir mit der Erstellung des HTML. Wickeln Sie das gesamte Widget in ein div mit der id "tabbed-reviews" (die jQuery wird sich später daran anschließen) und richten Sie dann für jeden Bewertungstyp eine Registerkarte ein. Schließlich umschließt ein anderes div den Inhalt in jeder Registerkarte:

Innerhalb des tabdiv-wrapper div müssen wir eine Schleife erstellen, die Post-Titel und Sternebewertungen von einem bestimmten benutzerdefinierten Post-Typ erfasst. Die erste Registerkarte ist für Filmkritiken vorgesehen. Wir überprüfen daher, ob dieser Rezensionstyp in den Widget-Optionen angezeigt wird, und zeigen in diesem Fall eine Registerkarte mit einer ungeordneten Liste an. Hier ist der vollständige Codeblock für den Inhalt der Filmkritik-Registerkarte, den wir unten auseinander nehmen werden:

Das Herzstück dieses Codeblocks ist die benutzerdefinierte Schleife, die wir erstellen, um Beiträge aus dem Filmkritiken-Beitragstyp abzurufen. Hier sind die Argumente, die wir für die Schleife verwenden:

Zuerst verwenden wir suppr__filters, um sicherzugehen, dass wir nur den gewünschten Post-Typ abrufen (einige Themes oder Plugins können Funktionen haben, die alle Schleifen mit allen Post-Typen einfügen - dieses Argument stellt sicher, dass unser Widget dem angegebenen Post-Typ treu bleibt).

Der wichtigste Teil ist post_type=oswc_movie_reviews, da diese Schleife nur nach dem oben erstellten benutzerdefinierten Beitragstyp suchen soll. Schließlich fügen wir einfach unsere Widget-Optionen für die Anzahl der Beiträge und die Sortierung hinzu.

Um unsere Sterne zu erhalten, greifen wir auf den benutzerdefinierten Feldwert zu, den wir der Bewertung hinzugefügt haben:

Und dann übergeben wir diesen Wert an eine Funktion, die wir noch nicht ganz erstellt haben:

Nach der Schleife fügen wir einen More-Link hinzu. Fügen Sie die URL für den Link href zu Ihrer spezifischen Seite mit benutzerdefinierten Beitragstypen ein (das Erstellen dieser Seite liegt außerhalb des Bereichs dieses Tutorials).

Jetzt müssen wir nur noch dasselbe für Music Reviews und Game Reviews tun. Hier ist der vollständige Codeblock für beide Überprüfungstypen:

Vergessen Sie nicht, die div-Tags zu schließen, die wir am Anfang unseres Widget-HTML verwendet haben, und die PHP-Funktion zu schließen!

Unsere dritte Funktion innerhalb der WP_Widget-Klasse ist die Update-Funktion. Diese Funktion empfängt lediglich die alten und neuen Optionen vom Widget, wenn auf die Schaltfläche Speichern geklickt wird, und aktualisiert das Widget-Einstellungsarray entsprechend:

Unsere vierte und letzte Funktion zum Erstellen unseres Widgets legt fest, wie unser Widget auf der Administrationsseite angezeigt wird. Sie werden feststellen, dass für jede Option, mit der wir uns befassen müssen, ein Formularfeld erstellt wird. Mit diesem Code kann das Widget die folgenden 7 Optionen anbieten:

  1. Wie kann man die Beiträge sortieren?
  2. Gibt an, ob die Registerkarte Filmkritiken angezeigt werden soll
  3. Wie viele Filmkritiken sollen angezeigt werden?
  4. Gibt an, ob die Registerkarte Musikkritiken angezeigt werden soll
  5. Wie viele Musikkritiken sollen angezeigt werden?
  6. Gibt an, ob die Registerkarte "Spielberichte" angezeigt werden soll
  7. Wie viele Spielberichte sollen angezeigt werden?

Hier ist der Code, mit dem unsere Widget-Administratoroptionen eingerichtet werden:

Beachten Sie, dass wir unsere gesamte Klasse am Ende dieser Funktion geschlossen haben. Nachdem wir den Mut unseres Widgets erstellt haben, vergessen wir nicht, es bei WordPress zu registrieren!

Hier ist der vollständige Codeblock, mit dem Sie das Widget erstellen können:

Die Sternebewertungsfunktion

Das war's für unser Widget. Eine letzte Sache, die Sie in unserer Datei functions.php tun müssen: Erstellen Sie die oben aufgerufene Funktion, die den HTML-Code für die Sternebewertung ausgibt. Hier ist die Funktion, die Sie unter dem oben hinzugefügten Widget-Code hinzufügen sollten:

"Die von diesem Widget verwendeten Sternbilder sind in der Download-Datei für dieses Tutorial enthalten."

Diese Funktion akzeptiert den Bewertungswert (eine Zahl zwischen 0 und 5) und verwendet if... else-Anweisungen, um zu überprüfen, wie viele Sterne gelb und wie viele Sterne grau werden sollen. Es zeigt fünf Mal hintereinander ein div mit der Klasse "Stern" an. Jedes Mal, wenn es die Bewertung überprüft und mit dem angezeigten Stern vergleicht, wird entweder eine Klasse "voll" hinzugefügt, wenn die Bewertung größer oder gleich der ist aktueller Stern oder eine Klasse von "halb", wenn die Bewertung größer als der vorherige Stern ist

Verwirrt von der Halbsternlogik? Es bedeutet einfach, wenn der Stern größer als der vorherige Stern ist, aber nicht größer oder gleich diesem Stern, muss dies der halbe Stern sein.

Hinweis: Die Sterne befinden sich alle in einem div mit der Klasse "Sterne". Das ist das Ziel, um unsere Stile später anzuwenden.


Schritt 4. Richten Sie das Widget ein

Nachdem wir unser Widget vollständig codiert haben, erkennt WordPress es auf der Widgets-Seite und wir können es so einrichten, dass es in unserer Seitenleiste angezeigt wird. Gehen Sie zu Darstellung >> Widgets und ziehen Sie unser neues Widget mit dem Namen Neueste Überprüfungsregisterkarten in eine der Seitenleisten. Wir werden den primären Widget-Bereich im TwentyTen-Thema verwenden. Erweitern Sie die Widget-Einstellungen, um die verfügbaren Optionen anzuzeigen, die wir im vorherigen Schritt eingerichtet haben:

Wählen Sie aus, wie Sie das Widget sortieren möchten (entweder nach der höchsten oder der neuesten Bewertung), wählen Sie aus, ob jeder der drei Überprüfungstypen angezeigt werden soll, und geben Sie an, wie viele der einzelnen Überprüfungstypen Sie anzeigen möchten. Speichern Sie Ihre Optionen und Sie haben jetzt ein (etwas) funktionierendes Widget auf Ihrer Site. Natürlich haben wir noch keinen Stil angewendet, daher wird er nicht allzu hübsch aussehen, bis wir die nächsten beiden Schritte ausgeführt haben: Anwenden von jQuery und CSS.


Schritt 5. In jQuery einfügen

Dieses Widget verwendet die jQuery-Benutzeroberfläche für Registerkartenübergänge. Wir müssen also drei einfache Dinge tun, um die jQuery-Benutzeroberfläche mit unserem Widget zu verbinden: 1) Laden der jQuery-Bibliothek, 2) Laden des Plugins für die jQuery-Benutzeroberfläche und 3) Aufrufen der Funktion der Registerkarten der jQuery-Benutzeroberfläche in unserem Widget.

Laden Sie die jQuery-Bibliothek

In WordPress ist jQuery bereits enthalten. Einige Leute ziehen es vor, es von einem CDN zu laden oder sogar die Bibliothek hochzuladen und es in ihrem Thema zu verwenden. Um mehr über das Laden von jQuery in WordPress zu erfahren, besuchen Sie den Codex. Um es in das TwentyTen-Thema aufzunehmen, müssen wir nur eine Codezeile in der Datei header.php einfügen. Öffnen Sie die Datei header.php und fügen Sie jQuery vor der Funktion wp_head() den folgenden Aufruf hinzu (also irgendwo vor Zeile 51 im TwentyTen-Design):

Laden Sie das jQuery UI-Plugin

Dies ist die gleiche Technik wie beim Laden der jQuery-Bibliothek, außer dass wir diese nach der Funktion wp_head() aufrufen möchten (das wäre also irgendwo nach Zeile 51 im TwentyTen-Thema):

Rufen Sie die Funktion der Registerkarten der jQuery-Benutzeroberfläche in unserem Widget auf

Fügen Sie den folgenden Code direkt nach dem soeben hinzugefügten jQuery-UI-Code hinzu:

Wir rufen einfach die Tabs-Funktion (die die jQuery-Benutzeroberfläche für uns bereitstellt) in der ungeordneten Liste innerhalb des div-Tags #tabbed-reviews auf und wenden einen Opazitätsschalter auf die Übergänge zwischen den Tabs an. Sie können die Dauer für ein schnelleres Umschalten verringern oder für ein langsameres Umschalten erhöhen (stellen Sie sich diese Zahl als Verzögerung anstelle einer Geschwindigkeit vor).


Schritt 6. Gestalten Sie das Widget mit CSS

Wenn Sie Ihr Widget jetzt anzeigen, werden Sie wahrscheinlich nicht sehr zufrieden sein, da wir es überhaupt nicht gestylt haben. Der letzte Schritt besteht darin, einige CSS-Regeln anzuwenden, die unser Widget tatsächlich wie ein Widget aussehen lassen und auch korrekt funktionieren. Öffnen Sie Ihre Datei style.css und fügen Sie am Ende der Datei den folgenden Stil hinzu:

Der erste Teil des Stils gilt für die Registerkarten und die Inhaltsbereiche innerhalb jeder Registerkarte. Wie Sie sehen können, werden den verschiedenen Elementen, aus denen der Registerkartencontainer besteht, Auffüllungen, Rahmen und Hintergrundfarben zugewiesen. Der zweite Teil des Stils gilt für die Sterncontainer. Ein Hintergrundbild wird für die drei verschiedenen Sternzustände leer, halb und voll verwendet, und die Sterne schweben nebeneinander, sodass sie in einer horizontalen Linie erscheinen.


Abschluss

Bei der Entwicklung in WordPress geht es darum, verschiedene Technologien zu nutzen, um Ihren Website-Besuchern eine umfassende Benutzererfahrung zu bieten. In diesem Tutorial haben wir die Standardfunktionen von WordPress verwendet, einschließlich der benutzerdefinierten Beitragstypen und der API für benutzerdefinierte Widgets. Wir haben diese erweitert, indem wir die hilfreiche jQuery-Bibliothek hinzugefügt haben, gefolgt vom jQuery-UI-Plugin, und schließlich haben wir die Leistung von CSS genutzt lassen Sie alles glatt und professionell aussehen.

Der größte Vorteil von Ideen wie diesem Widget besteht darin, dass Sie Ihren Benutzern mehr Inhalte präsentieren können, ohne sie zu überfordern, mit dem ultimativen Ziel, sie dazu zu bringen, so lange wie möglich auf Ihrer Website zu bleiben.

Hoffentlich kann dieses spezielle Widget Ihnen helfen, diese Absprungrate zu verringern und Ihren Benutzern eine angenehmere Erfahrung zu bieten! Wenn Sie es noch nicht getan haben, schauen Sie sich die Demo an, bevor Sie sie selbst ausprobieren.

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.