WordPress添加底部小工具

Nov 30, 2014

—

Posted by

有许多主题只能把“小工具”组件添加到右边侧栏，但有时在自定义主题时，需要将小工具组件放在底部。

Functions.php

开启底部小工具（添加后，“小工具”中将出现Footer侧栏）

function mooc_widgets_init() {
register_sidebar( array(
‘id’ => ‘site-footer’,
‘name’ => __(‘Footer’, ‘mooction’),
‘before_widget’ => ‘<div id=”%1$s” class=”cell widget %2$s”>’,
‘after_widget’ => ‘</div>’,
));
}
add_action( ‘widgets_init’, ‘twentytwelve_widgets_init’ );

继续在Funtions.php中添加代码，使底部小工具平均分配宽度

function mooc_print_styles(){
// Create the footer widget CSS
$sidebars_widgets = wp_get_sidebars_widgets();
$count = isset($sidebars_widgets[‘site-footer’]) ? count($sidebars_widgets[‘site-footer’]) : 1;
$count = max($count,1);
?>
<style type=”text/css” media=”screen”>
#footer-widgets .widget { width: <?php echo round(100/$count,3) . ‘%’ ?>; }
@media screen and (max-width: 640px) {
#footer-widgets .widget { width: auto; float: none; }
}
</style>
<?php
}
add_action(‘wp_head’, ‘mooc_print_styles’, 11);

Footer.php

在合适位置添加以下代码（一般是放在分页代码之后），将小工具显示出来。

<div id=”footer-widgets”>
<div id=”footer-widgets-wrapper”>
<?php dynamic_sidebar(‘Footer’) ?>
<div class=”clear”></div>
</div>
</div>

Style.css

添加样式（本站参考样式）

#footer-widgets {
padding: 20px 0;
margin-top: 30px;
border-top: 1px solid #EEEEEE;
background-color: #F9F9F9;
width: 100%;
}
#footer-widgets-wrapper{
margin-bottom: -30px;
}
#footer-widgets .widget{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
color: #777;
padding: 0 15px;
word-wrap: break-word;
float: left;
margin-bottom: 30px;
}
#footer-widgets .widget img{
max-width: 100%;
height: auto;
}
#footer-widgets h2.widgettitle{
font-family: “Dosis”, Arial, Helvetica, Geneva, sans-serif;
font-weight: 400;
font-size: 1.2em;
margin-bottom: 20px;
color: #333;
}
#footer-widgets a{
text-decoration: none;
color: #505050;
}
#footer-widgets li{
line-height: 1.75em;
}
#footer-widgets ul ul {
margin-left: 0.75em;
}