zb文章卡片下载按钮样式美化

公告:荻酷网每天不定时为大家更新各种实用技术教程、编曲资源,脚本源代码,插件,软件应用等资讯、绝大部分资源都经过亲测演示,下载荻酷网客户端、获取最新资源不迷路。 下载说明:如果是种子链接请下载专用工具进行下载,其它网盘链接可直接访问下载。

 

前言

给你的子比主题卡片样式下面加一个下载按钮样式,简约美观,这个非常实用。代码收集于网络,由不知名大神提供。

效果图

20240603122239398-QQ截图20240603122153

部署教程

教程一共分两步,有两行php代码和一个css代码,话不多说直接开始教程

$get_permalink = get_permalink();//添加文章链接

将上方PHP代码放到子比文件:/wp-content/themes/zibll/inc/functions/zib-posts-list.php的大概268行,如下图:

20240603122543295-QQ截图20240603122350

$html = '<a class="down" target="_blank" href="' . $get_permalink . '">下载</a>';//添加下载按钮/2

将上方的PHP代码放到子比文件:/wp-content/themes/zibll/inc/functions/zib-posts-list.php的大概310行,如下图:

20240603122726634-QQ截图20240603122656

部署CSS代码

CSS代码我就不说了,直接放到子比主题=>>自定义CSS样式即可!

/*文章卡片下载按钮 tfbkw.com*/
a.down {
    display: inline-block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    background: linear-gradient(to right, #4f6dee, #67bdf9);
    color: #fff;
    text-align: center;
    cursor: pointer
    text-shadow: none;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

教程到这里了就结束了。

温馨提示:本文最后更新于2024-06-03 12:30:01,某些文章具有时效性,若有错误或已失效,请在下方留言
©版权声明
感谢您的阅读
喜欢就支持一下吧
点赞11 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容