首页 > 博主私藏分享 > 给不支持Sidebar的WP主题加侧边栏,底边栏

给不支持Sidebar的WP主题加侧边栏,底边栏

2010年7月16日 发表评论阅读评论

早在6月22日,我的博文《给您的WordPress博客加个底边框(Widget)》,详细介绍了如何DIY你的WordPress主题,给主题加个底部栏sidebar,支持Widget。我用WordPress主题iNove模板进行介绍,为了周全,还介绍了使用默认主题时,加入底部栏sidebar的情况。自认为比较全面了,但当时并没有考虑到,WordPress主题不支持sidebar侧边,sidebar底边的情况。

于是问题就来了——昨晚21时有个叫TIM的朋友,留言询问我主题不支持sidebar时,如何在底部加上底边框sidebar,使之可使用Widget。我针对问题进行了简单测试,进行了回复。没想到这位朋友比较敬业,凌晨1点钟还在DIY,试图搞定此问题。出于对这种精神的感动,也出于对我以前写上面博文时,没考虑周全的补充,我写下这篇博文。

参考此篇博文,你可轻松让你在不支持sidebar的WordPress主题,加上底部栏sidebar,使之可使用Widget,相应的你可以举一反三,加上侧边栏sidebar。这里我使用主题kubrick-on-crack(下载地址。作为介绍。

使用register_sidebar函数注册sidebar

使用register_sidebar函数注册sidebar

1、让后台支持自定义sidebar。

在主题kubrick-on-crack的文件夹里,找到functions.php文件,用EditPlus或Dreamweaver工具打开此文件,在文件的末尾加入如下代码。其中register_sidebar()官方参考)函数用于定义sidebar。参数name用于定义sidebar名称,这里为footer;before_widget、after_widget定义$name的前后样式,before_title、after_title则是自定义标题的前后样式。

<?php /** widgets */
if( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'name' => 'footer',
		'before_widget' => '<div class="widget-wrap"><div class="widget %2$s">',
		'after_widget' => '</div></div>',
		'before_title' => '<h2>',
		'after_title' => '</h2>',
	));
}?>
wordpress使用get_sidebar获取sidebar

wordpress使用get_sidebar获取sidebar

2、让前台调用自定义的sidebar。

在主题kubrick-on-crack的文件夹里,找到footer.php文件,用EditPlus或Dreamweaver工具打开此文件,在文件最上侧加入如下代码。其中函数get_sidebar()参考)用于读取已定义好的sidebar。

<div class="footer_sidebar">
   <?php get_sidebar('footer'); ?>
</div>

3、设置CSS样式表、控制sidebar样式。

在主题kubrick-on-crack的文件夹里,找到style.css文件,用EditPlus或Dreamweaver工具打开此文件,在文件的最下面加入如下代码。用于控制底部sidebar的样式。

.footer_sidebar{
	margin:0px auto;
	overflow:hidden;
	width:728px;
	background:#f8f8f8;
}
.footer_sidebar h2{
	color:#535353;
	text-align:center;
	margin:20px 0px;

}
.footer_sidebar a{
	color:#535353;
	text-decoration:none;
}

.footer_sidebar .widget-wrap {
	float: left;
	width: 242px;
	padding:20px 0px;
	line-height:180%;
	text-align:left;
}
.footer_sidebar .widget-wrap li {
	list-style-type:none;
}
.footer_sidebar .widget {
	margin:0px 5px;
}

4、在后台加入Widget,用于显示

这里我加了三个Widget,热门Tags、最新日志、最新留言。使用效果见博客底部,不再配图。

更多
  1. 2011年1月23日00:38 | #1

    谢谢分享,学习了

  2. 2010年9月22日06:24 | #2

    @FREEZhao 我的信箱是:114971497#qq.com 你直接把相关问题比如:主题样式。发到我信箱吧。这个方法是通用的。

  3. 2010年9月22日00:13 | #3

    没想到你也是车友啊,我也喜欢骑车

  4. 2010年9月22日00:12 | #4

    不得言您好,我使用了您提供的方法却没有实现功能,可能是主题的原因,我能够得到你的具体指导吗?请和我的邮箱联系我!!!!!!!!万分感谢!

  5. 2010年8月12日01:21 | #5

    Nice post and this mail helped me alot in my college assignement. Thanks you for your information.

  6. 2010年7月18日17:11 | #6

    @only博客 我也感觉有点深,可浅了又没什么效果。我会依照你的建议,稍微改浅点的。@卡努 你留言中的网址是你的新站?@tim 这个问题,你自己深入研究研究。我认为可行。你可别说我只考虑的编辑的时候方便,参考一个主题时使用了sibebar-footer。我就照搬使用,没考虑放置在一起。

  7. FIELDSBlanca
    2010年7月17日14:45 | #7

    According to my own investigation, millions of people all over the world get the home loans from well known banks. Thence, there is good chances to find a term loan in any country.

  8. tim
    2010年7月17日11:41 | #8

    我收到了你的回复了~可以正常运行了~

    另外,是否还应结合之前的“给您的WordPress博客加个底边框(Widget) ”教程一起使用呢?

    我看到多出了sidebar与sibebar-footer这两个php文件

  9. 卡努
    2010年7月17日11:19 | #9

    WP是挺好的,可是我用不习惯。嘿嘿。

  10. only博客
    2010年7月17日07:31 | #10

    分析的很深入,不错
    要好好学习一下!
    另外建议博主将评论框背景图片更改浅一点,有点“喧宾夺主”了
    呵呵

评论分页
1 2 864
  1. 2010年7月18日15:22 | #1

    [...] 昨天,我写完《给不支持Sidebar的WP主题加上侧边栏,底边栏》,怀着愤懑的感情给《河南绿建你到底在做什么——不得不言的问题》配完图后,出了趟厕所方便了一下。回来后就发现我的WordPress后台,发布文章日志的,上传/插入功能失效了!具体表现就是,当我使用Flash上传工具试图插入一张图片时,上传进度一直为0%,大概等待5-8秒,出现IO error,上传失败,媒体库没有更新。而是用浏览器上传时,同样没有回执,媒体库也没有相应的文件更新。而用FTP工具登录到文件的存放位置。赫然出现一张刚上传的图片。 [...]

  2. 2010年7月21日21:27 | #2

    [...] 3、网站版面方面。在博客的地步我加了一个sidebar可以自定义widget。事实上,我对此也进行了相关的优化,可谓是煞费苦心。请参考:《WordPress底部widget,显示相关日志列表》、《WordPress函数the_widget介绍、使用技巧》、《给不支持Sidebar的WP主题加侧边栏,底边栏》 [...]

  3. 2011年1月14日11:34 | #3

    [...] 4、如果您的博客没有侧边栏Sidebar,可以参考我的博文《给您的WordPress博客加个底边栏sidebar》和《给不支持Sidebar的WP主题加侧边栏,底边栏》或许对您有所帮助。 [...]

  4. 2011年7月11日11:19 | #4

    [...] 在主题kubrick-on-crack的文件夹里,找到functions.php文件,用EditPlus或Dreamweaver工具打开此文件,在文件的末尾加入如下代码。其中register_sidebar()(官方参考)函数用于定义sidebar。参数name用于定义sidebar名称,这里为footer;before_widget、after_widget定义$name的前后样式,before_title、after_title则是自定义标题的前后样式。 查看源代码打印帮助 [...]