Als erstes braucht ihr eure User-ID und eine Application-ID für die Seite, auf der ihr den Like-Button einbauen möchtet. Die User-ID bekommt ihr, indem ihr folgendes in die Adress-Zeile eures Browsers eingebt:

graph.facebook.com/euer.name

Vereinfacht gesagt: Geht auf euer Facebook-Profil und ersetzt das www in der Adresse durch "graph". Auf der dann erscheinenden Seite, findet ihr eure User-ID.

Die Application-ID wiederum könnt ihr generieren, indem ihr auf folgender Seite euren Blog eintragt:

http://developers.facebook.com/setup/

Nun sind die Grundvoraussetzungen erfüllt, der Like-Button kann eingebunden werden. Im folgenden Beispiel zeige ich, wie man das in der Einzelansicht eines Artikels macht. Dafür müssen wir im Kopf- und Fußbereich, sowie unterhalb des Artikels etwas Code eingeben.

Fangen wir mit dem Kopfbereich an:

HTML/PHP
<?php if ( is_single() ) : ?>
  <meta property="fb:admins" content="eure_user_id" />
  <meta property="fb:app_id" content="eure_app_id" />
  <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
  <meta property="og:title" content="<?php echo get_the_title(); ?>" />
  <meta property="og:type" content="article" />
<? endif; ?>

Diese fünf speziellen Facebook-Meta-Angaben müssen in der header.php innerhalb der head-Tags gesetzt werden. Sie verraten Facebook wem der Blog gehört, um welchen Blog es sich handelt, wie er heißt, welchen Titel die aktuelle Seite hat und um welchen Inhaltstyp es sich handelt. Natürlich müsst ihr eure_user_id und eure_app_id durch die entsprechende ID ersetzen.

Als nächstes binden wir den nötigen JavaScript-Kram im Fußbereich ein:

HTML/JavaScript
<?php if ( is_single() ) : ?>
  <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
  <script type="text/javascript">
    window.fbAsyncInit = function() {
      FB.init({appId: 'eure_app_id', status: true, cookie: true, xfbml: true});
    }
  </script>
<?php endif; ?>

Das wird in die footer.php direkt über dem abschließenden body-Tag eingefügt. eure_app_id ist auch hier entpsrechend zu ersetzen.

Nun muss der Button selbst noch auf der Artikelseite eingebunden werden:

HTML
<fb:like href="<?php the_permalink() ?>" layout="standard" show_faces="false" width="xyz" action="like" colorscheme="light" font="trebuchet ms"></fb:like>

Dies tragt ihr in der single.php da ein, wo der Button hin soll. Die Attribute könnt ihr in gewissem Maße euren Präferenzen anpassen. Hier erfahrt ihr, was möglich ist.

Hat man das alles eingetragen, werden auf der Einzelansicht eines Artikels die nötigen Meta-Angaben angezeigt, das entsprechende JavaScript für den Like-Button wird eingebunden und der Like-Button selbst erscheint ober- oder unterhalb des Artikels - je nachdem, wo ihr ihn eingefügt habt.

Sollte euch das alles zu tricky sein, könnt ihr entweder die iframe-Variante einbinden oder auf das WordPress-PlugIn von Bottomless zurückgreifen: Like.

Noch ein paar Worte zur Performance. Das Einbinden des Like-Button verlängert natürlich die Ladezeit eures Blogs. Allerdings sprechen wir hier von WordPress - hier ist es normal, dass auf jeder Seite drei zusätzliche JavaScript-Dateien und zwei zusätzliche Stylesheets eingebunden werden, weil irgendwo im Blog mal eine Lightbox aufgehen soll. Will heißen: Denkt darüber nach, ob ihr den Button einbauen wollt, aber bedenkt, dass euer System sowieso nicht Performance-optimiert ist.

