medioman

Hartmut 27. August 2009

Sie sind bekannt und oft verpönt. Diese schicken Browser-Erweiterungen, die sich beim Firefox oder Internet Explorer oben einnisten und einen kleinen Mehrwert bieten sollen und wollen. Am verbreitetesten und bekanntesten dürfte die Google Toolbar sein. Und so mancher hat sich sicherlich auch schon etwas merkwürdigere Erscheinungen dieser Art “eingetreten”, manchmal kommerziell, manchmal welche, die den Eindruck vermitteln, gleich noch ein paar Viren und Würmer im PC mit installiert zu haben.

Dabei kann so eine Toolbar schon sinnvoll beim Surfen sein, nämlich dann, wenn sie das tut, was man wirklich von ihr will.

Wie wäre es z.B. mit einer speziellen medioman Toolbar. Ein Klick und Du bist direkt auf dieser Webseite, ein weiterer und Du siehst die neusten RSS-Feeds oder meine neuesten Twitterergüsse oder Du landest direkt auf meiner Facebook-Seite, bei meinem heißgeliebten MafiaWars-Spiel oder sonstwo, wo ich mich gerne herumtreibe. Auch die obligatorische Google-Suche ist integriert, nur, dass Du jetzt statt des Google-Logos das des medioman siehst. Nebenbei kannst Du noch das Wetter in Berlin ablesen oder Dein E-Mail-Postfach checken lassen und Radio per Internetstream (mein Lieblingssender ist das Spreeradio) hören.

Gut, wer sich meine Toolbar installieren möchte, muss wohl schon ein Hardcore-Fan von dieser Webseite sein und ich stelle ja kaum den Anspruch, dass sich jeder, der das hier liest, sich die Toolbar auch installiert. Wer es aber tut und sei es nur zu Testzwecken, dem sage ich, sie lässt sich sauber und ohne Rückstände wieder vom System entfernen.

Und hier geht es zum Donload-Link.

Die Toolbar funktioniert – wie oben bereits erwähnt – sowohl im Internet Explorer als auch als Erweiterung im Firefox bzw. allen Mozilla basierten Browsern.

Klar ist das alles keine Magie sondern ein Dienst, der das anbietet. Dieser nennt sich Conduit und dort kann man sich seine eigene Toolbar erstellen und sie mit seinen eigenen Links und Erweiterungen füttern. Sie ist wirklich einfach zu konfigurieren und einmal installiert, kann sie Live upgedatet werden, bis sie das macht, was man von ihr erwartet.
Toll ist z.B. auch, auf einfache Art und Weise einen Chatraum zu installieren, um mit seinen Besuchern Live zu kommunizieren.

Die speziellen Funktionen können dann noch über die Optionen der Toolbar konfiguriert werden. So können neben dem Internetradio, dem Wetterbericht auch weitere Applikationen, wie Office-Dokumente oder eigene Anwendungen auf die Toolbar gelegt und dann von dieser aufgerufen werden.

Probiert es einfach aus. Bei Fragen stehe ich gerne zur Verfügung.
Übrigens ist das nach all der Werbung der letzten Tage keine solche. Das soll – auch wenn es anders klingt – einfach nur ein Software-Tipp sein :)

Tags: Internet, Software

• Projekte
• 11 Kommentare

Hartmut 7. August 2009

Erst seit einigen Tagen habe ich diese Erweiterung im Einsatz und ich möchte sie schon jetzt nicht mehr missen. Im Prinzip ist wieder Facebook und seine vielen tollen Spiele schuld. Allen voran dieses geniale Mafia Wars. Nun ist es aber leider so, dass diese Spiele einen immensen Aufwand an Zeit verschlingen, weil man im Prinzip dauernd etwas zu tun hat. Also suchte ich nach einer Möglichkeit, gewisse Dinge zu automatisieren.

Und genau hier kommt Greasemonkey ins Spiel. Mit dieser Erweiterung lassen sich JavaScript-Dateien im eigenen Browser ausführen. Einen umfassenden Überblick der Funktionen gibt es bei Wikipedia.

