子比美化教程-文章卡片美化(添加下载按钮、添加三个点)

添加三个点

首先添加php代码

以7.8为例,修改主题目录下的inc/functions/zib-posts-list.php文件

找到所用组件的class名称,比如我这里用的是多栏目文章,对应的是 posts-item card ajax-item

在下面的$html = '';添加以下代码

    $html .= '<div class="car-circle">';
    $html .= '<div class="circle">';
    $html .= '<span class="red box"></span></div>';
    $html .= '<div class="circle">';
    $html .= '<span class="yellow box"></span></div>';
    $html .= '<div class="circle">';
    $html .= '<span class="green box"></span></div>';
    $html .= '</div>';

然后在主题设置的自定义代码添加以下css代码

.posts-item.card {
    background: url(wp-content/uploads/2024/07/post-bj.jpg) 100% 100% no-repeat !important;
    border: 2px solid var(--main-bg-color);
}
.car-circle{
    display: flex;
    align-items: center;
  padding: 4px;}
.circle{
  padding: 0 4px;
}

.box {
    display: inline-block;
    align-items: center;
    width: 10px;
    height: 10px;
    padding: 1px;
    border-radius: 50%;
}
.red.box{
  background-color: #ff605c;
 }
.yellow.box{
background-color: #ffbd44;
 }
.green.box{
background-color: #00ca4e
 }

添加下载按钮

依然在此文件中添加

首先在上面添加一个php代码,用于后面获取文章链接,位置在$html = '';前面即可

添加的代码

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

之后在下面的$html .= '</posts>';前面添加以下代码(可以根据自己喜好更改其他文字)

$html .= '<a class="down" target="_blank" href="'.$get_permalink.'">下载</a>';

自定义代码添加以下css代码

a.down{
    display: inline-block;
    width: 100%;
    height: 36px;
    line-height: 36px;
    border-radius: 15px;
    background: linear-gradient(354deg, #8af8ff 4%, #8aa4ff 33%) !important;
    color: #fff;
    text-align: center;
    padding: 0;
    margin: 0;
}

最终效果如下:

修改后的文件: