Lösung für Allzeit-Kommentatoren-Übersicht

Fehler ausgemerzt und Effekte ergänzt


Der Artikel besteht aus 201 Wörtern. Geschätzte Lesezeit: 00:48 Minuten

Vor etwas mehr als einem Jahr schrieb ich darüber das ich Dank eines Artikels von Sylvi über die Würdigung ihrer Top-Kommentatoren mich daran gemacht hatte, eine eben solche Übersicht für meine Top-Meinungsmacher zu erstellen.

Anfangs noch mit Hilfe eines Tabellenkonstrukts schaffte ich es dann ein paar Tage später, die Darstellung ohne Hilfe des table-Tags zu bewerkstelligen. Doch auch diese Version hatte noch ihre kleinen Macken. Denn fuhr man mit der Maus über den Avatar eines der dargestellten Kommentatoren verschob sich der Rest der dargestellten Bilder. Wenn dies auch nur geringfügig war, so war es trotzdem wahrzunehmen.

Nun habe ich mich wieder dieser Darstellung angenommen, mit dem Ziel, die Übersicht ein wenig zu perfektionieren. Und ich denke, das mir das durchaus gelungen ist.

Ich habe die Verschiebung der Bilder bei einem Mouse over ausschalten können und noch zwei Effekte hinzugefügt.

Grundsätzlich wird die Übersicht aller dargestellten Meinungsmacher etwas ausgegraut. Fährt man mit der Maus auf das Bild eines Kommentatoren, so wird das Bild in seiner normalen Helligkeit dargestellt. Zusätzlich wird der Avatar samt Infos vergrößert dargestellt.

Erreicht habe ich das mit dem folgenden 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
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(REPLACE(comment_author_url, 'www.', ''), '/', 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 '@themenfreund.de%'
		AND comment_author_url NOT LIKE 'http://facebook.com/%'
		AND comment_author_url NOT LIKE 'https://themenfreund.de%'
		AND comment_author_url NOT LIKE 'http://twitter.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>
			<?php
			$i++;
			if($i%3==0) { ?>
 
			<?php
			}
		endforeach;
		$i=0;
		}
		?>
		</div>
			<?php
		} ?>

Eine Erklärung für den Code:

Zeile 1: Benennung der Funktion
Zeile 2: Globale WordPress-Datenbank wird angesprochen
Zeile 3: Zähler für die anzuzeigenden Bilder pro Reihe wird auf 0 gesetzt
Zeile 4: PHP wird geschlossen
Zeile 5: Div-Klasse Walloffame-Container wird geöffnet
Zeile 6 bis 17: Auswahl der Datenbanktabellen, aus denen die erforderlichen Werte entnommen werden sollen und welche Bedingungen die Werte erfüllen müssen, um angezeigt zu werden
Zeile 18: Übergabe der Werte aus der Abfrage von einer Variablen an die andere
Zeile 19: Wenn das Abfrage-Ergebnis leer ist
Zeile 20: Eröffnung der Schleife
Zeile 23 bis 41: Formatierung der Ausgabe und der Darstellung
Zeile 43 und 44: Hochzählen der Schleife nach jedem Durchlauf um 1 und setzen selbiger auf 0 wenn sie 3 Mal durchlaufen wurde
Zeile 48: Ende der Schleife
Zeile 49: Setzen der Schleife auf 0
Zeile 50: Schließen der Schleife
Zeile 52: Schließen von Walloffame_container
Zeile 54: Schließen der Funktion

Der CSS-Code für die Darstellung sieht folgendermaßen aus:

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
.walloffame_container {
    height: 100%;
	width: 60%;
    overflow: hidden;
	text-align: center;
	margin: 0 255px;
	}