Zunächst muss also die Erweiterung selbst installiert werden (Klick hier) und anschließend kommen die sogenannten Scripte zum Einsatz. Es gibt unglaublich viele, die man sich hier im Einzelnen durchsehen kann. Ansonsten lohnt es sich, bei Google mal nach “greasemonkey best scripts” zu suchen.

Das ganze klingt sehr technisch, aber es sind absolut keine Programmierkenntnisse erforderlich, um diese Erweiterung nutzen zu können.
Hier kommt mal so zum Eingewöhnen meine kleine Liste der Scripte, die ich bei mir u.a. installiert habe:

Facebook Mafia Wars Autoplayer
Das ist wirklich gleich eine echte Kanone. Denn mit diesem Script lässt sich wirklich alles perfekt automatisieren. Jobs und Kämpfe werden ohne eigenes zutun erledigt, auf die Gesundheit wird geachtet. Manche Sachen, wie das Geld einzahlen oder auch nach erledigten Jobs den nächsten auszuwählen, funktionieren nicht richtig, aber alleine die Auto-Fight_Option ist genial.

Facebook Fixer
Dieses Script ist unglaublich flexibel und hat eine ganze Menge Optionen, die sich komfortabel im Facebook Profil unter Einstellungen/Facebook Fixer vornehmen lassen können. Dazu gehören die feste Verankerung der Menü-Leiste am oberen Bildschirmrand oder die Vergrößerung von Bildern beim drüberfahren mit der Maus.

Facebook Colorizer
Sehr witzig. Anhand des Userbildes wird das komplette Facebook-Profil in den passenden Farben dargestellt, so dass jede Facebook-Seite etwas anders aussieht und damit eine individuelle Note bekommt.

YouTube Googler
Das Script schaltet sich automatisch auf den Seiten von YouTube ein und vergrößert das Video, so dass YouTube wie Google Videos aussieht. Sehr angenehm.

Google Image Relinker
Klasse Teil. Bei der Google-Bilder-Suche werden die Vorschaubilder beim Drüberfahren mit der Maus vergrößert. Ein Klick in die Vorschau und man hat das Bild in voller Größe im Browser.

Pre-fill Comments
Mit diesem Script entfällt das lästige Schreiben von Namen, E-Mail und URL in Blogs und Foren. Eine einfache (konfigurierbare) Tastenkombination, voreingestellt ist ALT-C, und schon sind die Pflichtangaben ausgefüllt.

Ab hier höre ich mal auf. Vielleicht hat ja der eine oder andere noch einige Tipps und Vorschläge. Übrigens gibt es auch für Twitter und für weitere Facebook-Spiele reichlich nützliche Scripte, wie gesagt, die Menge ist kaum zu überschauen, aber es macht echt tierischen Spaß, sich mit der Erweiterung auseinander zu setzen.

Verfolge die weitere Diskussion im Forum - (5) Beiträge

Tags: Addon, Firefox

• Projekte
• 3 Kommentare

Hartmut 4. August 2009

Und wieder ist ein kleines aber wichtiges Update für WordPress erschienen. So, wie es beschrieben wird, liegt in der älteren Version ein schwerwiegender Fehler in der Rechteverwaltung vor. Ich habe die Aktualisierung heute mal nicht über die automatische Updatefunktion genutzt sondern mir das Upgrade-Paket direkt von WordPress Deutschland herunter geladen. Das funktionierte binnen Sekunden und auch ohne weitere Probleme.

Tags: Wordpress

• Projekte
• 4 Kommentare

Hartmut 17. Juli 2009

Der liebe Luigi bat mich vor einigen Tagen, mal das o.g. Plugin näher vorzustellen und gerne möchte ich nun seiner Bitte nachkommen.

Wer das Plugin gleich in Action sehen möchte, der kann sich das vorab auf meiner Seite Twitter bei mir ansehen. Im Prinzip ist es nichts anderes, als dass es die letzten Aktionen bei Twitter in recht hübscher Darstellung aufbereitet.

Für mich als Administrator ändert sich auf der Seite lediglich eine Kleinigkeit: Ich kann von dort auch direkt via Eingabefeld twittern:

