Home Thesis Theme, Tutorials >> Thesis Theme Design – Der Footer

Thesis Theme Design – Der Footer

27. Februar 2012

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

Die Thesis Theme Design Serie geht in die fünfte Runde. In diesem Artikel zeige ich euch, wie ihr den Footer des Thesis Theme umgestalten könnt.

Das Ziel ist dabei ein Footer, der Widgetfähig ist. Dazu soll er leicht zu bearbeiten sein. Einen solchen Footer findet ihr bereits auf Blogverdiener.de. Hier habe ich die gleiche Technik verwendet. Zunächst aber zu einigen grundlegenden Einstellungen.

Links entfernen

Was mich immer ganz besonders stört, sind die Links, die sich nach der Installation im Footer befinden.

thesis-links

Da wäre einmal der WordPress Admin Link und zum anderen der Thesis Link, der direkt zu Dythemes führt. Beide Links zu entfernen ist aber relativ einfach.

Admin Link
Beginnen wir mit dem WordPress Admin Link. Dieser lässt sich im Thesis Theme einfach über die Einstellungen entfernen.
Dazu wechselt mit im Dashboard des WordPress Blogs zu den „Thesis – > Design Options“. Dort findet man in der zweiten Box den „Display Options“ ganz unten den Menüpunkt „Administration“. Die Option „show admin link in footer“ ist standardmäßig angehakt. Entfernt man diesen Haken, ist auch der Link weg.

Thesis Link
Der Thesis Link lässt sich mit einem kleinen Eingriff in die „custom_functions.php“ entfernen. Dazu fügt man ganz einfach folgenden Code dort ein:

remove_action('thesis_hook_footer', 'thesis_attribution');

Damit verschwinder der Thesis Link. Ein bessere Version ist aber meiner Meinung diesen Link zu erhalten und durch einen anderen zu ersetzen. Für diesen Testblog habe ich mir erlaubt, einen Link zu Blogverdiener einzubauen:

function blogverdiener() {
                echo 'Dieser Blog wird von <strong>Blogverdiener - <a href=“http://www.blogverdiener.de“>Geld verdienen im Internet</a> betrieben';
}
add_action('thesis_hook_footer', 'blogverdiener', '99');

Für meinen eigenen Projekte finde ich das ganz cool. Ist zwar von der Qualität her kein guter Link für Blogverdiener, aber Link ist Link.

Widgets in den Footer einbauen

Jetzt kommt der schwierigere Teil. Die Widgets im Footer. Ich habe dazu einfach mal den Code kopiert, den ich auch in diesem Blog verwende. Allerdings mit einer kleinen Abwandlung. Für meinen Testblog wollte ich keine vier Spalten sondern lediglich drei.

Code für 3 Spalten Footer
Hier folgt der Code für die „custom_functions.php“. Damit erstellst Du einen Footer, der drei Widgetfähige Bereiche hat. Einfach komplett in die custom_functions.php kopieren und abspeichern.

/*-----------------------------------------*/
/* register sidebars for widgetized footer */
if (function_exists('register_sidebar')) {
        $sidebars = array(1, 2, 3);
        foreach($sidebars as $number) {
                register_sidebar(array(
                        'name' => 'Footer ' . $number,
                        'id' => 'footer-' . $number,
                        'before_widget' => '',
                        'after_widget' => '',
                        'before_title' => '<h3>',
                        'after_title' => '</h3>'
                ));
        }
}
/*-----------------------*/
/* set up footer widgets */
function widgetized_footer() {
?>
        <div id="footer_setup">
                <div class="footer_items">
                        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ) : ?>
                <?php endif; ?>
                </div>
                <div class="footer_items">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) : ?>
                <?php endif; ?>
                </div>
                <div class="footer_items">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) : ?>
                <?php endif; ?>
                </div>
        </div>
<?php
}
add_action('thesis_hook_footer','widgetized_footer');

Wer lieber vier Spalten haben möchte bedient sich folgenden Codes:

