此文将带你DIY一次,让你给你的WP博客加入一个漂亮的底边栏。在开始之前,请确保备份好你要修改的模板,更稳妥的办法是备份你所有的网站文件及数据库。备份完毕后你就可以尽享DIY的乐趣了。
第一,找到functions.php文件,搜索:“register_sidebar”并在其后加入如下代码。不同的模板加入代码会不尽相同,请与上面north_sidebar、south_sidebar、west_sidebar、east_sidebar其中的任意一个保持一致。并记下这里的name为footer,备用。
register_sidebar(array(
'name' => 'footer',
'before_widget' => '<div><div>',
'after_widget' => '</div></div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
如果你修改的是默认模板,请打开functions.php(themes\default\functions.php)文件,第13行,你会看到如下代码,在第20行加入上述代码。确保默认模板被启用的情况下,你可以在“外观—小工具”里看到上面图片所示的footer效果。
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
}
第二、在模板跟文件夹下创建sidebar-footer.php文件,里面的输入如下内容:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer') ) : ?>
<?php endif; ?>
如果您修改的是默认模板,则需要在themes\default\文件夹下创建sidebar-footer.php文件,输入上述内容。这里请注意“dynamic_sidebar(‘footer‘)”里的footer为上面定义的“’name’ => ‘footer‘”的footer,如果你乐意,你可以定义为meixiaojiji、baidusb、woyangwei、mengnan等你所喜欢的任意字符串,但要确保对应。
第三、打开你的footer.php文件。在适当的位置加入 如下内容:
<div>
<?php get_sidebar('footer'); ?>
</div>
如果您修改的是默认模板,则需要在themes\default\footer.php文件里输入上述内容。注意到上面代码中蓝色的footer了没?对,他也是和上面使用“register_sidebar”函数定义时同一个footer。而类型为footer_sidebar的DIV标签,则是约束显示效果的。
第四、在您的style.css文件末尾加入:
#footer .footer_sidebar{
margin:0px auto;
width:100%;
background:#f00;
overflow:hidden;
}
#footer .widget-wrap {
float: left;
width: 25%;
margin-bottom: 36px;
background:#f00;
}
#footer .widget {
margin:0px 20px;
}
如果您修改的是默认模板,则需要在themes\default\style.css文件里输入上述内容。
第五、在您的“外观-小工具里”找到footer,加入想要在底部文件显示的内容,这里我选择了功能、分类目录、日历、标签云。请加入四个小工具,达到最佳的显示效果。此图是显示效果,好吧,我承认这么弄是很丑,或干脆说很烂,但问题是咱们这才刚刚开始呀。
第六、找到你的底部文件footer.php,如果您修改的是默认模板,则是themes\default\footer.php文件。
<div id="footer">
<div>
<div id="foot_rss_feed">
<a href="<?php bloginfo('rss2_url'); ?>">< ?php _e('Subscribe RSS', 'elegant-grunge') ?></a>
</div>
< ?php get_sidebar('footer'); ?>
</div>
<div id="copyright">这里篇幅比较多省略掉</div>
</div>
找到你的底部文件style.css,如果您修改的是默认模板,则是themes\default\style.css文件,在底部加入如下代码:
#footer {
display:block;
border-top:1px solid #f3ddac;
line-height:145%;
width:100%;
overflow: hidden;
color:#ccbfac;
background:url(images/footer.jpg) no-repeat #4c4c4c;
}
#footer a {
color:#f3f4ee;
}
#footer h2 {
color: #fff;
font-size: 1.3em;
margin-bottom: 15px;
}
#footer .footer_sidebar{
margin:0px auto;
overflow:hidden;
width:1000px;
}
#footer .widget-wrap {
float: left;
width: 25%;
padding:40px 0px;
line-height:180%;
}
#footer .widget-wrap li {
list-style-type:none;
}
#footer .widget {
margin:0px 10px;
}
#footer #foot_rss_feed a {
display: block;
position: absolute;
background-image: url(images/rss.png);
width: 149px;
height: 126px;
margin-left: -55px;
margin-top: -55px;
text-indent: -1900px;
overflow: hidden;
}