Das kann ich zwar auch im Backend, aber so direkt auf der eigenen Seite macht es einfach wesentlich mehr Laune.

Warum ich mich aber letztlich für dieses Plugin entschied, war, dass es mir vollkommen frei in die Hände legt, es so zu gestalten, wie es mir gefällt. Das heißt, es gibt auf der Plugin-Seite eine kleine Hilfe, welche CSS-Anweisungen in die eigene style.css einzutragen sind, damit es einigermaßen gut aussieht.

Nach der Installation und Aktivierung des Plugins sollte man sich wieder eine eigene Template-Datei erstellen. Ich habe das zwar vor einigen Tagen für die Links-Seite erklärt, aber gerne zeige ich den vollständigen Code für die Twitter-Seite:

<?php
/*
Template Name: Threaded Twitter
*/
?>
<?php get_header(); ?>    
<div id="content">
<div id="primarycontainer">
<div id="primarycontent">
<div id="contentarea"><!-- Primary content area start -->
<div class="post">
<h4><a href="&lt;?php the_permalink() ?>" rel="bookmark" title="Permanenter Link: <?php the_title(); ?>"><?php the_title(); ?></a></h4>
<div class="contentarea">
    <div class="twitter-tweedles">
    <h4><a href="http://twitter.com/habir" title="Folge mir bei Twitter" target="_blank">Folge mir</a></h4>
    <?php
    if (function_exists('thread_twitter')) {
    thread_twitter();
    }
    ?>
    </div>
</div>
</div>
</div><!-- primarycontent end -->
</div><!-- primarycontainer end -->
</div><!--content end -->
<?php get_sidebar(); ?>
<?php get_footer();?>

Die wichtigste Funktion habe ich etwas eingerückt, damit zu sehen ist, wie ich das ganze eingebunden habe.

Meine CSS-Anweisungen in der style.css sehen nun wie folgt aus:

/* Thread Twitter Start */

.post .twitter-tweedles {
background : #e2f2fb;
border : 1px dashed #3fcdeb;
padding : 10px 0 0;
}
.post .twitter-tweedles h4 {
background-image : none;
}
.post .twitter-tweedles h4 a {
background : url('images/twitterme.png') no-repeat;
padding-left : 22px;
padding-right : 50px;
height : 128px;
line-height : 128px;
display : block;
font-size : 11px;
float : right;
}
#thread_twitter ul {
margin : 0 12px 0 10px !important ;
margin : 0 10px;
}
#thread_twitter ul li {
background : #fcfcfc;
padding : 0;
float : left;
list-style-type : none;
border : solid #ccc;
border-width : 1px !important ;
border-width : 1px 0;
width : 100%;
padding-top : 10px;
margin-bottom : 10px;
}
#thread_twitter img {
float : left;
padding : 0 10px 0 0;
margin : 0 0 10px 10px;
}
#thread_twitter .twitter_source {
color : #999;
font-family : georgia;
font-style : italic;
font-size : 10px;
}
#thread_twitter .twitter_source a {
color : #999;
}
#thread_twitter .twitter_text {
margin-bottom : 5px;
display : block;
padding-left : 70px;
padding-right : 10px;
}
#thread_twitter .twitter_reply {
background : url('images/icons.gif') no-repeat 0 -112px;
padding-left : 22px;
padding-right : 10px;
height : 16px;
line-height : 16px;
display : block;
font-size : 11px;
float : right;
}
#thread_twitter .loading {
padding : 0 10px;
font-size : 11px;
}
#thread_twitter textarea {
height : 15px;
width : 70%;
}

/* Thread Twitter Ende */

Damit sieht es dann so aus:

Das geht weit über das hinaus, was der Programmierer als Grundkonfiguration vorschlägt, aber genau das wollte ich ja auch aufzeigen, wie viel Potenzial das Plugin beim Styling hat.

So, nun hoffe ich, dass ich wieder zur allgemeinen Verwirrung beigetragen habe. Ich werf den Brocken mal in die Runde. Wer fragen hat, der soll sie stellen oder für immer schweigen. :)

