3

WordPress大前端DUX主题为首页24小时内更新的文章添加NEW图标

 2 years ago
source link: https://www.huhexian.com/16916.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

WordPress大前端DUX主题为首页24小时内更新的文章添加NEW图标

青山 2021-12-1413:47:29评论1048字

最近看不到不少朋友用wordpress建站用的大前端DUX主题，很多人获取主题后，都想着要去美化自己的网站，如果我想要在大前端DUX主题为首页24小时内更新的文章添加NEW图标，应该如何操作呢？下面带大家来看一下操作方法。

WordPress大前端DUX主题为首页24小时内更新的文章添加NEW图标

一、修改主题的excerpt.php

1、打开主题目录下的excerpt.php文件，Ctrl+F搜索下面代码。

  1. 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>';

2、然后在搜索到的上面代码后面加上下面这段代码，第一步修改excerpt.php文件这一步就完成了。

  1. date_default_timezone_set('PRC');
  2. $t1=$post->post_date;
  3. $t2=date("Y-m-d H:i:s");
  4. $diff=(strtotime($t2)-strtotime($t1))/3600;
  5. if($diff<24){echo '<span class="new-icon">New</span>';}
  6. else{echo "";}

二、修改主题的CSS文件 main.css

1、首先在主题CSS文件里找main.css文件，在最后面添加下面代码即可。然后清理下本地缓存或的CDN缓存就能看到和本博客首页显示的一样的效果了。

  1. /** 修正摘要列表定位方式 */
  2. .excerpt {
  3. position: relative;
  4. /** NEW 图标文字版样式 **/
  5. .excerpt .new-icon{
  6. position: absolute;
  7. right: -38px;
  8. top: -16px;
  9. display: block;
  10. width: 76px;
  11. height: 20px;
  12. line-height: 20px;
  13. background: #4caf50;
  14. color: #fff;
  15. font-size: 14px;
  16. font-weight: 400;
  17. text-align: center;
  18. transform: rotate(45deg);
  19. transform-origin: 0% 0%;

以上就是给大家带来的大前端DUX主题为首页24小时内更新的文章添加NEW图标的方法，有兴趣的朋友可以去操作了。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK