WordPress通過Cookie記錄用戶的搜索歷史

最近項(xiàng)目需要記錄每個(gè)用戶在WordPress網(wǎng)站上的搜索歷史，考慮到需求比較簡單，倡萌決定采用Cookies來實(shí)現(xiàn)。在這里簡單分享下方法，有些細(xì)節(jié)就需要自己去修改和完善了。

如上圖加框部分所示，我們要記錄并輸出用戶的搜索記錄，還要添加一個(gè)清空搜索歷史的功能。

將用戶搜索記錄寫入Cookie

/**
 * 通過Cookie記錄用戶搜索記錄
 */
function wpkj_set_recently_searches(){

    //僅在前端搜索頁面執(zhí)行
    if ( is_search() && !is_admin() ) {

        $search_term = get_search_query();

        if( $search_term ) $search_term = trim( $search_term );
        //如果搜索字段不存在或?yàn)榭眨焕^續(xù)
        if( !$search_term || $search_term === '') return;

        //檢查并設(shè)置搜索歷史數(shù)組
        $recently_searches = array();
        if(isset($_COOKIE['wpkj_recently_searches'])) {
            $recently_searches = explode(',', $_COOKIE['wpkj_recently_searches'], 20);
        }
        if(!in_array( $search_term, $recently_searches)){
            $recently_searches[] = $search_term;
        }
        //設(shè)置cookie為30天
        setcookie('wpkj_recently_searches', implode(',', $recently_searches), current_time('timestamp') + (86400*30), "/");
    }
}
add_action( 'wp', 'wpkj_set_recently_searches', 20 );

在上面的代碼中，我們封裝了一個(gè) wpkj_set_recently_searches 函數(shù)，然后將該函數(shù)掛載到 wp 鉤子中執(zhí)行。

獲取并輸出用戶的搜索記錄

/**
 * 獲取用戶最近搜索記錄
 */
function wpkj_get_recently_searches( $limit = 10, $title = false ){

    $recently_searches = array();
    if(isset($_COOKIE['wpkj_recently_searches'])) {
        $recently_searches = explode(',', $_COOKIE['wpkj_recently_searches']);
        //將搜索記錄倒序
        $recently_searches = array_reverse($recently_searches);
        if( !empty($recently_searches) ) {
            $html = '<div class="recently-searches">';
            if( $title ) $html .= '<h2 class="searches-title recently-searches-title">'. htmlspecialchars($title) .'</h2>';
            $html .= '<ul class="recently-searches-ul">';
            $home_url_slash = get_option('home') . '/';
            $i = 1;
            foreach( $recently_searches as $result ) {

                $html .= '<li class="search-item"><a href="'. $home_url_slash . '?s=' . $result . '">'. htmlspecialchars($result) .'</a></li>';
                $i++;
            }
            $html .= '</ul>';

            $html .= '<div class="recently-searches-del">'.__( 'Clear search history', THEME_SLUG ).'</div>';

            $html .= '</div>';

            return $html;
        }
    }
}

wpkj_get_recently_searches 函數(shù)有兩個(gè)參數(shù)，第一個(gè)為調(diào)用的個(gè)數(shù)，第二個(gè)為標(biāo)題。然后我們可以在需要輸出搜索記錄的地方，使用下面的代碼即可：

if(function_exists('wpkj_get_recently_searches')) {
    echo wpkj_get_recently_searches( 10, '搜索歷史');
}

清空當(dāng)前用戶搜索歷史

這里通過js方式實(shí)現(xiàn)：

//獲取cookie
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return "";
}

//添加一個(gè)js函數(shù)用于刪除cookie
function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}

//很抱歉，這里采用的是jquery操作
jQuery(document).ready(function($) {
    $(".recently-searches-del").on("click", function() {
        //刪除cookie
        delCookie("wpkj_recently_searches");
        //隱去搜索歷史部分的內(nèi)容
        $(".recently-searches").fadeOut();
    });
});

你可以將上面的js代碼添加到一個(gè)js文件中，比如命名為 recently-searches.js，然后可以通過下面的代碼引入：

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

請注意下js文件的路徑，上面的代碼表示我將 recently-searches.js 放在了當(dāng)前主題的 /assets/js 目錄下，你需要根據(jù)自己的實(shí)際修改這個(gè)路徑。

到這里就OK了。代碼還是有可以優(yōu)化的空間，就靠大家自己折騰了。

最后，如果你想實(shí)現(xiàn)上圖的“熱搜”部分的功能，可以看文章《WordPress搜索統(tǒng)計(jì)分析插件 Search Analytics（已漢化）》