“Beitrag gelesen” für twentyten – ein kleines How To

Es geht um eine nette kleine Funktion, die Andreas in’s Leben gerufen hat. Die Idee ist folgende: Viele Interessierte lesen Blogeinträge, jedoch nur wenige nehmen sich Zeit für einen Kommentar. Damit nun aber auch die Faulen, bzw. all diejenigen, die eigentlich nichts zu sagen haben, kurz ihren Senf dazugeben können, gibt es nun die Möglichkeit, einen Beitrag “als gelesen” zu markieren, anstatt ihn regulär zu kommentieren (was natürlich nach vor geht und erwünscht ist.) Auch der Stadtpirat hat dazu ein paar interessante Zeilen geschrieben, die mir sehr geholfen haben, das Ganze zu verstehen. Außerdem hat mittlerweile auch Felix dieses kleine Feature in leicht abgewandelter Form eingbaut. Ebendiese Form habe ich nun hier auch implementiert. Da der Core meines Themes hier allerdings das normale twenty ten ist, funktioniert die Implementierung ein wenig anders.

Ich selbst habe eigentlich keine Erfahrung mit PHP und jQuery, demnach war es ein ziemlich Gewurstel das umzusetzen. Mittlerweile funktioniert’s aber, weswegen ich in dieser Stelle gerne beispielhaft meinen Workaround der Integrierung dieser Funktion in ein twenty ten Theme erklären möchte.

Eine kurze Erklärung

Was passiert eigentlich? Zuerst brauchen wir einen Button wie nun bei mir den blauen rechts unter einem Artikel. Bei einem Klick darauf springt der Browser runter in den Kommentarbereich, gleichzeitig wird das Kommentarfeld ausgeblendet und der Text des “Kommentar abschicken”-Feldes geändert. Wir wollen ja den Beitrag lediglich als gelesen markieren, jedoch keinen weiteren Kommentar schreiben. Danach werden regulär die Daten eines Benutzers eingegeben und der Beitrag kommentiert, bzw. in diesem Fall als gelesen markiert. Das Ganze zählt dann als regulärer Kommentar und wird bei selbigen angezeigt, beispielsweise mit dem Text “XY hat diesen Beitrag gelesen”, wobei das Layout zusätzlich abgeändert werden kann, um reguläre Kommentare und Leser optisch unterscheidbar zu machen.

Was brauche ich dazu?

Zuerst wird jQuery benötigt. Dieses Plugin auf Javabasis übernimmt für uns die Rolle des Ausblendens des Kommentarfeldes und schreibt einen Text hinein (bei mir eben “Hat diesen Beitrag gelesen”). Ausserdem wird hier der Text des “Kommentar abschicken”-Buttons geändert. Der Code des Plugins kann wahlweise heruntergeladen, dann eine .js-Datei gepackt und auf den Server geladen, oder direkt vom jQuery Server eingebunden werden.

Welche Dateien werden bearbeitet?

Wir brauchen zur Umsetzung: header.php, functions.php, comment-template.php, single.php und wahlweise die wp-comments-post.php. Header, Single und Functions finden sich im Theme, die Comment-Template liegt in den includes und die wp-comments-post im Rootverzeichnis der WordPress Installation.

Erste Schritte

Zunächst muss wie gesagt jQuery eingebunden werden. Dazu reicht eine kleine Zeile in der header.php, am besten dort, wo auch die style.css eingebunden wird. Das sollte dann etwa so aussehen:

[cc lang=”html”]

[/cc]

Nun raten Andreas und der Pirat dazu, in der wp-comments-post.php ein paar Zeilen zu löschen oder auszukommentieren, um zu verhindern, dass die Funktion einen Fehler bei leerem Kommentar sendet. Ich vermute allerdings, das das überflüssig ist, da das Kommentarfeld zwar versteckt, jedoch nicht leer (“Hat den Beitrag gelesen”) ist. Bei mir ist nichts auskommentiert und es funktioniert dennoch. Trotzdem hier die Anleitung. Etwa in Zeile 83 findet sich der Code

[cc lang=”php”]
if ( ” == $comment_content )
wp_die( __(‘Error: please type a comment.’) );
[/cc]

