WordPress主题搜索页面的搜索结果导航标签

风中赏雪 Wordpress Wordpress 2025-09-27 206 0

核心代码实现


<h1 class="search-results-title">
    <?php
    printf(
        esc_html__( 'Search Results for: %s', 'your-theme-textdomain' ),
        '<span class="search-query">' . get_search_query() . '</span>'
    );
    ?>
</h1>

完整实现步骤:

1.打开主题的 search.php 文件

2.在循环开始前添加以下代码(通常在 之前)


<header class="page-header">
    <h1 class="page-title">
        <?php
        global $wp_query;
        $total_results = $wp_query->found_posts;
        $search_query = get_search_query();
        
        if ($total_results > 0) {
            printf(
                _n(
                    '%1$s result for "%2$s"',
                    '%1$s results for "%2$s"',
                    $total_results,
                    'your-theme-textdomain'
                ),
                number_format_i18n($total_results),
                '<span class="search-term">' . esc_html($search_query) . '</span>'
            );
        } else {
            printf(
                esc_html__('No results found for "%s"', 'your-theme-textdomain'),
                '<span class="search-term">' . esc_html($search_query) . '</span>'
            );
        }
        ?>
    </h1>
</header>

功能说明:

1.显示搜索关键词:使用 get_search_query() 获取搜索关键词

2.显示结果数量:通过 $wp_query->found_posts 获取总结果数

3.智能复数处理:使用 _n() 函数自动处理单复数形式

4.无结果提示:当没有搜索结果时显示友好提示

5.安全转义:使用 esc_html() 防止XSS攻击

添加返回搜索表单:


<div class="search-navigation">
    <?php get_search_form(); ?>
    <p class="search-back">
        <a href="<?php echo esc_url(home_url('/')); ?>">
            <?php esc_html_e('&larr; Back to Home', 'your-theme-textdomain'); ?>
        </a>
    </p>
</div>

注意事项:

1.替换 ‘your-theme-textdomain’ 为你的主题文本域(用于翻译)

2.确保在循环开始前调用这段代码

3.使用子主题进行修改,避免主题更新时丢失更改

4.考虑添加搜索表单让用户可修改搜索词

这个实现会显示如:
“5 results for ‘WordPress’”

“No results found for ‘nonexistent term’”

并包含返回首页的链接和新的搜索表单,提供完整的搜索体验。