SEO观察
研究搜索引擎优化(SEO)技术。

如何给大前端DUX主题的新文章添加NEW图标?

WordPress圈子里很少有人不知大前端DUX主题的,这些年来大前端DUX主题自上架以来,一直致力于迭代更新符合搜索引擎友好的设计,昨天茹莱神兽搜索与之相关的资讯,发现有人给大前端DUX主题新发布的文章添加了NEW图标,觉得非常有意思,于是也想给自己网站添加NEW图标。

WordPress文章绿色NEW图标

茹莱神兽通过搜索发现,给大前端DUX主题新发布的文章添加NEW图标这个技巧,早在DUX 5.0版本的时候就有站长在做了,我看这篇文章的发布时间是2018年9月底。

这个站长的思路是先制作或从网上搜索一个new.gif图标,接着上传至主题目录/img文件夹下,然后对WordPress大前端DUX主题的excerpt.php文件和single.php文件分别做了修改。

众所周知,像大前端DUX主题这种收费的WordPress模板,而且费用不低,以浩子为主的themebetter团队对DUX主题版权进行了严格的保护,用过DUX主题的人应该了解,常规的WordPress代码很难对DUX主题模板进行成功修改。

所以WordPress站长要想给大前端DUX主题添加新的功能,需要在特定的WordPress代码基础上进行配置,需要熟悉并且有过PHP开发经验的人操作才行。

那么,如何给WordPress大前端DUX主题24小时内新发布的文章添加NEW图标呢?

与DUX主题5.0版本介绍的思路有所不同,后面WordPress站长的方法不用自己制作或找新的new.gif图标,而是通过代码实现的。方法很简单,只需修改DUX主题的“excerpt.php、main.css”两个文件即可实现。

1、修改excerpt.php

打开主题的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>';

找到之后,然后在上面代码后面加上下面这段代码,修改excerpt.php文件这一步就完成了。

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 '<span class="new-icon">New</span>';}
else{echo "";}

2、修改main.css

在DUX主题文件里找main.css文件,在最后面添加下面代码即可。然后清理下本地缓存或的CDN缓存就能看到和新的文章发布后的NEW图标效果了。

DUX主题新发布的文章添加NEW效果图

添加代码如下:

/** 修正摘要列表定位方式 */
.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%;
}

总共修改两步完成,喜欢大前端DUX主题的朋友们,如果喜欢NEW图标的话,可以按照上面提供的方法对其进行修改,完成之后更新一下浏览器缓存就可以看见NEW图标效果了。

新的美化WordPress大前端DUX主题的技巧,为新发布的文章添加NEW图标方法是茹莱神兽在知乎上看到的,作者是一位叫“小葛博客”的创作者提供的,感谢分享。

赞(0) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《如何给大前端DUX主题的新文章添加NEW图标?》
文章链接:https://www.badpon.com/4515.html
免责申明:本站部分内容、图片来源于网络,如有侵权,请联系邮箱,本站将及时删除。

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

微信扫一扫打赏