Es sei denn, ihr seid bezüglich dieses Themas sensibilisiert und habt entsprechende Schritte unternommen, eurem Blog auf die Sprünge zu helfen.

Ansonsten wie immer: Bei Fragen schreibt einen Kommentar. Bei Gefallen bookmarkt den Artikel. Danke!

Verwandte Beiträge:

• Fancy Login-/Logout-Button für deinen WordPress-Blog
• IKEA, Facebook und der Segen des “Photo Tagging”
• Animierte Image-Caption mit jQuery unter WordPress

Demo | Download

Endlich habe ich es geschafft - mein erstes, für die Veröffentlichung geeignetes WordPress-Theme ist fertig und hört auf den mehr oder minder sinnbehafteten Namen "Blue and Grey". Versionsnummer ist die 1.0.

Folgende Features bietet das Theme:

• Getestet auf allen modernen Browsern und im Internet Explorer 6-8.
• Die zweispaltige Sidebar ist Widget-ready
• Gravatars werden unterstützt.
• Threaded Comments werden unterstützt.
• Sub-Level-Seiten 1. Grades werden unterstützt und per Dropdown-Menü angezeigt
• Schlichtes Design für einen klaren Fokus auf den Inhalt.

Wenn ihr Gefallen an dem Theme findet, ladet es runter und nutzt es für euren Blog. Bei Anregungen oder Fehlermeldungen steht die Kommentar-Funktion bereit.

Heute geht es um eine horizontale Reiternavigation in WordPress, deren inaktive Reiter dank CSS Browser-übergreifend semi-transparent sind. Dafür muss als erstes ein span-Element innerhalb der Listen-Elemente der Navigation eingefügt werden. Dies geschieht über folgenden PHP-Code-Schnipsel:

HTML/PHP
<div id="header">
   <ul>
      <li<?php if (is_home() || is_paged() ) echo " class=\"current_page_item\""; ?>>
         <span></span>
         <a href="<?php bloginfo( 'url' ); ?>" title="Back to Main    Page">Home</a>
      </li>
      <?php
         echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><span></span><a$2>$3</a>', wp_list_pages('echo=0&title_li=&depth=1'));
      ?>
   </ul>
   <div class="hr"><hr /></div>
</div>

Das span-Element bekommt in diesem Fall die Transparenz. Würde man die Transparenz auf das a-Element anwenden, würde auch die darin liegende Schrift transparent werden und das soll vermieden werden. Außerdem wird vor der Funktion zur Ausgabe der Seiten noch ein Listenelement mit dem Link zur Startseite eingesetzt. Der ist optional und kann auch entfernt werden, wenn man z.B. den Blog-Titel auf die Startseite verlinkt. Schlussendlich befindet sich unterhalb der Navigation noch ein von einem div-Element umschlossenes hr-Element. Unter diesem werden die inaktiven Listenelemente verschwinden.

Kommen wir nun zum CSS:

