Bin Layer ist (meiner Meinung) der beste Layer Ad Anbieter am deutschsprachigen Markt. Mit Layer Ads kann man Besucher in bares Geld umwandeln. So generiert man zwischen 2 und 6 Euro / 1000 Besuchern.

Für wen ist Binlayer geeignet

Binlayer ist hervorragend für Traffic Blogs geeignet. Darunter verstehe ich Blogs, die relativ viele Besucher haben.

Die Gefahr liegt im “Verärgern” der Stammleser, weshalb ich diese Plugin geschrieben habe, das diese Gefahr deutlich entschärft, ohne dass man auf Einnahmen durch Layer gänzlich verzichten muss.

Wozu das Plugin

Natürlich kann man den Binlayer Code auch einfach in den Headerbereich kopieren. Allerdings bietet BinLayerpress deutlich mehr Einstellungsmöglichkeiten. Man kann so gewisse Besucher von der Einblendung ausnehmen, oder auch nur für gewisse Besucher einblenden.

Einstellungen

Nach der Installation brauchst du noch einen BinLayer Account. Solltest du meine Arbeit hier unterstützen wollen, so wäre ich dankbar, wenn du einen Binlayer Link auf diese Seite benützt und einen neuen Account anmeldest. Kostet dir nichts und ich werde ein wenig für diese Arbeit honoriert.

Im “Einstellungen” Menü gibt es nun ein “BinLayerpress” Menu. Du gibts zuerst die Codes für die verschiedenen Ad-Types ein. Dazu generierst du alle 3 verschiedenen Typen in Binlayer und gibst dann den Zahlencode aus dem Adcode in das jeweilige Feld ein.
Dann gibst du ein welche Werbung du “normalerweise” im Blog verwenden willst. Wenn du nur für manche Seiten Layer Ads verwenden willst, dann kannst du hier auch “keine” angeben.
Danach werden Ausnahmen spezifiziert. Du kannst Ausnahmen für alle möglichen Arten von Seiten angeben. So kannst du z.b. nur auf Suchergebnisseiten Layer Werbung verwenden. Werbung nur bei älteren Artikeln einblenden, keine Layer Werbung für angemeldete User usw.

Wichtig ist, dass die Ausnahmen in der Reihenfolge nach abgearbeitet werden. Sollte eine Ausnahme zutreffen, dann wird die eingestellte Werbung angezeigt und alle weiteren Ausnahmen nicht mehr berücksichtigt.

So kann man relativ gezielt für verschiedenste Seiten verschiedene Werbungen anzeigen. Dadurch werden die Nachteile von Layer Ads deutlich entschärft und Stammleser nicht verärgert. Zeigt man z.B. keine Werbung für Artikel die relativ jung sind und für angemeldete User, dann wird man kaum einen Stammleser je mit einer Layer Werbung belästigen.

Warum ist auf dieser Seite keine Layer Werbung

