[分享]WordPress文章列表右上角添加文章置顶+新文章发布+更新文章ICON图标

为了在WordPress的文章列表中为每篇文章添加特定的图标，如置顶、新文章发布和更新文章的图标，你可以通过编辑主题的模板文件并添加自定义CSS来实现。以下是一个详细的步骤说明，帮助你在WordPre...

为了在WordPress的文章列表中为每篇文章添加特定的图标，如置顶、新文章发布和更新文章的图标，你可以通过编辑主题的模板文件并添加自定义CSS来实现。

以下是一个详细的步骤说明，帮助你在WordPress主题中实现这一功能。

步骤 1: 修改主题模板文件

首先，你需要找到显示文章列表的模板文件。这通常是index.php、archive.php或category.php。

你需要在显示文章标题的部分添加条件代码来检测文章状态（如是否置顶、是否是新发布的文章等）。

打开你的主题文件夹，找到相应的模板文件，并找到循环部分（通常是一个while循环）。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="post">
        <h2 class="post-title">
            <?php if (is_sticky()) : ?>
                <span class="top-icon">置顶</span>
            <?php endif; ?>

            <?php if (get_the_time('U') > strtotime('-7 days')) : ?>
                <span class="new-icon">新</span>
            <?php endif; ?>

            <?php if (get_the_modified_time('U') > get_the_time('U')) : ?>
                <span class="updated-icon">更新</span>
            <?php endif; ?>

            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h2>
        <!-- 其他内容 -->
    </div>
<?php endwhile; endif; ?>

步骤 2: 添加CSS样式

接下来，你需要在主题的CSS文件中（通常是style.css）添加相应的样式来显示这些图标。

.post-title .top-icon,
.post-title .new-icon,
.post-title .updated-icon {
    display: inline-block;
    margin-right: 5px;
    padding: 2px 5px;
    color: #fff;
    font-size: 12px;
}

.post-title .top-icon {
    background-color: #f00;
}

.post-title .new-icon {
    background-color: #0f0;
}

.post-title .updated-icon {
    background-color: #00f;
}

步骤 3: 添加图标（可选）

如果你想使用图标而不是文本，可以使用图标字体库，如Font Awesome。首先，确保你的主题已经加载了Font Awesome或其他图标库。

然后，你可以在CSS中使用伪元素添加图标：

.post-title .top-icon::before {
    content: '\f0c1'; /* FontAwesome图标代码 */
    font-family: FontAwesome;
}

.post-title .new-icon::before {
    content: '\f0c1'; /* 替换为适当的图标代码 */
    font-family: FontAwesome;
}

.post-title .updated-icon::before {
    content: '\f0c1'; /* 替换为适当的图标代码 */
    font-family: FontAwesome;
}

步骤 4: 测试

保存所有更改并刷新你的WordPress网站以查看效果。确保所有功能正常，图标显示正确。

通过这些步骤，你可以成功地在WordPress文章列表中为文章添加置顶、新发布和更新的图标，从而提供更丰富的信息给读者。