WordPress置顶文章：设置、调用与高级应用指南

文章快捷目录

一、什么是置顶文章？

置顶文章（Sticky Posts）是WordPress的特色功能，允许管理员将重要文章固定在文章列表的顶部位置，无论文章发布日期如何。这非常适合突出显示公告、重要通知或特色内容。

二、在后台设置置顶文章

1. 可视化设置方法

进入WordPress后台 → 文章 → 所有文章
找到目标文章，点击”快速编辑”
勾选”置顶这篇文章”复选框
点击”更新”

2. 批量设置置顶文章

在文章列表页面，可以批量选择多篇文章，然后：

选择”编辑”批量操作
点击”应用”
在批量编辑界面勾选”置顶”

三、置顶文章查询与调用

1. 基础查询方法

使用sticky_posts参数：

<?php
$sticky_posts = get_posts(array(
    'post__in'  => get_option('sticky_posts'),
    'ignore_sticky_posts' => 0
));
?>

完整的WP_Query示例：

<?php
$sticky_args = array(
    'post__in'            => get_option('sticky_posts'),
    'posts_per_page'      => 5,
    'ignore_sticky_posts' => 0
);

$sticky_query = new WP_Query($sticky_args);
if ($sticky_query->have_posts()) :
    while ($sticky_query->have_posts()) : $sticky_query->the_post();
        the_title('<h2>', '</h2>');
        the_excerpt();
    endwhile;
    wp_reset_postdata();
endif;
?>

2. 获取置顶文章ID数组

<?php
$sticky_ids = get_option('sticky_posts');
if (!empty($sticky_ids)) {
    echo '当前有 ' . count($sticky_ids) . ' 篇置顶文章';
    print_r($sticky_ids); // 显示所有置顶文章ID
}
?>

四、主循环中的置顶文章处理

1. 在首页显示置顶文章

默认情况下，WordPress主循环会自动显示置顶文章。但你可以通过参数控制：

<?php
$main_query_args = array(
    'ignore_sticky_posts' => 0, // 0=显示置顶（默认），1=忽略置顶
    'paged' => get_query_var('paged')
);
?>

2. 分离显示置顶和普通文章

<?php
// 第一部分：显示置顶文章
$sticky = get_option('sticky_posts');
if (!empty($sticky)) {
    $sticky_args = array(
        'post__in' => $sticky,
        'ignore_sticky_posts' => 1
    );
    $sticky_query = new WP_Query($sticky_args);
    
    if ($sticky_query->have_posts()) {
        echo '<section class="sticky-posts-section">';
        echo '<h2>置顶文章</h2>';
        while ($sticky_query->have_posts()) {
            $sticky_query->the_post();
            get_template_part('content', 'sticky');
        }
        echo '</section>';
    }
    wp_reset_postdata();
}

// 第二部分：显示普通文章（排除置顶）
$regular_args = array(
    'post__not_in' => $sticky,
    'paged' => get_query_var('paged')
);
$regular_query = new WP_Query($regular_args);

if ($regular_query->have_posts()) {
    echo '<section class="regular-posts-section">';
    while ($regular_query->have_posts()) {
        $regular_query->the_post();
        get_template_part('content');
    }
    echo '</section>';
    // 分页导航
    the_posts_pagination();
}
wp_reset_postdata();
?>

五、条件判断函数

1. 检查单篇文章是否置顶

<?php
if (is_sticky()) {
    echo '<span class="sticky-badge">置顶</span>';
}
?>

2. 检查指定文章是否置顶

<?php
if (is_sticky($post_id)) {
    echo '这篇文章是置顶文章';
}
?>

3. 检查是否有置顶文章

<?php
$sticky_posts = get_option('sticky_posts');
if (!empty($sticky_posts)) {
    echo '当前有置顶文章';
} else {
    echo '暂无置顶文章';
}
?>

六、通过代码设置置顶文章

1. 将文章设为置顶

<?php
$post_id = 123; // 文章ID
sticky_post($post_id); // 添加置顶
?>

2. 取消文章置顶

<?php
$post_id = 123; // 文章ID
unstick_post($post_id); // 移除置顶
?>

3. 切换置顶状态

<?php
$post_id = 123;
$sticky_posts = get_option('sticky_posts');

if (in_array($post_id, $sticky_posts)) {
    unstick_post($post_id);
    echo '已取消置顶';
} else {
    sticky_post($post_id);
    echo '已设为置顶';
}
?>

七、高级应用技巧

1. 按分类筛选置顶文章

<?php
$sticky_ids = get_option('sticky_posts');
if (!empty($sticky_ids)) {
    $args = array(
        'post__in'       => $sticky_ids,
        'category__in'   => array(1, 2, 3), // 指定分类
        'posts_per_page' => 3
    );
    $sticky_query = new WP_Query($args);
}
?>

2. 自定义文章类型的置顶处理

<?php
// 为自定义文章类型添加置顶支持
add_action('init', 'add_sticky_support_to_cpt');
function add_sticky_support_to_cpt() {
    add_post_type_support('portfolio', 'sticky-posts'); // portfolio为自定义文章类型
}
?>

3. 带缓存的置顶文章查询