Tags: CSS, Plugin, Wordpress

• Projekte
• 7 Kommentare

Hartmut 7. Juli 2009

Seit 2 Tagen haben sich die Seitenaufrufe hier im Blog nahezu verdoppelt. Ich will mich darüber nicht beklagen, denke aber, dass das irgendwie nicht mit rechten Dingen zugeht und stelle das ganze mal zur Diskussion, weil ich nicht weiß, was das ganze für Auswirkungen hat.

Ich habe mich auch genau vor 2 Tagen von den beiden Statistik-Tools “Google Analytics” und “StatPress Reloaded” getrennt. Meine Auswertungen kann ich damit lediglich auf die von blogoscoop und auf ourstats stützen. Nun zeigen ja beide recht identische Werte an. Bei Ourstats kann ich zudem noch genau erkennen, auf welche Seiten da am meisten zugegriffen wurde. Dabei war es am Sonntag voll die Startseite mit 596 bzw. allein in der Zeit von 16:00 Uhr bis 17:00 Uhr mit 375 Zugriffen. Gestern verteilten sich die Klicks auf mehrere Artikel, Artikel, die eigentlich bislang keine große Relevanz hatten.
So komme ich im Prinzip zu dem Schluss, dass sich da ein Spambot irgendwie festgesetzt hat, der immer wieder auf einen bestimmten Artikel einwirkt. Ich weiß nicht, ob das schon als ein Hackversuch gewertet werden kann.

Was mich jetzt wirklich interessiert, was das ganze für negative Auswirkungen haben kann. Die positiven, bei blogoscoop oder Wikio in den “Charts” zu steigen, hören sich ja auf den ersten Blick ganz gut an, aber ich könnte mir vorstellen, dass Google z.B. bei Manipulationsversuchen, was die sog. Page Impressions angeht, schon sehr empfindlich reagiert und gar mit Abstrafung droht.

Nun möchte ich ungern die IP-Adressen der Besucher loggen. Genau aus dem Grunde habe ich mich ja von Analytics getrennt und ich weiß auch nicht, ob ich überhaupt Handlungsbedarf habe. Daher stelle ich genau diese Frage mal in den Raum.

Tags: Statistik

• Projekte
• 2 Kommentare

Hartmut 5. Juli 2009

Tags: Design, Musik

• Projekte
• 2 Kommentare

Hartmut 29. Juni 2009

Durch den tollen Artikel beim plerzelwupp bin auch ich ins Grübeln gekommen, was ich mit meiner mehr als sträflich vernachlässigten Blogrolle so veranstalten sollte. Ich habe sie schon aus dem Grunde nie so recht gepflegt, weil sie mir einfach auf der Seitenleiste zu lang wurde.

Die zufällige Ausgabe von Links mag ich auch nicht so besonders, denn ich bin schon einer, der gerne bei anderen guckt, ob ich nicht einen Link auf deren Blog-Liste habe und manchmal ja und manchmal nein, gefällt mir irgendwie nicht.
Was mich auch gegen die reine Blogrolle auf der Seitenleiste trieb, ist dieses hübsche Plugin, welches die Top-Kommentatoren anzeigt. Irgendwie doppelt gemoppelt finde ich, denn die meisten sind ja auch meine Link-Tipps.
Also habe ich mich für die Seitenleiste für die Variante der Blog-Vorstellung mittels des Plugins blogintroduction via Websnapr entschieden.

Nichts desto trotz will ich auch eine gepflegte Link-Liste anbieten. Diese befindet sich jetzt in der oberen Seitennavigation mit Namen Links.
Ich wollte mit Absicht kein Plugin hierfür installieren, um mich an den von WordPress zur Verfügung gestellten Conditional Tags zu probieren.
Die dort aufgeführte Blogroll ist wegen der besseren Übersicht in tabellarischer Form aufgelistet.
Das Styling dieser Liste habe ich zum Teil mit neuen CSS3-Befehlen versehen. So ist diese Liste in jeder Zeile verschiedenfarbig, was aber nur im Firefox und in Opera dargestellt wird. Der IE8 spielt da überhaupt nicht mit und zeigt die Liste weiterhin einfarbig an. Der 3D-Effekt mit runden Ecken und Schatten wird einzig allein vom Firefox dargestellt.

