文章列表右上角添加文章置顶和新文章发布图标(保姆级教程)-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

文章列表右上角添加文章置顶和新文章发布图标(保姆级教程)

该帖子部分内容已隐藏
付费阅读
已售 68
10积分
自愿捐赠

还是老样子,教程免费,自愿捐赠

上期内容回顾

两行代码为你网站左下角加一个好看的二次元老婆

https://www.zibll.com/forum-post/15757.html

本期教程开始

首先……

不对,我还没装逼呢

Hello,大家好,我就是你们人见人爱,花见花开,车见车爆胎的,世界第一帅哥大白giegie

现在可以开始教程了

先放效果图

QQ截图20230512224403后

QQ截图20230512224430后

1.在子比主题目录下“func.php”(子比主题推荐放这里)或者“functions.php”,在合适位置放下面PHP代码。

/**
* 新文章发布New小图标 大白博客:www.c1i.cn
*/
function tianyishangke_post_newicon($post){
    //date_default_timezone_set('PRC');
    $wiui_date = date("Y-m-d H:i:s");
    $wiui_post_date = get_the_time('Y-m-d H:i:s', $post);
    $wiui_diff = (strtotime($wiui_date)-strtotime($wiui_post_date))/3600;
    if($wiui_diff<24){
        $wiui_new_icon = '<div class="tianyishangke-new-icon"><img src="图标链接" draggable="false" alt="最新文章" /></div>';
    }else if (is_sticky()){
        $wiui_new_icon = '<div class="tianyishangke-new-icon"><img src="图标链接" draggable="false" alt="置顶文章" /></div>';
    }else{
        $wiui_new_icon = '';
    }
    //开始输出
    return $wiui_new_icon;
}

2.在子比主题目录下“/zibll/inc/functions/zib-posts-list.php”文件中,放在获取文章列表标题内 大概440行的文章放入下面PHP代码

$html .= tianyishangke_post_newicon($post);//置顶文章icon图标函数 大白博客https://www.c1i.cn/

最后在自定义css代码里面添加

/*新文章发布图标样式大白博客https://www.c1i.cn/*/
.posts-item{position: relative !important;}
.tianyishangke-new-icon{position: absolute;height: 35px;right: 0;top: 0;}
.tianyishangke-new-icon img{-webkit-user-drag: none;}

这样就可以了

下期预告:

QQ截图20230512230344后

美化统计模块

 

自愿赞助:

 

请登录后发表评论

      • 老糖的头像-WordPress主题模板-zibll子比主题代理会员老糖徽章-备受瞩目-WordPress主题模板-zibll子比主题等级-LV8-WordPress主题模板-zibll子比主题超级版主0