Ich betreibe diese Seite nebenbei und mache keinerlei Werbung etc. dafür. Die Zugriffe auf diese Seite sind so minimal, dass ich auf Layer Ads verzichte. (kann sich ja mal ändern

In der Artikelreihe über das Selbstbautheme habe ich ja einige SEO-technische Optimierungen vorgenommen. Im Prinzip war mir aber selber nicht ganz klar, ob diese der wahre Weg sind, oder überhaupt einen besonderen Nutzen haben. Bei Veröffentlichung der Artikel zeigte sich bereits erster Erfolg, bei meinem “Testblog”. Jetzt einige Monate später zeigt sich aber erst wirklich die ganze Auswirkung.
Es handelt sich um einen Heimwerkerblog. Zugriffe kommen praktisch nur über Google. Ich habe kaum Links von aussen und bewerbe den Blog nicht. In den letzten Monaten hab ich auch kaum Artikel verfasst und wenn, dann waren diese nicht sehr erfolgreich
Die Zugriffsentwicklungen lassen sich also mit der hoher Sicherheit auf das selbstprogrammierte Theme zurückführen. Das alte Theme hatte fast die gleiche Optik, war aber ein fertiges Downloadtheme. Eine Grafik sagt mehr als 1000 Worte !!!!

Adsensenseoptimizer ist ein Plugin zum automatischen Einfügen von Google Adsense Werbeblöcken in ein Wordpress Blog. Davon gibts ja bereits genug, aber trotzdem konnte mich kein bestehendes Plugin ganz zufrieden stellen. Adsense Optimizer hat einige Besonderheiten die ich bei anderen Plugins nicht gefunden habe:

• Unterschiedliche Behandlung von single-Seiten mit einem Post und Seiten mit mehreren Beiträgen. Einfügen in den Contentbereich eines Posts führt bei multiple-Seiten zwangsläufig zu schlechter Positionierung der Werbung und zum Verstoß gegen die Google Richtlinien durch den Versuch zu viele Werbungen einzublenden.
• Intelligentes Einfügen von Ads ohne html Tags wie Aufzählungen, Bilder usw. zu unterbrechen
• Einblendung von mehreren/wenigeren Werbungen abhängig von der Länge des Posts.
• Komfortable Gestaltung (Farbe, Größe etc.)
• Einblenden der Ads in Content, aber auch in Sidebars, Footer usw.
• Keine Einblendung von mehr als 3 Ads pro Seit um den Google Richtlinien zu entsprechen
• Zuweisen verschiedener Channels pro Ad um ordentliche Erflgskontrolle zu ermöglichen
• Einfügen einer Werbung als Widget
• uvm….

Auf der Plugin Page gibt es eine genaue Installationsanleitung etc.

Das Plugin kommt jetzt auf allen meinen Blogs zum Einsatz. Es gibt auch eine nette Erweiterung “Adsense on Top” die mir aber etwas zu aufdringlich ist.

Von der Grundstruktur haben wir unser Theme ja bereits recht SEO freundlich gestaltet, jetzt gilt es aber noch die BasisSEOaufgaben per Plugin zu erledigen. Zuerst legen wir mal fest was für ein SEO optimales Theme nötig wäre. Dann schauen wir uns einge Plugins an, die das erledigen (oder auch nicht).

Suchmaschinen

Im deutschsprachigen Raum gibt es Google, Google und Google. Alles andere ist Nebensache. Meine Suchmaschinenverweise kommen zu 96% von Google, 1-2% Yahoo und dann der ganze Rest. Bei Suchmaschinenoptimierung zählt also Google und sonst nichts.
Häufig wird SEO als “Kampf gegen Suchmaschinen” betrachtet und besteht hauptsächlich aus Empfehlungen wie Suchmaschinen ausgetrickst werden können. Ich bin der Meinung, dass Suchmaschinen hauptsächlich Interesse haben einen guten Dienst anzubieten. Seiten mit Inhalt werden gerne und gut ausgelesen und gereiht. Wir bieten eine solche Seite und haben daher nicht das Bedürfnis Google etwas vorzugaukeln. Google ist also unser Freund. Hauptproblem bei SEO ist dann, dass wir Google dabei unterstützen müssen unsere Seiten richtig zu interpretieren. Es ist gar nicht so leicht vollautomatisch eine Seite auszulesen und daraus zu erkennen was die Seite kann/will etc. Genau das soll Google aber ermöglicht werden.

Metatags

Auch wenn sie an Wichtigkeit verloren haben lassen wir es uns natürlich nicht nehmen ordentliche Metatags zu setzen.
Das Wichtigste Tag ist title. Hier ist wichtig je nach Seite unterschiedliche titles zu setzen. Es gibt nichts SEO feindlicheres als immer nur den Blogtitel einzusetzen wie man das immer noch manchmal sieht. Hier gilt es eine schöne Kombination aus Blogtitel, Subtitel und Beitragstitel festzulegen.
Weiters soll description und keywords gesetzt werden. Die Sprache wird zwar nur nch von wenigen Suchmaschinen ausgelesen, aber sicher ist sicher.
Dann gibt es noch viele weitere Meta Tags deren Vorteile bei Suchmaschinenrankings umstritten sind. Bei Google dürften sie nicht verwendet werden, also kann man die mal links liegen lassen.

Richtige HTML-Response Codes

Essentiell ist auch das Senden eines richtigen Response Codes. Wenn eine Seite nicht gefunden wird, dann muss ein 404 Code gesendet werden. Viele Seiten schicken eine Fehlerseite, aber einen 200 (ok) Code, wodurch die Seite in Google indiziert wird. Google soll ganz klar wissen, welche Seiten es gibt und welche nicht. Modernere Wordpress Versionen machen das richtig, also ist es vermutlich sinnvoller auf eine aktuelle Version zu updaten, als ein Plugin hierfür zu installieren.

Indizieren der richtigen Seiten

Problematisch bei Wordpress ist, dass eine Seite über zahlreiche Adressen abrufbar ist. Google verwirrt das und wird im schlimmsten Fall sogar als “duplicate content” gewertet, was zu Abstrafungen führt. Ein Bericht ist z.b. über domain.com/titel abrufbar. Die Verwendung dieser “Hauptseite” wollen wir auch erreichen. Man kann ihn aber oft auch über domain.de/tag/titel abrufen oder über domain.com/kategorie/titel, das ganze dann noch mit oder ohne www usw. usw. Häufig werden dann auch noch die falschen Adressen besser in Google gereiht. Alles Effekte die vermieden gehören. Hier gehören noindex/index, nofollow/follow und vor allem canonical tags richtig gesetzt.
Um Abstrafungen durch duplicate content auf jeden Fall zu vermeiden halte ich es für das beste nur die Single Pages indizieren zu lassen. Suchergebnisse, Archive, Kategorieansichten uvm. werden nicht indiziert (noindex, dofollow). Auf Single Views wird immer der canonical link gesetzt. In unserem Fall verzichten wir auf statische Seiten.

Die Startseite bei Wordpress

Schwierig ist es was mit der Startseite zu tun ist. Üblich bei Blogs ist, dass die letzten paar Artikel ganz oder als “Kurzversion” zu sehen sind. Im Prinzip ist das Content, der keine Suchmaschinenrelevanz hat. Die Sidebars etc. enthalten ohnehin nur Schrott. Google ist also mit einer Seite konfrontiert, die stets wechselnden Inhalt mit möglichweise dauern neuen Keywords produziert.
Dann handelt es sich noch dazu um duplicate content, weil die Artikel gibt es als Einzelseiten und sie sollen auch so gefunden werden.
Auf der anderen Seite will man aber natürlich seine Startseite auch in den Suchmaschinen wissen. Wenn man von extern verlinkt verwendet man üblicherweise die Startseite etc. Vom SEO Standpunkt ist es daher am besten wenn man eine statische Seite mit optimiertem Content als Startseite zur Verfügung stellt. Diese wird mit Überschriften und Keywords optimiert. Eventuell kann man noch einen Auszug der letzten Artikel bringen um etwas mehr “Blog” zu sein.

Sitemap

Das ganze sollte natürlich auch noch Google in Form einer Sitemap “erklärt” werden.

Mit diesen Einstellungen machen wir unsere Seite für crawler transparent und können damit rechnen optimal in Suchmaschinen platziert zu werden. Diese Methode ist klar konseqeunt und vielen Usern zu restriktiv. Viele wollen dann doch diverse Archive ebenfalls ausgelesen haben um möglichst viele Seiten in Google zu bekommen. Ich persönlich halte das für unnötig.

Für diese Aufgaben verwendet man am besten ein (oder mehrere) Plugins. Eine nette Übersicht gibt es z.B. hier.

Die Plugins haben zum Teil sehr viele Funktionen. Genau die obigen Anforderungen lassen sich mit keinem mir bekannten Plugin erfüllen, aber die meisten leisten doch sehr gute Dienste. Daneben sollte man noch ein Plugin zur Erstellung von Sitemaps installieren.
.

In unserem Blog spielen statische Seiten keine wesentliche Rolle. Trotzdem wollen wir ein paar kleine Seiten einfügen in denen Impressum etc. Platz finden. Diese können wir im Admin Bereich einfach anlegen. In unserem Blog legen wir vorerst 2 statische Seiten an. “Impressum” und “Mithilfe”.
Diese Seiten werden dann in der Sidebar links unten eingeblendet. Dazu gibt es das Template Tag wp_list_pages mit einer Vielzahl von Einstellungsmöglichkeiten.
Also noch in die Sidebar etwas Code eingebaut:

<h6>Menü</h6>
<ul>
<?php wp_list_pages( 'title_li=' );?>
</ul>

Und unser Menü mit den statischen Seiten ist fertig.

Es reicht, wie wir auf der 404 Seite gesehen haben, ein Aufruf der Funktion get_search_form und schon hat man eine fertige Suche. Die Suchergebnisse werden über die index.php ausgegeben, was nur teilweise dem entspricht was man sich von einer Suchergebnisseite erwartet.

Alternative ist die Ausgabe über eine eigene Seite. Diese muss search.php heißen. Hier kann man eine völlig eigene Gestaltung erstellen. Für unser Template wollen wir aber die gleiche Optik wie bei der index.php. Es sollen aber immer nur Kurzfassungen der Beiträge angezeigt werden. Üblicherweise wird hier das Wordpress Excerpt verwendet (die ersten 55 Wörter eines Beitrags), das ich hier aber auch nicht sehr geeignet finde. Bei Suchergebnissen erwartet man sich eher die Anzeige des Textausschnitts, in dem auch das Suchwort vorkommt.

Zum Glück gibt es hier ein schönes Plugin namens WP Search Extracts, das wir an dieser Stelle als erstes Plugin einsetzen. Einfach hier downloaden, in das Plugin Verzeichnis kopieren und aktivieren. Sieht man sich den Quelltext einer Suchergebnisseite an, so stellt man fest, dass das Plugin das gefundene Suchwort mit einem em tag der klasse search-match umfasst. Also verwenden wir hier noch etwas css um das ganze etwas besser aussehen zu lassen und unsere Suche ist fertig. Nachdem die Suchergbnisseite so genau das ist was ich erwarte, verzichte ich auf die Erstellung einer search.php.

Derzeit gibt es eine Suche nur auf der 404 Seite. Diese war ursprünglich aber auch im Header unten links vorgesehen. Also fügen wir auch ein Formular dort ein. Das von get_search_form ausgegebene Formular ist hier nicht das was wir brauchen und auch CSS hilft nicht weiter. Jetzt gibt es die Möglichkeit eine searchform.php anzulegen in der ein Formular ausgegeben wird. Diese wird dann automatisch verwendet. Davon wollen wir mal Gebrauch machen.

Wenn wir im Codex die get_search_form Funktion ansehen, so steht dort, dass die Funktion in der wp-includes/general-template.php definiert ist. Wenn man diese Datei öffnet kann man sich die Funktionsweise ansehen. Was wir hier machen ist den 2. Teil des Codes zu “stehlen” und in die searchform.php zu kopieren. Das Label streichen wir einfach raus. Unsere searchform.php sieht also so aus:

<?php 
	$form = '<form role="search" method="get" id="searchform" action="' . get_option('home') . '/" >
	<div>
	<input type="text" value="' . esc_attr(apply_filters('the_search_query', get_search_query())) . '" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
	</div>
	</form>';
 
	echo apply_filters('get_search_form', $form);
 ?>

Jetzt haben wir ein Suchformular ohne Label vorne, das wir in den header einbauen und per css positionieren können. Wer jetzt sehr genau ist, der wird sagen, dass auf der 404-Seite die Suche 2 mal vorkommt, was
1. nicht sehr schön &
2. nicht ganz korrekt ist, weil die id searchform dann 2 mal vorkommt
Nachdem wir aber validen Code wollen blenden wir daher auf der 404 Seite das Suchformular im Header aus.

<?php if (!is_404()) {echo('<div id="search">'); get_search_form(); echo('</div>'); } ?>

Damit haben wir unsere Suche fertig.

Es wird immer wieder vorkommen, dass Nutzer Seiten abfragen, die nicht existieren. Der Response Code des Servers ist dann der allgemein bekannte Code 404.
Wordpress lädt standardmäßig die index.php und findet im Loop keine darzustellenden Artikel. In unserer Index.php geben wir “Sorry, no posts matched your criteria.” aus. Wenn du die deutsche Version benützt wird das auf Deutsch übersetzt. Etwas besser als die hässliche Browserfehlerseite, aber Wordpress wäre nicht das beste Blogsystem wenn es nicht eine schönere Möglichkeit bieten würde.
Man kann eine 404.php in seinem Theme anlegen. Wird nun eine unbekannte Seite aufgerufen, so wird die 404.php geladen. Ziel dieser Seite sollte es sein nicht nur mit einer nackten Fehlermeldung Besucher abzuschrecken, sondern zum Weitersuchen zu animieren. Dazu legen wir eine nette Grafik und freundlichen Text auf dies Seite und dazu bieten wir gleich noch eine Suche für den Blog an.
Das ganze könnte etwas so aussehen:

<?php get_header(); ?>
 
<div id="outer">
	<div class="outerwrap">
		<div id="centrecontent">
				    <div class="text">
 
		<h2 class="center"><?php _e('Error 404 - Not Found', 'kubrick'); ?></h2>
		<p>Bitte nütze unsere Suche um die richtige Seite zu finden</p>
		<?php get_search_form(); ?>
		<img class="alignright" src="<?php bloginfo('template_directory'); ?>/images/404.png">
		</div>
		</div>
		<div id="left" class="sidebar">
			<?php get_sidebar();?>
		</div>
		<div class="clearer"></div>
	</div><!--end outerwrap -->
	<div id="right" class="sidebar">
		<?php get_sidebar('right');?>
	</div>
	<div class="clearer"></div>
</div> <!-- end outer -->
 
<?php get_footer(); ?>

Die Seite testet man indem man eine Unterseite eingibt, die nicht existiert. (www.beispiel.com/dieseseitegibtsgarnicht)

Im nächsten Teil gibts weitere Details zur Suche.

Bis jetzt haben wir uns mit der comments.php des default Themes zufrieden gegeben. Im Prinzip ist das auch gar nicht mal so schlecht, mit der Einschränkung, dass es Englisch ist. Man hat also die Wahl es mit CSS zu gestalten, womit ganz schöne Ergebnisse möglich sind, oder ein eigenes zu programmieren. Obwohl ich normalerweise kein Freund davon bin Altes abzuändern, zahlt es sich bei der comments.php doch aus. Es steckt ziemlich viel Logik dahinter was hier angezeigt wird. (Kommentieren erlaubt, Kommentieren nur wenn eingeloggt, usw.) Diese Logik sollte man aus der comments.php übernehmen.

In dieser Datei finden sich eine Menge _e() und __() Funktionen. Hier wird jeweils eine englische Phrase angegeben und im 2. Parameter (kubrick) das Übersetzungsfile, wo Wordpress die anderssprachigen Übersetzungen findet. Nachdem wir aber ein rein Deutsches Theme machen kann man hier fixe Texte eingeben.

Nachdem ich die Logik und den Aufbau der comments.php recht sinnvoll finde ersetze ich nur die -E und __ Funktionen. Die Ausgabe der Comments adaptiere ich etwas und das Styling erfolgt in der styles.css
Fertig.

Zum Ansehen hier die comments.php. Augrund der vielen Logik leider etwas unübersichtlich !

<?php
// Do not delete these lines
	if (isset($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');
 
	if ( post_password_required() ) { ?>
		<p class="nocomments">Bitte Passwort eingeben.</p> 
	<?php
		return;
	}
?>
 
<!-- You can start editing here. -->
<div id="commentwrap">
 
<?php if ( have_comments() ) : ?>
	<h3 id="comments"><?php comments_number("keine Kommentare", "Ein Kommentar", "% Kommentare");?> <?php printf("zu", the_title('', '', false)); ?></h3>
 
	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
 
    <ol class="commentlist">  
	    <?php $oddcomment="";
	    	foreach ($comments as $comment) : ?>  
		    <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>"> 
		    <?php if ($oddcomment=="") $oddcomment='class="oddcomment"'; else $oddcomment=""; ?>
		    <div class="quote"><?php comment_text() ?></div>  
			    <?php if ($comment->comment_approved == '0') : ?>  
			    <em>Your comment is awaiting moderation.</em>  
			    <?php endif; ?>  
		    </li>  
		    <div class="commentmeta"><?php comment_author_link() ?> - <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> - <?php comment_time() ?> <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?></a></div>  
		    <?php  
		    ?>  
	    <?php endforeach; /* end for each comment */ ?>  
    </ol>  	
 
	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
 
 <?php else : // this is displayed if there are no comments so far ?>
 
	<?php if ( comments_open() ) : ?>
		<!-- If comments are open, but there are no comments. -->
 
	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Kommentare nicht möglich</p>
 
	<?php endif; ?>
<?php endif; ?>
 
 
<?php if ( comments_open() ) : ?>
 
<div id="respond">
<h6><?php comment_form_title( "Senf dazugeben", "Gib doch deinen Senf zu %s " ); ?></h6>
 
	<div id="cancel-comment-reply"> 
		<?php cancel_comment_reply_link() ?>
	</div> 
 
<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p><?php printf('Du mußt <a href="%s">eingeloggt</a> sein um zu Kommentieren', wp_login_url( get_permalink() )); ?></p>
<?php else : ?>
 
	<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
	<?php if ( is_user_logged_in() ) : ?>
 
	<p><?php printf('Eingeloggt als <a href="%1$s">%2$s</a>.', get_option('siteurl') . '/wp-admin/profile.php', $user_identity); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="ausloggen">Ausloggen</a></p>
 
	<?php else : ?>
	<p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
	<label for="author"><?php _e('Name', 'kubrick'); ?> <?php if ($req) echo("das muss leider sein"); ?></label></p>
 
	<p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
	<label for="email">Mail (bleibt unter uns !)<?php if ($req) echo("das muss sein"); ?></label></p>
 
	<p><input type="text" name="url" id="url" value="<?php echo  esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
	<label for="url">Website</label></p>
 
	<?php endif; ?>
 
	<p><?php printf('<strong>XHTML:</strong> erlaubte Tags: <code>%s</code>', allowed_tags()); ?></p>
 
	<p><textarea name="comment" id="comment" cols="81" rows="10" tabindex="4"></textarea></p>
 
	<p><input name="submit" type="submit" id="submit" tabindex="5" value="Senden" />
	<?php comment_id_fields(); ?> 
	</p>
	<?php do_action('comment_form', $post->ID); ?>
 
	</form>
 
<?php endif; // If registration required and not logged in ?>
</div>
 
<?php endif; // if you delete this the sky will fall on your head ?>
 
</div>

Wem das zu kompliziert ist, der kanns auch einfach übernehmen und mit dem css rumspielen. Hier der css Teil für die Kommentare.

/* Kommentare - das Styling der Kommentare */
.commentlist .quote {
	background:url(images/zitat.gif) no-repeat top right;
	}
 
.commentlist li {
 	padding: 5px 18px 22px 18px;
	margin-top:25px;
	background:#eeffee url(images/bg_commentlist.gif) bottom no-repeat;
	border:1px solid white;
	}
 
.commentlist li.oddcomment{
	background:#eeeeff url(images/bg_commentlist.gif) bottom no-repeat;
	}
 
.commentlist {
	list-style-image:none;
	list-style-type:none;
	list-style-position:outside;
}
 
.commentmeta{
	font-style:normal;
	font-size:85%;
	font-style:oblique;
	color:#777777;
	margin:-12px 10px 10px 0;
	float: right;
	}
 
 
.commentmeta a{
	font-size:inherit;
 
	color:#777777;
	}
 
#commentwrap {
	clear:both;
	margin:20px;
	border:1px solid green;
	padding:20px;
	font-size:14px;
}
 
#commentwrap #respond * {
	font-size:12px;
}
#commentwrap #respond h6 {
	padding-top:15px;
	font-size:15px;
}

