文章置顶图标-wp原生文章后台置顶和前端显示文章置顶不一样解决方案-FUNION数字营销

大家好，我是FUNION数字营销实战派飞小优，今天又有同学问我关于“WordPress第三方主题原生置顶功能与前端显示不一致的问题”，该问题的核心原因在于主题模板未正确调用置顶判断函数或缺少对应的样式定义。关于该问题之前已经写过一篇文章《WP置顶图标实现》对此，给出以下是分步解决方案：

问题根源分析

1.原生置顶机制
WordPress通过is_sticky()函数判断文章是否置顶，但需在模板中主动调用。

2.主题模板差异
第三方主题可能未在文章列表/分类页模板中插入置顶判断逻辑，导致即使后台勾选置顶，前端也无法显示。

3.样式缺失
即使模板有置顶判断，若未定义.sticky类或自定义样式，图标无法可视化。

解决方案（分场景实现）

方案推荐：修改主题模板文件

适用场景：需在文章列表/分类页显示置顶图标。

步骤：

定位模板文件

打开主题目录（如wp-content/themes/你的主题），找到控制文章列表的模板（常见index.php、archive.php、content.php等）。

查找类似<h2 class="entry-title"><?php the_title(); ?></h2>的代码位置。

插入置顶判断代码

在标题前/后添加：

<?php if ( is_sticky() ) : ?>
  <span class="sticky-icon">置顶</span>
<?php endif; ?>

示例：

<h2 class="entry-title">
  <?php if ( is_sticky() ) echo '<i class="i-sticky">置顶</i>'; ?>
  <?php the_title(); ?>
</h2>

添加CSS样式

在主题的style.css中添加：

.i-sticky {
  display: inline-block;
  background: #ff5722;
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  margin-right: 5px;
}

高级需求：分类页/标签页置顶

若需在非首页的分类/标签页显示置顶文章，需修改functions.php：

add_filter('the_posts', 'custom_sticky_in_tax');
function custom_sticky_in_tax($posts) {
  if (!is_main_query() || is_admin()) return $posts;
  
  // 仅在分类/标签页生效
  if (is_category() || is_tag()) {
    $sticky = get_option('sticky_posts');
    $current_term = get_queried_object_id();
    
    // 筛选当前分类下的置顶文章
    $filtered_sticky = array();
    foreach ($sticky as $post_id) {
      if (has_term($current_term, 'category', $post_id)) {
        $filtered_sticky[] = $post_id;
      }
    }
    
    if (!empty($filtered_sticky)) {
      $sticky_posts = get_posts(array(
        'post__in' => $filtered_sticky,
        'numberposts' => -1
      ));
      $posts = array_merge($sticky_posts, $posts);
    }
  }
  return $posts;
}

效果：在分类页顶部显示该分类的置顶文章。