Jetzt stellt sich für mich die große Frage, wie und wo erkläre ich diese Veränderungen für den interessierten Leser im Einzelnen.
Am besten von vorne, oder?

1. Ein Seiten-Template erstellen

Um lediglich die Liste darzustellen, wird eine neue Seite benötigt. Diese sollte aber keine Standard-Seite sein sondern ein sog. Template. Eine Vorlage also, die alles beinhaltet, was dargestellt werden soll.
Jedes Seiten-Template befindet sich im Theme-Ordner. Meines nennt sich page-links.php. So eine Vorlage beginnt immer mit folgender Syntax:

<?php
/*
Template Name: Links
*/
?>

Wichtig ist hierbei der Template Name. Dieser wird später beim Erstellen einer neuen Seite im Backend von WordPress bei den Seiteneigenschaften genau so angezeigt. Den Rest des Inhalts der Vorlage sollte man sich seiner – sofern vorhanden page.php – oder der index.php entnehmen. Im Prinzip muss alles zwischen den beiden DIV-Tags, die für das übrige Seitenlayout stehen, eingefügt werden. Als Beispiel hier mal mein komplettes Link-Template:

<?php
/*
Template Name: Links
*/
?>
<?php get_header(); ?>    
<div id="content">        
<div id="primarycontainer">
<div id="primarycontent">
<div id="contentarea"><!-- Primary content area start -->
<div class="post">
<h4><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanenter Link: <?php the_title(); ?>"><?php the_title(); ?></a></h4>                
<p><?php edit_post_link(); ?></p>
<div class="contentarea">
XXXXXX    
</div>
</div>
</div><!-- primarycontent end -->
</div><!-- primarycontainer end -->
</div><!--content end -->
<?php get_sidebar(); ?>
<?php get_footer();?>

Natürlich funktioniert der obige Code nur in meinem Theme. Jeder muss schauen, wie sich sein Inhaltsbereich im Theme strukturiert. Wichtig ist nur, dass beachtet wird, dass der Kopfbereich mit get_header, die Seitenleiste mit get_sidebar (bzw. manche Themes arbeiten mit include) und ggf. sofern vorhanden der Fußbereich mit get_footer eingebunden werden.

2. Der Inhalt des Templates

Mit Absicht habe ich im obigen Code-Schnipsel den Inhalt herausgelassen. Weil erst mal das Grundgerüst der Vorlage stehen sollte, um alle eventuellen Darstellungsprobleme zu beseitigen.

Wie ich oben schon erwähnte, wollte ich eine Tabelle haben. Und CSS3 probieren. Daher habe ich mir dort, wo im Code XXXXXX steht, einen weiteren DIV-Container gebaut, damit ich ihn nachher beim Stylen ansprechen kann. Dann beginnt die Tabelle und dann der Conditional Tag für die Darstellung der Links.

Hier kurz mein Code als Beispiel:

<div id="linkpage">
<br />
<table>
<tr><td class="linkhead">Weblinks</td><td class="linkhead">Beschreibung</td></tr>
<tr>
<?php wp_list_bookmarks('between=</td><td>&title_li=&categorize=0&show_description=1&before=<td>&after=</td></tr><tr>'); ?>
</tr>
</table>
<br />
</div>

Das Beispiel soll verdeutlichen, dass es statt einer ungeordneten Liste durchaus möglich ist, eine Darstellung in Tabellenform zu erzeugen. Das ganze sieht kompliziert aus und ein wenig muss man sich halt mit dem Conditional Tag von wp_list_bookmarks beschäftigen.

3. Das CSS-Styling

Wie gesagt, mein Anliegen war es, dass bei den Webkrauts vorgestellte CSS3 zu probieren. Zunächst die CSS-Anweisung, die ich in die style.css meines Themes eingetragen habe:

