iis服务器助手广告广告
返回顶部
首页 > 资讯 > CMS >wordpress博客搜索关键词高亮显示实现代码
  • 940
分享到

wordpress博客搜索关键词高亮显示实现代码

搜索关键词高亮显示 2022-06-12 02:06:30 940人浏览 安东尼
摘要

最近对Wordpress的一些小改进很感兴趣,可以让你的博客更加个性,也更有趣味性,下面的代码可以在结果中高亮你所搜索的关键词。首先把第一段代码放在functions.PHP中: 复制代码代码如下: function h

最近对Wordpress的一些小改进很感兴趣,可以让你的博客更加个性,也更有趣味性,下面的代码可以在结果中高亮你所搜索的关键词。首先把第一段代码放在functions.PHP中:


复制代码代码如下:

function hls_set_query() {

$query = attribute_escape(get_search_query());

if(strlen($query) > 0){

echo '

<script type="text/javascript">

var hls_query = "'.$query.'";

</script>

';

}

}

function hls_init_Jquery() {

wp_enqueue_script('jquery');

}

add_action('init', 'hls_init_jquery');

add_action('wp_print_scripts', 'hls_set_query');  然后把下面的代码放在header.php中,就OK了。

<style type="text/CSS" media="screen">

.hls { background: #D3E18A; }

</style>

<script type="text/javascript">

jQuery.fn.extend({

highlight: function(search, insensitive, hls_class){

var regex = new RegExp("(<[^>]*>)|(b"+ search.replace(/([-.*+?^${}()|[]/])/g,"$1") +")", insensitive ? "ig" : "g");

return this.html(this.html().replace(regex, function(a, b, c){

return (a.charAt(0) == "<") ? a : "<strong class=""+ hls_class +"">" + c + "</strong>";

}));

}

});

jQuery(document).ready(function($){

if(typeof(hls_query) != 'undefined'){

$("#post-area").highlight(hls_query, 1, "hls");

}

});

</script>

--结束END--

本文标题: wordpress博客搜索关键词高亮显示实现代码

本文链接: https://www.lsjlt.com/news/32089.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • wordpress博客搜索关键词高亮显示实现代码
    最近对wordpress的一些小改进很感兴趣,可以让你的博客更加个性,也更有趣味性,下面的代码可以在结果中高亮你所搜索的关键词。首先把第一段代码放在functions.php中: 复制代码代码如下: function h...
    99+
    2022-06-12
    搜索 关键词 高亮显示
  • 微信小程序实现搜索关键词高亮的示例代码
    1,前言 项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干。先上效果图。源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链接。 2,思路 ...
    99+
    2022-11-12
  • vue实现搜索关键词高亮的详细教程
    目录正文解析正则api——execreg.exec执行接下来看看执行具体的执行结果提取关键字并分组完整vue代码正文 废话少说先上效果(左侧代码,右侧效果) ...
    99+
    2022-11-13
  • 微信小程序搜索关键词高亮怎么实现
    本篇内容介绍了“微信小程序搜索关键词高亮怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!项目中碰到一个需求,微信小程序搜索数据并且关键...
    99+
    2023-06-27
  • JavaScript如何实现关键字文本搜索高亮显示功能
    这篇文章将为大家详细讲解有关JavaScript如何实现关键字文本搜索高亮显示功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:<!DOCTYPE&nbs...
    99+
    2022-10-19
  • Vue3怎么实现文章内容中多个关键词标记高亮显示
    本篇内容主要讲解“Vue3怎么实现文章内容中多个关键词标记高亮显示”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue3怎么实现文章内容中多个关键词标记高亮显示”吧!具体实现过程vue-word...
    99+
    2023-07-04
  • es+flask搜索小项目实现分页+高亮的示例代码
    环境 前端:html,css,js,jQuery,bootstrap后端:flask搜索引擎:elasticsearch数据源:某某之家 项目展示 项目目录 主要源码 获取数据...
    99+
    2022-11-12
  • 如何使用Vue3实现文章内容中多个"关键词"标记高亮显示
    目录写在开头具体实现过程基本使用props事件原理过程总结写在开头 话说在某一天,小编正沉迷于掘金沸点中摸鱼,正起劲呢,产品小姐姐突然就跑过来,说时迟那时快,我一个闪电五连鞭,立马把...
    99+
    2022-11-16
    vue3关键词标记高亮显示 vue搜索关键字高亮 关键词标记
  • es+flask搜索小项目实现分页和高亮的示例代码怎么写
    这篇文章的内容主要围绕es+flask搜索小项目实现分页和高亮的示例代码怎么写进行讲述,文章内容清晰易懂,条理清晰,非常适合新手学习,值得大家去阅读。感兴趣的朋友可以跟随小编一起阅读吧。希望大家通过这篇文章有所收获!环境前端:html,cs...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作