Schlagwort-Archiv:

WordPress

Links und Videos der Woche (2011/5)

 

 

Nachtrag: Zum Tod von Gary Moore:

(Nicht mehr verfügbar.)

Gravatar Hovercards – samt Easter Egg

Gravatar dürfte den meisten mittlerweile ein Begriff sein – schließlich verbreiten sich die Bildchen sowohl bei Blog-Kommentatoren als auch in den Themes der Blogger immer weiter. Seit einiger Zeit bietet Gravatar aber nicht nur Bilder zu E-Mail-Adressen, sondern auch Nutzerprofile, die auch als „Hovercards“ angezeigt werden können, wenn man mit dem Cursor über dem Gravatar-Bild schwebt. Das kann dann so aussehen:

meine Gravatar-Hovercard

Nun hat Hans ein Easter Egg, also eine versteckte, meist lustige Programmfunktion, entdeckt: Wenn man mit der rechten Maustaste auf das Gravatar-Icon (das liegende G mit blauem Hintergrund) rechts oben in der Hovercard klickt, beginnen sich die Gravatare (und eventuell vorhandene weitere Bilder des Nutzers) zu drehen. Nett. :) (Auch wenn der Rahmen je nach Theme dabei etwas komisch aussieht…)

Wie man im Gravatar-Quellcode sehen kann, geht anstelle der rechten Maustaste auch die linke, wenn man gleichzeitig die Strg-, Alt- oder Meta-Taste drückt (letztere gibt’s auf PCs üblicherweise nicht, auf Macs sollte das alle 3 Zusatztasten abdecken). Dieses Osterei funktioniert bei mir unter Windows 7 mit Firefox, Chrome und Safari1, nicht aber mit Opera oder IE 8.

Hans‘ heutigen und des Chaosweibs gestrigen Beitrag hab ich auch zum Anlass genommen, zum einen mein Gravatar-Profil endlich mit Inhalt zu bestücken – das geht naheliegenderweise bei Gravatar, wenn man sich dort einloggt –, zum anderen die Hovercards auch bei mir einzubinden.

Beide haben dazu schon dieses Plugin verlinkt sowie Hans diese Selbstbau-Anleitung, die nur eine einzige Codezeile erfordert, mit der ein JavaScript2 von Gravatar nachgeladen wird.

Es sei denn, man will es etwas differenzierter: Da Gravatare nur unter einem Beitrag oder unter einer Seite zu sehen sind (wenn man sie nicht auch in der Sidebar z.B. bei den neuesten Kommentaren verwendet), braucht man die Datei auf der Start- oder den Archivseiten nicht, deswegen hab ich das hier in eine Funktion, die von header.php aus aufgerufen wird, eingebaut:

//Gravatar Hovercards:
if (is_singular()) { 
    echo '<script type="text/javascript">var description = \'\';</script>'."\n";
    wp_enqueue_script( 'gprofiles', 'http://s.gravatar.com/js/gprofiles.js', array( 'jquery' ), '', true );
}

(Geht auch direkt in header.php; muss halt wie üblich an einer passenden Stelle innerhalb eines <?php?>-Blocks stehen.)

Und da is_singular(), das die Ausgabe eben auf Beiträge, Seiten oder Attachments beschränkt, erst funktioniert, wenn WordPress sich ordentlich initialisiert hat, kann dieser Code nicht direkt (d.h. außerhalb einer Funktion) in der functions.php stehen.

Die echo-Zeile sorgt dafür, dass die Hovercard (wenn auch nicht die Easter-Egg-Rotation) im Internet Explorer funktioniert, denn dort gibt es bei manchen Themes (so auch meinem) sonst Probleme – das wird in diesem Forenthread am Ende beschrieben.

So, was haltet ihr von der Hovercard – brauchbar? nett? nervig? Ressourcenverschwendung?

  1. Auf dem iPad fehlen allerdings die Tasten; getippt halten bringt nichts. Aber immerhin geht die Hovercard an sich. []
  2. Klar, noch ein Skript nachzuladen, kostet auch wieder etwas Ladezeit, aber sei’s drum… []

Ausgabe mehrfacher Spammer

Nach längerer Zeit wieder ein kleiner WordPress-Codeschnipsel von mir, diesmal nicht für eure Besucher, sondern für diejenigen von euch, die ein Spam­erkennungs­plugin wie Akismet einsetzen und im Backend immer wieder mal auf die Liste der aufgelaufenen Spams schauen (um zu sehen, ob nicht doch ein false positive, ein falsch erkannter echter Kommentar dabei ist) – und dabei Muster erkennen wollen, etwa ob besonders viele Spams von einem bestimmten Server oder für eine bestimmte Site kommen und dafür ggf. besondere Maßnahmen ergreifen wollen: z.B. bestimmte Server gleich per .htaccess sperren oder die Blacklist von WordPress zu füllen. Oder einfach neugierig sind.