Optisch ist unser Theme jetzt mal halbwegs fertig. In den weiteren Teilen gehen wir auf Verfeinerungen ein, die das Theme noch perfektionieren.

Das Theme zum jetzigen Stand gibt es HIER zum Download. Noch ist es sehr übersichtlich !

Damit die Beiträge selbst was gleichsehen müssen wir noch das CSS dafür gestalten. Am Besten ist es du erzeugst im Editor (auf HTML Ansicht) einen Post in deinem Blog in dem alle Tags vorkommen, die du so einsetzen willst. (h1-h6, em, strong, p, Bilder links, rechts & mittig mit Unterschrift, Aufzählungen usw.)
Wenn du jetzt diesen Beitrag ansiehst, so sieht das eher mager aus. Also gilt es mal die Standard HTML Tags zu stylen. Den h1 Tag haben wir bis jetzt nur in Verbindung mit der Klasse titel gestyled. Du kannst also innerhalb deiner Beiträge andere h1 Tags verwenden, wenn du diese für so wichtig hältst (siehe SEO Überlegungen).
Sourcecode ordentlich zu stylen ist schwierig, weshalb man den mal beiseite lassen und auf ein späteres Plugin warten sollte.

Styling von Bildern

Wordpress bietet dem Verfasser eines Artikels die Möglichkeit Bilder hochzuladen und diese Einzufügen. Dabei kann man sie in der Größe ändern, von Text umfließen lassen und eine Unterschrift daruntersetzen. Dies funktioniert aber natürlich nur, wenn es auch im CSS Stylesheet implementiert ist. Hier mal ein Basisstyling, mit dem die Bilder in netten Rahmen dargestellt werden. Diese Namen sind durch Wordpress vorgegeben und können nicht geändert werden.

