实现wordpress搜索结果页面搜索关键词高亮

在WordPress搜索结果页面上实现搜索关键词高亮

1.问题描述

在使用WordPress进行网站开发时,搜索功能是很常见的一个功能。然而默认情况下,搜索结果页面并没有将搜索关键词进行高亮显示,这给用户查找所需信息带来了一定的不便。因此,如何在WordPress搜索结果页面上实现搜索关键词高亮,就成为了我们需要解决的问题。

2.解决方案

实现搜索结果页面搜索关键词高亮的方法有多种,下面介绍一种较为简单且易于操作的方式:

1)在WordPress的主题文件夹下,找到搜索结果页面的PHP文件(通常为archive.php或search.php),使用代码编辑器打开该文件;

2)找到搜索结果循环相关的代码,如下图所示:


    <?php if ( have_posts() ) : ?>
        <header class="page-header">
            <h1 class="page-title">
                <?php
                    printf( __( 'Search Results for: %s', 'twentytwenty' ), '<span>' . get_search_query() . '</span>' );
                ?>
            </h1>
        </header>

        <?php
        /* Start the Loop */
        while ( have_posts() ) :
            the_post();
            // Include the Post-Type-specific template for the content.
            // If you want to override this in a child theme, then include a file
            // called content-___.php (where ___ is the Post Type name) and that will be used instead.
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;

        the_posts_pagination(
            array(
                'before_page_number' => __( 'Page', 'twentytwenty' ) . ' ',
                'mid_size'           => 2,
                'prev_text'          => __( 'Back', 'twentytwenty' ),
                'next_text'          => __( 'Next', 'twentytwenty' ),
            )
        );

    else :

        get_template_part( 'template-parts/content', 'none' );

    endif;
    ?>

3)将搜索结果循环相关的代码进行修改,添加高亮显示搜索关键词的代码,如下所示:


    <?php if ( have_posts() ) : ?>
        <header class="page-header">
            <h1 class="page-title">
                <?php
                    printf( __( 'Search Results for: %s', 'twentytwenty' ), '<span>' . get_search_query() . '</span>' );
                ?>
            </h1>
        </header>

        <?php
        /* Start the Loop */
        while ( have_posts() ) :
            the_post();
        ?>
            <article id="post-<?php the_ID(); ?>" class="post">
                <header class="entry-header">
                    <h2 class="entry-title"><a href="<?php%20the_permalink();%20?>"><?php the_title_attribute(); ?></a></h2>
                </header>
                <div class="entry-content">
                    <?php the_excerpt(); ?>
                </div>
            </article>
        <?php
            endwhile;

            the_posts_pagination(
                array(
                    'before_page_number' => __( 'Page', 'twentytwenty' ) . ' ',
                    'mid_size'           => 2,
                    'prev_text'          => __( 'Back', 'twentytwenty' ),
                    'next_text'          => __( 'Next', 'twentytwenty' ),
                )
            );

        else :

            get_template_part( 'template-parts/content', 'none' );

        endif;

        /* Add highlight for search terms */
        add_filter( 'the_excerpt', function( $excerpt ) {
            $keys = implode( '|', array_map( 'preg_quote', explode( ' ', get_search_query() ) ) );
            return preg_replace( "/($keys)/i", '<strong class="search-highlight">$0</strong>', $excerpt );
        });

        add_filter( 'the_title', function( $title ) {
            $keys = implode( '|', array_map( 'preg_quote', explode( ' ', get_search_query() ) ) );
            return preg_replace( "/($keys)/i", '<strong class="search-highlight">$0</strong>', $title );
        });
        ?>

4)使用CSS进行样式设置,代码如下:


    .search-highlight {
        color: red;
        font-weight: bold;
    }

至此,WordPress搜索结果页面搜索关键词高亮的实现就完成了。搜索结果页面中匹配搜索关键词的部分,会以红色粗体的形式进行高亮显示,提高了用户查找信息的便捷性。

晓白博客网版权所有,原文地址https://www.xbnb.cn/5051
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容