首页 > 博主私藏分享 > 给不支持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年7月30日11:01 | #1

    @美图控 想搞别人的底边栏,这个不太复杂,功能模块可以参考官方函数文档使用办法。至于样式啥的,另存为,然后自己编辑喽。

  2. 美图控
    2011年7月29日01:40 | #2

    不得言大大。我表示我看懂了。但是我现在是想将别人主题的底边栏移植到我的主题里面去。那又该怎么做呢?可否加我的QQ详细交流一下呢?我的QQ:1145885778.请你在你的空暇时间帮帮我好吗?感激不尽ing。o(︶︿︶)o 唉

  3. 2011年3月1日15:35 | #3

    @梦醒时分 在博客搜索里搜索:“留言框”你将有意想不到的惊喜:WordPress应用:给留言框加上个性背景

  4. 梦醒时分
    2011年3月1日13:06 | #4

    很好,可用,还是代码级别的修改。
    请教一下,你的“留言”很漂亮,是怎么设置的?

  5. 2011年2月23日21:56 | #5

    呵呵,很给力呀,看来博主对于wp研究比较多

评论分页
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则是自定义标题的前后样式。 查看源代码打印帮助 [...]