Question to say "I can!"

wordpress创建个性化的友情链接页面

2013-12-04

首先可以看一下我的友情链接页面:

http://www.zreading.cn/links

实现这个效果要感谢koya的文章帮助,结合自己的主题,创建步骤如下:

 

1.写links.php文件,这个不用多说了,可以在你的主题中引用其他的模版文件,在内容部分进行修改。

我的是这样写的

<div itemprop="description">
<div>
<ul>
<?php wp_list_bookmarks('title_li=&categorize=0&show_images=1'); ?>
</ul>
</div>

关于wp_list_bookmarks函数,你可以搜索一下,根据你的需要,修改参数,因为我不进行分类,所以categorize=0。

 

2.在style.css中添加优化链接列表的样式,代码如下:

.link-content{display:block;margin-bottom:20px;width:100%}
.link-content ul,li {list-style:none}
.link-content  ul{list-style:none;overflow:hidden;width:100%}
.link-content ul li{float:left;margin:10px 16px 10px 16px}
.link-content ul li a{display:block;overflow:hidden;width:110px;height:25px;color:#444;font-size:12px;line-height:25px}
.link-content ul li img{float:left;margin:4px 8px 2px 6px;width:16px;height:16px;line-height:16px}

这里要说的是,为什么要加.link-content ul,li {list-style:none}这一句呢?因为ul具有继承性,如果你前面.entry-content里有定义ul的样式,那么很可能会被加载到这里,然后在不同的浏览里显示不一样的效果,我原来没有加这一句时,链接的前面总会有个黑点,这个黑点就是因为.entry-content里定义的ul样式继承来的。所以,这里要再重新注销一下。

 

3.如果你还想再美观一点,那就在链接的前面加上对方网站的favicons吧,代码如下:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(".link-content a").each(function(e){
$(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+">");
});
</script>

把这个放在第1部分代码的后面就可以了。这段jQuery的意思是遍历所有class为link-content下所有的a标签,然后对该a标签添加img,其中是“.link-content”要根据自己的模板更改。

 

4.最后用创建页面的方法,页面模板选择“链接模板”,就创建成功了(如果你的代码复制进去不成功,那有可能是标点符号的原因)。



作者:admin | Categories:设计问题 | Tags:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

无觅相关文章插件,快速提升流量