Home Thesis Theme, Tutorials >> Das Thesis Theme umgestalten – Der Header

Das Thesis Theme umgestalten – Der Header

13. Februar 2012

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

In diesem Artikel zeige ich Dir, was Du mit dem Header des Thesis Themes anstellen kannst. Es gibt eine Reihe von verschiedenen Möglichkeiten das Gesicht der Webseite zu gestalten. Der Header ist wohl die wichtigste.

Das 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.
thesis_header_image
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:

//Header Widget einfügen
/*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:

//Header Widget
.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:

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
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-demo3

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.

Bleib in Verbindung via...

RSS abonnieren Facebook Fan werden Follow Me

{ 1 comment… read it below or add one }

1 Melanie Bong Oktober 18, 2012 um 11:59

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

Leave a Comment

Hinweis: Nur echte Namen verwenden | Keine Verweise auf Unterseiten! Ich lösche solche Kommentare!

Previous post:

Next post:

Letzte Artikel

  • spielcasino.net Für Zwischendurch – Online zocken und Zeit vertreiben
    Verauchte Säle, Whiskey und Pokerkarten. Dazu viele verruchte Gestalten, die an dem Spieltisch ihr letztes Hab und Gut einsetzen. Der Stoff aus dem viele Filme geschmiedet sind. Waren es früher die restlichen Dollars, die von den Cowboys verzockt w...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #11 – Eine Woche gar nichts mehr
    Eine ganze Woche lang habe ich überhaupt nichts gemacht. Das lag zum einen einer Operation an meinem Knie, die ich auskuriert habe, und zum anderen an dem Testtool, das mir einfach keine neuen Werte ausgegeben hat. Jede Serie braucht einen Abschl...Mehr lesen...
  • Premium Themes aus Deutschland WordPress Theme gesucht? Hier wirst Du fündig!
    Immer mal wieder bastelt ein Blogger am eigenen Blog herum, weil er vielleicht die Optik nicht mehr ertragen kann. Mir geht das regelmäßig einmal im Jahr so. Und oft schaue ich mir dann die ganzen Theme Schmieden an, um herauszufinden, was es denn...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #10 – Halbzeit
    Die Hälfte ist geschafft. Social Bookmarking im 20 Tage oder 20 Bookmarks Test. Wie viel Ranking bringen Social Bookmarks? Was bringen sie überhaupt? Diese Frage soll diese Case Study beantworten. Deshalb habe ich mir einen Artikel aus meinem Ar...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #9 – Leichter Abfall des Rankings
    Ein neuer Tag in meiner SEO Case Study. Das Social Bookmarking hat mich bisher um rund 50 Plätze nach oben verschoben und heute ging es wieder ein wenig bergab. Glücklicherweise nur um einen einzigen Platz, den ich hoffentlich heute wieder aufho...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #8 – Bergsteiger Artikel
    Das Social Bookmarking, das in den letzten Monaten so furchtbar an Strafen von Google gelitten hat, wird derzeit auf die Probe gestellt. Welche Auswirkungen hat es noch auf das Ranking? Und wirkt es überhaupt? Google ist sehr streng gegen alle m...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #7 – Erneut ein Stückchen hoch
    Nachdem ich gestern über Stagnation geklagt habe, scheint Google meinen Ruf gehört zu haben und schiebt den Artikel wieder drei Plätze nach oben auf Platz 68. Damit habe ich Seite sechs im Ranking erreicht. Das nächste Ziel muss also lauten ...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #6 – Stagnation
    Social Bookmarking hat nach dem Google Penguin Update an Bedeutung verloren. Darin sind sich fast alle einig. Die Kommentare, die ich hier im Blog oder per Email bekommen habe, belegen das. Dennoch soll meine Case Study dahingehend für mich Klarheit...Mehr lesen...

Warum dieser Blog?

  • Geld verdienen im Internet

    ist der Traum vieler. BlogVerdiener beschäftigt sich mit den Möglichkeiten und vor allem mit den einzelnen Anbietern, die das Geld verdienen im Internet möglich machen. Dabei werden die Anbieter vorgestellt und in gewissen Zeiträumen immer wieder getestet. Das Hauptaugenmerk liegt dabei auf Seriosität. Betreffend der Auszahlungen, aber auch den Support. BlogVerdiener propagiert nicht den schnellen Reichtum im Internet, sondern soll aufzeigen, wie durch Arbeit im Netz Geld verdient wird. Ob als Texter, über Social Media Profile bis hin zu Youtube Videos, hier steht alles auf dem Prüfstand.

    Zusätzlich veröffentliche ich regelmäßig Tutorials, die zeigen sollen, wie man die Anbieter zum Geld verdienen benutzt. Auch ist mir wichtig den Verdienst immer weiter zu steigern. Jeder getestete und hier eingesetzte Anbieter soll monatlich die Auszahlungsgrenze überschreiten. Das Ziel ist es sich ein Online Einkommen aufzubauen, dass so groß ist, und so dauerhaft ist, dass ich mir keine Sorgen um meine Rente machen muss und sogar bereits mit 40 Jahren meinen Antrag stellen kann.

    Geld verdienen im Internet – Mit Arbeit und viel Lernen verbunden, ist es doch eine Beschäftigung die Spaß macht, gleichgesinnte vernetzt und tolle Partnerschaften ermöglicht.

    Ursprünglich war BlogVerdiener ein Hobby. Ich wollte mich mit der Möglichkeit beschäftigen „Geld im Internet“ zu verdienen. Daraus ist aber so viel geworden, dass ich es irgendwann aufschreiben musste und wollte. Zunächst bin ich auf einem anderen Blog gestartet, der aber BlogVerdiener weichen musste.

    Das Geld verdienen im Internet ist eine sehr spannende Sache, die sich ständig entwickelt. Neue Anbieter kommen hinzu, alte verschwinden. Es gibt diverse Themengebiete, in denen man sich selber entwickeln und lernen kann. Das ist der Punkt, der auf mich eine so unglaublich große Faszination ausübt. Und nicht zuletzt natürlich mein stetig wachsender Kontostand.

    Es macht Spaß Anbieter zu testen und dann für den eigenen Blog die Optimierungsarbeit zu leisten. So kann ich lernen, ausprobieren und nebenbei noch Geld verdienen. Dieser Gedanke ist irgendwann aber zu Ende gewesen.

    Jetzt ist das Hauptziel von BlogVerdiener das Geld verdienen im Internet reproduzierbar zu machen, so dass es für jeden funktioniert. Der Aufwand soll minimiert werden und das Ergebnis stetig verbessert.

Highlights

  • Geld verdienen im Internet mit Beispielen zu Belegen gehört sicherlich zu den Highlights hier im Blog. Hin und wieder starte ich 30 Tage Tests, in denen mehrere Anbieter der gleichen Branche gegeneinander antreten müssen. So zum Beispiel Februar 2013. Für diesen Monat gibt es die Mini Verdienst Challenge, in der ich diverse Anbieter, mit denen auf Facebook Geld verdienen möglich ist, gegeneinander antreten ließ. Das Ergebnis ist eine Seite hier im Blog, die alle Details haarklein auflistet und einige Anbieter für jedermann empfiehlt.

    So kann sich auch die Hausfrau einen netten Nebenverdienst aufbauen, ohne vorher teure Produkte zu kaufen oder anders auf die Nase zu fallen.

    Ein weiteres Highlight sind sicherlich die Empfehlungen der getesteten Fachbücher. Geballtes Wissen für angehende Blogger und Webmaster. Hier stecke ich viel Arbeit und Mühe hinein.

    Das dritte erwähnenswerte Highlight sind Tutorials, in denen ich mich mit dem Thesis Theme, CSS3, HTML5 und Wordpress auseinander setze. Hier kann vieles für andere Blogs adaptiert werden.

50 Suchanfragen

Kontakt