WordPress:制作带ico图标的友链页面并完美解决图标API问题

/ 0评 / 2

博客,就单纯的写博客,不搞那么花俏的东西。所以一直想要找一个简洁又不失内涵的极简主题。一次偶然的机会发现了设计笔记开源的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接口,于是直接给替换上了。现在打开友链页面,速度搜搜的,飞快~~~

 

发表评论

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