blockquote p:before {
         content:' " ';
         }

So lange die Schriftgröße für die Anführungszeichen nicht größer als für das Zitat gewählt wird bestimmt eine gute Möglichkeit. Sobald aber die Schriftgröße größer gewählt wird steigt auch die Zeilenhöhe an und das sieht dann absolut doof aus.

Also experimentierte ich mit einer Grafik, die ich via CSS als Hintergrund anzeigen lasse.

background: transparent url(images/quote.png) top left no-repeat;

Nachteil bei dieser Methode ist das es je nachdem wie groß die Grafik ist der Fließtext in der Grafik beginnt. Abhilfe kann durch die Angabe

padding: 0 0 0 30px;

geschaffen werden. Allerdings wird die Grafik / werden die Anführungszeichen dann nicht von dem Text umflossen sondern jede Zeile des Fließtextes fängt 30px vom linken Rand entfernt an. sieht auch nicht wirklich toll aus.

Eine kurze Recherche bei selfhtml brachte mich zu der CSS-Eigenschaft text-indent. Mit der Anweisung text-indent kann für einen mehrzeiligen Fließtext festgelegt werden dass die erste Zeile um einen numerischen Wert eingerückt wird. Genau was ich für die Darstellung von Zitaten brauche. In meiner CSS-Datei ist nun folgender Code für die Darstellung von Zitaten verantwortlich:

#content blockquote {
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin:10px 0 30px;
	padding: 0 0 0 30px;
	}
#content blockquote p {
	text-indent:3.0em;
	background:transparent url(images/quote.png) left top no-repeat;
	}
#content blockquote p, #content blockquote ul li {
	margin: 0;
	overflow: hidden;
	font-size:0.85em;
	line-height:1.5 !important;
	font-style:italic;
	}
#content blockquote p cite,.quelle {
	clear: both;
	margin: 10px 0 0 0;
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: .7em;
	font-style: normal;
}

Jetzt braucht es noch ein Beispiel! Da bin ich in meinem Reader auf einen Artikel gestoßen der nichts mit der Problematik der Darstellung von Zitaten zu tun hat, jedoch meine Zustimmung findet. Worum es geht? Kleine Leseprobe:

Wir allen wollen es: Individuell sein! Ich folge nicht dem Strom, passe mich nicht an, versuche mich vom Rest der Welt zu unterscheiden. Ist doch so, oder? Wir wollen anders sein. Also folgen wir nicht jedem Trend, vermeiden es die Dinge zu kaufen und zu lieben, die gerade mal wieder total IN sind! Und denken dabei “Jawohl, ich bin ich und sonst können mich alle mal”. So bin ich auch. Ich will mich nicht der Masse anschließen und den aktuellsten Trends beugen. Zumindest denke ich immer, dass ich so bin.
Der ungewollte Zwang mitzumachen!

Erst durch den Artikel Den modified-Tag sinnvoll einsetzen! vom Themenfreund erfuhr ich von der Möglichkeit mit Hilfe des template-tags the_modified_date das Datum der Aktualisierung im Frontend auszugeben.

Leider funktioniert der Code, den Marcus in seinem Artikel bereit stellt bei mir nicht, diente jedoch perfekt als Inspiration. Also habe ich selber ein klein wenig ausprobiert und nun verrichtet der folgende Code seinen Dienst in den Dateien content.php und content-single.php.

<?php if(strtotime($post->post_modified) - strtotime($post->post_date) > 86400) { the_modified_date('d.m.Y','<li class="post-update">update: ','</li>','true') ;
}
?>

Um die Ausgabe des update Datums dem Design anzupassen musste natürlich auch noch die CSS-Datei mit folgendem Code ergänzt werden.

#content .entry-meta li.post-update {
	padding:0 0 5px 25px;
	text-transform:uppercase;
	color:#b21319;
	font-weight:bold;
	}

Wer nun immer noch nicht weiß worüber ich hier überhaupt schreibe kann sich das Ergebnis bei dem Artikel Google + ist doof, Twitter gewinnt und ifttt ist genial rechts in den Meta-Daten ansehen.