<?php
function get_cached_sticky_posts() {
    $cache_key = 'cached_sticky_posts';
    $sticky_posts = get_transient($cache_key);
    
    if (false === $sticky_posts) {
        $sticky_ids = get_option('sticky_posts');
        if (!empty($sticky_ids)) {
            $args = array(
                'post__in' => $sticky_ids,
                'posts_per_page' => 5
            );
            $sticky_posts = get_posts($args);
            set_transient($cache_key, $sticky_posts, HOUR_IN_SECONDS);
        }
    }
    
    return $sticky_posts;
}
?>

4. 前端AJAX切换置顶状态

// JavaScript示例
jQuery(document).ready(function($) {
    $('.sticky-toggle').click(function(e) {
        e.preventDefault();
        var post_id = $(this).data('post-id');
        var nonce = $(this).data('nonce');
        
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'toggle_sticky',
                post_id: post_id,
                nonce: nonce
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                }
            }
        });
    });
});

<?php
// PHP处理AJAX请求
add_action('wp_ajax_toggle_sticky', 'toggle_sticky_callback');
function toggle_sticky_callback() {
    check_ajax_referer('sticky_nonce', 'nonce');
    
    $post_id = intval($_POST['post_id']);
    $sticky_posts = get_option('sticky_posts');
    
    if (in_array($post_id, $sticky_posts)) {
        unstick_post($post_id);
        wp_send_json_success('取消置顶成功');
    } else {
        sticky_post($post_id);
        wp_send_json_success('设为置顶成功');
    }
}
?>

八、主题模板中的样式处理

1. CSS样式示例

/* 置顶文章标识 */
.sticky-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #ff6b6b;
    color: white;
    font-size: 12px;
    border-radius: 3px;
    margin-left: 10px;
    vertical-align: middle;
}

/* 置顶文章特殊样式 */
.sticky-post {
    border-left: 4px solid #4ecdc4;
    padding-left: 15px;
    background: #f8f9fa;
}

/* 在网格布局中突出显示 */
.article-grid .sticky-post {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

2. 模板文件示例

<?php
// content-sticky.php
?>
<article id="post-<?php the_ID(); ?>" <?php post_class('sticky-post'); ?>>
    <?php if (has_post_thumbnail()) : ?>
        <div class="post-thumbnail">
            <?php the_post_thumbnail('large'); ?>
        </div>
    <?php endif; ?>
    
    <header class="entry-header">
        <?php the_title('<h2 class="entry-title"><a href="' . esc_url(get_permalink()) . '">', '</a></h2>'); ?>
        <span class="sticky-badge"><?php _e('置顶', 'textdomain'); ?></span>
    </header>
    
    <div class="entry-content">
        <?php the_excerpt(); ?>
    </div>
</article>

九、性能优化建议

使用缓存：频繁查询置顶文章时使用transient API
限制数量：避免过多置顶文章影响页面加载
懒加载：对置顶文章使用图片懒加载
分页处理：正确处理分页中的置顶文章显示

十、常见问题解答

Q1: 置顶文章不显示怎么办？

检查ignore_sticky_posts参数是否为1
确认文章状态为”已发布”
检查是否有其他查询覆盖了主查询

Q2: 如何控制置顶文章数量？

<?php
$sticky_ids = get_option('sticky_posts');
$limited_sticky_ids = array_slice($sticky_ids, 0, 3); // 只取前3个
?>

Q3: 如何在自定义文章类型中使用？

<?php
// 注册自定义文章类型时添加支持
register_post_type('portfolio', array(
    'supports' => array('title', 'editor', 'sticky-posts')
));
?>

总结

WordPress置顶文章功能虽然简单，但通过合理的配置和代码调用，可以发挥强大的内容突出作用。无论是简单的置顶显示，还是复杂的前端交互，合理运用置顶功能都能有效提升网站的用户体验和内容管理效率。建议根据实际需求选择合适的方法，并注意性能优化和用户体验的平衡。

这篇文章有用吗？

点击星号为它评分！

平均评分 0 / 5. 投票数： 0

到目前为止还没有投票！成为第一位评论此文章。

WordPress置顶文章：设置、调用与高级应用指南

一、什么是置顶文章？

二、在后台设置置顶文章

1. 可视化设置方法

2. 批量设置置顶文章

三、置顶文章查询与调用

1. 基础查询方法

2. 获取置顶文章ID数组

四、主循环中的置顶文章处理

1. 在首页显示置顶文章

2. 分离显示置顶和普通文章

五、条件判断函数

1. 检查单篇文章是否置顶

2. 检查指定文章是否置顶

3. 检查是否有置顶文章

六、通过代码设置置顶文章

1. 将文章设为置顶

2. 取消文章置顶

3. 切换置顶状态

七、高级应用技巧

1. 按分类筛选置顶文章

2. 自定义文章类型的置顶处理

3. 带缓存的置顶文章查询

4. 前端AJAX切换置顶状态

八、主题模板中的样式处理

1. CSS样式示例

2. 模板文件示例

九、性能优化建议

十、常见问题解答

Q1: 置顶文章不显示怎么办？

Q2: 如何控制置顶文章数量？

Q3: 如何在自定义文章类型中使用？

总结

在AI里面继续讨论：

曾凤祥

相关文章

wordpress短代码显示用户注册日期

wordpress输出LayUI的菜单结构

在 WordPress 站点中优化图片的策略

WordPress仿站除了做博客还能做这几种网站

如何让线上业务更上一层楼

还没有WordPress网站

已经有WordPress网站

关于小兽

服务与费用

WP主题

教程指南

搜索您关心的