WordPress通过Cookie记录用户的搜索历史

2020年4月21日11:58:43 发表评论 71 views

最近需要记录每个用户在WordPress网站上的搜索历史,考虑到需求比较简单,决定采用Cookies来实现。在这里简单分享下方法,有些细节就需要自己去修改和完善了。

WordPress通过Cookie记录用户的搜索历史

如上图加框部分所示,我们要记录并输出用户的搜索记录,还要添加一个清空搜索历史的功能。

将用户搜索记录写入Cookie

  1. /**
  2.  * 通过Cookie记录用户搜索记录
  3.  */
  4. function wpkj_set_recently_searches(){
  5.     //仅在前端搜索页面执行
  6.     if ( is_search() && !is_admin() ) {
  7.         $search_term = get_search_query();
  8.         if$search_term ) $search_term = trim( $search_term );
  9.         //如果搜索字段不存在或为空,不继续
  10.         if( !$search_term || $search_term === ''return;
  11.         //检查并设置搜索历史数组
  12.         $recently_searches = array();
  13.         if(isset($_COOKIE['wpkj_recently_searches'])) {
  14.             $recently_searches = explode(',', $_COOKIE['wpkj_recently_searches'], 20);
  15.         }
  16.         if(!in_array( $search_term$recently_searches)){
  17.             $recently_searches[] = $search_term;
  18.         }
  19.         //设置cookie为30天
  20.         setcookie('wpkj_recently_searches', implode(',', $recently_searches), current_time('timestamp') + (86400*30), "/");
  21.     }
  22. }
  23. add_action( 'wp', 'wpkj_set_recently_searches', 20 );

在上面的代码中,我们封装了一个 wpkj_set_recently_searches 函数,然后将该函数挂载到 wp 钩子中执行。

获取并输出用户的搜索记录

  1. /**
  2.  * 获取用户最近搜索记录
  3.  */
  4. function wpkj_get_recently_searches( $limit = 10, $title = false ){
  5.     $recently_searches = array();
  6.     if(isset($_COOKIE['wpkj_recently_searches'])) {
  7.         $recently_searches = explode(',', $_COOKIE['wpkj_recently_searches']);
  8.         //将搜索记录倒序
  9.         $recently_searches = array_reverse($recently_searches);
  10.         if( !emptyempty($recently_searches) ) {
  11.             $html = '<div class="recently-searches">';
  12.             if$title ) $html .= '<h2 class="searches-title recently-searches-title">'. htmlspecialchars($title) .'</h2>';
  13.             $html .= '<ul class="recently-searches-ul">';
  14.             $home_url_slash = get_option('home') . '/';
  15.             $i = 1;
  16.             foreach$recently_searches as $result ) {
  17.                 $html .= '<li class="search-item"><a href="'. $home_url_slash . '?s=' . $result . '">'. htmlspecialchars($result) .'</a></li>';
  18.                 $i++;
  19.             }
  20.             $html .= '</ul>';
  21.             $html .= '<div class="recently-searches-del">'.__( 'Clear search history', THEME_SLUG ).'</div>';
  22.             $html .= '</div>';
  23.             return $html;
  24.         }
  25.     }
  26. }

wpkj_get_recently_searches 函数有两个参数,第一个为调用的个数,第二个为标题。然后我们可以在需要输出搜索记录的地方,使用下面的代码即可:

  1. if(function_exists('wpkj_get_recently_searches')) {
  2.     echo wpkj_get_recently_searches( 10, '搜索历史');
  3. }

清空当前用户搜索历史

这里通过js方式实现:

  1. //添加一个js函数用于删除cookie
  2. function delCookie(name) {
  3.     var exp = new Date();
  4.     exp.setTime(exp.getTime() - 1);
  5.     var cval = getCookie(name);
  6.     if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
  7. }
  8. //很抱歉,这里采用的是jquery操作
  9. jQuery(document).ready(function($) {
  10.     $(".recently-searches-del").on("click"function() {
  11.         //删除cookie
  12.         delCookie("wpkj_recently_searches");
  13.         //隐去搜索历史部分的内容
  14.         $(".recently-searches").fadeOut();
  15.     });
  16. });

你可以将上面的js代码添加到一个js文件中,比如命名为 recently-searches.js,然后可以通过下面的代码引入:

  1. //引入搜索历史js
  2. function wpkj_recently_searches_scripts() {
  3.     wp_enqueue_script( 'recently_searches', get_template_directory_uri() . '/assets/js/recently-searches.js', array( 'jquery' ), '', true );
  4. }
  5. add_action( 'wp_enqueue_scripts', 'wpkj_recently_searches_scripts' );

请注意下js文件的路径,上面的代码表示我将 recently-searches.js 放在了当前主题的 /assets/js 目录下,你需要根据自己的实际修改这个路径。

到这里就OK了。代码还是有可以优化的空间,就靠大家自己折腾了。

最后,如果你想实现上图的“热搜”部分的功能,可以看文章《WordPress搜索统计分析插件 Search Analytics(已汉化)

©里维斯社,本站推荐使用的主机:阿里云腾讯云;本站推荐使用的WP主题:WordPress主题

网络转载
晨会游戏

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: