JustNews主题显示友链图标教程来啦

WPCOM主题售后群，有人问如何实现JustNews主题首页的友情链接显示图标，竟然还有人想我付费写个教程，那么他来了。本文提供两种方式显示首页的友情链接图标。一种是自动获取友链的图标，另一种是手动设置友链图标。

这里，你需要注意的是，自动获取的图标，有可能源站是http，获取到http图标，导致不显示图标（如果你自己网站是https）。那么也可能源站没设置图标，你无法获取图标。这里，我们直接检测js报错信息，自动替换为设置好的图标。不过，f12会有一些报错信息。如果你不在意，就无所谓。反正，图标是会正常显示的。

而方法二，不会有报错。不过，需要你在后台友链那里设置一下图像地址。方法一，免费提供；方法二，关键代码我会付费提供。感谢支持！理论上，WordPress主题都可以用这个方法实现，不过需要你找到主题相关文件。justnews完全按照我的教程就可以了。

方法一，自动提取图标

编辑wp-content/themes/justnews/modules目录下links.php文件，当然你也可以用子主题，同目录复制一份links.php再去修改。第57行a标签前，插入如下代码即可：

<img src="<?php echo $link->link_url?>/favicon.ico" onerror="javascript:this.src='https://oss.iymark.com/2021/03/2021030215074746.png'"/>

上述代码中的https://oss.iymark.com/2021/03/2021030215074746.png请替换为你自己的默认图标地址，我这个地址别人无法访问的。

接着，主题设置，自定义css插入如下代码即可：

.list-links img {
    width: 20px;
    margin-right: 2px;
}

到此，方法一结束。

方法二，手动设置图标

编辑wp-content/themes/justnews/modules目录下links.php文件，当然你也可以用子主题，同目录复制一份links.php再去修改。第57行a标签前，插入如下代码即可：

<img src="<?php echo $link->link_image?>"/>

然后，去友链设置，高级选项，设置每个友链的图像地址即可：

当然，如果你没设置图标，那么前台就不显示图标。如果你想不设置图标，显示默认图标；设置图标，就显示设置好的图标。那么，你需要用如下代码：

<img src="<?php echo $link->link_image?>" onerror="javascript:this.src='https://oss.iymark.com/2021/03/2021030215074746.png'"/>

当然也要修改主题设置里的自定义css，css代码同方案一中所列出。

最后的效果图如下：

最后再给大家一个提取目标网站图标的方法，访问网址/favicon.ico，下载图标。如果是ico文件，用画图工具编辑，另存为png，上传到服务器。如果是png等，修改下尺寸，上传。

这里，你访问/favicon.ico，浏览器会自动获取图标。而不一定要求网站根目录有该文件。

最后经过判断，如果你没用可视化编辑器。那么你需要修改主题目录下index.php文件，大约180行，插入上述文章表述的php代码即可。可以通过index.php文件搜索list-links，定位！

样式重新调整，高端玩法

如果你用了justnews的可视化编辑首页，将wp-content/themes/justnews/modules目录下的links.php中对应代码替换为以下代码；如果你用默认的首页，修改主题目录下index.php对应代码：请注意修改代码中的png图片，是默认的网站图标，该方法衍生于方法二。

            <div class="sec-panel-body">
                <ul class="list list-links">
                    <?php foreach($bookmarks as $link){ if($link->link_visible=='Y'){ ?>
                        <li class="links"><img alt="<?php echo $link->link_name?>" src="<?php echo $link->link_image?>" onerror="javascript:this.src='https://oss.iymark.com/2021/03/2021030215074746.png'"/><a <?php if($link->link_target){?>target="<?php echo $link->link_target;?>" <?php } ?><?php if($link->link_description){?>title="<?php echo esc_attr($link->link_description);?>" <?php } ?>href="<?php echo $link->link_url?>"<?php if($link->link_rel){?> rel="<?php echo $link->link_rel;?>"<?php } ?>><?php echo $link->link_name?></a></li>
                    <?php }} ?>
                </ul>
            </div>

然后，添加如下自定义css代码：

.list-links img {
    width: 20px;
    margin-right: 5px;
}
.list-links .links {
    float: left;
    padding: 5px 5px 0 5px;
    text-align: justify;
    width: 9.5%;
    border: 4px solid #f1f1f1;
    margin: 2px;
	background:#f1f1f1;
}
@media (max-width: 1240px){
	.list-links .links {
    width: 32.2%;
}
}
@media (max-width: 991px){
	.list-links .links {
    width: 46%;
}
}
.list-links {
    display: inline-block;
}
.list-links a {
    width: 70%;
    white-space: nowrap;
    word-wrap: normal;
    text-overflow: ellipsis;
    overflow: hidden;
	line-height: inherit;
	margin:0;
}

最终的效果，可以在本站首页页脚查看，也可以看下面这张演示图：

怎么样，感觉还可以吧！

2022年9月3日

重新写了下JustNews主题的适配CSS代码，使得更加完美。

.list-links img {
	width:20px;
	margin-right:5px;
}
.list-links .links {
	float:left;
	padding:8px 0 3px 5px;
	text-align:justify;
	width:10%;
	border:2px solid #fff;
	background:#f1f1f1;
}
@media (max-width:1240px) {
	.list-links .links {
	width:33.3%;
}
}@media (max-width:991px) {
	.list-links .links {
	width:50%;
}
}.list-links {
	display:inline-block;
	margin:0!important;
}
.list-links a {
	width:70%;
	white-space:nowrap;
	word-wrap:normal;
	text-overflow:ellipsis;
	overflow:hidden;
	line-height:inherit;
	margin:0;
}

相比于上面的CSS代码，本CSS代码做了一点点调整。