JustNews主题显示友链图标教程

释放双眼,带上耳机,听听看~!

如果你用了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%20echo%20$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%20echo%20$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>
代码放在176-182

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

最终的效果,可以在本站首页页脚查看

给TA买糖
共{{data.count}}人
人已赞赏
其他默认

酱茄开源小程序-免费小蓝主题2.6.5公众号引流关注版来了!

2021-5-21 8:16:50

WordPress主题美化默认

给WordPress博客添加返回顶部和底部的教程

2021-5-21 22:24:38

声明:本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 xutian@ahap.cn 或点击右侧 私信:许天娱乐 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
有新私信 私信列表
搜索