如何在主题底部添加小工具栏

 
  • Chonghua
  • 2012年12月4日

现在有很多WordPress主题在底部设置了小工具栏,在底部,你可以很方便加入各种功能,比如一些热门文章之类的,在用户浏览到博客底部时也可以看到你的文章,对于提高博客的浏览还是有所帮助的!但是也有大部分主题却没有设置该位置的小工具.不过,我们完全可以自己添加.

在主题的functions.php文件中注册小工具函数

/* Add this code to functions.php file in your theme */
register_sidebar(array(
'name' => 'Footer Widget 1',
'id'        => 'footer-1',
'description' => 'First footer widget area',
'before_widget' => '<div id="footer-widget1">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(array(
'name' => 'Footer Widget 2',
'id'        => 'footer-2',
'description' => 'Second footer widget area',
'before_widget' => '<div id="footer-widget2">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(array(
'name' => 'Footer Widget 3',
'id'        => 'footer-3',
'description' => 'Third footer widget area',
'before_widget' => '<div id="footer-widget3">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

 

在底部添加小工具的位置

打开footer.php文件,在适当的位置加入以下代码

/* Add this code to footer.php file in your theme */
<div id="footer-widgets">
<div id="footer-widget1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-1') ) : ?>
<?php endif; ?>
</div>
<div id="footer-widget2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-2') ) : ?>
<?php endif; ?>
</div>
<div id="footer-widget3">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-3') ) : ?>
<?php endif; ?>
</div>
</div>
<div style="clear-both"></div>

 

为小工具添加样式

打开style.css文件

/* Add this code to style.css file in your theme */
#footer-widgets {
display: block;
width:950px;
margin-right:0;
background: #ffffff;
}
#footer-widget1 {
width: 260px;
float: left;
margin: 15px 10px 10px 30px;
padding: 10px;
background-color: #ffffff;
}
#footer-widget2 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #ffffff;
}
#footer-widget3 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #ffffff;
}

 

现在就可以在后台小工具界面添加你所需要的功能了

搜索