.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto; margin-right: auto;
    text-align: center;
}
.alignleft {
    float: left; margin-right: 10px;
}
.alignright {
    float: right; margin-left: 10px;
}
.wp-caption {
    text-align: center;
    background: #eeffee; 
	border:1px solid grey;
    padding: 6px 5px 5px 5px;
    margin-top: 3px; margin-bottom: 10px;
}
.wp-caption img {
    margin: 0; padding: 0; border: 1px solid #cde;
}
.wp-caption p.wp-caption-text {
    font-size: 11px; line-height: 17px;
    margin: 0; padding-top: 2px;
}

Mit diesen Schritten müßten auch unsere Posts ganz gut aussehen. Schau dir mal einige Posts durch und verfeinere eventuell noch das Aussehen… Dann gehts weiter im nächsten Teil.

Bis jetzt haben wir nur den Titel und den Inhalt des Beitrags augegeben. Hier gehört noch getuned.

Metadaten

Von den Metadaten möchte ich in der Übersicht nur das Datum und die Kategorie.
Beim Datum wird abgefragt ob eine function namens relative_date vorhanden ist. Diese Funktion werden wir später noch einfügen. Derzeit ist die Funktion nicht verfügbar weshalb die normale Datumsfunktion benützt wird (Monat und Jahr). Wenn du genauere Erklärungen zu den Funktionen suchst, dann such im Codex. Hilfreich ist es auch einfach in Google die funktion und “codex wordpress” einzugeben. Ist meist schneller als im Codex selbst zu suchen.