/*-----------------------------------------*/
/* register sidebars for widgetized footer */
if (function_exists('register_sidebar')) {
        $sidebars = array(1, 2, 3, 4);
        foreach($sidebars as $number) {
                register_sidebar(array(
                        'name' => 'Footer ' . $number,
                        'id' => 'footer-' . $number,
                        'before_widget' => '',
                        'after_widget' => '',
                        'before_title' => '<h3>',
                        'after_title' => '</h3>'
                ));
        }
}
/*-----------------------*/
/* set up footer widgets */
function widgetized_footer() {
?>
        <div id="footer_setup">
                <div class="footer_items">
                        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ) : ?>
                <?php endif; ?>
                </div>
                <div class="footer_items">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) : ?>
                <?php endif; ?>
                </div>
                <div class="footer_items">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) : ?>
                <?php endif; ?>
                </div>
                <div class="footer_items">
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 4') ) : ?>
                <?php endif; ?>
                </div>
               
        </div>
<?php
}
add_action('thesis_hook_footer','widgetized_footer');

Damit hast Du schon mal die Funktionen für einen dreispaltigen oder einen vierspaltigen Footer zur Hand. Was jetzt noch fehlt ist das Styling. Denn so wie es bisher aussieht geht das mal gar nicht. Also kommt jetzt noch ein bisschen CSS hinterher.

/* footer widget area setup */
#footer_setup {
        /* widgetized footer background (not footer background) */
        background: #EEEEEE;
        /* widget padding */
        padding: 16px;
        /* margin at bottom of widgets */
        margin-bottom: 25px;
        /* do not change this! */
        overflow: hidden;
}

/* widget item setup */
#footer_setup .footer_items {
        /* contents alignment */
        text-align: left;
        /* widget width */
        width: 210px;
        /* space between widgets */
        padding-right: 10px;
        /* text color */
        color: #2361A1;
        /* do not change these! */
        display: inline-block;
        float: left;
        height: 100%;
}

/* widget item überschriften*/
#footer_setup .footer_items h3 {
        /* font size */
        font-size: 1em;
        /* bold or not */
        font-weight: bold;
        /* uppercase or not */
        text-transform: uppercase;
        /* space out the letters*/
        letter-spacing: 0px;
        /* font color*/
        color: #000000;
        /* padding under header text */
        padding-bottom: 3px;
        /* border under header text */
        border-bottom: 3px solid #ffdf00;
        /* distance between border and widget text */
        margin-bottom: 5px;
}

/* do not change these! */
#footer_setup .footer_items ul li { list-style: none; }
#footer_setup .footer_items ul { margin: 0px; padding: 0px; }

Der Code, so wie er oben dargestellt ist benötigt keine Änderungen. Funktionieren wird er auch so, aber dennoch gehen wir die Anpassungen doch im einzelnen noch kurz durch.

Hintergrund
Der Hintergund des Footers kann über die dafür vorgesehene Klasse angepasst werden. Die Klasse ist NICHT im Code enthalten, die ich eben gepostet habe, sondern ist im Thesis Framework schon verankert. Dafür muss man die Footer ID anpassen. Das geht mit diesem Code (Beispiel weißer Hintergrund):

.custom #footer {
        height: 400px;
        width: 1018px;
        background: #ffffff;
}

Hier kann auch die Breite und die Höhe des Footers eingestellt werden, wobei ich hier nicht unbedingt eingreifen würde, sondern lediglich dafür sorgen würde, dass die Breite zum Blog passt. Die Höhe würde ich nicht eintragen.

Breite der Widgets
Die Widgets haben hier eine feste Breite. Wenn sie für das Design der Seite zu Breit sind, kann es zu einem Umbruch kommen, und eine zweite Zeile entsteht. Die Breite sollte also auf den Footer angepasst werden.

Den Code habe ich sonst soweit auskommentiert.

Fortschritt des Testblogs

Natürlich habe ich diesen Footer auch in den Testblog eingebaut. Das kannst Du auf dem Screenshot schön erkennen.
thesis-demo5
Der Footer ist zwar farblich noch nicht so ganz das Gelbe vom Ei, aber ich kann ja bis zum nächsten Teil der Serie daran feilen. Erst mal baue ich jetzt ein paar Dinge dort ein.

Ich möchte in den Bereich des Footers aktuelle Suchanfragen, ein Kontaktformular und ein Feed vernünftig einbinden. Dazu sollen auch ein paar Social Network Buttons hinzu. Aber schaut selbst.

