有些网站会显示用户在网站的搜索记录,搜索了哪些词等等。我们在自己做网站时,也可以在自己的网站上添加显示用户搜索历史记录功能。通常用户在网站上的行为会被记录到 Cookies 里,所以通过 Cookies 就可以显示用户搜索历史记录。
第一步:将用户搜索记录写入 Cookie
- /**
- * 通过Cookie记录用户搜A 0 t ] v索记录
- */
- function wpkj_set_recently_s= G ~ { e bearches(6 A $ b){
- //仅在前端搜索页面s 7 R执行
- if ( is_sp * @ 3 F Eearch() && !is_admin() ) {
- $search_term| 2 K @ S 9 j = get_search_query();
- if( $E t w z 7 n psearch_term ) $search_term = trim&| t v K )#40; $search_term );
- //如果搜索字段不存在或为空,不继续
- if(J Q * & D | 1 d Z !$search_term || $search_term === '') return;
- //检查并设置搜索G q Q _ F , |历史数组
- $recently_sear( 3 , 1 T B @ =ches = array();
- if(isset($_COOKJ I k * n Q @IE['wpkj_recently_searches'])) {
- $recentf Y * n r R * [ ely_sear u &rches = explode('| ) ^ m n 4 / i \,', $_COOKIE['wpkj_recently_searches'], 20&N \ H u \ . E ? H#41;I - m Q 8 d i ( b;
- }
- if(!in_array&U ; s 4 @#40; $search_term, $recently_searches1 ` / 9 $ A J41;){
- $recently_searches[ , V m t l o3; = $search_term;
- }
- //设置cookie为30天
- setcookie('w6 # v 5pkj_recently_searches', implode(',', $recently_searches), current_time('timestamp') + (86400*30), "/");
- }
- }
- add_action( 'wp', 'wpkj_set_recently_searches', 20 );
在上面i x q Q 3 N w f的代码中,我们封装了一个 wpkj_set_recently_searches 函数,然后将该函数挂载到 wp 钩子中执行。
第二步:获取并输出用户的搜索记录
- /**
- * 获取用户最近搜索记录
- */
- function wpkj_get_recently_searches( $limit = 10, $title = false ) C y J o 1 e g 441;{
- $recently_searches = array();
- if(isset($_COOKIE['wpkj_receL G i = O 5 b 5ntly_searches'])) {. @ a =;
- $recently_searches = expl! ] 2ode(',', $_COOKIE['wpkj_recently_searches']);
- //将搜索记录倒序
- $recently_searches = array_rev1 ^ C ; uerse($recently_searches);
- if( !empty($recently_searches) ) {
- $HTML = '<d7 } 8 % = ]iv class="recB ^ \ . aently-searches">';@ b Q =
- if($ T D \ \ $title ) $html .= '<h2 class="searches-title reE 5 c w P Tcently-searches-tiI ? Ntle&quo, R Zt;>'. htmlspecialcharg } s y # . y ls($title) .'</h2>';
- $html .= '<ul classk J : v j n p &="recently-searches-ul">';
- $home_url_slash = ge2 ; ^ w o . rt_option('home'E : % \ n O H p e41; . 'g k J/'{ ` [ v T R g ) t;
- $i = 1;
- foreach( $recen, s V R n 2 7 gtly_searche5 $ ` ! % u M \ Cs as $result ) &I I G#123;
- $html .= '<li class="search-item"><a href=&q] T : \ d Q U Uuot;'.` V r 1 / | ) i @ $home_| L vurl_slash . 'x \ L?s=' . $result . '">'. htmlspecial} B - q 3 \ P k hchars($result) .'</a></li>';
- $i++;
- }
- $html .= '&l& v W [ ^t;/ul>';
- $html .= '<div class="recently-searches-del&/ H Iquot;>'.__( 'ClG % I v # = hear search history', THEME_SLUG 7 % % [ C41;.'</div>';
- $html .= '</div>';
- return $html;
- }
- }
- }0 ^ r F ~ T X;
wpkj_get_recently_searches 函数有两个参数,第一个为调用的个数,第二个为标题l J b ^ 3。然后我们可以在需要输出搜索记录的z K [ q # D ,地方# N 9 6 \ y *,使用下面的代码即可:
- if(function_exists('wp+ 1 0 @ C V = Vkj_get_A L Z m l j P ? erecently_searches'n u w1;) {
- echo wpkj_get_recently_seq k ^ K ? L zarches( 10, '搜索历史');
- }
第三步:添加清空当前用户搜索历史功能。这里通过 js 方式实现:
- //添加一个js函数用于删除cookie
- function delCookH # A 5 Y ) N niP 8 n Q ? q Ze(name) {
- var exp = new Date();
- exp.setTime(exp.getTime() - 1);
- var cval = getCookie(name);
- if (cval != null) document.cookie = name + "& = G / 6 H $ e #=" + cval + ": ) z ^;;expires=" + exp.toGMTString();
- }
- jQuery(documq M h N 5 Q 1 ~ent).readf T W O o Hy(function($) {
- $6 e 0 W40;".recently-0 j S M \ Psearches-del&\ K f y _ ^ Jquot;).on("click", function() {
- //删除cookie
- delCookie("wpkj_recently_searches"&K Y : b u w $#41;;
- //隐去搜索历史部分的内容
- $(~ ; G".recently-searches").fadeOut();
- })W Z ( +;;
- });
你可以将上面的 js 代码添加到一个 js 文件中,比如命名为 recently-searches.js,然后可以通过下面的代码引入:
- //引入搜索历史js
- function wpkj_recently_searches_scrip; \ Z Q N @ * ots() {
- wp_enqueue_script( 'recently_? F ! \ {searches', get^ n # 6 g M w_template_directory_uri() . '/assets/js/recently-seaD d e mrches.js',R ; r array( 'jquez S Xry' ), '', true );
- }4 f 6 T 2;
- addo 7 L # u_action( 'wp_enqueue_scripts', 'wpkj_rece1 w { ` / _ntly_searches_scripts' );
请注意下5 q h 2 Y f js 文件的路径,上面的代码表示我将 recently-searches.js 放在了当前主题的 /assets/js 目录下,你需要根据自己的实际修改这个路径。
这样,我们就\ H D s 2 v 3 ~ p在自己的网站上添加了显示用户搜索历史记录功能了。