首页 > 折腾WP > WordPress 友情链接页面全面修缮

WordPress 友情链接页面全面修缮

WordPress 友情链接页面全面修缮前后的剧烈对比

先上图,相比之下以前的友情链接页面简直是“杯具”。这个修缮工作的最大功臣是我们的“万戈”大湿,鼓掌…

昨晚在万戈的博客看到了两篇文章《个性化 WordPress 友情链接页面》和《获取 Favicon 服务美化友情链接》,又看了万戈的友情链接页面,看起来“舒服”极了。

由于之前已经有该页面,只是对主题的CSS不是很满意,所以只借鉴了万戈的部分CSS美化:

/*—-Links Page—-*/
.linkpage ul {
padding: 5px 6px;
list-style-type: none;
overflow:auto
}
* html .linkpage ul{ height:1%;}
.linkpage ul li {
color: #333;
margin-bottom: 5px;
font-size: 12px;
}
.linkpage ul li ul li {
float: left;
width: 141px;
text-align: center;
margin: 3px 3px;
line-height: 180%;
background-color: #FFFFFF;
border: 1px solid #dadada;
}
.linkpage ul li ul li a {
color: gray;
display: block;
}
.linkpage ul li ul li a:hover {
background-color: gray;
color: #FFFFFF;
font-weight:bold;
}

之后就利用 Google 获取友情链接的 Favicon,对于还没有被 Google 缓存 Favicon 的网站就会返回 Example

原理:把 http://www.google.com/s2/favicons?domain=example.com(example.com 为所需域名),提交给 Google,Google 会返回一个16×16的 PNG 图片。

具体修改这里不转了,再再次“借花献佛”修改好的(点击下载 1.76K)文件,把此文件里的2个函数复制到主题里面的 function.php 文件中就OK了。

看看,是不是有图片了?由于上面友情链接页面的CSS有居中设置,再加上图片有浮动错位,看起不舒服,也不知道怎么改。于是找到“万戈”link页面,偷了他的CSS,找到 img 项转过来放到上面的CSS里面:

.linkpage IMG {
PADDING-BOTTOM: 3px;
PADDING-LEFT: 3px;
WIDTH: 16px;
PADDING-RIGHT: 0px;
FLOAT: left;
HEIGHT: 16px;
PADDING-TOP: 3px;
}

至此,修缮完成。

PS. 在木木童鞋那还有一个JS的简单版本,有兴趣的盆友猛击 这里

  1. luren@ 2011.04.02 / 22:23| #31

    @Japhia
    function那里的代码有加了吗?不过还是建议用木木那个jQuery方法,简单很多,CSS需要的话我也是用这个的,应该不差的,细节调整下就行~~

  2. Japhia@ 2011.04.03 / 02:18| #32

    @luren 我现在不太明白现怎么调才能让links页面实现您这样的效果 怎么才能去掉1 2 3 之类的序号 然后整齐的并列显示? :sad:

  3. luren@ 2011.04.03 / 22:51| #33

    @Japhia
    我把现在使用的 link 页面代码和 style.css 打包发到了你评论用邮箱了,你自己参照着先改改看吧,如还有疑问可以再留言~~

  4. Japhia@ 2011.04.03 / 23:03| #34

    @luren 万分感谢!!! :roll:

  5. SayMe@ 2011.04.04 / 10:00| #35

    我咋弄完之后 选择links页面模板没有任何效果昵
    还是原来的那个效果.还要修改links页面模板的函数吗?css已经添加了 function函数也加完了. 话说你的那个function文件 函数最外面多加了一对<? 括号.第一次修改完直接进不去了.原来是 多了这么一对括号,去掉就好了

  6. luren@ 2011.04.04 / 23:03| #36

    @SayMe
    可能我说的不够明白,你有没有把 link 页面里面的 wp_list_bookmarks 换成 my_list_bookmarks 函数名~~

  7. SayMe@ 2011.04.11 / 09:53| #37

    @luren
    额 所有的链接都是竖排显示 已经改完函数名字了….. 求解
    效果可以看我的链接 上面的那部分是我原来手动添加的链接

  8. luren@ 2011.04.11 / 23:53| #38

    @SayMe
    成了这样的话,应该只是CSS问题了,你可以对比我链接页面的DIV + CSS样式,我是参考了万戈他链接页面的样式的。你可以对照DIV下载我的CSS来看看就应该能解决,大致看了下,应该是左浮动的问题~~

  9. 童程博客@ 2011.11.15 / 15:47| #39

    迟了的博在游荡…

评论提交中, 请稍候...