CSS
#header ul {
   height: 60px;
   position: relative;
   clear: left;
}

   #header ul li {
      width: auto;
      _width: 140px; /* IE6 needs a fixed width */
      height: 60px;
      margin-left: 20px;
      float: left;
      display: inline;
      position: relative;
   }

      #header ul li span {
         display: block;
         width: 100%;
         _width: 140px; /* IE6 needs a fixed width */
         height: 60px;
         position: absolute;
         top: 10px;
         left: 0;
         z-index: 1000;
         background-color: #FFF;
         background: -moz-linear-gradient( top, #c7e0ed, #fff );
         background: -webkit-gradient( linear, left top, left bottom, from(#c7e0ed), to(#fff) );
         opacity: 0.7;
         filter: alpha(opacity=70);
         -moz-opacity: 0.7;
         filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
         -khtml-opacity: 0.7;
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
      }

      #header ul li a:link,
      #header ul li a:visited {
         display: block;
         width: auto;
         height: 24px;
         padding: 13px 20px 23px 20px;
         line-height: 24px;
         position: relative;
         bottom: -10px;
         z-index: 2000;
         color: #0660cf;
         text-decoration: none;
         text-shadow: #FFF 0 1px 2px;
      }

      #header ul li a:hover,
      #header ul li.current_page_item a {
         background-color: #FFF;
         background: -moz-linear-gradient( top, #c7e0ed, #fff ); /* gradient for firefox */
         background: -webkit-gradient( linear, left top, left bottom, from(#c7e0ed), to(#fff) ); /* gradient for chrome and safari */
         position: relative;
         bottom: 0;
         _top: 0; /* special invite for IE6 to get goin' */
      }

      #header ul li a:hover {
         color: #c41604;
      }

      #header ul li a:active {
         color: #0059ce;
         position: relative;
         bottom: -1px;
         _top: 1px; /* special invite for IE6 to get goin' */
      }

.hr {
   height: 30px;
   background-color: #333;
   background: -moz-linear-gradient( top, #333, #555 ); /* gradient for firefox */
   background: -webkit-gradient( linear, left top, left bottom, from(#333), to(#555) ); /* gradient for chrome and safari */
   position: relative;
   z-index: 3000;
}

   .hr hr {
      display: none; /* hiding hr because of the IE. quel surprise! */
   }

Am meisten Platz nehmen hier die Angaben für die Transparenz ein. Das liegt daran, dass alle Eventualitäten - sprich "Browser" - berücksichtigt werden müssen. Dafür lässt sich diese Navigation aber auch mit reinem CSS und ohne PNG-Grafiken umsetzen, die ja im IE6 für Ärger sorgen würden.

Trotzdem funktioniert auch das hier nicht ohne dem ein oder anderen Mätzchen unserer Lieblings-Browser aus Redmond - den Internet Explorern. Der IE6 benötigt eine feste Breite für die Listenelemente. Hier ist also etwas Anpassung nötig, je nachdem wie lang die Beschriftung der Reiter ist. Der IE7 hingegen hat Probleme mit den Hover-Zuständen, so dass die Reiter hier nicht nach oben fahren und intransparent werden, wenn man mit dem Cursor rüberfährt. Das ist ärgerlich, schränkt jedoch die Benutzbarkeit der Seite nicht ein.

Des weiteren habe ich noch etwas CSS3 verwendet. Mit den aktuellen Versionen von Firefox, Safari und Chrome bekommt man deshalb einen Farbverlauf bei den Reitern serviert. In den gleichen Browsern sowie der aktuellen Version von Opera gibt es außerdem noch einen leichten Schlagschatten bei der Link-Beschriftung.

Das ist auch schon alles. Und natürlich ist diese Navigation nichts WordPress-spezifisches. In der Demo gibt es eine statische Variante, die in jeder anderen Seite auch verwendet werden kann.

Ansonsten mein übliches Mantra an dieser Stelle: Wenn ihr Fragen habt oder etwas nicht so funktioniert, wie es soll, nutzt die Kommentar-Funktion. Und wenn euch das Tutorial gefallen hat, würde ich mich freuen, wenn ihr es bookmarked oder twittert. Vielen Dank

Verwandte Beiträge:

• 8Bit-Style-Navigation mit Fly-Out-Menus
• Navigation im Googlemail-Style mit jQuery
• Animierte Navigation mit jQuery

Das einzige was störend sein kann, ist das kleine Smiley, das im Blog erscheint, wenn das PlugIn aktiv ist. Doch das wird man mit vier Zeilen CSS ganz schnell los:

CSS
#wpstats {
   height: 0;
   visibility: hidden;
}

Nun ist das Bild verschwunden, wie es sich für einen "Zähl-Pixel" gehört, verrichtet jedoch weiter seinen Dienst.

Verwandte Beiträge:

• Name des Autors zu post_class() in WordPress hinzufügen
• WordPress-Autoren aus der Website-Statistik rausnehmen
• Facebook-Like-Button per XFBML in WordPress-Blogs einfügen

Google liebt es ja, wenn unter oder neben Bildern noch ein beschreibender Text steht. Deswegen hat WordPress vor einiger Zeit die Image-Caption eingeführt. Diese kann man - wenn man kein Freund von Bildunterschriften ist - mit jQuery jedoch so manipulieren, dass sie nur bei einem MouseOver erscheint. Wie das geht, erkläre ich in diesem Tutorial.

Wie gehabt als erstes der HTML-Teil:

HTML
<div class="wp-caption" style="width: ???px">
	<img src="/path/to/img.jpg" alt="Dies ist eine Beschreibung" title="Dies ist eine Beschreibung" width="???" height="???" class="size-full wp-image-3402" />
	<p class="wp-caption-text">Dies ist eine Beschreibung</p>
</div>

Dies ist der Caption-Quelltext, der von WordPress ausgegeben wird. Anstatt der Fragezeichen kommen natürlich die richtigen Höhen- und Breitenangaben, ebenso wie der richtige Pfad zum Bild.

Als nächstes ein bißchen CSS für das entsprechende Aussehen:

CSS
.wp-caption {
	position: relative;
	margin-bottom: 20px;
	border: 3px solid #999;
	overflow: hidden;
	-moz-border-radius: 2px;
	-khtml-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

.wp-caption-text {
	padding: 5px 10px;
	background-color: #333;
	color: #EEE;
	border-top: 1px solid #666;
}

Wichtig hierbei ist die Angabe "position: relative", da wir beim Verschieben des Bildes mit einem negativen margin arbeiten und der IE6 ohne diesen Zusatz rumzickt. Des weiteren ist die Angabe "overflow: hidden" wichtig, da der Caption-Text sonst nicht verschwinden würde.

Alle anderen Angaben zu Farben, Innen- und Außenabständen können ohne weiteres angepasst werden.

Zum Schluss den nötigen JavaScript- bzw. jQuery-Teil, ohne den hier gar nichts läuft:

HTML
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>

Im Kopf-Bereich binden wir die jQuery-Library ein.

JavaScript
jQuery(document).ready(function($) {
	$('div.wp-caption').each(function(i) {
		var img_ = $('img', this);
		var img_height = img_.attr('height');
		var p_height = $('p', this).outerHeight();

		$(this).height(img_height);
		$(this).hover(function() {
			img_.animate({marginTop : -p_height}, 500);
		}, function() {
			img_.animate({marginTop : '0'}, 500);
		});
	});
});

Mit der each()-Funktion wird jede einzelne Image-Caption auf der Seite angesprochen. Danach wird die Höhe des dazugehörigen Bildes und der Beschreibung gespeichert. Als nächstes wird die Höhe des Caption-div gleich der Höhe des Bildes gesetzt, so dass die Beschreibung abgeschnitten und nicht sichtbar ist.

Daraufhin wird eine hover()-Funktion aufgemacht. Fährt man mit dem Cursor über eine Image-Caption, bekommt das dazugehörige Bild einen negativen margin-top, der der Höhe der Beschreibung entspricht, so dass diese in den sichtbaren Bereich fährt. Verlässt man die Image-Caption wieder mit dem Cursor, wird der margin-top des Bildes wieder auf Null gesetzt. Das ganze wird mit der animate()-Funktion von jQuery animiert.

Das war es auch schon, fertig ist die animierte Image-Caption unter WordPress. Wobei natürlich nichts dagegen spricht, das ganze außerhalb von WordPress einzusetzen. Wie immer verweise ich an die Kommentar-Funktion, falls es Fragen gibt oder etwas nicht so funktioniert, wie es soll.

Verwandte Beiträge:

• Animierte Navigation mit jQuery
• Schwarzweiß-Foto mit jQuery in Farb-Foto verwandeln, wenn man mit dem Cursor drüberfährt
• Bilder mit jQuery einblenden, wenn sie fertig geladen sind

Den "HTTP Fehler" gab es vor einiger Zeit schon einmal, beim Update auf die WordPress-Version 2.7. Damals lag es am Flash-Uploader, den man per PlugIn deaktivieren und das Problem somit lösen konnte.

In diesem Fall aber liegt es nicht am Flash-Uploader, sondern an dem Umstand, dass 1und1 die WordPress-Skripte als PHP4-Skripte parst. Richtigerweise werden diese jedoch als PHP5-Skripte geparst, was man durch folgenden Eintrag in die .htaccess-Datei erreichen kann:

.htaccess
AddType x-mapp-php5 .php
AddHandler x-mapp-php5 .php

Solltet ihr noch keine .htaccess-Datei haben, legt lokal bei euch eine leere htaccess.txt-Datei an, ladet sie ins root-Verzeichnis eurer WordPress-Installation hoch, entfernt das Suffix ".txt" und fügt einen Punkt an den Anfang des Dateinamens. Daraufhin wird die Datei wahrscheinlich verschwinden. Um sie wieder zu sehen, müsst ihr in eurem FTP-Programm das Anzeigen versteckter Dateien aktivieren.

Nun sollte der "HTTP Fehler" Vergangenheit sein.

Quelle: 1&1 Hilfe-Center

Verwandte Beiträge:

• "Contact Form 7" auf goneo-Webspace zum Laufen kriegen
• Free WordPress-Theme: “Blue and Grey”
• WordPress-Statistik-Smiley verbergen

Heute zeige ich, wie man mit etwas JavaScript und PHP einen benutzerfreundlichen Suchschlitz in WordPress baut. Das "perfekt" steht deshalb in Anführungszeichen, weil ich mir nicht anmaßen möchte, den wirklich perfekten Suchschlitz zu präsentieren. Möglicherweise würde es "advanced" eher treffen, aber wie klingt das denn bitte?!

Also los: Wir wollen einen Suchschlitz, in dem "Suchen…" steht, was wiederum verschwinden soll, wenn der Nutzer auf das Eingabefeld klickt und wieder erscheinen soll, wenn der Nutzer außerhalb des Eingabefeldes klickt. Des weiteren soll auf der Suchergebnis-Seite im Suchschlitz der Suchbegriff stehen, welcher ebenfalls verschwinden und erscheinen soll, je nachdem, wohin der Nutzer klickt.

Das klingt extrem kompliziert, ich weiß, aber bei Verständnisproblemen einfach die Demo anschauen. Ansonsten lege ich mal los. Und zwar brauchen wir folgenden HTML-Teil in der WordPress-Theme-Datei "searchform.php":

HTML/PHP
<form method="get" id="search" action="<?php bloginfo('url'); ?>/">
  <fieldset>
    <input type="text" value="<?php echo $search_text; ?>" id="s" name="s" />
    <div>
      <input type="submit" name="submit" value="Absenden" />
    </div>
  </fieldset>
</form>

Falls ihr in eurem WordPress-Theme keine "searchform.php" habt, legt sie einfach an, ihr könnt sie mit folgendem Code-Schnippel in eure Templates einbinden:

PHP
<?php include (TEMPLATEPATH . "/searchform.php"); ?>

Ansonsten handelt es sich um ein simples Formular mit einem Eingabefeld und einem Submit-Button, welchen ich in ein div-Element eingebettet habe. Warum, könnt ihr in meinem Beitrag zum "Barrierefreien Button mit Text Replacement" nachlesen.

Als nächstes kommt der JavaScript-Teil, der dafür sorgt, dass das Eingabefeld beim Draufklicken geleert wird und zusätzlich dem Submit-Button die Klasse submit_active anhängt, wodurch der Farbwechsel im Schein um den Suchschlitz realisiert wird.

JavaScript
window.onload = function() {
  var input = document.getElementById('s');
  var value = document.getElementById('s').value;
  var submit = document.getElementsByName('submit')[0];

  mFocus = function() {
    if ( this.value == value ) {
      this.value = '';
    }
    submit.className = 'submit_active';
  }

  mBlur = function() {
    if ( this.value == '' ) {
      this.value = value;
    }
    submit.className = '';
  }

  with ( input ) {
    onfocus = mFocus;
    onblur = mBlur;
  }
}

Als erstes werden die Selektoren für das Eingabefeld, für dessen Value und den Submit-Button in Variablen gespeichert. Danach die Funktionen definiert, die den Value wechseln und die Klasse submit_active anhängen bzw. entfernen. Zum Schluss werden diese den Events onfocus und onblur zugewiesen.

Als nächstes brauchen wir ein wenig PHP, um auf der Suchergebnis-Seite den spezifischen Suchbegriff im Suchschlitz erscheinen zu lassen:

PHP
<?php
  if (!is_search()) {
    $search_text = "Suche&hellip;";
  } else {
    $search_text = "$s";
  }
?>

Über if (!is_search()) fragen wir ab, ob es sich nicht um die Suchergebnis-Seite handelt (man beachte das Ausrufezeichen, welches die Bedingung negiert). Ist dem so, speichert die Variable $search_text den Wert "Suche…". Andernfalls, wenn der Besucher sich auf der Suchergebnis-Seite befindet, speichert die Variable den spezifischen Suchbegriff. Wenn wir nochmal hoch zum HTML-Teil gucken, können wir sehen, dass die Beschriftung des Suchschlitzeingabefeldes mit genau dieser Variable $search_text realisiert wird, indem das Attribut value den Wert <?php echo $search_text; ?> bekommt.

Zum Schluss muss der ganze Spaß nur noch gestylet werden:

CSS
#search {
	width: 301px;
	height: 52px;
	clear: left;
}

#s,
#search div input,
#search div input.submit_active {
	background-image: url('images/sprite.jpg');
	background-repeat: no-repeat;
}

#s {
	width: 231px;
	height: 22px;
	padding: 17px 12px 13px 17px;
	float: left;
	border: none;
	line-height: 22px;
	font-size: 16px;
	color: #666;
	background-position: 0 0;
}

#search div {
	width: 41px;
	height: 52px;
	float: left;
	overflow: hidden;
}

