主机、服务器测评
服务器促销信息及建站资源分享

如何为WordPress DUX主题在文章列表中为24小时内新发布的文章添加NEW图标

本文于 2020-08-09 09:01 更新,本文內容具有時效性,如有失效,請在博客站內搜相關商家名稱,即可查看到關於此商家的最新優惠活動! 國外商家建議使用“谷歌瀏覽器”訪問,因為谷歌瀏覽器支持右鍵選擇“翻譯成中文”! !

此商家服务器严禁任何违规、违法用途,包括但不仅限于黄、赌、“dai理”、欺诈、攻击等,一经发现商家会删号处理! !

主机玖玖目前使用的是WordPress搭建的博客,使用的是DUX主题。之所以选择DUX主题来建设博客,主要是DUX主题不仅在外观上非常美观,而且对SEO功能优化也是非常合理的,如果你对DUX主题感兴趣可以点击这里到开发者网站购买!DUX主题虽然功能比较齐全,但是在首页文章列表显示方面并没有对新发布的文章有任何提示,这里主机玖玖为大家分享一个DUX主题在文章列表中为24小时内新发布的文章添加NEW图标方法,只需修改“excerpt.php”,并且在“main.css”添加样式即可实现如下图的效果。

如何为WordPress DUX主题在文章列表中为24小时内新发布的文章添加NEW图标插图

上面说到了DUX主题新发布的文章添加NEW图标只需修改“excerpt.php”、“main.css”两个文件就能实现,下面我们来详细说说这两个文件如何修改实现:

一、修改excerpt.php

首先在DUX主题文件当中找到“excerpt.php”,然后通过搜索查找找到下面代码位置。

echo '<h2><a'._post_target_blank().' href="'.get_permalink().'" title="'.get_the_title().get_the_subtitle(false)._get_delimiter().get_bloginfo('name').'">'.get_the_title().get_the_subtitle().'</a></h2>';

找到上面代码位置后在这段代码后面加上如下代码:

date_default_timezone_set('PRC');
$t1=$post->post_date;
$t2=date("Y-m-d H:i:s");
$diff=(strtotime($t2)-strtotime($t1))/3600;
if($diff<24){echo 'New';}
else{echo "";}

加完上面代码后,修改excerpt.php文件就这么简单愉快的完成了。

 

二、修改main.css样式

在DUX主题文件当中的“css”文件夹中找到“main.css”样式文件,然后添加如下代码即可。

/** 修正摘要列表定位方式 */
.excerpt {
    position: relative;
}
/** NEW 图标文字版样式 **/
.excerpt .new-icon{
    position: absolute;
    right: -38px;
    top: -16px;
    display: block;
    width: 76px;
    height: 20px;
    line-height: 20px;
    background: #4caf50;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    transform: rotate(45deg);
    transform-origin: 0% 0%;
}

修改完成后记得刷新下浏览器缓存和CDN缓存就能看到直观的效果了。

 

赞(0)
聲明:
1、本博客不從事任何主機及服務器租賃業務,不參與任何交易,也絕非中介。博客內容僅記錄博主個人感興趣的服務器測評結果及一些服務器相關的優惠活動,信息均摘自網絡或來自服務商主動提供;所以對本博客提及的內容不作直接、間接、法定、約定的保證,博客內容也不具備任何參考價值及引導作用,訪問者需自行甄別。

2、訪問本博客請務必遵守有關互聯網的相關法律、規定與規則;不能利用本博客所提及的內容從事任何違法、違規操作;否則造成的一切後果由訪問者自行承擔。

3、未成年人及不能獨立承擔法律責任的個人及群體請勿訪問本博客。

4、一旦您訪問本博客,即表示您已經知曉並接受了以上聲明通告。

文章名稱:《如何为WordPress DUX主题在文章列表中为24小时内新发布的文章添加NEW图标》
文章鏈接:https://www.zhuji999.com/2066.html