Twenty Twelve Footer-Widgets

Twenty Twelve Footer-Widgets als Child-Theme erweitert Deine WordPress-Website um eine flexible bzw. responsive Sidebar mit 3 Widgets am Seitenende. Du kannst Dir das Child-Theme einfach installieren oder Dir den Code anschauen und Dein Twenty Twelve Theme oder Child-Theme erweitern.

Direktlink Child-Theme-Download Twenty Twelve mit eingebautem Code…
Dort ist auch beschrieben, wie Du das Child-Theme installieren kannst.

Twenty Twelve Footer-Widgets – Child-Theme

Aus welchem Grund auch immer hat WordPress beim Theme Twenty Twelve im Footer die Widgets vergessen. Vielen Dank, denn so kann ich darüber schreiben ;-). Es handelt sich aber nicht nur um die 3 Widgets in der Footer-Sidebar. Auch im Backend unter Design/Widgets müssen natürlich die entsprechenden Felder vorliegen, damit man Inhalte in die Widgets ziehen kann. Letztlich müssen wir Code in den Dateien style.css, functions.php und footer.php anpassen, um die 3 Footer-Widgets zu realisieren.
Vorschau:

Twenty Twelve Footer Widgets

Twenty Twelve Footer Widgets

Twenty Twelve Footer-Widgets – Code

Hier findest Du vorab das Tutorial zum Erstellen Deines WordPress Twenty Twelve Child-Themes…
Sichere die style.css Deines Child-Themes und
ersetze in Deinem Child-Theme in der Datei style.css den gesamten Code durch diesen Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/*
Theme Name: My Twenty Twelve Extensions Footer
Theme URI: http://www.mydomain.de/
Description: My own Twenty Twelve extensions
Author: Chris Andersen | myblogtrainer.de
Author URI: http://www.myblogtrainer.de/twenty-twelve-theme-extensions-download/
Template: twentytwelve
Version: 0.1.1
*/
 
@import url("../twentytwelve/style.css");
 
.widget-area .widget h3 {
  margin-bottom:0;
}
 
#footerwidgets {
 width:100%;
}
#footerwidgets p {
 padding-bottom: .5em;
}
#footerwidgets li, #footerwidgets p  {
 padding-bottom: .5em;
 font-size:80%;
 line-height:1.1em;
}
#footer-left {
 width:30%;
 float:left;
 padding-right:2.5%;
}
#footer-middle {
 width:30%;
 float:left;
 padding-left:2.5%;
 padding-right: 2.5%;
}
#footer-right {
 width:30%;
 float:right;
 padding-left:2.5%;
} 
.site-content article {
  border-bottom:none;
}
@media only screen
and (max-width:481px) {
 
   #footer-right, #footer-middle, #footer-left {
     float:none;
     padding-left:0;
     padding-right:0;
     padding-top:1em;
     width:100%;
   }
}
 
.the-social-link {
  text-align:center;
}
.the-social-link img {
  padding:5px;
}

Danach kopier aus Deiner alten style.css alles, was unter dem folgenden Import-Verweis steht:

1
@import url("../twentytwelve/style.css");

…und füge es unten in Deiner neuen style.css ein.

Nun musst Du nur noch mit einem Editor die Dateien functions.php und footer.php erstellen in denselben Ordner kopieren und jeweils den folgenden Code hineinkopieren.
functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widgets Left',
'id' => 'left-footer',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>'
));
 
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widgets Center',
'id' => 'center-footer',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>'
));
 
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widgets Right',
'id' => 'right-footer',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>'
));
?>

footer.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?php
/**
 * The template for displaying the footer.
 *
 * Contains footer content and the closing of the
 * #main and #page div elements.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>
	</div><!-- #main .wrapper -->
 
 
	<footer id="colophon" role="contentinfo">
 
	<div id="footerwidgets"> 
<div id="footer-left"> 
<ul> 
<?php if ( !function_exists('dynamic_sidebar') || 
!dynamic_sidebar('Footer Widgets Left') ) : ?> <li> <?php endif; ?> 
</ul> 
</div> 
<div id="footer-middle"> 
<ul> 
<?php if ( !function_exists('dynamic_sidebar') || 
!dynamic_sidebar('Footer Widgets Center') ) : ?> <li> <?php endif; ?> 
</ul> 
</div> 
<div id="footer-right"> 
<ul> <?php if ( !function_exists('dynamic_sidebar') || 
!dynamic_sidebar('Footer Widgets Right') ) : ?> <li> <?php endif; ?> 
</ul> 
</div> 
</div> 
<br /> 
<br clear="all">
	</footer><!-- #colophon -->
<footer id="colophon" role="contentinfo">
		<div class="site-info">
<!--			<?php do_action( 'twentytwelve_credits' ); ?>
			<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>
 -->
Copyright &copy; 2007 - <?php echo date('Y'); ?>  <?php bloginfo('name'); ?> | <a href="http://twenty-twelve.myblogtrainer.de/">my Twenty Twelve Extensions</a>
</div>
<!-- .site-info -->
	</footer><!-- #colophon -->
</div><!-- #page -->
 
<?php wp_footer(); ?>
</body>
</html>

Jetzt kannst Du unter Design/Themes Dein neues Child-Theme aktivieren.

Hier kannst Du Dir die Änderungen in einer Live-Demo anschauen…

Hast Du Fragen oder Kommentare, bzw. ist Dir irgendetwas grundlegendes unklar beim Aufbau der Twenty Twelve Footer-Widgets? Schreibe einen Kommentar…

2 Gedanken zu „Twenty Twelve Footer-Widgets

  1. Sabine

    Hallo, auch ich betreibe einen wordpress blog mit dem theme twentytwelve. nun habe ich eine frage und zwar: Gibt es ein Plugin, dass den Abschnit “Leser dieses Artikels haben noch folgendes gelesen:” automatisch unter jeden Artikel einfügt?

    Ich würde mich sehr über eine Antwort freuen.

    Viele Grüße
    Sabine

    Antworten
    1. Chris Andersen

      @Sabine
      Such einfach im Plugin-Verzeichnis unter Most Popular oder Related Posts. Da gibt es jede Menge Plugins, die Du entweder unter dem Textblock oder in den Widgets von Twenty Twelve einbinden kannst.
      BG Chris :-)

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>