Geld verdienen mit Social Media
Geld verdienen mit TextenDas Erste was ins Auge springt, wenn man eine Webseite besucht ist das Bild im Header. Aber auch Werbung wird hier sehr schön erkannt. Wir werden also ein Bild für den Header hochladen, ein Widget für den Header erstellen, in welches wir Werbung einbauen können und die Navigation unter den Header verschieben.
Das Bild in den Header einfügen
Das Thesis Theme bietet dafür eine eigene Funktion an. Hier kann man sehr bequem das Bild per Klick hochladen und einfügen. Dazu sagt das Thesis Theme an, wie breit das Headerbild maximal sein darf.
Das passende Bild kann man sich vorher bereits mit Photoshop vorbereiten. Dann muss man es nur noch hochladen. Dazu habe ich einen Screenshot erstellt, der das veranschaulicht.
Das Headerbild ist aber nur der eine Teil. Ich habe die rechte Seite auf Blogverdiner übrigens mit Absicht weiß gelassen, da ich hier mein Widget positionieren möchte.
Gehen wir aber kurz noch einmal die einzelnen Schritte durch:
- 1: Über den “Thesis Reiter” in der WordPress Admin Oberfläche kann die Option 2: “Header Image” ausgewählt werden.
- 3: Über diesen Button gelangt man zum Explorer. Hier kann man nun sein Bild heraus suchen.
- 4: Hier ist die maximale Breite angegeben, mit der das Bild angezeigt wird. Größere Bilder passt das Thesis Theme automatisch an.
Während es bei anderen Themes teilweise wirklich schwierig ist, ein Bild in den Header zu bekommen, macht Thesis das wirklich einfach. Ein weiterer Vorteil, der für ein Premium Theme spricht.
Widget in den Header einfügen
Für den Header dachte ich mir, wäre eine Adsense Anzeige toll. Ich habe mich für eine Anzeige in Bannergröße entschieden (468×60 Pixel). Das erstellen eines Widgets erfordert einen Eingriff in die Systemdateien von Thesis. Das ist aber über den eigens dafür mitgelieferten Editor kein Problem. Der Code wird in zwei Teilen eingebaut. Zunächst die Funktion an sich:
/*Build Header Widget*/
register_sidebars(1,
array(
'name' => 'Header Widget',
'before_widget' => '<li class="widget %2$s" id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
function header_widget() { ?>
<div id="headerwidget">
<div id="header_widget_1" class="sidebar">
<ul class="sidebar_list">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget') ){ ?>
<li class="widget"><h3><?php _e('Header Widget', 'thesis'); ?></h3>Den Inhalt dieses Widgets bitte über das Widget Panel steuern.</li><?php } ?>
</ul>
</div></div>
<?php }
add_action('thesis_hook_header', 'header_widget', '1');
Dieser Code kann so in die custom_functions.php übernommen werden. Aber bitte macht vorher eine Sicherungskopie. Macht ihr hier einen Fehler, kann der ganze Blog abstürzen.
Im zweiten Schritt kommt das CSS für das Header Widget. Dazu öffnet man im Editor die Datein custom.css und fügt folgendes ein:
.custom .sidebar ul.sidebar_list {position: relative;}
.custom #header_widget_1 ul.sidebar_list li.widget {display: block;}
#headerwidget {float:right;width:468px;height:60px;top:10px}
Hier sind drei Eigenschaften wichtig, welche die Position und die Breite des Widgets steuern:
- top:0px; – Der Abstand zum nächsten Elternelement “oben”
- left:477px; – Der Abstand zum nächsten Elternelement “links”
- width:468px; – Die Breite des Widgets
Je nachdem, wie man die Grundeinstellungen des Thesis Theme´s eingerichtet hat (Sidebar | Content) muss man diese Werte natürlich anpassen.
Das war es aber auch schon. Ein Wigdet in den Header zu bekommen ist also nicht wirklich schwer.
Navigation unter den Header
Die Navigation habe ich am liebsten unter dem Headerbild. Das ist aber Geschmackssache. Ich finde, sie ist dort leichter zu finden und auch angenehmer zu bedienen. Mit einem relativ einfachen Stückchen Code kann man die Navigation unter das Headerbild verschieben. Später werde ich dann noch erklären, wie man eine eigene Navigation erstellt. Folgender Code gehört in die custom_functions.php:
add_action('thesis_hook_after_header', 'thesis_nav_menu');
Damit wird die Navigation unter den Header verschoben. Wie gesagt, dass ist natürlich Geschmackssache. Ich bevorzuge die Navigation unter dem Header.
Fortschritt des Testblogs
Natürlich habe ich auch wieder einen Screenshot des Testblogs gemacht. Dort ist der Fortschritt relativ gut zu erkennen.
Thesis Theme Header umgestalten – Fazit
Mit ein paar einfachen Eingriffen kann man ohne weiteres die ersten Einstellungen machen, welche die Optik hochwertiger erscheinen lassen. Im nächsten Schritt möchte ich die Sidebar angehen. Hier werde ich die benötigten Widgets einbauen und mir die Möglichkeiten schaffen die Werbung vernünftig einzufügen. Wie ich das mache erfährst Du im nächsten Artikel. Abonniere mein RSS-Feed, um keinen Artikel zu verpassen.
Das kostenlose Open Source FTP Programm FileZilla 
Wordpress Tutorial – Wie man Wordpress Tags als Drop Down Menü anzeigt
250+ Photoshop Tutorials für das Design eines Blog Logos
Wie plane ich eine Fallstudie? Aufbau von Case Studys
Wie viele Google Anzeigen darf ich einbauen?
Ich schreibe hier mit Leib und Seele über das Geld verdienen im Internet, das Thesis Theme für Wordpress und alles was mich weiter interessiert.
Sascha hat bisher 522 Artikel geschrieben.
{ 1 comment… read it below or add one }
Hallo Sasha,
ich habe mir, auf Ihre Empfehlung hin eben, Thesis 2 downgeloaded. Ich muss dazu sagen, dass ich so gut wie null Erfahrung mit Blogs etc habe. Mein Problem im Moment: Ich habe eben versucht mein Header-Bild nach Ihren Anweisungen einzufügen. Wenn ich Thesis aus dem Dashboard links auswähle erscheint bei mir allerdings kein Untermenue desselbigen. Was tun??
Liebe Grüsse,
Melanie Bong