Kommentar-Widget für WordPress erstellen, ohne Plugin
Mit diesem kleinen Tutorial lernt ihr, wir einfach man ein Kommentare-Widget für WordPress erstellen kann. WordPress hat zwar bereits ein Standard-Widget für Anzeige der letzten Kommentare. Dieses hat aber allerdings weniger zu bieten, da bspw. die Avatar-Bilder der kommentierenden Person nicht angezeigt werden.
Das ist Grund genug ein eigenes Kommentar-Widget zu erstellen, welches neben der Anzeige des Avatars, auch folgendes zu bieten hat:
- Variieren der Bildgröße des Avatars
- Benutzerdefinierten Widget-Titel eingeben
- Widget-Titel ein- und ausblenden
- Anzahl der angezeigten Kommentare verändern
- Die Länge des Textauszuges anpassen
Das Widget registrieren
Zunächst registrieren wir das Kommentare-Widget mit Hilfe der WordPress-Action widgets_init um WordPress mitzuteilen, dass wir hier ein neues Widget im Backend hinzufügen möchten. Innerhalb dieser Funktion verweisen wir mit register_widget("wordpress_comments_widget"); auf unsere eigentliche PHP-Klasse, welche für die Anzeige der Feld-Maske sowie der Darstellung im Frontend nötig ist.
Die Widget PHP-Klasse selbst, unterteilen wir in 3 Abschnitte. Den Frontend-Teil, welcher das HTML für die Anzeige unseres Kommentar-Widgets darstellt. Den Teil für das Speichern und Aktualisieren neuer Werte. Und den Backend-Teil, welcher die Feld-Maske im WordPress Widget-Bereich hinzufügt.
Den folgenden Code könnt ihr so 1:1 verwenden und schon habt ihr ein WordPress Kommentare-Widget, ganz ohne Plugin erstellt. Die Erweiterungen des bestehenden Codes ist natürlich durch die Ergänzung weiterer Abschnitte möglich.
Das Javascript für die Auswahl der Avatar-Größe
In diesem WordPress Kommentare Widget lässt sich die Größe des Avatar-Bildes variieren. Dafür verwenden wir ein "Range" Input Feld <input type="range" value="38" min="38" max="96">, um die Breite des Bildes nutzerfreundlich anzupassen. Damit das funktioniert, müsst ihr ein zusätzliches Javascript (jQuery) Schnipsel einbauen.
Das CSS für die Anzeige im WordPress Frontend
Der letzte Teil der euch jetzt noch zur Vollendung eures Kommentare-Widgets fehlt, ist die Definition des Styles. Der folgende CSS-Code stellt dabei eine grundlegende Formatierung der HTML-Elemente dar. Natürlich müsst ihr diesen ggf. noch in Abhängigkeit zu eurem eigenen Stylesheets anpassen und optimieren.
Ich hoffe dieser Beitrag ist hilfreich und erleichtert euch zukünftig das Arbeiten mit WordPress. Durch den Einsatz von ein bisschen PHP, Javascript und CSS, könnt ihr so voll und ganz auf unnötige Kommentar-Plugins in WordPress verzichten.