#search div input {
	width: 41px;
	padding-top: 52px;
	border: none;
	background-position: -260px 0;
	cursor: pointer;
}

#s:focus {
	background-position: 0 -52px;
	color: #369;
}

#search div input.submit_active {
	background-position: -260px -52px;
}

#search div input:hover {
	background-position: -301px -0;
}

#search div input.submit_active:hover {
	background-position: -301px -52px;
}

Ich denke, die Style-Angaben sind relativ selbsterklärend. Die Input-Elemente werden formatiert und die jeweiligen Zustände mit der entsprechenden Hintergrundgrafik versehen, wobei ich hier auf ein sog. CSS-Sprite zurückgreife, wodurch sich die Grafik-Datei nicht ändert, sondern nur deren Position. Außerdem nutze ich immer ein sog. CSS-Reset, wodurch u.a. das Element fieldset direkt am Anfang die Style-Angabe border: 0 zugewiesen bekommt, weshalb das hier im CSS-Teil nicht auftaucht. Bedenkt das, wenn ihr die Sachen hier direkt aus dem Beitrag rauskopiert. Im Zweifelsfalle geht ihr auf Nummer sicher, wenn ihr die Beispiel-Dateien runterladet.

Außerdem dürften der IE6 und der IE7 Probleme mit der Darstellung haben, da sie nicht mit den Pseudo-Klassen :hover und :focus um können, bzw. erstere nur bei Links anwenden können. Um diesen Makel zu beheben, guckt nochmal in meinen Beitrag zum Thema Internet Explorer 6.

