WordPress添加底部小工具

作者: iEdon 分类: 早期归档 发布时间: 2014-11-30 09:17

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

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;
}

效果预览:请戳作者名字。