WordPress:制作带ico图标的友链页面并完美解决图标API问题
博客,就单纯的写博客,不搞那么花俏的东西。所以一直想要找一个简洁又不失内涵的极简主题。一次偶然的机会发现了设计笔记开源的Adams主题,也就是目前楠哥说所用的主题。
简约而又不失内涵,这正是我想要的主题。于是一直沿用到现在。但是设计笔记开源的这款主题并不包含友情链接page模板文件。看到作者官网有友情链接页面,并且发现开源主题的js和css都有友情链接页面所需要的id和class。因此我估计是笔记开源的时候简单的去掉友链这个页面模板文件,其他的都原封不动。
于是我三下五除二把友链页面搞定了,点击直达
但是好像缺少点什么......对,就是ico图标。感觉加点图标好看点。于是我上网查了资料,把原先友链输出函数
<?php wp_list_bookmarks('title_li=&categorize=0'); ?>
替换成
<?php
$default_ico = get_template_directory_uri().'https://ico.mikelin.cn/mikelin.cn'; //默认 ico 图片位置
$bookmarks = get_bookmarks('title_li=&orderby=rand'); //全部链接随机输出
//如果你要输出某个链接分类的链接,更改一下get_bookmarks参数即可
//如要输出链接分类ID为5的链接 title_li=&categorize=0&category=5&orderby=rand
if ( !empty($bookmarks) ) {
foreach ($bookmarks as $bookmark) {
echo '<li><a href="'%20,%20$bookmark->link_url%20,%20'" title="' , $bookmark->link_description , '" target="_blank" ><img src="https://ico.mikelin.cn/',%20$bookmark->link_url%20,%20'" onerror="javascript:this.src='' , $default_ico , ''" / view-image="false">' , $bookmark->link_name , '</a></li>';
}
}
?>
添加的css
ul.links li a img {
display: inline;
padding-right: 5px;
top: 2px;
position: relative;
}
效果如下
笔记开发这个主题的时候,友链页面调用了友链的favicon图标作为鼠标停留的炫酷背景。但是调用的API来自Google。此前我一直未察觉,因为我的电脑自带梯子。昨天晚上折腾添加ico图标的时候才发现
难怪有朋友反馈友情链接页面加载速度很慢。原来是Google接口。大天朝的网络环境,哎~~~
刚好前段时间折腾中国博客联盟公用导航的ico图标,自己写了个ico接口,于是直接给替换上了。现在打开友链页面,速度搜搜的,飞快~~~