Für viele Webseitenbetreiber ist das WordPress Theme „Iconic One“ von Themonic eines der besten responsive Starter-Themes im kostenfreien Premium-Bereich. Iconic One nutzt HTML 5 und CSS3 und passt sich an die jeweilige Displaygröße des Besuchers an (Smartphone, Tablet oder Notebook/PC/Mac).  Das Theme bietet einige Vorteile im SEO Bereich und ermöglicht durch den „Live-Customizer“ bestimmte Elemente wie Logo, Social Bookmarks, Hintergrundfarbe, Fußzeile Copyright usw. zu ändern, ohne den Quellcode oder CSS anfassen zu müssen.

Doch wie so oft bei kostenfreien Themes sind der Kreativität Grenzen gesetzt. Wer mit Iconic One arbeitet vermisst die Möglichkeit den Footer mit Widgets auszugestalten. Damit das Theme „Footer-Widget-Ready“ wird, sind lediglich ein paar Anpassungen im Quellcode nötig. Wir zeigen Ihnen welche Schritte nötig sind.

Schritt 1: PHP Datei für Footer Widgets anlegen

Als Erstes müssen Sie eine neue PHP Datei im Theme Ordner erstellen mit der Bezeichnung sidebar-footer.php. Diese Datei wird in Schritt 3 in den Footer Ihres Themes geladen. In diesem Beispiel gehen wir davon aus, dass der Footer insg. 3 Widget-Bereiche erhalten soll – Sie können aber auch weniger oder mehr Widget-Bereiche definieren, stimmig zum restlichen Design der Website.

Damit später 3 Widget-Bereich im Footer angezeigt werden, fügen Sie folgenden Code in die sidebar-footer.php ein:

<?php if ( ! is_active_sidebar( 'first-footer-widget-area' )
&& ! is_active_sidebar( 'second-footer-widget-area' )
&& ! is_active_sidebar( 'third-footer-widget-area' )
)
return;
?>

<div id="footer-widget-area" role="complementary">
<?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) : ?>
<div id="first" class="footer-widget-area footer1">
<ul>
<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
</ul>
</div><!-- #first .widget-area -->
<?php endif; ?>

<?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) : ?>
<div id="second" class="footer-widget-area footer2">
<ul>
<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
</ul>
</div><!-- #second .widget-area -->
<?php endif; ?>

<?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) : ?>
<div id="third" class="footer-widget-area footer3">
<ul>
<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
</ul>
</div><!-- #third .widget-area -->
<?php endif; ?>
</div><!-- #footer-widget-area -->

Schritt 2: Theme Funktionen zuweisen

Nun muss dem Theme erklärt werden, dass es 3 Footer Widgets gibt, die von Ihnen befüllt werden können. Hierzu ist ein kleines Update der Theme Funktionen functions.php notwendig. Suchen Sie in der functions.php nach folgendem Code:

function themonic_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'themonic' ),
'id' => 'themonic-sidebar',
'description' => __( 'This is a Sitewide sidebar which appears on posts and pages', 'themonic' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<p class="widget-title">',
'after_title' => '</p>',
) );
}

Diesen Code müssen Sie nun erweitern, damit die 3 Footer Widgets befüllt werden können. Ersetzen Sie dazu den oberen Baustein mit folgendem Code:

function themonic_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'themonic' ),
'id' => 'themonic-sidebar',
'description' => __( 'This is a Sitewide sidebar which appears on posts and pages', 'themonic' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<p class="widget-title">',
'after_title' => '</p>',
) );

// 1 Footer Widget
register_sidebar( array(
'name' => __( 'First Footer Widget Area', 'themonic' ),
'id' => 'first-footer-widget-area',
'description' => __( 'The first footer widget area', 'themonic' ),
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

// 2 Footer Widget
register_sidebar( array(
'name' => __( 'Second Footer Widget Area', 'themonic' ),
'id' => 'second-footer-widget-area',
'description' => __( 'The second footer widget area', 'themonic' ),
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

// 3 Footer Widget
register_sidebar( array(
'name' => __( 'Third Footer Widget Area', 'themonic' ),
'id' => 'third-footer-widget-area',
'description' => __( 'The third footer widget area', 'themonic' ),
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}

Schritt 3: Fußzeile updaten

Die in Schritt 1 erstellte sidebar-footer.php muss nun in die reguläre footer.php integriert werden. Hierzu nutzen wir den WordPress-Befehl „get_sidebar“. Fügen Sie demnach den Code <?php get_sidebar( ‚footer‘ ); ?> an die gewünschte Stelle in Ihrer footer.php. Idealerweise eingebaut in eine <div>. Hier ein Beispiel:

<footer id="colophon" role="contentinfo">
<div class="site-info">
<div class="footercopy">
<?php get_sidebar( 'footer' ); ?>

<!-- hier folgt der restliche Code Ihres Footers bspw. Copyright etc. -->

</div><!-- .footercopy -->
</div><!-- .site-info -->
</footer>

Schritt 4: CSS-Datei anpassen

Zu guter letzt sollten Sie noch folgenden Code in die Datei custom.css einfügen, damit die notwendige Breite der 3 Widget-Bereiche definiert wird. Setzen Sie 26% Breite für das rechte Widget, damit dies bündig zur oberen Sidebar abschließt. Für eine weitere Formatierung nutzen Sie zusätzliche CSS Befehle.

@media screen and (min-width: 768px) {
.footer1 {
width: 33%;
}

.footer2 {
width: 33%;
}

.footer3 {
width: 26%;
}
}

BRAVO – Sie haben es geschafft. Nun können Sie über Design > Widgets die gewünschten Funktionen in die Footer-Widgets einfügen.

Zum Schluß noch ein wichtiger Hinweis:

Sollten Sie ein Update des Themes installieren, werden die oben genannten Änderungen überschrieben. Sichern Sie also vorher die functions.php, sidebar-footer.php sowie footer.php bevor Sie ein Update von Iconic One einspielen! Viel Erfolg mit Ihrer Website und Iconic One!

0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.