Zibll主题给刚发布和刚更新的文章分别加上”新””更”小图标及文字提示

支持Zibll子比的最新版本:

本文达到的效果如下:

如果是24小时内发布:显示“新”图标,标题显示1天内发布。

如果是24小时内更新:显示“更”图标,标题显示1天内更新。

如果不是24小时内发布或者更新:不显示任何图标,标题显示最近更新日期。

Zibll主题给刚发布和刚更新的文章分别加上”新””更”小图标及文字提示-似水流年

教程开始:

第一、解决wordpress时区问题,否则可能会显示不正确,需要有PHP.INI编辑权限,以宝塔PHP8.1为例。

php.ini配置文件,大概在968行,或则搜索date.timezone,看=后面的值是什么,如果是PRC则不改动,如果不是,修改为PRC,修改后重启PHP。

Zibll主题给刚发布和刚更新的文章分别加上”新””更”小图标及文字提示-似水流年

网站根目录下wp-config.php,第一行添加

date_default_timezone_set(‘PRC’);

Zibll主题给刚发布和刚更新的文章分别加上”新””更”小图标及文字提示-似水流年

wordpress后台设置-常规中,时区、日期、时间,按如下设置。

Zibll主题给刚发布和刚更新的文章分别加上”新””更”小图标及文字提示-似水流年

第二、Zibll主题设置—文章&列表—列表卡片模式,将“首页列表 卡片模式“关闭。

PS:主要是卡片模式调试了好久,NEW小图标一直错位,无奈关闭。

Zibll主题给刚发布和刚更新的文章分别加上”新””更”小图标及文字提示-似水流年

第三、修改主题目录中的/inc/functions/zib-posts-list.php文件,找到以下代码:

//获取文章列表的标题

function zib_get_posts_list_title($class = 'item-heading')

将整段代码修改为:

温馨提示: 此处为隐藏内容,需要评论本文后才能查看.
评论后请刷新一次页面,但注意不要清除缓存,否则还需要再次评论!

代码注释:

diff1<24,diff2<24,24代表1天,如果显示2天则修改为48,以此类推。

第四、添加CSS样式

后台主题设置-全局功能-自定义代码-自定义CSS样式插入

.tab-content{
position: relative;
}
/** NEW 图标文字版样式 **/
.tab-content .new-icon{
position: absolute;
right: 1px;
display: block;
width: 40px;
height: 40px;
line-height: 20px;
background-image: url(你的New图标地址);
transform-origin: 0% 0%;
}
/** UPDATE 图标文字版样式 **/
.tab-content .update-icon{
position: absolute;
right: 1px;
display: block;
width: 40px;
height: 40px;
line-height: 20px;
background-image: url(你的Update图标地址);
transform-origin: 0% 0%;
}
Comments | 8 条评论
  • obaby

    Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省济南市 移动

    用上啦。很快啊~~😃

  • obaby

    Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省济南市 移动

    用上啦?很快啊~~

    • Avatar photo

      似水流年

      IBrowse r IBrowse r Android 10 Android 10 cn河南省漯河市 联通

      请问大神,这个显示地址、系统和浏览器的文字字体大小从哪里可以修改一下?我想小一号14px

      • obaby

        Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省济南市 移动

        修改 wp 的自定义样式,添加下面的代码:
        .wp-useragent {
        font-size: 12px;
        }
        数值可以根据你的喜好自己调整下就行啦。

        • Avatar photo

          似水流年

          Microsoft Edge 119 Microsoft Edge 119 Windows 10 Windows 10 cn河南省漯河市 联通

          收到,谢谢!

  • obaby

    Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省济南市 移动

    用上啦?很快啊~~

    • Avatar photo

      似水流年

      IBrowse r IBrowse r Android 10 Android 10 cn河南省漯河市 联通

      谢谢大神啊,已经用上了。

  • Avatar photo

    似水流年

    Microsoft Edge 119 Microsoft Edge 119 Windows 10 Windows 10 cn河南省漯河市 联通

    增加了显示IP归属地功能

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息