Aktuelle Suchanfragen im Footer

Durch das SEO Search Terms Tagging 2 Plugin kann ich die aktuellen Suchanfragen, die zu meinem Blog führen anzeigen und mit den erreichten Zielen verlinken. Das erhöht die interne Verlinkung. Dazu habe ich zunächst das Plugin wie gewohnt installiert und eingestellt.
Da die Besucher eine Seite von Links nach rechts Scannen und das der unwichtigste Teil überhaupt ist, habe ich diese Suchanfragen ganz rechts eingebaut.

Kontaktformular im Footer

Auch dafür gibt es ein schönes Plugin. Contact Form 7 übernimmt alle Aufgaben eines Kontaktformulars sehr Komfortabel und ist einfach einzustellen. Nach der Installation bekommt man einen Shortcode, den man einfach in ein Textwidget kopieren kann. So habe ich das auch im Testblog gemacht.
Damit habe ich ein Kontaktformular, das mir mögliche Anfragen der Besucher sehr einfach und komfortabel zusendet.

RSS im Footer

Das einbinden des RSS Feeds im Footer hat sich etwas schwieriger gestaltet. Zunächst musste ich mir das Plugin RSS-Import von Frank Bültge installieren. Da ich dieses Plugin in einem Text-Widget nutzen möchte, musste ich noch dafür sorgen, dass die Textwidgets „Shortcodes“ verstehen können. Dazu muss folgender Code in die „custom_functions.php“ integriert werden:

add_filter('widget_text', 'do_shortcode');

Jetzt ist die Anzeige des RSS Feeds im Blog per Shortcode ohne weiteres möglich.

So sieht das Ganze aus

Zum Schluss, mit den eingefügten Widgets sieht der Blogfooter nun wie folgt aus:

thesis-demo6

Thesis Theme Footer Design – Mein Fazit

Der Footer findet zwar nicht ganz so viel Beachtung wie die anderen Teile des Blogs, ist aber meiner Ansicht nach dennoch wichtig.Im nächsten Teil der Serie werde ich einige benötigte Seiten in diesem Testblog erstellen. Dazu auch eine eigene Sitemap und kleine Verbesserungen durchführen. Verpasse den nächsten nicht! Abonniere mein RSS-Feed.

Bleib in Verbindung via...

RSS abonnieren Facebook Fan werden Follow Me

{ 8 comments… read them below or add one }

1 Steffen Februar 29, 2012 um 21:00

Hallo,
vielen Dank für diesen nützlichen Artikel. Da ich gerade meinen ersten Wordpress Blog mit Thesis aufbaue, kommt dieser Anleitung genau richtig und erspart mir eine Menge Arbeit.
Vielen Dank!
Steffen

2 Jens September 13, 2012 um 23:24

You’ve made my day!

Vielen vielen Dank für diese tolle Anleitung!! Das ist genau das, was ich gesucht habe. Habe es soeben umgestellt!

VG,

Jens

3 Sascha September 14, 2012 um 09:33

@Jens Freut mich, wenn ich helfen konnte.

4 Hanny Oktober 18, 2012 um 18:21

Hm, ich überlege immer noch auf Thesis umzusteigen… Hab mich halt so auf Pagelines Framework eingeschossen, ich liebe dieses Theme.

5 Philipp November 29, 2012 um 21:09

Hi,
Da ich gerade meinen ersten Wordpress Blog mit Thesis aufbaue, kommt dieser Anleitung genau richtig und erspart mir eine Menge Arbeit.
Vielen Dank!
Philipp

6 Cornelia Januar 12, 2013 um 23:48

Hallo,

leider bin ich erst jetzt auf den obigen Artikel gestoßen. Nach der Möglichkeit, am footer zu schrauben, habe ich schon lange gesucht.

Vielen Dank.

Viele Grüße
Cornelia

7 Matthias April 5, 2013 um 20:53

Hey,

also wenn ich den Code für den Widget (egal ob 3 oder 4 spaltig) in der custom_functions.php abspeichere, passiert im Footer nichts. Woran könnte das liegen?

Gruß

8 Sascha April 21, 2013 um 18:21

Vermutlich die CSS Einstellungen nicht übernommen.

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