当前位置: 首页>>技术解读>>正文


如何突出显示没有插件的搜索字词

webfans 技术解读 , 去评论

问题描述

如何在没有插件的情况下突出显示搜索条件?

最佳解决思路

将这2个函数添加到你的functions.php中

function search_excerpt_highlight() {
    $excerpt = get_the_excerpt();
    $keys = implode('|', explode(' ', get_search_query()));
    $excerpt = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $excerpt);

    echo '<p>' . $excerpt . '</p>';
}

function search_title_highlight() {
    $title = get_the_title();
    $keys = implode('|', explode(' ', get_search_query()));
    $title = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $title);

    echo $title;
}

编辑:

要将the_content用于搜索结果,请使用以下功能:

function search_content_highlight() {
        $content = get_the_content();
        $keys = implode('|', explode(' ', get_search_query()));
        $content = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $content);

        echo '<p>' . $content . '</p>';
    }

在您的循环或search.php文件中调用<?php search_title_highlight(); ?>而不是<?php the_title(); ?>,并使用<?php search_excerpt_highlight(); ?>而不是<?php the_excerpt(); ?>

在你的CSS中添加search-highlight类,它将以黄色突出显示所有搜索到的单词。

.search-highlight {
    background:#FFFF00  
    }

次佳解决思路

上面的工作很好,我运行了类似的代码,但将标题和摘录结合在一起。但是,如果有人在搜索查询字词的开头或结尾处输入空格” “,就会发现它断开。

所以我添加这一行:

$keys = array_filter($keys);
// Add Bold to searched term
function highlight_results($text){
     if(is_search() && !is_admin()){
     $sr = get_query_var('s');
     $keys = explode(" ",$sr);
     $keys = array_filter($keys);
     $text = preg_replace('/('.implode('|', $keys) .')/iu', ''.$sr.'', $text);
     }
     return $text;
}
add_filter('the_excerpt', 'highlight_results');
add_filter('the_title', 'highlight_results');

希望这证明可以帮助别人。

第三种解决思路

如果搜索词出现在HTML标签内,上述解决方案会中断页面​​。你应该使用像这样的东西:

      $regEx = '\'(?!((<.*?)|(<a.*?)))(\b'. implode('|', $keys) . '\b)(?!(([^<>]*?)>)|([^>]*?</a>))\'iu';
      $text = preg_replace($regEx, '<strong class="search-highlight">\0</strong>', $text);

参考资料

本文由朵颐IT整理自网络, 文章地址: https://duoyit.com/article/2000.html,转载请务必附带本地址声明。