.walloffame_stage {
    border: 0px solid #BBBBBB;
    border-radius: 13px 13px 13px 13px;
    box-shadow: 5px 6px 8px rgba(128, 128, 128, 0.8);
    float: left;
    line-height: 18px;
    margin: 8px;
	margin-right: 20px;
    padding: 0;
	height: 208px;
    width: 160px;
    opacity:0.6;
}
.walloffame_stage:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1%);
    transform: scale(1.1);
	opacity: 1;
	border: 0px solid #888888;
    box-shadow: 0 1px 5px rgba(64, 64, 64, 0.8);
	border-radius: 13px 13px 13px 13px;
}
.walloffame_stage img {
    border-radius: 13px 13px 13px 13px;
    border-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.walloffame_stage .walloffame_info {
    margin: 3px 5px 0;
    overflow: hidden;
    white-space: nowrap;
}
.walloffame_stage .walloffame_info .walloffame_name {
    font-size: 14px;
    font-weight: bold;
	text-align: center;
}
.walloffame_stage .walloffame_info .walloffame_total {
    font-size: 13px;
	height: 70px;
}
.walloffame_widgetstage {
    border: 1px solid #BBBBBB;
    border-radius: 13px 13px 13px 13px;
    box-shadow: 0 1px 5px rgba(128, 128, 128, 0.8);
    line-height: 20px;
    margin: 8px 5px;
    overflow: hidden;
    padding: 0;
	}
.walloffame_widgetstage:hover {
    border: 1px solid #888888;
    box-shadow: 0 1px 5px rgba(64, 64, 64, 0.8);
	border-radius: 13px 13px 13px 13px;
}
.walloffame_widgetstage .walloffame_avatar {
    float: left;
    margin-right: 18px;
}
.walloffame_widgetstage img {
    border-radius: 13px 13px 13px 13px;
    border-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.walloffame_widgetstage .walloffame_name {
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
}
.walloffame_widgetstage .walloffame_total {
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
}

Hier möchte ich nur die beiden speziellen Effekte hervorheben und erklären.

Die ausgegraute Darstellung erfolgt mit dem Code in Zeile 19. Mit 0.1 würde ein fast undurchsichtiger Nebel über die Bilder gelegt. In Zeile 27 wird das jeweilige Bidl beim Mouse over wieder klar angezeigt.

Das die jeweiligen Avatare beim überfahren mit der Maus vergrößert dargestellt werden, liegt an den Zeilen 22 bis 26. Für weitere Informationen zur Vergrößerung empfehle ich z. B. diese Seite

Ach ja: Der Fehler, weshalb sich die Bilder bislang beim MouseOver verschoben haben, lag an Zeile 9. Dort hatte ich ein border: 1px stehen, was die Verschiebung ausgelöst hat.

Zuletzt habe ich dann noch ein eigenes Seitentemplate erstellt, eine Seite im Backend erstellt und dieser das erwähnte Template zugewiesen.

Wie findet ihr meine vorerst endgültige Lösung für die Darstellung der Wall of Fame ohne Plugin?

Marcus
Über Marcus 703 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

5 Kommentare

  1. Hallo Marcus,

    da hast Du ja fleißig gewerkelt und Deine Wall of Fame gefällt mir richig gut. Ich musste zwar ein bisschen suchen … im Beitrag hast Du die Seite nicht verlinkt, oder habe ich Tomaten auf den Augen? 🙂

    Ich würde vielleicht nur noch die Abstände zwischen den einzelnen Bildern vergrößern.

    Offtopic: Ich hätte ja gerne ein paar Sternchen vergeben, aber die Bewertungsfunktion funktioniert bei mir irgendwie nicht.

    Gruß Sylvi

  2. Vielen, vielen Dank für diese tolle Anleitung, natürlich auch an Sylvi für die Idee.

    Ich habe das jetzt bei mir mal eingebaut. Meine erste eigene Ergänzung der functions.php – da bekommt man ja lustige Fehlermeldungen, wenn mal mal nicht aufpasst. Aber, es läuft jetzt, sogar mit Änderung der Darstellung (4-spaltig) uns responsiv arbeitet das auch noch.

    LG Thomas

Kommentar hinterlassen

E-Mail Adresse wird nicht veröffentlicht.


*


CommentLuv - verlinke einen deiner Blog-Artikel