php置顶文章在上面显示,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 ‘置顶’;”，找到后把这段文字替换为如下代码：

echo '置顶';

其中“置顶”两个词也可以根据自己需要修改，主机玖玖这里修改为“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%;

}