, der nun einfach gelöscht oder auskommentiert werden kann, was anschließend so aussieht:

[cc lang=”php”]
/* if ( ” == $comment_content )
wp_die( __(‘Error: please type a comment.’) ); */
[/cc]

Der “Gelesen”-Button

Als nächstes basteln wir uns den “Beitrag gelesen”-Button, welcher die Funktion auslösen soll. Hierfür brauchen wir die single.php. Im Prinzip ist der Button ein einfacher Link, welcher nachträglich per CSS zu einem Button gestylt werden kann. Wir schreiben als etwa sowas an die gewünschte Stelle der single.php:

[cc lang=”html”]

Beitrag als gelesen markieren

[/cc]

das href sorgt dafür, dass beim Klick in den Kommentarbereich gesprungen wird, die id (wahlweise auch Klasse) wird von jQuery benötigt, um die gewünschten Funktionen auszulösen.

Vorbereiten der comment-template.php

Springen wir beim Klick auf den Gelesen-Button nach unten, verschwindet zwar das Kommentarfeld, dennoch steht in dem zugehörigen Button “Kommentar abschicken”, oder ähnliches. Da das allerdings zu Verwirrung führen kann, wäre es doch sinnvoll, diesen Text auch zeitgleich zu ändern, oder? Hierfür schauen wir erstmal in die comment-template.php, dort gaaanz unten nach dem input-Feld mit Namen und Typ “submit”, das ist der “Kommentar abschicken”-Button. Dieser wird nun mit einer Klasse versehen, etwa so:

[cc lang=”html”]

Andreas für die Idee. Und nun viel Spaß mit dem Zeug und alle fleißig “als gelesen markieren”. Kommentieren natürlich auch 😀

UPDATE

Hier gibt’s noch mehr dazu!

Kommentare

Stephan sagt:

Hat diesen Beitrag gelesen

Stephan sagt:

Wow, danke für den letzten Hinweis. Genau das habe ich gesucht!

Raul sagt:

Hat diesen Beitrag gelesen

Dario sagt:

Ja der letzte Hinweis ist für mich auch sehr wertvoll. Damit könnte ich es mir auch auf meinem Blog vorstellen.
Aus meiner Sicht ist diese Funktion für den Blogbetreiber wertvoll, da er mehr Raktionen bekommt. Als Blog- bzw. Kommentarleser finde ich es eher hinderlich wenn bei vielen Kommentaren nur steht “x hat Beitrag gelesen”. Mit der Trennung könnten aber beide glücklich leben 😉

Catherina sagt:

Hat diesen Beitrag gelesen

Catherina sagt:

Ich kriege es trotz dieses ausführlichen Artikels einfach nicht hin. u_u
Aber trotzdem danke für den Beitrag!

Catherina

Sebastian sagt:

Woran haperts?

basti sagt:

Hat diesen Beitrag gelesen

Nico sagt:

Hat diesen Beitrag gelesen

[…] habe vor Kurzem ja bereits hier über die Implementierung des Gelesen-Zeugs in ein twenty ten Theme geschrieben. Nun habe ich […]

Philipp sagt:

Hat diesen Beitrag gelesen

[…] an Mr. Mooky für’s Erfinden, Moreno und Sebastian für die Unterstützung bei der Umsetzung. jQuery(function(){ […]

[…] die mir, so wie sie war, nicht ganz gepasst hat. Grundlage für die erste Umsetzung war die Anleitung von Sebastian, die ich dann einfach auf mein Theme angepasst habe. Das Ganze funktionierte. So […]

[…] umgestaltet. Hat ganz gut funktioniert, wenn ich bedenke, dass ich wie auch schon hier oder hier relativ planlos am Werk war. Hauptseiten waren relativ easy umzugestalten, im Gegensatz zu […]

[…] warten. Außerdem ruft Andreas die “Beitrag-gelesen”-Funktion ins Leben, die ich mir abgucke und ein wenig anpasse. Chris und ich lassen es uns am Brückkanal […]

Hannah sagt:

If you want to grow your experience simply keep vvisiting this site and be updated wih the newest gossip posted here.

We are a reliable longstanding family business.

Schreibe einen Kommentar