IE8 Web Slice für WordPress Kommentare erstellen

Der neue Internet Explorer 8 bietet die interessante Möglichkeit, Web Slices zu abonnieren. Hierbei werden Teile einer Webseite, die als Web Slice definiert sind, in einem kleinen „Fenster“ innerhalb des Browsers angezeigt. Der Web Slice wird hierbei als Favoriteneintrag im Browser dargestellt.

Auch auf meiner Seite gibt es einen Web Slice. Der obere Tab-Bereich „Neue Artikel“ ist als Web Slice definiert. Wie man diesen einfachen Web Slice erstellt, habe ich bereits in einem früheren Artikel erläutert.

Heute möchte ich einen weiteren kleinen Tipp zur Erstellung eines Web Slice beschreiben. Mit diesem neuen Web Slice wird die Möglichkeit angeboten, Kommentare eines Artikels als Web Slice zu abonnieren. So kann man sich gezielt zu den letzten Kommentaren eines Artikels informieren.

Die richtige Stelle für den Kommentar Web Slice

Den Kommentar Web Slice erstellt man natürlich in der Theme-Datei „comments.php“. Hier gilt es nun die richtige Stelle zu finden, an der der Web Slice zu programmieren ist.

In meiner Datei sieht die Abfrage für die Kommentare vereinfacht folgendermaßen aus:
<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('Keine Kommentare bisher',
'Ein Kommentar', '% Kommentare' );?> zu &#8220;
<?php the_title(); ?>&#8221;</h3>
<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>
<?php endif;?>

Den Programmcode für den Web Slice einfügen

Nach der Einbindung des Web Slice sieht der Code folgendermaßen aus:

<?php if ($comments) : ?>
   <div class="hslice" id="ws_comments">
      <h3 id="comments" class="entry-title">
      <?php comments_number('Keine Kommentare bisher',
      'Ein Kommentar', '% Kommentare' );?> zu &#8220;
      <?php the_title(); ?>&#8221;</h3>
      <ol class="commentlist entry-content" >
	<?php wp_list_comments(); ?>
      </ol>
   </div>
<?php endif ?>

Zunächst wird nach der „if-Abfrage“ ein neuer div-Container mit der Klasse „hslice“ und einer selbst zu definierenden ID  eingeleitet. Hiermit wird dem IE8 signalisiert, dass ein Web Slice beginnt. Als nächstes muss die Web Slice Überschrift gekennzeichnet werden. Hierzu nutzen wir die vorhandene Überschrift und fügen dem h3-Element noch die Klasse „entry-title“ hinzu. Möchte man einen anderen Web Slice Titel erstellen so kann man dies wie folgt machen:

<p class="entry-title" style="display:none">Irgend ein Titel</p>

Damit dieser zusätzliche Titel nicht im Blog erscheint sondern nur für den Web Slice genutzt wird darf man nicht das „display:none“ vergessen.

Nun muss noch gekennzeichnet werden, wie sich der Inhalt unseres Web Slice zusammensetzt. Dies erfolgt mit der Bezeichnung „entry-content“ innerhalb des css-Element „ol“. Nun werden in dem Web Slice alle Kommentare des Artikels angezeigt.

Das Problem bei vielen und langen Kommentaren

Ist man nun soweit gekommen und hat diesen Kommentar Web Slice erstellt, stößt man leider sehr schnell auf ein Problem. In einem Web Slice wird nur ein Ausschnitt angezeigt und man kann leider nicht scrollen (ich habe jedenfalls noch keine sinnvolle Lösung gefunden).

Da man normalerweise zuerst die ältesten und dann die neuesten Kommentare anzeigt, kann man in dem Web Slice irgendwann die neuesten Kommentare nicht mehr sehen. Das ist natürlich nicht sehr praktisch. Zur Lösung gibt es zwei Möglichkeiten. Die einfachste Lösung wäre es, die Reihenfolge der Kommentare über die Einstellungen im Dashboard umzustellen, so dass immer die neuesten Kommentare am Anfang aufgelistet werden.

Wer das nicht möchte, dem bietet sich eine – vielleicht nicht sehr performante – Lösung innerhalb der Datei „comments.php“. Für diese Lösung duplizieren wir einfach die Ausgabe der Kommentare:

      <ol class="commentlist entry-content" >
	<?php wp_list_comments(); ?>
      </ol>
      <ol class="commentlist entry-content">
        <?php wp_list_comments(array('reverse_top_level' =>"newer"));?>
      </ol>

In der zweiten Liste der Kommentare übergeben wir an das WordPress Tag „wp_list_comments“  noch den Parameter „reverse_top_level“ mit dem Wert „newer“. Damit werden nun zusätzlich die Kommentare so angezeigt, dass diese mit den neuesten Einträgen beginnen.

In unserem Blog wollen wir diese zusätzliche Liste natürlich nicht anzeigen. Damit das funktioniert können wir einen kleinen CSS-Trick anwenden. In die Datei „style.css“ schreiben wir noch folgenden Eintrag:

#ws_comments .entry-content { display : none; }

Die Kombination mit unserer selbst definierten ID „ws_comments“ und der Klasse „entry-content“ taucht nur in unserem Blog auf, so dass der entsprechende css-Eintrag diese Liste verschwinden lässt. Beim erstellen des Web Slice wird diese ID scheinbar nicht verwendet, so dass dort die Einträge angezeigt werden.

Ich habe diesen Web Slice natürlich auch in meinem Blog eingebaut, so dass man sich das Ergebnis bei mir direkt ansehen kann.