给您的WordPress博客加个底边栏Sidebar

2012年02月25日17:26:14 发表评论 热度1,932 ℃

 给您的WordPress博客加个底边栏Sidebar      

       此文将带你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;
}

本文最后更新于:2018-12-03 16:43
瓜皮猪

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: