l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/在 WordPress 中显示搜索词和结果数量

在 WordPress 中显示搜索词和结果数量

Bug编译狮

Bug编译狮

在WordPress中，我们可以通过插件或自定义函数来展示搜索关键词以及搜索结果的数量。这里我将介绍如何通过使用WP_Query对象来实现这个功能。

步骤1：安装和启用搜索统计插件

首先，在WordPress后台的“插件”菜单下找到并安装“Search Stats”。这将为我们提供一个方便的方式来查看搜索关键词和搜索结果的数量。

步骤2：创建自定义功能（PHP代码）

接下来，我们需要编写一些PHP代码来动态地更新我们的文章页面，以显示搜索词和搜索结果的数量。

// 获取当前页面的ID
$page_id = get_the_ID();

// 创建一个用于搜索的文章查询对象
$search_query = new WP_Query( array(
    'post_type' => 'post', // 搜索类型
    's'         => '',      // 搜索关键词
    'posts_per_page' => 0,  // 不限制搜索结果数量
) );

// 初始化变量来存储搜索词和搜索结果数量
$keyword_searched = '';
$results_count     = '';

if ( $search_query->have_posts() ) :
    while ( $search_query->have_posts() ) : $search_query->the_post();
        $keyword_searched .= get_the_title() . ', ';
        if ( ! $results_count ) {
            $results_count = wp_count_terms('post_tag');
        }
    endwhile;
else:
    echo "No posts found.";
endif;

wp_reset_postdata(); // 清理全局变量

$results_count = number_format_i18n($results_count);

?>

步骤3：添加到模板文件

将上述代码保存为一个名为 custom-search.php 的文件，并将其放在您的主题的 functions.php 文件中。

然后，在您的文章页面模板文件中添加以下代码：

<?php get_header(); ?>

<div class="container">
    <div class="row">
        <?php if ( have_posts() ) : ?>
            <h1><?php single_post_title(); ?></h1>
            <p>Showing results for: <?php echo $keyword_searched; ?></p>
            <p>Total results: <?php echo $results_count; ?></p>
        <?php endif; ?>
    </div>
</div>

<?php get_footer(); ?>

效果说明

当用户在WordPress网站上输入搜索关键词时，他们可以在搜索结果页看到与他们的搜索词相关的标题和搜索结果的数量。此外，如果用户点击某个搜索结果链接，他们还可以看到该结果的具体详情。

这个解决方案利用了WP_Query对象来执行搜索查询，并通过动态生成的内容块来呈现搜索词和搜索结果的数量。这种方式不仅提供了实时的信息反馈，还增强了用户体验。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

要在 WordPress 中显示搜索词和结果的数量，你需要使用 search_posts 和 wp_list_pages 函数。下面我将详细介绍如何实现这一功能。

1. 创建搜索页

首先，在主题文件夹下创建一个名为 search.php 的新文件，然后添加以下代码：

<?php
get_header(); // 如果没有设置默认页面，则使用此函数获取头部信息
?>

<div class="container">
    <h2><?php esc_html_e('Search Results', 'your-plugin'); ?></h2>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div class="post">
            <a href="<?php the_permalink(); ?>" title="<?php esc_attr_e( 'Read more about this post.', 'your-plugin' ); ?>">
                <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="" />
            </a>
            <div class="post-info">
                <span class="date"><?php the_time( __( 'F j, Y' ), 'your-plugin' ); ?></span>
                <span class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
            </div>
        </div>
    <?php endwhile; endif; wp_reset_query(); ?>
</div>

<?php get_footer(); // 如果没有设置默认页面，则使用此函数获取底部信息 ?>

在这个例子中，我们使用了 the_title() 函数来显示文章标题，以及 the_time() 函数来显示文章发布日期。

2. 显示搜索词和结果数量

接下来，我们需要通过 JavaScript 来计算搜索词的数量和结果数量。你可以创建一个名为 search.js 的 JavaScript 文件，并添加以下代码：

function searchCount() {
    var searchTerm = document.getElementById('search-term').value;
    var resultsCount = document.getElementById('results-count');

    // 获取当前查询参数
    var params = new URLSearchParams(window.location.search);
    var query = params.get('q');

    // 计算结果数量
    if (query) {
        var postsPerPage = parseInt(params.get('posts_per_page'), 10);
        var page = parseInt(params.get('page'), 10);

        var totalPosts = Math.ceil(query.length / postsPerPage);
        var totalPages = Math.ceil(totalPosts / postsPerPage);

        resultsCount.innerHTML = '<strong>' + totalPosts + '</strong>';
        resultsCount.style.color = '#666';
        resultsCount.style.textAlign = 'center';

        if (totalPages > 1 && page <= totalPages) {
            resultsCount.style.display = 'block';
        } else {
            resultsCount.style.display = 'none';
        }
    } else {
        resultsCount.innerHTML = '<strong>No search term provided.</strong>';
        resultsCount.style.display = 'none';
    }

    // 更新搜索词数量
    var countElement = document.getElementById('search-term-count');
    countElement.textContent = searchTerm.length;

    // 清空搜索词输入框
    document.getElementById('search-term').value = '';
}

// 添加搜索关键词事件处理器
document.addEventListener('DOMContentLoaded', function() {
    searchCount();
});

// 搜索框提交事件处理程序
document.getElementById('search-form').addEventListener('submit', function(event) {
    event.preventDefault();

    searchCount();
});

这个脚本监听了搜索表单的提交事件，当用户输入搜索词时，它会自动更新搜索词的数量和结果数量。如果搜索词为空或未提供，结果数量也会被清零。

3. 使用 jQuery

如果你希望进一步简化操作并支持其他浏览器，可以考虑使用 jQuery 来简化代码。以下是使用 jQuery 的版本：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

然后在 <head> 部分引入jQuery库：

<head>
    ...
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    ...
</head>

最后，在 search.php 文件中的 <body> 标签内添加以下代码：

<script>
$(document).ready(function(){
    $("#search-term").on("keyup", function(){
        searchCount();
    });
});
</script>

这样，当用户键入搜索词时，JavaScript 会自动计算并更新结果数量。

通过以上方法，你应该可以在 WordPress 主题中轻松地展示搜索词和结果的数量。

最新更新