如何为WordPress查询结果实现列标题点击升降序排序

完全可行，你可以通过URL参数传递排序规则，结合WP_Query的排序参数来实现这个功能。以下是修改后的完整代码：

<?php 
// 获取分页参数
$paged = get_query_var('paged') ? get_query_var('paged') : 1;

// 获取排序参数，默认按日期降序
$orderby = isset($_GET['orderby']) ? sanitize_text_field($_GET['orderby']) : 'date';
$order = isset($_GET['order']) ? sanitize_text_field($_GET['order']) : 'DESC';
// 切换排序方向
$new_order = ($order === 'DESC') ? 'ASC' : 'DESC';

// 定义查询参数
$args = array(
    'post_type' => 'post',
    'posts_per_page' => '10',
    'category_name' => 'nouveautes',
    'paged' => $paged,
    'orderby' => $orderby,
    'order' => $order,
    // 针对自定义字段的排序处理
    'meta_key' => ($orderby === 'total_des_prises') ? 'total_des_prises' : '',
    'meta_type' => ($orderby === 'total_des_prises') ? 'NUMERIC' : '',
);

// 构建排序链接的基础URL
$current_url = get_permalink();
?>

<div style="display: flex; font-weight: bold; margin-bottom: 10px;">
    <div style="flex: 1;"><a href="<?php echo esc_url(add_query_arg(array('orderby' => 'title', 'order' => ($orderby === 'title' ? $new_order : 'DESC')), $current_url)); ?>">Detail</a></div>
    <div style="flex: 1;"><a href="<?php echo esc_url(add_query_arg(array('orderby' => 'date', 'order' => ($orderby === 'date' ? $new_order : 'DESC')), $current_url)); ?>">Date</a></div>
    <div style="flex: 1;"><a href="<?php echo esc_url(add_query_arg(array('orderby' => 'total_des_prises', 'order' => ($orderby === 'total_des_prises' ? $new_order : 'DESC')), $current_url)); ?>">Nbre de prise</a></div>
    <div style="flex: 1;"><a href="<?php echo esc_url(add_query_arg(array('orderby' => 'author', 'order' => ($orderby === 'author' ? $new_order : 'DESC')), $current_url)); ?>">Membre</a></div>
</div>

<?php   
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {
        $the_query->the_post();  
        $total_des_prises = get_post_meta( get_the_ID(), 'total_des_prises', true );
?>
<div style='display: flex;border:3px solid #8ebf42; margin-bottom: 5px;'>
    <div style="flex: 1;"><a href="<?php echo get_permalink(); ?>">Détail</a></div>
    <div style="flex: 1;"><?php echo get_the_date(); ?></div>
    <div style="flex: 1;"><?php echo $total_des_prises; ?></div>
    <div style="flex: 1;"><?php echo get_the_author(); ?></div>
</div>
<?php
    }
    // 把排序参数传递给分页
    wp_pagenavi( array( 
        'query' => $the_query,
        'add_args' => array(
            'orderby' => $orderby,
            'order' => $order
        )
    ) );
} else {
    echo '<p>Aucun article trouvé.</p>';
}
wp_reset_postdata();
?>

关键修改说明： #

• 排序参数处理：从URL的orderby和order参数中获取排序规则，默认按日期降序排列，同时用sanitize_text_field做安全过滤。
• 列标题链接：将每个列标题改为可点击链接，点击时切换排序方向（升序/降序），并保留当前排序字段状态。
• 自定义字段排序：针对total_des_prises自定义字段，添加meta_key和meta_type参数，确保数字类型字段能正确排序。
• 分页兼容：在wp_pagenavi中加入add_args参数，把当前排序规则传递到分页链接，避免切换页码后丢失排序状态。
• 样式优化：给表头添加加粗和间距，列表项增加底部间距，提升可读性。

内容的提问来源于stack exchange，提问作者pierre