首页 > 技术贵在折腾 > WP_Widget_Text实例:给侧边栏加博主简介

WP_Widget_Text实例:给侧边栏加博主简介

2011年1月14日 发表评论阅读评论
wordpress应用:给Sidebar加上博主简介和热门关键字

Sidebar加上博主简介和热门关键字

7月份写关于Wordpress函数the_widget的介绍,因时间问题只写 3/4,就扔的不见踪影。博文地址《WordPress函数 the_widget介绍、使用技巧》。昨日有网友订阅不得言腾讯微博,问关于WP_Widget_Text参数的使用,才突然发现此博文还有三分之一没有完成——丢人汗颜呀!

写the_widget函数介绍是为分享心得,半途而废不说,没能帮人家解决问题,反而被追到家门口了——让不得言很难看。帮人帮到底,送佛送到西,半途而废不是我的个性,因此一定抽出时间补全。WP_Widget_Text在官方也鲜有详细介绍,这里简单分享一下使用心得。做一个应用实例,算是给这个网友一个交代吧。

WP_Widget_Text参数介绍

the_widget用来调用博客widgets的函数,功能十分强大,仅$widget就有很多参数值,详细看the_widget介绍。唯有参数WP_Widget_Text是用户自定义内容,合理的使用可以让你的侧边栏widgets灵活自如个性十足。调用方式:

<?php the_widget('WP_Widget_Text', $instance, $args); ?>

其中$instance有三个参数,$title为文本标题、$text为文本内容、$filter未知。$args用于定义$instance的标题和内容样式,在CSS里定义相关内容控制其现实样式。默认参数是

before_widget 微件前置内容,默认<div class="widget {widget's classname}">
after_widget 微件后置内容,默认</div>
before_title 微件标题前置内容,默认<h2 class="widgettitle">
after_title 微件标题后置内容,默认</h2>

牛刀小试:例句一,自定义的标题是Text_title,内容是Text_content;例句二,在一的基础上把标题Text_title搞成红色。

<?php the_widget('WP_Widget_Text','title=Text_title&text=Text_content'); ?>
<?php the_widget('WP_Widget_Text','title=Text_title&text=Text_content','before_title=<h2 style="color:#F00;">&after_title=</h2>'); ?>

WP_Widget_Text应用介绍

$instance的参数值$text内容可以为文本也可以为HTML代码。这就给我们一个无限扩展的空间。通过给$text赋值HTML内容,在通过CSS样式进行控制,从而达到想要的任何效果。下面就介绍Wordpress主题制作必须懂得的一招:就做一个博主简介,放在右上侧widgets里,让其默认显示。

首先准备好你的图片,我使用的是微博图片。制作一个简单的博主简介HTML代码。登录后台,找到“外观 > 微件”,拖一个“文本”Widget放入到Sidebar的合适位置。标题留空,内容如下(内容自行编辑哈):

<div class="blogger">
	<div class="blogger-Photos"><img src="http://www.budeyan.com/wp-content/themes/budeyan/images/100.jpeg"></div>
	<div class="blogger-info">
		<p><strong>姓名</strong>:不得言</p>
		<p><strong>年龄</strong>:28岁</p>
		<p><strong>信箱</strong>:5ihllcn@163.com</p>
		<p><strong>简介</strong>:山东临沂人,05年毕业于山东聊城大学, 计算机科学与技术专业,随兴趣潮流打拼互联网已有 6年。07年来到郑州,河南绿建。<a href="http://www.budeyan.com/about_budeyan_com/">详细介绍</a></p>
		<div class="blogger-interest">郑州SEO 郑汴公交 SEO优化 户外骑行 健身减肥 wordress应用 SEO博客 FreeNas 蜱虫狗 固定链接 WordPress </div>
	</div>
</div>

CSS控制样式如下,FTP登录找到当前主题样式表Style.css,或登录后台“外观 > 编辑”对当前主题样式Style.css进行编辑。在最末尾加入(宽度大小控制自己修改哈):

/* blogger info START */
.blogger {
	width:280px;
	font-size:12px;
}
.blogger-Photos {
	float:left;
	width:100px;
	border:1px solid #ccc;
	margin:0px 8px 0px 0px;
	padding:4px;
}
.blogger-info{
	line-height:23px;
}
.blogger-interest{
	background:#fff3d8;
	padding:0px 2px 0px 10px;
}
/* blogger info END */

WP_Widget_Text应用说明

1、不知道the_widget函数,不理会WP_Widget_Text参数下,也可以完成加入博客简介制作。但会让你不知甚解。

2、blogger-interest是博主兴趣,也是博主的关注内容,可以设置博客热门关键字,链接地址为避免和标签tag重复,建议使用搜索数据。如下:郑州SEO 郑汴公交 SEO优化 户外骑行 健身减肥 wordress应用 SEO博客 FreeNas 蜱虫狗 固定链接 WordPress

3、如果只想首页显示,可能麻烦一点:安装插件Widget Logic作者Alan Trewartha。拖一个“文本”Widget放入到Sidebar时,在Widget logic 输入:is_home()保存。

is_home()是页面判断函数,博文《wordpress友情链接个性化》有此插件和页面判断函数说明。如果是直接对Sidebar.php进行的编辑,可以如下设置:

<?php if (is_home()) { ?>博主简介内容<?php } ?>

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

更多
  1. 2011年10月20日23:23 | #1

    博主能否帮个忙,看看我的博客模板边栏标签和功能的衔接处似乎衔接得不是很好,不懂代码诶

  2. 2011年6月22日15:40 | #2

    还是用插件再简单调用好,菜鸟飘过

  3. 导航网站大全
    2011年1月25日15:01 | #3

    嘿嘿我都看昏了,看的好好学习学习

  4. 郑汴公交
    2011年1月19日08:05 | #4

    @XiaoYao 既然能出来,已经完成了一多半了。跑到侧边Sidebar很可能是你代码位置放的不对。

评论分页
1 2 1661
  1. 2011年2月12日08:09 | #1

    [...] 12月末对博客进行优化调整,蜱虫、蜱虫狗关键字被刻意照顾,博文《给 WordPress分类页,归档页加关键字元标记》、《WP_Widget_Text实例:给侧边栏加博主简介》记录了其全过程。 [...]

  2. 2011年3月1日23:33 | #2

    [...] 在使用谷歌网站管理员工具时,HTML建议里,有大量重复的标题标记。这是前期写《给侧边栏加博主简介》时,加入热门搜索关键字搜索造成的。热门搜索关键字,其实是在搜索引擎比较靠前的能带来不少流量的或者我刻意去优化的关键字。 [...]