#linkpage {
padding: 0px;
margin: 0px;
background-color: lightyellow;
border: 2px solid #333;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 2px 2px 10px #666;
-webkit-box-shadow: 2px 2px 10px #666;
}
#linkpage table {
border-collapse: collapse;
width: 100%;
}
#linkpage .linkhead {
font-weight:bold;
text-decoration: underline;
padding: 0 10px;
background-color: rgba(255,255,255,.7);
}
#linkpage tr:nth-child(odd) {
background-color: #bbf;
}
#linkpage tr:nth-child(even) {
background-color: #fbb;
}

Das CSS3 beinhaltet bei #linkpage die letzten 4 Zeilen und sorgt für einen Rahmen mit runden Ecken und Schatten beim Firefox. Wie gesagt, leider nur bei dem Browser. Letztlich kann dieser Rahmen aber – ohne, dass das Layout sich insgesamt verändert, um jeden Container mit Rahmen gelegt werden. Ich z.B. habe diesen gleich um die gesamte Webseite hier gelegt. Mit der Rahmenstärke und den Farben sowie der Lage des Schattens kann man lustig herumexperimentieren.

Die unterschiedlichen Farben in den einzelnen Tabellenzeilen werden mit den in CSS3 neu eingeführten Pseudoklassen odd und even dargestellt. Auch hier gilt es, einfach mal zu probieren.

Stopp!

So, ich denke, dass ist harter Tobak. Das war er auch für mich, aber es macht einfach Spaß, es mal zu probieren und wenn es gelingt, ist es ein toller Mehrwert.

Wer Fragen hat, immer her damit!

Tags: Programmierung, Wordpress

• Projekte
• 10 Kommentare

Hartmut 25. Juni 2009

Äußerst unbefriedigend fand ich die Antworten, nach denen ich bei Google deswegen suchte. Ich will kein Copyright, das mir NUR das aktuelle Datum des Jahres anzeigt, ich will eines, welches dynamisch die Daten aus der Datenbank generiert. Der Beginn des Bloggens plus das Ende meines Bloggens. Gut, beides kann ich manuell immer wieder nachtragen. Aber damit entfällt ja die Dynamik!

Lange Rede, gar kein Sinn! Hier das Script, unten im Fußbereich, bei mir links:

