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

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%;
}