Inhalt des Posts

Ich möchte bei meinem Blog die Nutzung der Einzelseiten für einen Beitrag focieren. Dies hat einerseits SEO Gründe, andererseits gefallen mir Blogs nicht, die auf der Startseite die ganzen Beiträge listen. Sieht gerade bei langen Beiträgen unmöglich aus. Ich will daher auf der Startseite nur den Anfang eines Beitrags zeigen und so zum Klick auf die Einzelseite animieren. Wordpress stellt hier das sogenannte Excerpt zur Verfügung, das leider nicht ganz optimal ist. Es gibt daher einige Plugins die das Excerpt verbessern, ich wähle hier aber eine andere Variante, die Mitarbeit des Autors vorausgesetzt, die schönste Lösung bietet. Ich werde längere Beiträge mit dem more-Tag trennen. Es wird so nur der Beitrag bis zum more Tag angezeigt. Der more Tag kann per Editor eingefügt werden.
Sollte der Autor beim Feld “Auszug” etwas eintragen, dann wird dieser Auszug angezeigt.
Ansonsten möchte ich den ganzen Beitrag auf der Übersichtsseite, was bei kurzen Beiträgen eine sinnvolle Variante ist.
Wordpress bietet diese Funktionalität nicht an, sie ist aber leicht programmiert.

