Header Logo als Grafik oder als Text

Logo mit Grafik

In der header.php steht generell:
<div id="header" onclick="location.href='<?php echo home_url(); ?>';"
title="Mein Blog"></div>

und in der style.css wird dann der id=header ein Bild zugeordnet,
welches im Theme liegt.
#header {
background:#FFF url(images/logo.jpg) no-repeat scroll left bottom;
}

Vorteil: optisch frei gestaltbare Grafik (Photosphop)
Nachteil: Eine Grafik bietet für die Suchmaschine keinen „Nährwert“

Logo mit Text

alternativ ohne Logo Bild, stattdessen als Text.

In der WordPress Installation hat man den Blognamen und eine Beschreibung bereits eingegeben.

Diese beiden Zeilen aus dem obigen Bild lassen sich auch in die Header.php einbauen. Die Styling Klassen sind bereits von WordPress vergeben. [mehr Infos]

• <p><a class="name"><?php bloginfo(’name‘); ?></a></p>
• <p><a class="description"><?php bloginfo(‚description‘); ?></a></p>

dadurch werden die Angaben im Kopfbereich des Blogs angezeigt.
So sieht die einfache Umsetzung hier im Blog aus:

Vorteil: Der Text ist für die Suchmaschine „greifbar“
Vorteil: Der Text lässt sich schnell und bequem ändern
Nachteil: Gestaltung erfordert css-Kenntnisse

Die Klassen „name“ und „description“ lassen sich nach belieben in der style.css gestalten.

Hier ein Beispiel für eine aufwändigere Umsetzung:

umgesetzt im Adventskalender Blog

Name: Ein Lichtlein brennt
Description: Advent Advent

Header-Code:
<div id="header" onclick="location.href='<?php echo get_settings('home'); ?>';" title="Advent Advent - Ein Lichtlein brennt">
<div id="header-content">
<p><a class="description"><?php bloginfo('description'); ?>&nbsp;&nbsp;</a>
<a class="name"><?php bloginfo('name'); ?></a></p>
</div>
</div>

Styling in der style.css:

#header-content {
font-family: Satisfy, Arial, 'Trebuchet MS', Helvetica, sans-serif;
text-align: left;
width: 90%;
margin:0 auto;
}
#header-content .description {
background:#9b0608;
color: #bbb;
font-size: 2.3em;
border: none;
}
#header-content .name {
background:#9b0608;
color: #eee;
font-size: 2.3em;
text-shadow: 0 0px 14px #FFFF66;
border: none;
padding-right: 10px;
}

p.s. Der Schrifttyp ist über google-fonts eingebunden.
Script Aufruf im Header:
<link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>