WordPress文章列表右上角添加文章置顶+新文章发布+更新文章ICON图标

温馨提示:本文最后更新于2024-03-12 09:06:06,某些文章具有时效性,若有错误或已失效,请在下方留言。

3月11日更新

图片[1]-WordPress文章列表右上角添加文章置顶+新文章发布+更新文章ICON图标

3月12日更新

图片[2]-WordPress文章列表右上角添加文章置顶+新文章发布+更新文章ICON图标

这个图片好处手机版可以不挡住字体!比较好的!

(特别鸣谢:【似水流年】站长 “三途河⫍” 鼎力相助!)

文章置顶图标

PHP代码

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

演示版本二

/**
* 新文章发布New小图标
*/
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="https://www.umsbox.com/wp-content/uploads/2024/03/20240312081415386-1694074765-0dc654853e231801.webp" draggable="false" alt="最新文章" /></div>';
    }else if (is_sticky()){
        $wiui_new_icon = '<div class="tianyishangke-new-icon"><img src="https://www.umsbox.com/wp-content/uploads/2024/03/20240312081411383-1694074752-ba82090331231754.webp" draggable="false" alt="置顶文章" /></div>';
    }else{
        $wiui_new_icon = '';
    }
    //开始输出
    return $wiui_new_icon;
}

演示版本一

/**
* 新文章发布New小图标
*/
function is_post_new($post_date, $modified_date) {
    date_default_timezone_set('Asia/Shanghai');
    $current_date = date("Y-m-d H:i:s");
    $diff1 = (strtotime($current_date) - strtotime($post_date)) / 3600;
    $diff2 = (strtotime($current_date) - strtotime($modified_date)) / 3600;
    if ($diff1 < 24 || $diff2 < 24) {
        return true;
    }
    return false;
}

function generate_icon_html($post_date, $modified_date) {
    if (is_post_new($post_date, $modified_date)) {
        return '<span class="new-icon">NEW</span>';
    } else {
        return '<span class="update-icon">UPDATE</span>';
    }
}

在子比主题目录下“/inc/functions/zib-posts-list.php”(子比主题下面)找到这个 //获取文章列表的标题 下面替换成下面代码。

演示版本二

图片[3]-WordPress文章列表右上角添加文章置顶+新文章发布+更新文章ICON图标
$html .= tianyishangke_post_newicon($post);//新文章+置顶文章icon图标函数

网站根目录wp-config.php第一行加上date_default_timezone_set(‘PRC’);把原来post-list文件代码里这一行屏蔽掉,完成。

注意时间格式:否则也会出现错误

图片[4]-WordPress文章列表右上角添加文章置顶+新文章发布+更新文章ICON图标

演示版本一

//获取文章列表的标题
function zib_get_posts_list_title($class = 'item-heading')
{
    global $post;
    $get_permalink = get_permalink($post);
    $_post_target_blank = _post_target_blank();
    $title = get_the_title($post) . get_the_subtitle(true, 'focus-color');
    date_default_timezone_set('UTC');
    $t1 = get_the_time('Y-m-d H:i:s', $post);
    $t2 = wp_date('Y-m-d H:i:s');
    $t3 = get_the_modified_time('Y-m-d H:i:s', $post);
    $diff1 = (strtotime($t2) - strtotime($t1)) / 3600;
    $diff2 = (strtotime($t2) - strtotime($t3)) / 3600;
    $icon_html = '';
    if ($diff1 < 24) {
        $icon_html = '<span class="new-icon">NEW</span>';
    } else if ($diff2 < 24) {
        $icon_html = '<span class="update-icon">UPDATE</span>';
    }
    $html = '<h2 class="' . $class . '">' . $icon_html . '<a' . $_post_target_blank . ' href="' . $get_permalink . '">' . $title . '</a></h2>';
    return $html;
}

替换完成以后加CSS代码

演示版本二 CSS代码

/*优盟盒子网·新文章发布图标样式*/
.posts-item{position: relative !important;}
.tianyishangke-new-icon{position: absolute;height: 35px;right: 0;top: 0;}
.tianyishangke-new-icon img{-webkit-user-drag: none;}

演示版本一 CSS代码

/** NEW 图标文字版样式 **/
.tab-content {
    position: relative;
}

.tab-content .new-icon,
.tab-content .update-icon {
    position: absolute;
    right: 10px; /* 修改右边距为10px */
    display: inline-block;
    font-size: 12px; /* 自适应宽度 */
    height: auto; /* 自适应高度 */
    line-height: normal; /* 恢复默认行高 */
    text-align: center;
    background-color: #F56C6C; /* 使用指定的背景颜色 */
    color: #fff;
    font-weight: bold;
    padding: 1px 2px; /* 调整内边距 */
    border-radius: 4px;
}

OK完成!感谢逝水流年大佬!大家看下效果吧!

图片[5]-WordPress文章列表右上角添加文章置顶+新文章发布+更新文章ICON图标

上面《img》标签icon图标链接自己修改

图标素材

最关键的PHP代码及放置位置:

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

$html .= tianyishangke_post_newicon($post);//置顶文章icon图标函数
图片[11]-WordPress文章列表右上角添加文章置顶+新文章发布+更新文章ICON图标

CSS代码

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

不懂可以留言~

文章版权声明 1、本网站名称:优盟盒子
2、本站永久网址:https://umsbox.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ5941950进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞5赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容