今日複今日,今日何其少。
今日又不爲,此事何時了。

WordPress美化爲新文章標題添加『NEW』『置頂』圖標

關于WordPress爲新文章在文章標題上添加“NEW”圖標24小時後自動取消和“置頂”圖標的方法,基本都是大同小異。一般是在主題“index.php”文件的“<?php the_title(”); ?>”前面添加代碼。但並非所有主題都是如此,比如DUX大前端主題就需要修改“excerpt.php”、main.css兩個文件才能實現。

DUX大前端主題文件路徑:/wp-content/themes/DUX/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>';

然後在上面代碼後面加上下面這段代碼:

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大前端主題文件路徑:/wp-content/themes/DUX/css/main.css
在主題main.css文件最後面添加下面代碼:

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

/** 置顶图标文字版样式 **/
.sticky-icon {
    position: absolute;
    padding: 0;
    right: -45px;
    top: -20px;
    display: block;
    width: 120px;
    height: 24px;
    line-height: 24px;
    background: #ff5e52;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    transform: rotate(36deg);
    transform-origin: 0% 0%;
}
@media (max-width:640px){
    .excerpt-sticky header{text-indent:0px;position: unset;}
    .sticky-icon {
        position: absolute;
        padding: 0;
        right: -45px;
        left: auto;
        top: -20px;
        display: block;
        width: 120px;
        height: 24px;
        line-height: 24px;
        background: #ff5e52;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        transform: rotate(36deg);
        transform-origin: 0% 0%;
    }
}

然後清理下本地緩存,PC電腦上按”Win+R”鍵打開運行,輸入:cmd,點擊確定。然後在命令提示符C:\Users\Administrator>後面輸入“ipconfig /flushdns”,回車。已成功刷新DNS解析緩存。或者CDN緩存即可。

赞(0) 打賞
未經允許不得轉載:格林尼治 » WordPress美化爲新文章標題添加『NEW』『置頂』圖標

評論 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

覺得文章有用就打賞一下文章作者吧~

支付宝扫一扫打赏

微信扫一扫打赏