Vorhin fand ich allerdings beim Lutz das Plugin WP AddQuicktag, welches von Frank Bueltge gepflegt und erweitert wurde, da der ursprüngliche Autor die Arbeit eingestellt hat. Ob es was taugt weiß ich noch nicht, doch beim Frank bin ich da guter Dinge.

Der Rene hats getan, der Horst schon lange und auch ich entfernte die Sidebar und packte die nötigsten Navigationselemente in den Footer.

Für uns Blogger kein Problem. Sehen wir keine Sidebar wissen wir automatisch das die Navigation, das Archiv, weitere Informationen zum Autor und Blog und andere Elemente wie zm Beispiel die aktuellen Kommentare in der Regel im Footer zu finden sind. Doch wie so oft vergessen wir Blogger das es auch noch Menschen gibt, die mit der Bloggerszene nicht so vertraut sind. Ich kann mir gut vorstellen das diese leicht irritiert sind wenn sie keine Navigation an der Seite sehen. Wohl möglich denken diese Besucher dann das die Internetpresänz nur aus einer Seite besteht. Im schlimmsten Fall bekommen sie es mit der Angst zu tun und verlassen den Weblog sofort wieder – im Hinterkopf den Gedanken auf einer Fake-Seite gelandet zu sein.

Na ja, vielleicht ein wenig zu schwarz gemalt, aber es gibt noch einen weiteren einfachen Grund warum es nur suboptimal ist die Navigationselemente in den Footer zu packen. Es zeugt nicht gerade von Benutzerfreundlichkeit des Weblogs, wenn erst zum Footer gescrollt werden muss um den Blog zu durchstöbern. Also habe ich ganz einfach im Header einen Hyperlink hinterlegt, der auf einen “Anker” im Footer verweist. Wird dieser Link angeklickt springt man in Bruchteilen einer Sekunde zum Footer, von wo der Besucher alle Seiten, die Suche sowie die aktuellen Artikel und ein paar Empfehlungen findet.

Ich hoffe das ich durch diese kleine Modifikation die Benutzerfreundlichkeit meines Weblogs ein wenig steigern konnte.

Zum guten Schluss noch die Codeschnipsel aus den Dateien header.php, footer.php und style.css.

</header><!-- end Header -->
<nav class="menue-header">
<a href="#menue-footer" title="zur Navigation springen">Menü</a>
</nav>

Code aus der header.php

<footer id="colophon" class="clearfix">
		<a name="menue-footer"></a>

Code aus der footer.php

nav.menue-header {
	padding:0 0 5px 0;
	text-align:right !important;
	font-size: .7em !important;
	color:#999 !important;
	text-transform: lowercase;
	/*font-weight:bold;*/
	}
nav.menue-header a {
	color:#999 !important;
	letter-spacing:0.2em !important;
	}
nav.menue-header a:hover {
	color:#999 !important;
	text-decoration:none !important;
	}

Code aus der style.css

Ich habe vor ein paar Wochen zwei benutzerdefinierte Felder in die singel.php eingebaut um meine Quellen und die im Artikel verlinkten Websites bei den Meta-Daten des Artikels auszugeben. Bis dato hatte ich einfach am Ende jeden Artikels diese Angaben im Texteditor von WordPress eingegeben, doch das gefiel mir nicht so gut, da diese Angaben meiner Meinung nach nicht zum Artikeltext gehören sondern halt zu den Meta-Daten. Der Code aus meiner single.php, der für die Darstellung der Felder verantwortlich ist sieht folgendermaßen aus.

benutzerdefiniertes Feld mit variabler Zeichenfolge ausgeben

<?php $sites = get_post_custom_values('site'); ?>
		<?php if(!(empty($sites))) { ?><p>verlinkte Websites: <?php echo $sites[0]; ?></p><?php } ?>
		<?php $quellen = get_post_custom_values('quelle'); ?>
		<?php if(!(empty($quellen))) { ?><p>Quellen: <?php echo $quellen[0]; ?></p><?php } ?>

Dieser Code sorgt wie gesagt dafür das innerhalb der Meta-Daten (also in der grauen Box) die Quellen und die verlinkten Websites angezeigt werden. Zum besseren Verständnis hier der komplette Code meiner Box für die Meta-Daten.

kompletter Code der Meta-Daten

<footer class="single-entry-meta">
	<?php $sites = get_post_custom_values('site'); ?>
	<?php if(!(empty($sites))) { ?><p>verlinkte Websites: <?php echo $sites[0]; ?></p><?php } ?>
	<?php $quellen = get_post_custom_values('quelle'); ?>
	<?php if(!(empty($quellen))) { ?><p>Quellen: <?php echo $quellen[0]; ?></p><?php } ?>
	<?php if ( count( get_the_category() ) ) : ?><p>
	<?php printf( __( 'Categories: %2$s', 'yoko' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?></p>
	<?php endif; ?>
	<?php $tags_list = get_the_tag_list( '', ' , ' );
	if ( $tags_list ): ?><p>
	<?php printf( __( 'Tags: %2$s', 'yoko' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?></p>
	<?php endif; ?>
	<div class="clear"></div>
	<div class="box">
		<div class="wikios">
			<a href="http://www.wikio.de/high-tech/internet" target="_blank"><script src="http://www.wikio.de/getvote?style=capsulewhite" type="text/javascript"></script></a>
		</div>
		<div class="twittern">
			<iframe src="http://platform.twitter.com/widgets/tweet_button.html?url=<?php echo rawurlencode(get_permalink()) ?>&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>&lang=de&count=horizontal&via=hartgekocht" style="width:110px; height:20px;" frameborder="0" scrolling="no"></iframe>
		</div>
		<div class="gbut">
			<g:plusone size="medium" count="true" href="<?php the_permalink();?>"></g:plusone>
		</div>
		<div class="fbshare">
			<div id="fb-root"></div><script src="http://connect.facebook.net/de_DE/all.js#appId=220827684602944&xfbml=1"></script><fb:like href="<?php the_permalink();?>" send="false" layout="button_count" width="450"  show_faces="true" font=""></fb:like>
		</div>
		<div class="twitterfollow">
			<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=hartgekocht&show_count=true&button=grey&text_color=000000&link_color=8D141E&lang=de" style="width:220px; height:20px;"></iframe>
		</div>
	</div>
</footer>

Nun kann ich bei einem Artikel entweder das Feld “site” oder das Feld “quelle” auswählen und im Feld Wert den link eingeben. Dieser muss als html eingegeben werden, also ungefähr so:

<a href="http://www.delijo.de">http://www.delijo.de</a>

[highlight]Wichtig![/highlight] Wenn noch nie bei einem Artikel das Feld eingefügt wurde erscheint das Feld auch nicht bei der Liste der verfügbaren Felder. Dann wird einfach ein neues Feld über den Link “neu eingeben” angelegt.

Zum besseren Verständnis noch ein Screenshot aus meinem Backend.

benutzerdefinierte Felder - Screenshot aus dem Backend

Weitere Möglichkeit für ein benutzerdefiniertes Feld

Ich nutze die benutzerdefinierten Felder indem ich im Backend in dem Textfeld “Wert” eine Zeichenfolge eingebe, die dann in den Meta-Daten angezeigt wird. Also eine Zeichenfolge die immer eine andere ist. Nun kann es ja auch sein das man immer die gleiche Zeichenfolge ausgeben möchte mit Hilfe eines benutzerdefinierten Feldes, zum Beispiel den Code einer Werbeanzeige. Damit diese Zeichenfolge nicht immer aufs Neue eingegeben werden muss sollte der Code in der single.php folgendermaßen aussehen.

benutzerdefiniertes Feld mit fester Zeichenfolge ausgeben

<?php if(get_post_meta($post->ID, ‘Adsense’, true) == ‘1’) : ?>
...Code der angezeigt werden soll, wenn benutzerdefiniertes Feld "Adsense" mit Wert "1"...
<?php endif; ?>

Natürlich bin ich nicht selber auf diese Möglichkeiten gekommen um die benutzerdefinierten Felder in meinem Blog zu nutzen. Ich suchte mir die entsprechenden Informationen einfach im Internet zusammen. Meine Quellen sind:

• WordPress Erweiterung – Tutorial Teil 1: Die Idee | Blogrebellen Kreuzberg
• Benutzerdefinierte Felder in WordPress

Warum ich noch mal extra Links in den Meta-Daten setze

Manch einer wird sich jetzt mit Sicherheit die Frage stellen warum ich noch mal extra Links zu meinen Quellen oder den verlinkten Websites in den Meta-Daten setze. Das ist doch doppelt gemoppelt. Also was soll das?

Ganz einfach! Ohne diese Quellen, ohne andere Webistes oder Weblogs die mich inspirieren, gäbe es hier nur einen Bruchteil der veröffentlichten Artikel. Mit anderen Worten: Ohne das Internet und die Bloggerszene im speziellen würde mein Weblog nicht in dieser Form existieren. Also verlinke ich sehr gerne andere Websites, die mir helfen meinen Weblog am Leben zu halten.

Im Artikel sind es meist Hyperlinks zu Unterseiten / Artikeln des Anderen, in den Meta-Daten sind es immer Hyperlinks zu der entsprechenden Hauptseite.

Habe ich schon erwähnt das ich für die gegenseitige Verlinkung im Internet und vor allem innerhalb der Bloggerszene bin? Bin ich!

Meine Lösung: Wenn kein Vorschaubild im Artikel – dann Werbung anzeigen

Dazu müssen wir die Template-Datei bearbeiten die für die Ausgabe des Contents auf der Startseite verantwortlich ist. Bei älteren und einfach strukturierten Themes ist dies in der Regel die Datei index.html, die sich im Theme-Ordner befindet. Bei meinem Theme ist es allerdings die Datei content.php. Diese wird in einem Texteditor editiert. Hier empfehle ich notepad++. Ein wahrlich guter Editor mit syntax-highlighting, einer sehr guten “suchen und ersetzen” Funktion und weiteren hilfreichen Features. Ich schweife schon wieder ab -schlimm.

Der Code aus meiner content.php

<?php if ( has_post_thumbnail()) : ?>
	<div class="thumb">
		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array( 140,140 )); ?></a>
	</div>
<?php else : ?>
	<div class="adsleft">
		<!--hier kommt der Google Adsense Code hin-->
	</div>
<?php endif; ?>

Erklärung des Codes

Zeile 1 : Wenn “if” Vorschaubild “has_post_thumbnail” dann
Zeile 5 : ansonsten “else”
Zeile 9 : Ende der wenn/dann Abfrage

In den Zeilen 2 – 4 ist halt die Ausgabe des Vorschaubildes definiert und in den Zeilen 6 -8 die Ausgabe der Werbung von Google Adsense. Natürlich könnte dort auch etwas anderes eingetragen werden. Meinetwegen ein Standardbild wenn dem Artikel kein Vorschaubild zugeordnet wurde oder von mir aus auch dicke grüne Füße – egal. Der DIV in der Zeile 6 sorgt nur dafür das die Werbung innerhalb des Fließtextes angezeigt wird und ist über CSS-Angaben wie folgt definiert.

.adsleft {
	float:left;
	padding:0 20px 0 0;
	}

Das einzige, was jetzt beim Artikel schreiben beachtet werden muss ist wieviel Werbeanzeigen schon auf der Startseite angezeigt werden. Wenn man wie in meinem Fall jedem zweiten Artikel kein Vorschaubild zuordnen würde erschienen auf der Startseite wieder Artikel mit einer weißen Fläche links neben dem Text. Also schaue ich immer nach auf der Startseite wieviel Werbung bereits eingeblendet wird und ordne dementsprechend ein Vorschaubild dem Artikel zu oder auch nicht.

Ich bin sicher es gibt bei WordPress auch Möglichkeiten dies so zu coden das automatisch gezählt wird wann die nächste Werbung auf der Startseite angezeigt werden kann, doch dafür reicht mein gefährliches Halbwissen nicht aus. Ich finde meine Lösung durchaus praktikabel und glaube auch nicht das die Performance unter dieser kleinen “if”-Abfrage leidet.

Wie habt ihr das bei euch gelöst? Habt ihr Werbung fest eingebunden oder arbeitet ihr auch mit Abfragen um die Einblendung von Werbung zu steuern?

Profilseite im Backend um Felder für social Networks (Twitter, Facebook, Facebook Fanpage und Google plus) erweitern

Um zusätzliche Eingabefelder für die gängigen Social Networks auf der Profilseite im Backend von WordPress bereit zu stellen muss zunächst die Datei functions.php im Theme-Ordner bearbeitet werden. Der Einfachheit halber zeige ich euch mal den Code aus meiner Datei für die vier Web 2.0 Dienste Twitter, Facebook, Facebook Fanpage und Google plus.

function yoast_change_author_link( $link, $author_id, $author ) {
  if ( 'luigi' == $author )
    return 'http://www.delijo.de/delijo/';
  return $link;
}
add_filter( 'author_link', 'yoast_change_author_link', 10, 3 );

function yoast_add_twitter_profile( $contactmethods ) {
	// Add Twitter Profiles
	$contactmethods['twitter_profile'] = 'Twitter Profile URL';
	return $contactmethods;
}
add_filter( 'user_contactmethods', 'yoast_add_twitter_profile', 10, 1);

function yoast_add_facebook_profile( $contactmethods ) {
	// Add Facebook Profiles
	$contactmethods['facebook_profile'] = 'Facebook Profile URL';
	return $contactmethods;
}
add_filter( 'user_contactmethods', 'yoast_add_facebook_profile', 10, 1);

function yoast_add_facebook_fanpage( $contactmethods ) {
	// Add Facebook Fanpage
	$contactmethods['facebook_fanpage'] = 'Facebook Fanpage URL';
	return $contactmethods;
}
add_filter( 'user_contactmethods', 'yoast_add_facebook_fanpage', 10, 1);

Autorenbox mit Links zu social networks erweitern

So, damit hat man nun vier weitere Eingabefelder auf der Profilseite im Backend, in die die URLs der verschiedenen Profile eingegeben werden können.  Nun will man diese Informationen natürlich irgendwo im Weblog präsentieren. Ich entschied mich für die Autorenbox, die unter jedem Artikel angezeigt wird. Dazu öffnete ich die Datei content-single.php (die ist bei mir für die Einzelartikelansicht verantwortlich) und fügte den folgenden Code ein.

<?php $google_profile = get_the_author_meta( 'google_profile' );
if ( $google_profile ) {
	echo '<a href="' . $google_profile . '" rel="me">Google +</a>';
} ?><?php $twitter_profile = get_the_author_meta( 'twitter_profile' );
if ( $twitter_profile ) {
	echo ' · <a href="' . $twitter_profile . '">Twitter</a>';
} ?><?php $facebook_profile = get_the_author_meta( 'facebook_profile' );
if ( $facebook_profile ) {
	echo ' · <a href="' . $facebook_profile . '">Facebook</a>';
} ?><?php $facebook_fanpage = get_the_author_meta( 'facebook_fanpage' );
if ( $facebook_fanpage ) {
	echo ' · <a href="' . $facebook_fanpage . '">Fanpage</a>';
} ?>

Der komplette Code, der für die Darstellung der Autorenbox auf meinem Weblog sorgt sieht folgendermaßen aus.

<?php if ( get_the_author_meta( 'description' ) ) :  ?>
	<div class="author-info">
		<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'yoko_author_bio_avatar_size', 70 ) ); ?>
		<div class="author-description">
		<h3><?php printf( __( 'Author: %s', 'yoko' ), "<a href='" . get_author_posts_url( get_the_author_meta( 'ID' ) ) . "' title='" . esc_attr( get_the_author() ) . "' rel='me'>" . get_the_author() . "</a>" ); ?></h3>
		<?php $google_profile = get_the_author_meta( 'google_profile' );
if ( $google_profile ) {
	echo '<a href="' . $google_profile . '" rel="me">Google +</a>';
} ?><?php $twitter_profile = get_the_author_meta( 'twitter_profile' );
if ( $twitter_profile ) {
	echo ' · <a href="' . $twitter_profile . '">Twitter</a>';
} ?><?php $facebook_profile = get_the_author_meta( 'facebook_profile' );
if ( $facebook_profile ) {
	echo ' · <a href="' . $facebook_profile . '">Facebook</a>';
} ?><?php $facebook_fanpage = get_the_author_meta( 'facebook_fanpage' );
if ( $facebook_fanpage ) {
	echo ' · <a href="' . $facebook_fanpage . '">Fanpage</a>';
} ?>
		<p><?php the_author_meta( 'description' ); ?></p>
		</div>
	</div>
	<?php endif; ?>

Ich finds schön!

Link zum Autor auf eine andere Seite umleiten

Eine Besonderheit gibt es noch bei der Box, die unter den von mir geschriebenen Artikeln angezeigt wird. Normalerweise ist der Name des Autors mit der Archivseite zu den Artikeln des Autors verlinkt. In meiner Autorenbox führt der Link jedoch zu der “about”-Seite meines Blogs. Dies wird durch den folgenden Code in der functions.php erreicht.

function yoast_add_google_profile( $contactmethods ) {
	// Add Google Profiles
	$contactmethods['google_profile'] = 'Google Profile URL';
	return $contactmethods;
}
add_filter( 'user_contactmethods', 'yoast_add_google_profile', 10, 1);

Anmerkung 1: Ohne das oben erwähnte Tutorial hätte ich meine Autorenbox nicht überarbeiten können. Der Code ist aus diesem Tutorial und ich danke Joost de Valk für diese tolle Anleitung, auch wenn sie auf Englisch geschrieben wurde.

Anmerkung 2: Wer diesen Link anklickt wird feststellen das mein Weblog nun zwar verifiziert ist aber weiter unten auf der Seite gibt es Warnungen. Auch wird kein excerpt angezeigt. Wenn mir da jemand die Äuglein öffnen könnte wäre ich demjenigen sehr verbunden.

Der Marek fragte mich nämlich in dem Artikel WordPress Theme Yoko-child 1.0 steht zum Download bereit | delijo :

Deine Seite sieht wirklich ganz wunderbar aus! Ich habe eine Frage zu deiner Navigation unten auf der Startseite. Wie hast du das derart traumhaft hinbekommen? Auch rechts unter der Pfeil, der nach oben zeigt, macht echt was her!

Ich dachte, du hättest deine Navigation über das Plugin WP-Navi realisiert, konnte aber im Childtheme keinen Hinweis darauf finden.

Gruß
Marek

Nun, es ist wie Marek richtig vermutet das WordPress Plugin WP-PageNavi, das ich mit ein wenig CSS anpasste. Dafür änderte ich die Angaben in der Datei pagenavi-css.css, welche sich in dem Plugin-Verzeichnis befindet ( …/wp-content/plugins/wp-pagenavi). Da diese Änderungen bei einer Aktualisierung des Plugins wieder überschrieben würden befinden sich sich auch in der Datei style.css meines themes (…/wp-content/themes/yoko-child).

So, damit ihr eure Page-Navi anpassen könnt wenn euch mein Design gefällt hier die Angaben aus der Datei pagenavi-css.css

.wp-pagenavi {
	clear: both;
	text-align:center;
	font-weight: bold;
	height:50px;
}

.wp-pagenavi a, .wp-pagenavi span, a.page {
	text-decoration: none !important;
	color:#f0f0f0 !important;
	background:#ccc !important;
	padding: 15px 20px !important;
	margin: 5px !important;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	behavior: url(PIE.htc);
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	background:#333 !important;
}

.wp-pagenavi span.current {

}

Auf der Einstellungsseite des WordPress Plugins WP-PageNavi im Backend habe ich das Plugin so konfiguriert wie auf dem Screenshot zu sehen.

Dann wollte Marek noch wissen wie ich den “nach oben” Pfeil im unteren Bereich meiner Website realisiert habe. Dies ist einfach nur eine Grafik, die ich im Footer verlinkt habe. Der Code in der footer.php dazu lautet

<div class="clear"></div>
<div class="align-right">
	<a href="#page" class="top"><img src="http://www.delijo.de/blog/wp-content/themes/yoko-child/images/square/arrow-up.png" title="top" alt="top" /></a>
</div>...

Natürlich könnte dies auch eleganter mit einer Hintergrundgrafik realisiert werden. Dann bestünde auch die Möglichkeit bei Mouse-hover eine dunkle Grafik anzuzeigen. Vielleicht mache ich das auch noch irgendwann. Zur Zeit bin ich aber zu faul…

Es ist eigentlich ganz einfach. Man geht einfach bei der Tanja schauen wie die das gemacht hat, zieht sich aus ihren Artikeln zu dem Thema die Infos die man braucht, studiert ihren Quelltext zum besseren Verständnis und schon werden unter jedem Artikel die Vote-Buttons angezeigt. Fein säuberlich in einer Reihe ohne das einer der Buttons aus der selbigen tanzt.

Das Geheimnis des Erfolgs

Das Geheimnis des Erfolgs liegt darin dass für jeden Vote-Button ein eigener DIV angelegt wird. Diese können dann schön via CSS angepasst werden was margin, width, float angeht und schon klappt es mit den Vote-Buttons in einer Reihe. Ich musste da ziemlich lange rumprobieren bis es wirklich geklappt hat.

Das Grundgerüst für die Template-Datei content-single.php

<div class="clear"></div>
	<div class="box">
		<div class="wikios">
			...
		</div>
		<div class="twittern">
			...
		</div>
		<div class="gbut">
			...
		</div>
		<div class="fbshare">
			...
		</div>
		<div class="clear"></div>
		<div class="twitterfollow">
			...
		</div>
	</div>
<div class="clear"></div>

Die CSS-Anweisungen aus der Datei style.css für die einzelnen DIVs

.box {
	margin: 30px 0 10px 0;
	padding: 20px 0;
	overflow:hidden;
}
.wikios {
	float:left;
	width: 80px;
	margin-top:4px;
	}
.twittern {
	float:left;
	width:115px;
	}
html* .twittern {
	width:115px;
	}
.gbut {
	float:left;
	width:70px;
	}
.fbshare {
	float:left;
	width:120px;
	}
.twitterfollow {
	float:left;
	}

So, wo ihr den Code der einzelnen Dienste bekommt dürfte jeder wissen. Nicht? Ok Ok…

Offizielle Quellen für die Integration der Vote-Buttons

Twitter Follow-Button = http://twitter.com/about/resources/followbutton
Twitter Tweet-Button = http://twitter.com/about/resources/tweetbutton
Google +1 Button = http://www.google.com/webmasters/+1/button/
Facebook “gefällt mir” Button = http://developers.facebook.com/docs/guides/web/
Wikio Boost Button = http://www.wikio.de/tools/vote?referrer=%2F&backto=%2F&id=0

Dies sind die offiziellen Quellen. Leider ist der dort bereitgestellte Code oft nicht valide und muss weiter angepasst werden. Da ist die Tanja eine sehr gut Anlaufstelle.

Ein paar hilfreiche Links zu dem Thema

• Google +1 Button mit ein paar Spielereien einbauen | Crazy Girls Tipps
• Twitter Follow Button in Webseite oder Blog einbauen – der neue Folge Button | Crazy Girls Tipps
• Facebook Share Button ohne Javascript und W3C valide | Crazy Girls Tipps

Viel Spaß beim basteln!

Der Link zu Google+ als Beispiel

<a title="Profil bei Google +" href="http ://PFAD ZUM GOOGLE+PROFIL" target="_blank"><img title="Profil bei Google+" src="http://PFAD ZUM BILD" alt="Profil bei Google+" />  Google +</a>

Die Zahlenwerte in den Klammern

Die Zahlen in den Klammern werden durch Funktionen bei den jeweiligen Diensten ausgelesen. Da hatte ich bereits einen Artikel drüber geschrieben.

Wer sich den gesamten Code des Widgets anschauen möchte kann sich gerne in den Kommentaren melden. Wollte ihn hier erst komplett anzeigen lassen doch da die Hyperlinks und der verwendete php-Code interpretiert werden müsste ich jede Menge Leerzeichen einfügen. Das bringt dann ja nicht wirklich was.