Ansonsten ist der "perfekte" Suchschlitz fertig. Ich habe noch die .psd-Datei für das CSS-Sprite in den Download-Ordner gepackt, damit ihr die Farben bei Bedarf anpassen könnt. Alternativ könnt ihr natürlich auch ein ganz eigenes Design machen.

In diesem Sinne viel Spaß damit und bei Fragen immer ran an die Kommentar-Funktion.

Nachtrag:

Ich habe im JavaScript-Teil zwei Ergänzungen bei der mFocus- und der mBlur-Funktion vorgenommen. Bevor der Inhalt des Eingabefeldes automatisch gelöscht oder mit dem Wert "Suche…" aufgefüllt wird, findet eine Abfrage statt. So wird verhindert, dass das vom Nutzer eingegebene Suchwort nach dem Klicken außerhalb des Eingabefeldes verschwindet.

Verwandte Beiträge:

• Fancy Login-/Logout-Button für deinen WordPress-Blog
• “Rising Curtain”-Effekt bei Input-Feldern mit jQuery
• Animierte Image-Caption mit jQuery unter WordPress

Soeben hat WordPress die Version 2.8.1 seiner Blog-Software veröffentlicht. Neben ein paar Bugs wurde eine gravierende Sicherheitslücke geschlossen, die es Nutzern ermöglichte, auf die Einstellungen mancher PlugIns zuzugreifen, obwohl sie nicht die erforderlichen Rechte dafür besitzen.