<?php
    global $wpdb;
    $post_datetimes = $wpdb->get_results("SELECT YEAR(min(post_date_gmt))
        AS firstyear, YEAR(max(post_date_gmt)) 
        AS lastyear FROM $wpdb->posts WHERE post_date_gmt > 1970");
    if ($post_datetimes) {
        $firstpost_year = $post_datetimes[0]->firstyear;
        $lastpost_year = $post_datetimes[0]->lastyear;
        $copyright = __('&copy; ') . $firstpost_year;
    if ($firstpost_year != $lastpost_year) {
        $copyright .= '-'. $lastpost_year;
        }
        $copyright .= ' ';
        echo $copyright;
        }
?>
<strong><a href="" title="Dieser Blog!"><?php bloginfo('name') ?></a></strong>     

Tags: PHP, Programmierung, Wordpress

• Projekte
• 6 Kommentare

Hartmut 13. Juni 2009

Für einen Blogger sind Kommentare ein Segen, weil er sich freut, überhaupt mal einen zu bekommen und für den anderen sind sie fast schon ein Fluch, weil er so viele bekommt, dass er kaum noch den Überblick behält.

WordPress hat sich da mal überlegt, die sogenannten verschachtelten Kommentare (threaded comments) einzuführen. Ich finde, erstens zu spät und für mich persönlich, auch viel zu unübersichtlich. Die meisten kennen die Forenstrukturen, also einen Kommentar nach dem anderen. So mag ich es auch und so soll es sein.

Bei den meisten Bloggern hat sich daher die Idee durchgesetzt, auf einen Kommentar Bezug zu nehmen, indem er den Klammeraffen und anschließend den Kommentator benennt. Beispiel @Hartmut: BlaBla.

Nun ist ja das ständige Schreiben dieser Zeichenfolge eher lästig, daher musste ich mich mal der Sache annehmen. Und so präsentiere ich eine Idee, wie der geneigte Blogbetreiber und jeder andere Kommentierer auch mit relativ simplem Code – natürlich wie immer JavaScript vorausgesetzt – sein Kommentarfeld aufwerten kann, in dem er einfach auf die laufende Nummer des Kommentars klickt und die obige Zeichenfolge direkt im Kommentarfeld eingegeben ist.

Hier das JavaScript, welches ich direkt an den Anfang der comments.php gesetzt habe:

<script language="JavaScript">
<!--
function click_on_number(number, id, name)
{
    if (number_already_clicked)
        return false;
    chref = "#comment-" + id;
    etext = "<b>@" + name + ":</b> ";
    field = document.getElementById ('comment');
    field.value = etext + field.value;
    location.href = "#respond";
    field.focus (); // löschen, wenn nicht in Kommentarfeld gesprungen werden soll
    number_already_clicked = false; // setze true, wenn nur jeweils auf einen Kommentar Bezug genommen werden soll
    return false;
}
//-->
</script>

Jetzt sollte eine Funktion im Kommentar-Feld gesetzt sein, welches die laufende Nummer der Kommentierer anzeigt. Bei den meisten Themes ist das so, wer es nicht hat, für den gibt es die komplette Syntax. Weil der Aufruf simpel im Link per onclick-event aufgerufen wird.

<span class="commentmetadata">
    <a href="#comment-<?php comment_ID () ?>" 
    title="Auf Kommentar antworten" 
    onclick="return click_on_number <?php $comment_count++; echo $comment_count; ?>, <?php comment_ID (); ?>, '<?php comment_author (); ?>')">
    <?php echo $comment_count; ?></a>

</span>

Wichtig ist, dass also im Theme die comment_id aufgerufen wird. Bei den meisten Themes ist das der Fall, hat aber meistens keinen Link (a href). Dieser muss nicht sein, aber dann sollte das onclick-Event wenigstens wieder wie bei den Smileys per CSS entsprechend gekennzeichnet werden (Mauszeiger)

Tags: JavaScript, Programmierung, Wordpress

• Projekte
• 13 Kommentare

Hartmut 11. Juni 2009

Jetzt hat mich der liebe Sascha so dermaßen “motiviert”, dass ich es unbedingt loswerden muss, wie man denn hier im Kommentarfeld die lustigen Smileys ein‑ und ausklappen kann. Mittlerweile gibt es ja doch einige Blogs, die eine recht stattliche Anzahl von Smiley-Kollektionen anbieten.

Ich möchte das im Prinzip relativ simple Thema auch ein wenig einfacher erklären und nicht lange mit Code um mich werfen, andererseits soll diese kurze Erklärung ausreichend sein, alles, nicht nur Smileys ein‑ und ausblendbar zu machen.

Das ganze funktioniert über eine JavaScript-Bibliothek, die WordPress von Hause aus schon implementiert hat und die automatisch bereits geladen sein sollte. Wer das nicht weiß, sollte auf seiner Webseite mal mit dem Browser die rechte Maustaste drücken und sich den Quelltext anschauen. Dort sollte relativ weit oben eine Zeile stehen, die so aussieht:

<script type='text/javascript' src='http://www.deine-domain.de/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script>

Wichtig ist, dass die jquery.js aus dem WordPress Ordner kommt, weil es eine für den Blog angepasste Version ist.

JQuery vereinfacht die Programmierung der sog. DOM-Bäume. Ich will darauf gar nicht eingehen und komme mal gleich zum Kommentarfeld und den Smileys. Die Smileys selbst werden durch das Plugin LMB^Box Smileys eingebunden. Der PHP-Befehl soll laut Anweisung an die Stelle, an der die Smileys erscheinen sollen mit dem Befehl

<?php if (function_exists('lmbbox_smileys_display')) { lmbbox_smileys_display(true); } ?>

erfolgen.

Um jetzt mittels JQuery einen klappbaren Bereich/Effekt einzurichten, bedarf es zweier Klassen oder IDs. Ich nutze lieber Klassen, weil ich diese ggf. noch an weiteren Stellen im Blog nutzen möchte. Für die Überschrift – also Smileys einklappen/ausklappen habe ich die Klasse smile_head und für den Bereich, um die Smileys, also die Box sozusagen, die dann ein‑ und ausklappt, habe ich die Klasse smile_body gewählt. Innerhalb dieser Klasse kommt dann der php-Befehl, um die Smileys darzustellen.

Das ganze sieht bei mir im Kommentarfeld so aus:

<!-- Smileys Anfang -->
<span class="smile_head"><b>Smilies anzeigen/verstecken</b></span>
<div class="smile_body">
<?php if (function_exists('lmbbox_smileys_display')) { lmbbox_smileys_display(true); } ?>
</div>
<!-- Smileys Ende –>

Natürlich lassen sich diese Klassen jetzt auch bequem per CSS anpassen, aber darauf gehe ich jetzt (noch) nicht ein, weil ich es hier auch nicht gemacht habe.

Jetzt bleibt eigentlich nur noch ein wenig JavaScript, um mittels JQuery die Smileys ein‑ und ausblenden zu lassen. Grundsätzlich sollen die lustigen Bildchen ja ausgeblendet sein, dafür müssen wir dem smile_body sagen, dass er zunächst einmal versteckt bleiben soll.

Eine Eigenart der WordPress jquery-Bibliothek ist, dass sich die von mir angesprochenen DOMs (das ist z.B. die Klasse smile_body) nicht mit einem $ ansprechen lassen sondern mit dem Befehl jquery.

Die Anweisung lautet somit ausgeschrieben:

jQuery('.smile_body').hide();

Jetzt ist sozusagen der Inhalt “versteckt”. Wer seine Smileys immer angezeigt bekommen haben und sie erst beim Mausklick ausblenden will, der nimmt statt .hide einfach .show.

Der nächste Schritt ist die Anweisung, dass bei einem Klick auf Smileys anzeigen, das versteckte Element angezeigt und bei einem erneuten Klick wieder ausgeblendet wird. Dafür gibt es erstens den sogenannten Event-Handler der auf den Mausklick reagiert. Nur muss bei einem Klick auf smile_head das nachfolgende Element smile_body angesprochen werden. Der Mausklick muss sozusagen weitergegeben werden. Zweitens gibt es den Effekt, in diesem Falle benutze ich SlideToggle. Um das ganze abzukürzen, schicke ich mal den kompletten Code, der eingebunden werden muss hier hinein:

<script language="JavaScript">
<!--
jQuery(document).ready(function()
{
  //Alle Elemente mit der Klasse smile_body verstecken
  jQuery('.smile_body').hide();
  //element mit Klasse smile_body ein/ausblenden
  jQuery('.smile_head').click(function()
  {
    jQuery(this).next('.smile_body').slideToggle(600);
  });
});
//-->
</script>

Im Prinzip ist alles eine große Funktion von JQuery und die muss am Anfang initialisiert werden. Aber mehr möchte ich dazu gar nicht sagen. Denn das war es schon.

Wo der Code übrigens steht, ob im Header, in der functions.php, im Footer ist zunächst einmal grundsätzlich egal. Ich selbst habe momentan den Code in der comments.php, weil hier wird er ja auch benötigt.

Kleine Anpassungen habe ich übrigens noch in der style.css vorgenommen. Da ja kein Link hinter dem Text “Smileys einklappen/ausklappen steht, verändert sich der Mauszeiger wie bei einem gewöhnlichen Link nicht, daher habe ich ins CSS noch

.smile_head {
cursor: pointer;
}

eingefügt.

So, ich hoffe, ich konnte viele Unklarheiten schaffen. Ansonsten scheue Dich nicht, einfach nachzufragen oder Verbesserungsvorschläge zu machen.

Im Prinzip lassen sich auf diese Art und Weise alle möglichen Elemente, sogar die Seitenleiste, Header oder was auch immer ein‑ und ausblenden. Einfach mal probieren. Wenn man erst mal anfängt, macht es wirklich Spaß.

Tags: JavaScript, Programmierung, Wordpress

• Projekte
• 11 Kommentare