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

4.5
(2)

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

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

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

而方法二,不会有报错。不过,需要你在后台友链那里设置一下图像地址。方法一,免费提供;方法二,关键代码我会付费提供。感谢支持!理论上,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'"/>
JustNews主题显示友链图标教程来啦

上述代码中的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'"/>
JustNews主题显示友链图标教程来啦

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

最后的效果图如下:

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

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

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

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

样式重新调整,高端玩法

如果你用了justnews的可视化编辑首页,将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>
JustNews主题显示友链图标教程来啦

然后,添加如下自定义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;
}

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

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

怎么样,感觉还可以吧!

共计2人评分,平均4.5

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/website/wordpress-justnews-links-ico.html

发表评论

登录后才能评论
本站APP
本站APP
分享本页
返回顶部