Allzeit-Topkommentatoren-Übersicht ohne Tabelle


Der Artikel besteht aus 335 Wörtern. Geschätzte Lesezeit: 01:20 Minuten

Am Samstag schrieb ich, das ich beruhend auf einem Artikel von Sylvi eine Übersicht der Top-Kommentatoren erstellt habe, die sich nicht auf die letzten 30 oder 365 Tage bezieht, sondern auf die gesamte Zeit seit dem der Blog besteht.

Nachteil der in dem Artikel gezeigten Lösung war nur, das die Übersicht mit Hilfe einer Tabelle dargestellt wird. Und das table-Tag wird heutzutage nicht mehr zum Darstellen von Übersichten in html-Seiten empfohlen.

Also hieß es, sich auf die Suche zu machen und zu überlegen, wie das anders gelöst werden kann. Aber da Sylvi mir mit dem Hinweis auf Timms Wall of Fame schon einen Tipp gegeben hatte, war klar was nun folgen musste.

Ich habe mir also Timm seine Wall of Fame vorgenommen und mir den Quellcode angesehen. Wer sich dafür interessiert, sollte sich die Seite im Browser anschauen, die rechte Maustaste anklicken und den entsprechenden Menüpunkt für die Anzeige des Quellcodes wählen. Zuständig für die Darstellung ist die div-class walloffame_container.

Als nächstes habe ich mir den Code gesucht, der für die Anzeige eines einzelnen Bildes zuständig ist. Das besorgt alles, was innerhalb der div-class walloffame_stage steht. Dann ging es darum, den Code so umzugestalten, das trotzdem noch immer 3 Bilder pro Zeile dargestellt werden. Nach ein bisschen hin- und herprobieren hatte ich es dann geschafft. Zumindest soweit, das das Tabellenkonstrukt ersetzt wurde.

Ein paar Änderungen an Timm's CSS-Code habe ich noch vorgenommen, so das die Bilder ohne Rahmen und an allen Ecken abgerundet dargestellt werden.

So ganz gefallen tut mir das Ergebnis noch nicht, weil jedes Mouse-over auf einem Bild auch Auswirkungen auf die anderen Gravatare hat - wenn auch nur in Form geringer Verschiebungen. Aber da diese Auswirkungen bei Timms Variante nicht zu beobachten sind, muss bei mir also noch ein wenig falsch laufen. Aber das korrigiere ich dann mit der Zeit. Wer mir Verbesserungsvorschläge machen möchte, kann das gerne tun.

Hier nun mein Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function top_commentator_all() {
	global $wpdb; 
	$i = 0;
	?>
	<div class="walloffame_container">		
		<?php $topcommentator_query="SELECT comment_author, comment_author_email, comment_type, SUBSTRING_INDEX(comment_author_url, '/', 3) as top_commentator, COUNT(*) as top_num FROM $wpdb->comments
		WHERE comment_approved='1' 
		AND comment_author_url IS NOT NULL
		AND comment_author_url != ''
		AND comment_author_email NOT LIKE 'mail@domain.de%'
		AND comment_author_email NOT LIKE 'mail@domain.de%'
		AND comment_author_url NOT LIKE 'http://domain.com/%'
		AND comment_author_url NOT LIKE 'http://domain.de%'
		AND comment_author_url NOT LIKE 'http://domain.com%'
		AND comment_type NOT LIKE 'pingback' OR 'trackback'
		GROUP BY top_commentator
		Order by top_num DESC, comment_date ASC
		LIMIT 18";
	$topcommentator_result = $wpdb->get_results($topcommentator_query); 
	if ( !empty($topcommentator_result) ) {
		foreach ($topcommentator_result as $comment) :
			$co_aut = $comment->top_commentator;
			$co_aut = str_ireplace("http://", "", $co_aut); ?>
			<div class="walloffame_stage" style="cursor: pointer;">
			<div class="walloffame_avatar"> 
			<?php
			echo '<a href="'.$comment->top_commentator.'/" target="_blank">'.get_avatar( $comment, 164 ) .'</a>'; 
			?>
			</div>
			<div class="walloffame_info">
			<span class="walloffame_name" >
			<?php
			echo $comment->comment_author.' <br />';
			?>
			</span>
			<span class="walloffame_total">
			<?php 
			echo $comment->top_num.' Kommentare'; ?>
			</span>
			</div>
			</div>
			<style="margin-right: 20px;">
			<?php
			$i++;
			if($i%3==0) { ?>
			</div><div class="walloffame_container"> 
			<?php
			}
		endforeach;
		$i=0;
		}
		?>
		</div>
			<?php
		}
Marcus
Über Marcus 702 Artikel
Ich freue mich über Deinen Besuch auf meinem Blog! Wenn Dir der Artikel gefallen hat, teile ihn doch mit anderen und hinterlasse Deine Meinung. Mehr über mich gibt es hier zu lesen

6 Kommentare

  1. Hallo Marcus,

    super schaut’s aus und absolut ohne Tabelle. Applaus!

    Ich habe mir natürlich Deine Topkommentatoren-Seite genauer angeschaut und Du hast recht – fährt man mit der Maus drüber, dann zucken die Bilder ein wenig. Aber man könnte es auch als besonderen Effekt ansehen. 😉

    Falles es Dich aber trotzdem stört, dann schau Dir mal die Werte unter .walloffame_stage:hover genauer an. Kann es sein, dass dieses Attribut 2 x in Deiner CSS enthalten ist? Und dann nimm dort mal alle Werte (box-shadow, border) heraus und füge nur „opacitiy:0.8“ ein. Dann müsste das „Zucken“ aufhören und der Wall of Fame von Timm ziemlich ähnlich sein.

    Gruß Sylvi

  2. Vielen Dank für Deine Erwähnung. 🙂
    Warum nutzt Du nicht einfach das Plugin? Der Preis ist es wert.

    Ansonsten finde ich Deinen Ansatz zum „Selberbasteln“ auch sehr gut.
    Wenn Du einen Weg findest, das alles perfekt klappt, werde ich bestimmt Deine Variante gerne ausprobieren. 🙂
    Ich bin gespannt. 🙂
    LG Timm
    Der NetzBlogger letzter Artikel auf dem eigenen Blog: Kind-in-Aktion Blogparade #3: Das Kind im Haushalt – Hast du deiner Mutter im Haushalt geholfen? Oder hast du dich davongestohlen?

  3. Das mit dem Table-Tag ist ein Mythos, bzw. ein Mißverständnis. Der hat seine Ursache darin, daß man (viel zu) lange Tabellen für das Layout benutzt hat.

    Genau für so Dinge wie eine Übersicht der Top-Kommentatoren ist der Tag aber gemacht. table – thead – tbody – tfooter. Das sind alles semantisch völlig korrekte HTML-Tags, die man durchaus so nutzen sollte, wenn es um Datensätze geht, die untereinander in einer Beziehung stehen.

    Gruß

Kommentar hinterlassen

E-Mail Adresse wird nicht veröffentlicht.


*


CommentLuv - verlinke einen deiner Blog-Artikel