Ein zügiges Upgrade wird also empfohlen.

Verwandte Beiträge:

• WordPress 2.8 wurde jetzt veröffentlicht
• WordPress-Statistik-Smiley verbergen

Man kann den Namen des Autors aber ganz schnell mit folgendem PHP-Code hinzufügen:

PHP/HTML
<?php $curauth = get_userdata(intval($post->post_author)); ?>

<div <?php post_class($curauth->user_login) ?>>

Nun erscheint der Autorenname in der Klasse des Beitrags-div und man kann die einzelnen Posts ganz bequem per CSS optisch anpassen.

(via the english guy web design)

Verwandte Beiträge:

• Ressourcen-sparende Navigation in WordPress
• WordPress-Statistik-Smiley verbergen
• Der "perfekte" WordPress-Suchschlitz

Gerade gucke ich meine Statistiken auf Google Analytics an und muss mit Erschrecken feststellen, dass jedes mal, wenn ich beim Schreiben eines neuen Artikels diesen in der Vorschau betrachtet habe, das ganze als Page Impression festgehalten wurde. Was für ein Blödsinn, ich gucke den ganzen Tag pausenlos bei meinem Blog vorbei, und verfälsche mir damit die Statistik.

Unangenehmer wird das ganze noch, wenn man einen Blog mit mehreren Autoren betreibt. Schön, wenn die regelmäßig vorbei gucken und was schreiben, aber in der Besucherstatistik haben die nicht wirklich was verloren. Deshalb bietet es sich an, einfach alle eingeloggten User aus der Besucherzählung rauszunehmen. Und dafür fragen wir den Status ab:

PHP
<?php if (!is_user_logged_in()) : ?>
   <!-- Hier den Statistik-Code-Schnippel einfügen -->
<?php endif; ?>

Ist der Nutzer eingeloggt, wird der Zählcode nicht angezeigt. Für alle anderen, nicht eingeloggten Besucher schon. Nun muss die erste Amtshandlung beim Besuchen seiner Seite nur noch das Einloggen sein, und schon ist man raus und die Statistik zählt nur noch "echte", externe Besucher der Seite.

Verwandte Beiträge:

• WordPress-Statistik-Smiley verbergen
• Fancy Login-/Logout-Button für deinen WordPress-Blog
• Name des Autors zu post_class() in WordPress hinzufügen