如何在WordPress中创建带筛选排序的自定义搜索表格页面

以下是无需插件的代码实现，你可以直接在主题中使用：

步骤1：创建页面模板 #

将下面的代码保存为 page-custom-search-table.php 文件，上传到当前激活的WordPress主题目录中：

<?php
/*
Template Name: 自定义搜索表格页面
*/
get_header();

// 初始化查询参数
$args = array(
    'post_type' => 'post', // 替换为你的自定义文章类型slug
    'posts_per_page' => -1,
    'orderby' => isset($_GET['sort']) ? sanitize_text_field($_GET['sort']) : 'date',
    'order' => isset($_GET['order']) ? sanitize_text_field($_GET['order']) : 'DESC',
);

// 处理关键词搜索
if (!empty($_GET['keyword'])) {
    $args['s'] = sanitize_text_field($_GET['keyword']);
}

// 处理分类筛选
if (!empty($_GET['category'])) {
    $args['category_name'] = sanitize_text_field($_GET['category']);
}

// 执行查询
$query = new WP_Query($args);
?>

<div class="custom-search-table-wrap">
    <!-- 筛选表单 -->
    <form method="get" class="filter-form">
        <input type="hidden" name="page_id" value="<?php echo get_the_ID(); ?>">
        <div class="filter-row">
            <div class="filter-item">
                <label>关键词</label>
                <input type="text" name="keyword" value="<?php echo isset($_GET['keyword']) ? esc_attr($_GET['keyword']) : ''; ?>">
            </div>
            <div class="filter-item">
                <label>分类</label>
                <select name="category">
                    <option value="">全部</option>
                    <?php
                    $categories = get_categories();
                    foreach ($categories as $cat) {
                        $selected = (isset($_GET['category']) && $_GET['category'] == $cat->slug) ? 'selected' : '';
                        echo '<option value="' . esc_attr($cat->slug) . '" ' . $selected . '>' . esc_html($cat->name) . '</option>';
                    }
                    ?>
                </select>
            </div>
            <div class="filter-item">
                <label>排序</label>
                <select name="sort">
                    <option value="date" <?php echo (isset($_GET['sort']) && $_GET['sort'] == 'date') ? 'selected' : ''; ?>>发布日期</option>
                    <option value="title" <?php echo (isset($_GET['sort']) && $_GET['sort'] == 'title') ? 'selected' : ''; ?>>标题</option>
                    <option value="comment_count" <?php echo (isset($_GET['sort']) && $_GET['sort'] == 'comment_count') ? 'selected' : ''; ?>>评论数</option>
                </select>
                <select name="order">
                    <option value="DESC" <?php echo (isset($_GET['order']) && $_GET['order'] == 'DESC') ? 'selected' : ''; ?>>降序</option>
                    <option value="ASC" <?php echo (isset($_GET['order']) && $_GET['order'] == 'ASC') ? 'selected' : ''; ?>>升序</option>
                </select>
            </div>
            <button type="submit" class="filter-btn">筛选</button>
        </div>
    </form>

    <!-- 结果表格 -->
    <table class="results-table">
        <thead>
            <tr>
                <th>标题</th>
                <th>分类</th>
                <th>发布日期</th>
                <th>评论数</th>
            </tr>
        </thead>
        <tbody>
            <?php if ($query->have_posts()) : ?>
                <?php while ($query->have_posts()) : $query->the_post(); ?>
                    <tr>
                        <td><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td>
                        <td><?php the_category(', '); ?></td>
                        <td><?php the_date(); ?></td>
                        <td><?php comments_number('0', '1', '%'); ?></td>
                    </tr>
                <?php endwhile; ?>
            <?php else : ?>
                <tr>
                    <td colspan="4">未找到匹配内容</td>
                </tr>
            <?php endif; wp_reset_postdata(); ?>
        </tbody>
    </table>
</div>

<!-- 基础样式 -->
<style>
.custom-search-table-wrap {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}
.filter-form .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: flex-end;
}
.filter-form .filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.filter-form label {
    font-weight: 600;
}
.filter-form input, .filter-form select {
    padding: 0.6rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    min-width: 150px;
}
.filter-btn {
    padding: 0.6rem 1.2rem;
    background-color: #2d7dd2;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.results-table {
    width: 100%;
    border-collapse: collapse;
}
.results-table th, .results-table td {
    border: 1px solid #e0e0e0;
    padding: 1rem;
    text-align: left;
}
.results-table th {
    background-color: #f8f9fa;
    font-weight: 600;
}
</style>

<?php get_footer(); ?>

步骤2：使用模板 #

1. 登录WordPress后台，创建新页面
2. 在页面属性的「模板」下拉菜单中选择「自定义搜索表格页面」
3. 发布页面，访问即可看到带筛选和排序功能的表格

自定义调整 #

• 如果需要支持自定义文章类型，修改代码中 'post_type' => 'post' 为你的自定义文章类型slug
• 可以添加更多筛选字段，比如标签筛选、自定义字段筛选，只需在$args中添加对应参数即可
• 表格列可以根据需求修改，比如添加缩略图、自定义字段内容等

内容的提问来源于stack exchange，提问作者Akhil S Panicker