single.php oder index.php für Einzelseiten

Wordpress sucht bei der Anzeige eines Einzelartikels nach der Datei single.php im Theme. Ist dieses nicht vorhanden, dann stellt es Einzelbeiträge auch mit der index.php dar. Dieses Verhalten ist auch bei Kategorieseiten, Suchseiten usw. implementiert und ist genial. Dem Themeentwickler ist es nun freigestellt, ob er Ansichten extra codieren will, oder nicht. Nachdem es Ziel ist unser Theme extrem schlank zu halten, bleiben wir vorerst nur bei einer index.php. Vorteil ist auch, dass Änderungen leicht durchzuführen sind und nur die index.php angepaßt werden muss. Unterschiedliche Darstellungen müssen aber so natürlich programmiert werden, weil man ja z.b. in der Einzelanzeige immer den ganzen Text sehen will und nicht nur den Auszug. Wordpress stellt dafür die Funktion is_single zur Verfügung. Gleichzeitig stellen wir unter dem Beitrag in der Single View auch noch ein paar zusätzliche Metadaten und die Kommentare dar. Für die Kommentare gibt es die Funktion comments_template, die die Datei comments.php inkludiert. Nachdem wir diese Datei noch nicht erstellt haben verwendet Wordpress die Datei aus dem Default Theme.