Dieser Codeschnipsel gibt über der Spam-Tabelle eine zusätzliche Tabelle aus, in der mehrfache IPs, Namen, Emails und URLs aufgelistet werden:

Spam-Statistik

Wobei ein Klick auf jeden Eintrag die Suchfunktion startet, also alle zugehörigen Spam-Kommentare anzeigt.

Der folgende Code kann z.B. in ein eigenes kleines Plugin geschrieben werden (ich hab für solche Kleinigkeiten ein eigenes Sammel-Plugin); die functions.php des Themes geht genauso. (Auf jeden Fall, wie üblich, innerhalb von <?php?>.)

//Infos auf Kommentar/Spam-Seite
$ag_comment_page_counter = 0;

function ag_comment_page ($comment_status) {
    global $wpdb,$ag_comment_page_counter;
    if (!is_admin()) return;
    if ($ag_comment_page_counter>0) return;
    $ag_comment_page_counter++;
    if ($comment_status=='spam') {
        echo '<div id="ag-comment-stats">';
        echo '<table class="widefat" cellspacing="0"><thead><tr><th>Mehrfache IPs</th><th>Mehrfache Namen</th><th>Mehrfache Emails</th><th>Mehrfache URLs</th></tr></thead>'."\n<tbody><tr>";
        foreach (array('comment_author_IP','comment_author','comment_author_email','comment_author_url') as $item) {
            $stuffs = $wpdb->get_results("
                SELECT * FROM (
                    SELECT $item AS stuff,COUNT(*) AS count
                    FROM $wpdb->comments
                    WHERE comment_approved='spam'
                    GROUP BY stuff
                    ORDER BY count DESC, stuff ASC) AS allspam
                WHERE count>1");
            echo "<td>";
            if (count($stuffs)==0) echo "-"; else
            foreach ($stuffs as $stuff) {
                if ($item=='comment_author_url') $stuff->stuff=esc_url($stuff->stuff);
                if ($stuff->stuff!='')
                    echo '<a href="edit-comments.php?s='.htmlentities($stuff->stuff).'&mode=detail&comment_status=spam">'.
                        htmlentities($stuff->stuff)."</a> (".$stuff->count.")<br/>";
            }
            echo "</td>";
        }

        echo '</tr></tbody></table></div>'."\n";
        echo '<script type="text/javascript">
            jQuery(\'.search-box\').after(jQuery(\'#ag-comment-stats\'));
            </script>';
        //echo '</div></a>'."\n";
    }
}
add_action ('manage_comments_nav',ag_comment_page);

Eingebunden wird das ganze über die Aktion manage_comments_nav, die anscheinend die einzige Möglichkeit ist, einfach etwas in die Kommentar-Seiten einzubinden; da die Aktion für die Navigation sowohl vor als auch nach der Liste aufgerufen wird, verwende ich einen kleinen Zähler, um die Daten nur einmal auszugeben. Und das auch nur dann, wenn es sich um die Ansicht der Spam-Kommentare handelt (if ($comment_status=='spam')) und nicht um die anderer Kommentare.

Es wird dann erstmal der Tabellenkopf ausgegeben, bevor eine Schleife über die vier interessanten Punkte diese dann jeweils aus der Tabelle wp_comments liest (innere SELECT-Abfrage, aus der die äußere dann die nur 1x vorkommenden verwirft) und ausgibt. Am Schluss kommt noch ein bisschen JavaScript, um die Tabelle an eine schönere Stelle als zwischen Buttons und Seitenzahlen zu verschieben.

Nun, ich weiß nicht, wie nützlich dieser Code im Endeffekt wirklich ist, aber zumindest die Statistikverliebten werden ein paar Minuten damit unterhalten werden.^^

Dieser Code funktioniert übrigens nicht nur mit Akismet, sondern auch mit anderen Antispamplugins, die die Spams abspeichern und nicht sofort löschen/blockieren – Antispam Bee mit entsprechender Einstellung etwa. Und ich werde künftig wohl auch auf die Biene setzen – sie summt schon testweise in meiner Esoterik-Shop-Satire, und das Kommentar­vorschau­plugin hab ich auch schon schnell angepasst (mehr dazu ein anderes Mal) – und Akismet in Rente schicken. Es macht seine Arbeit an sich nicht schlecht, von wenigen false positives und false negatives pro Monat abgesehen (von Datenschutzbedenken will ich hier gar nicht anfangen), aber mit den zusätzlichen Informationen, die Version 2.5 eingeführt hat, begann Akismet auch, die wp_commentmeta-Tabelle mit Statistik-/History-Einträgen (akismet_as_submitted, akismet_history, akismet_result) zuzumüllen, die anscheinend auch für schon lange gelöschte Kommentare (noch?) nicht bereinigt werden.

Etwas fürs Archiv (2):
Mehrfachauswahl von Schlagwörtern

TagsWie kürzlich angekündigt, gibt’s jetzt den Code für die zweite Sonderfunktion meiner Archivseite, die Mehrfachauswahl von Schlagwörtern.1 Auch dies ist wieder so ein Fall, wo man sich fragen mag, ob es überhaupt allzu häufig verwendet wird, sind doch schon gewöhnliche Schlagwort-Wolken mancherorts dahingehend in der Kritik. Aber andererseits mag es auch mal nützlich sein, also warum nicht?

WordPress bietet nämlich von Haus aus die Möglichkeit, mehrere Tags (neudeutsch: Schlagwörter2) – aber nicht Kategorien – in der Abfrage per UND und ODER zu verknüpfen (wenn auch nicht beides gleichzeitig), d.h. dass entweder nur die Beiträge kommen, die alle gewählten Schlagwörter enthalten (UND) oder die mindestens eines enthalten (ODER). Dazu werden sie in der URL mit + bzw. , aneinandergehängt – was sich ohne weiteres auch durch manuelle Eingabe nutzen lässt, wenn keine komfortablere Möglichkeit wie der hier vorgestellte Code vorhanden ist.

Die Schlagwortauswahl

Wie der beim letzten Mal erwähnte Monatsarchiv-Code steht dieser auch direkt im Inhalt der Seite (im HTML-Editor) – dank des Exec-PHP-Plugins. Mehr dazu dort. Hier dier Tag-Code:

<form id="tagform" action="/" method="get">
<select id="tagsel" multiple="multiple" size="20">
    <?php 
$tags = get_tags(''); 
foreach ($tags as $t) {
  echo '<option value="'.$t->slug.'">'.$t->name.' <small style="color:#777;">('.$t->count.')</small></option>'."\n";
}
?>
</select>
<style type="text/css"> 
#tagand + label + br { display:none; }
</style>
Bei Mehrfachauswahl (max.10): <input type="radio" name="tagcomb" id="tagand" value="+" checked="checked"/><label for="tagand">UND</label> <input type="radio" name="tagcomb" id="tagor" value=","/><label for="tagor">ODER</label>
<script type="text/javascript"><!--
function dotags () {
  var tagcomb = (document.getElementById("tagand").checked ? "+" : ",");
  var selected = '';
  var cnt = 0;
  ob = document.getElementById("tagsel");
  for (var i = 0; i < ob.options.length; i++) 
    if (ob.options[i].selected) {
      if (cnt<10) {
        if (selected!="") selected += tagcomb;
        selected += ob.options[i].value;
        cnt++;
      }
    }
  if (selected=="") {
    alert ("Kein Schlagwort ausgewählt!");
  } else {
    document.location.href = "/tag/"+selected+'/';
  }
}
function cleartags() {
  ob = document.getElementById("tagsel");
  for (var i = 0; i < ob.options.length; i++) 
    ob.options[i].selected = false;
}
//--></script>
<input type="button" onclick="javascript:dotags();" value=" Aufrufen " style="font-weight:bold;"/> &nbsp; <a href="javascript:cleartags();">Auswahl aufheben</a>
<noscript style="color:red;">Für diese Funktion ist JavaScript erforderlich.</noscript>
</form>

Diesmal benötigen wir nichtmal eine eigene Datenbank-Abfrage, denn die WordPress-Funktion get_tags() liefert uns schon, was wir benötigen, nämlich alle Schlagwörter, die wir als options einer Auswahlliste (select multiple) ausgeben, gefolgt von den Radiobuttons für UND und ODER. Die eine Zeile CSS-Style mit #tagand + label + br verhindert, dass der Zeilenumbruch, den WordPress automatisch hinter dem ersten Label einfügt, angezeigt wird, da ich die beiden Radiobuttons gerne nebeneinander hätte.

Es folgen dann zwei kleine JavaScript-Funktionen, die bei Klick auf den „Aufrufen“-Button (function dotags()) bzw. den „aufheben“-Link (function cleartags()) aufgerufen werden. Letzterer hebt einfach die Auswahl auf, naheliegenderweise, und bedarf wohl keiner näheren Betrachtung.

dotags() ermittelt zunächst das für die URL zu verwendende Verknüpfungszeichen + für UND und , für ODER, wie sie WordPress erwartet, und geht dann die options durch, um die ausgewählten in der Variablen selected aneinanderzuhängen – der Übersicht halber beschränkt auf maximal 10 Schlagwörter – und schließlich den Browser zu veranlassen, die entsprechende Seite à la /tag/schlag1+wort2/ aufzurufen. (Wer eine andere URL-Struktur verwendet, muss dies natürlich anpassen; für „unschöne“ wäre das etwa ?tag=schlag1+wort2.)

Die Überschrift des Ergebnisses

So, damit kann man also eure Schlagwortarchive nach Belieben aufrufen – ein kleines Manko bleibt aber noch: die Überschrift der Archivseite. Denn euer Theme wird i.d.R. die WordPress-Funktion single_tag_title() benutzen (im entspr. Zweig der archive.php) und dadurch nur das erste Schlagwort ausgeben, im generischen Beispiel schlag1+wort2 also „Schlagwortarchiv: Schlag 1“ und nicht „Schlagwortarchiv: Schlag 1 UND Wort 2“. (Die eigentlichen Beiträge darunter sind trotzdem die richtigen.)

Natürlich hab ich auch dafür eine Funktion – diesmal wieder in der functions.php des Themes, aufgerufen mit <?php echo ag_multi_tag_title();?> in archive.php für die schön formatierte Überschrift und mit ag_multi_tag_title (false) für das title-Tag im HTML-head, damit auch das Browserfenster die passende Überschrift hat.

<?php
function ag_multi_tag_title ($pretty = true) {
    $tag_slug = get_query_var('tag');
    $tag_slug = str_replace(" ","+",$tag_slug);
    if (strpos($tag_slug,",")===false) {
        $tags = explode ("+", $tag_slug);
        $tagcomb = __('and');
    } else {
        //bei , wird aus + bzw. Leerz. auch ODER
        $tags = explode (",", str_replace("+",",",$tag_slug));
        $tagcomb = __('or');
    }
    if ($pretty) $tagcomb = ' <small style="font-weight:normal; font-variant:small-caps;">'.$tagcomb.'</small> ';
        else $tagcomb = ' '.$tagcomb.' ';
    $tagstr = '';
    foreach ($tags as $t) {
        $tag = get_term_by ("slug",$t,"post_tag",OBJECT);
        if ($tagstr!='') $tagstr .= $tagcomb;
        if ($tag) $tagstr .= $tag->name;
        else $tagstr .= ($pretty?'<acronym title="unbekanntes Schlagwort" style="color:red;">'.htmlspecialchars($t).'</acronym>' : htmlspecialchars($t));
    }
    if ($tagstr=='') return single_tag_title(); else
    return $tagstr;
}
?>

Hier wird zunächst der tag-Parameter aufgedröselt, d.h. an + bzw. , getrennt und dabei auch das ausgeschriebene Wort vorbelegt ($tagcomb). In der Schleife darunter wird mittels der WordPress-Funktion get_term_by() der schöne Name (z.B. „Schlag 1“) zur slug, dem URL-Bestandteil (z.B. „schlag1“), ermittelt und das ganze aneinandergehängt und am Ende zurückgegeben. (Falls irgendwas schiefgelaufen sein sollte, rufen wir halt doch single_tag_title() auf, man kann ja nie wissen…)

Und das war’s dann auch mit dem zweiten Archiv-Code. Wie immer: Wer Fragen, Anregungen, Verbesserungsvorschläge o.ä. hat, darf sie ruhig äußern…

  1. Die Sache mit WP.com-Stats für die beliebtesten Beiträge muss noch etwas warten… []
  2. oder andersrum ;) []

Änderüngchen

Manchmal scheinen Änderungen in Blogs gehäuft aufzutreten, teils kleinere, teils größere – und das nicht nur wegen eines größeren WordPress-Updates wie jetzt 3.0 Auch bei mir gab’s jüngst ein paar Kleinigkeiten, und ich will auch die Gelegenheit nutzen, euch, meine Leser, nach eurer Meinung zu fragen.

Twitter Doch zunächst zu den Neuerungen: Da wäre zum ersten ein Eingabefeld für den Twitter-Namen beim Kommentieren, damit einhergehend eine kleine Neuanordnung der Felder zweispaltig nebeneinander. Der Twitter-Name wird mit der E-Mail-Adresse verknüpft, sodass er auch bei älteren Kommentaren erscheint. (Das bedeutet natürlich auch, dass es mit leerem E-Mail-Feld keinen Twitter-Link gibt.)

Das Plugin, das sich (derzeit) darum kümmert, ist TwitterLink Comments – mit leichten Modifikationen, damit es auch mit leeren E-Mail-Adressen umgehen kann und damit der Twitter-Name bei wiederkehrenden Kommentatoren schon im Eingabefeld vorbelegt ist. Ich werd’s aber wohl noch so weit abspecken, dass ich die ganzen Automatismen und dazugehörigen Konfigurations­möglichkeiten, die ich nicht brauche, rausschmeiße und den Rest ins Theme integriere – unnötigen Ballast abwerfen eben…

Entsprechend wurde auch die Kopfzeile der Kommentare etwas umgestaltet: der Name ist größer, darunter der Twitter-Link, und die anderen Angaben sind jetzt zweizeilig und rechtsbündig. (Und die Buttons unter den Eingabefeldern wurden auch leicht aufgehübscht. Zumindest auf brauchbaren Browsern.^^)

Zum anderen gibt’s nun unter dem Kommentarfeld eine einblendbare Hilfe bzw. ein paar Hinweise zum Kommentieren – die entscheidende Idee dazu lieferte Robert (bei dem’s gleich größere Änderungen gab) – besser einblendbar und ausführlich als ständig zu sehen und (um nicht zu aufdringlich zu sein) knapp. Und so gibt’s jetzt hier sechs Punkte von „Benimm dich!“ bis zu den erlaubten HTML-Tags, wie ihr unten sehen könnt.

Bei deaktiviertem JavaScript wird der Hilfe-Block übrigens immer angezeigt – dafür der Link zum Aufklappen nicht. Alles in Allem kümmert sich darum dieser jQuery-JavaScript-Code:

jQuery('.comment-help').hide();
jQuery('.comment-help-link').show().click(function () {
    jQuery('.comment-help').toggle(250);
    return true;
});

Und die beitragsspezifischen Flattr-Buttons sind jetzt nicht mehr auf Index- und Archiv-Seiten unter jedem Beitrag zu finden – nicht zuletzt auch der Ladezeit wegen –, sondern nur noch in der Einzelansicht; dafür gibt’s einen im Footer für das Blog insgesamt. Aber irgendwie scheint der Flattr-Hype schon nach diesen wenigen Wochen abgeebbt zu sein… naja, mal sehen, wie sich das entwickelt. Ich bin ja erst seit Anfang Juni dabei, und den Monat mach ich mindestens noch voll. Und insgesamt 6 Flattrings (oder wie das heißt) hab ich ja schon bekommen… (Falls jemand noch Flattr-Invites braucht, ich hätte noch welche übrig.)

So, das waren die bisherigen Neuerungen, jetzt die Überlegungen zur Zukunft. Gut, am Ende mach ich wie so ziemlich jeder zwar doch das, was ich selbst für richtig halte, aber es wäre natürlich auch töricht, nicht auf die Wünsche der Leser und Kommentatoren zu hören – und da diese selten Wünsche von sich aus äußern, frage ich euch hiermit. Also: Welche Wünsche hättet ihr in Bezug auf das Aussehen und die Funktionen meines Blogs?

  • Wie ist es mit der Schriftgröße, dem Zeilenabstand und der Schriftart im Haupttext und in der Sidebar? Zu klein? Zu eng? Richtig? Zu groß?

    Wobei es da auch Unterschiede gibt je nachdem, ob ihr Microsofts aktuelle C-Standardschriften Calibri, Cambria & Co installiert habt oder nicht (und deswegen mit Arial o.ä. vorlieb nehmen müsst). Hier ein kleiner Vergleich: Links mit C-Schriften und ClearType-Kantenglättung, rechts mit Arial und ohne Glättung:

both

  • Soll mehr in die Sidebar, weniger in die Sidebar? Ganz auf eine Sidebar verzichten wie Knut will ich allerdings nicht…
  • Soll mehr in den Footer, weniger in den Footer?
  • In der Einzelansicht sind oben und unten Links zum « vorherigen und zum » nächsten Beitrag. Sinnvoll? Zu viel?
  • Und was für Gedanken kommen euch sonst bei diesem Thema?

Nun, dann bin ich mal auf eure Äußerungen gespannt…