歡迎光臨
我們一直在努力

WordPress DUX主题如何修改置顶图标显示在文章列表右上角

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

WordPress DUX主题目前已经自带文章置顶功能,并且也会在置顶的文章后面添加上“置顶”红色的字体进行提示,但是主机玖玖觉得不太美观!如果是在文章的右上角显示会更加的漂亮且醒目!特别是如果参照“如何为WordPress DUX主题在文章列表中为24小时内新发布的文章添加NEW图标”此文章为新发布的文章添加了NEW提示,那么首页显示感觉有点不是特别统一!所以这里分享一个修改DUX主题文章置顶图标的办法,把置顶标志显示到文章列表的右上角!显示效果如下图:

在上面提到的为DUX主题24小时内新发布的文章添加NEW图标文章当中介绍过添加NEW图标只需修改“excerpt.php”、“main.css”两个文件,那么其实修改置顶图片在原理上是大同小异的,也只需修改同样的两个文件就能实现,具体操作流程如下:

一、修改excerpt.php

在“excerpt.php”文件当中搜索“echo ‘<span class=”sticky-icon”>置顶</span>’;”,找到后把这段文字替换为如下代码:

echo '<span class="zd">置顶</span>';

其中“置顶”两个词也可以根据自己需要修改,主机玖玖这里修改为“TOP”,主要是为了和新文章的“New”图标对应,都是英文字母显示!

 

二、修改main.css样式

这一步很简单了,只需在“main.css”文件当中添加下面代码即可!完成后清空下浏览器缓存或者CDN缓存就能看到跟主机玖玖一样的显示效果了。

/** 置顶图标文字版样式 **/
.excerpt .zd  {
    position: absolute;
    padding: 0;
    right: -38px;
    top: -16px;
    display: block;
    width: 76px;
    height: 20px;
    line-height: 20px;
    background: #ff5e52;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    transform: rotate(45deg);
    transform-origin: 0% 0%;
}

 

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

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

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

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

文章名稱:《WordPress DUX主题如何修改置顶图标显示在文章列表右上角》
文章鏈接:https://www.zhuji999.com/2073.html