子比主题文章卡片下载按钮样式美化

部署教程

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

  1. 第一个php代码

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

//获取文章列表的底部meta
function zib_get_posts_list_meta($show_author = true, $is_card = false, $post = null)
{
$get_permalink = get_permalink();//添加文章链接
if (!is_object($post)) {
$post = get_post($post);
}

代码如下

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

2.第二个PHP代码

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

$html = '<div class="item-meta muted-2-color flex jsb ac">';
$html .= $meta_left;
$html .= $meta_right;
$html .= '</div>';
$html = '<a class="down" target="_blank" href="' . $get_permalink . '">阅读文章</a>';//添加下载按钮
return $html;

代码如下

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

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;}

教程到这里了就结束了

请登录后发表评论

    没有回复内容

AA导航网