Dann sollen die Titel der Beiträge noch mit den Einzelseiten verlinkt werden, weil man diese ja sonst nicht aufrufen kann.
Hier also der neue Teil innerhalb des Loops:

            <h1 id="post-<?php the_ID(); ?>" class="titel">
            <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
            <?php the_title(); ?>
            </a>
            </h1>
 
		 	<div class="metadata">
			 	<?php // --- datum - falls funktion "relative date" installiert ist, das relative Datum, sonst normal 
				if (function_exists('relative_date')) relative_date('<span class="datum">','</span>'); 
			    else {echo('im <span class="datum">'); the_time('M/y'); echo('</span>');} ?>
 
				<?php echo("&nbsp;abgelegt unter&nbsp;"); the_category(', ') ?>
			</div> <!-- end metadata -->
 
		    <div class="text">
		          <?php 
		          if (has_excerpt() and !is_single()) 
					echo $post->post_excerpt;
		           	else the_content('mehr davon...');
 
		          if (is_single()) { ?>	
		          	 <div class="postinfo">
            			<dl>
                		<dt>Info: </dt>
                		<dd><em><?php the_title(); ?></em> ist Beitrag Nr. <?php the_ID(); ?></dd>
                		<dt><?php _e('Author:'); ?> </dt>
                		<dd><?php the_author(); ?> am <?php the_date(); ?> um <?php the_time(); ?></dd>
                		<dt><?php _e('Category:'); ?> </dt>
                		<dd><?php the_category(','); ?></dd>
                		<dd><?php the_tags(''); ?> &nbsp;</dd>
                		<dt>Trackback: </dt>
                		<dd><a href="<?php trackback_url() ?>">Trackback URI</a></dd>
            			</dl>
            		</div>
 
		            <p class="prevnextpost"><?php previous_post_link(); ?>&nbsp;-&nbsp;
		            <?php next_post_link(); ?></p>
 
		    	<?php } // endif is_single() ?>
		    </div>
    		<?php comments_template(); // inkludiert comments.php in single beiträgen ?>

Das stylen erfolgt über die Klasse prevnextpost und postinfo. Das überlass ich mal dem eigenen Geschmack, ansonsten kann man sich eine Version des Themes in einem späteren Artikel downloaden.

Im Prinzip haben wir mit nicht mal sehr vielen Zeilen Code einen bereits fertig funktionsfähigen Blog erzeugt. Es gibt eine Übersicht, Einzelseiten und Kommentarfunktion. Die Posts machen wir im folgenden Beitrag noch etwas schöner.