3-spaltigen Footer für Thesis-Theme einrichten

Am Wochenende habe ich meinem Blog endlich mal einen gescheiten “Footer” verpasst. Das ist bei einem Thesis-Theme nicht so einfach, wie man vielleicht glaubt. Aber mithilfe einiger kluger Leute und natürlich vor allem Google ist es mir gelungen, die Lösungen zusammen zu klauben.

Wie gefällt euch mein Werk?

Wenn ihr Thesis benutzt, so müsst ihr zunächst einmal (damit ist die Umsetzung am einfachsten) ein Script zur Generierung der Footer-Widgets beschaffen. Die notwendigen Widgets für den Footerbereich werden hiermit bereit gestellt bzw. im Backend verfügbar gemacht. Das Script habe ich Fergusweb Network gefunden. Es wird in die Datei custom_function.php eingefügt.  Nach der Installation stehen 3 Footer Widgets im Backend zur Befüllung bereit. (s. rechts)

Diese wären dann in der bekannten Art und Weise mit Inhalten zu versehen. 

Fertig ist das Ganze erst, wenn sich der angelegte neue Inhalt via CSS harmonisch einfügt. Also muss man wissen, welche Container benötigt werden, damit man die notwendige Anpassung vornehmen kann. Diese wird üblicherweise bei Thesis in der Datei custom.css gespeichert.

Dieser Teil meiner CSS-Datei sieht so aus:

.custom #footer_area .page {padding-bottom:0; padding: 0px; margin: auto; width: 1004px;}
.custom #footer {color:#fff;background: #363636 url(images/bg_footer.jpg); top center repeat-y; margin: 0; padding 0;}
.custom #footer p {clear:left;} 
    .custom #footer a {color:#fff; border-bottom:0;}
    .custom #footer a:hover {color:red;} 

#footerSpacer { margin:0; padding:2px 0px;  }
#footer div.col { width:290px; float:left; margin:5px 3px 0 0; padding-left:15px; text-align:left; }
div.col.Footer2, div.col.Footer3 { border-left:1px solid #4c7eaf; }

#footer .widget { color:#FFF; }
#footer .widget h3 { font-size:1.2em; font-weight:bold; margin:5px 15px; color:#fff; text-transform:uppercase; }
#footer .widget ul { list-style:disc; margin-left:25px; }
#footer .widget a { color:#FFF; text-decoration:none; } 

.custom #nachfooter {color: #fff; background-color: #000; padding: 8px 8px;}
.custom #nachfooter a {color: #fff; background-color: #000;}
.custom #nachfooter a:hover {color: red; background-color: #000;}

Ich hoffe, dass die Cracks unter euch jetzt keinen Anfall kriegen. Jedenfalls funktioniert die Darstellung auf diese Weise. Ich habe sie auch unter IE 6 + 8 geprüft und bin zufrieden.

Übrigens möchte ich den Thesis-Nutzern unter euch ein Plugin besonders ans Herz legen, welches das “Aufbohren” der custom_function.php weitestgehend erübrigt. Es ist schließlich nicht so toll, wenn man häufiger Code-Schnipsel in diese Datei hineinbringen muss, um dann ab und an auch mal festzustellen, dass der Blog danach nicht funktionieren will. Das Plugin nennt sich “Thesis OpenHook” und man kann in die verschiedenen Bereiche des Blogs modular bzw. abschnittsweise Code-Schnipsel oder Funktionen einfügen. Das Risiko wird so zum einen erheblich minimiert und zum anderen ist die Bearbeitung sehr viel einfacher.

Ein Beispiel: Unter Thesis muss man wiederum in die custom_function um folgendes Codestück einfügen, wenn man die Anzahl der Artikelleser mit WP-Postviews von Lester Chan z.B. in der Meta-Zeile (unter dem Beitragstitel) sehen will:

add_action('thesis_hook_byline_item', 'the_views');

Nutzer des Plugins “Thesis Open Hook” fügen lediglich den bekannten Funktionsaufruf (s. Abbildung)  in den Abschnitt “Byline Item” ein und fertig.

Wordpress CSS Footer OpenHook Plugins Themes Thesis Wordpress