纯代码实现WordPress站内搜索页面url静态化

正文概述 云码哥   2020-07-9   2.98K

何为 WordPress 站内搜索伪静态?众所周知,WordPress 默认搜索地址为 /?s=keyword ,这是一个动态地址,和全站伪静态有点格格不入,而且还不利于静态缓存。所以我们很有必要把 WordPress 站内搜索变成伪静态。

纯代码实现WordPress站内搜索页面url静态化

实现的方法很简单,只需要将以下代码加入到当前主题下的 functions.php 文件当中即可:

//默认搜索伪静态
function wp_search_url_rewrite() {
    if ( is_search() && ! empty( $_GET['s'] ) ) {
        wp_redirect( home_url( "/search/" ) . urlencode( get_query_var( 's' ) ) . "/");
        exit();
    }
}
add_action( 'template_redirect', 'wp_search_url_rewrite' );

现在去前台搜索,就会发现结果会跳转到【/search/关键词】了。当然,如果动手能力强的话,我们为了让搜索直接进入这个页面,而不是要 301 跳转,我们可以稍微改造一下这个搜索框。

常规搜索框代码一般如下:

<div id="searchbar">
    <form method="get" id="searchform" action="/">
        <input type="text" name="s" id="s" placeholder="输入搜索内容" />
        <button type="submit" id="searchsubmit">搜索</button>
    </form>
</div>

输入内容,点击搜索后就必然会跳到 ?s=keyword 这个动态页面。所以,我们需要通过 js 代码来拦截这搜索动作,然后重新定义跳转地址,将代码如下修改即可:

 

<div id="searchbar"> <form method="get" id="searchform" action="/search/">
    <input name="s" id="s" placeholder="请输入搜索内容" onkeydown="if(event.keyCode==13){return Searcher('wp');}">
    <button type="submit" id="searchsubmit" onclick="return Search('wp');">搜索</button>
</form>
</div>
<script type="text/javascript">
function Search(){
    var value=$("# s ").val()||"";
    window.open("/search/"+value+"/");
    return false;
}
</script>

很简单的代码,原理就是给【搜索】动作绑定了一个 js 函数,而这个 js 函数的功能就是获取当前输入的关键词,并拼接成一个新的地址,最后跳转过去即可。

如此,就实现了 WordPress 默认站内搜索的伪静态化。很明显,这个方法适合任何 WordPress 主题。

 

 

 

本站大部分资源收集于网络以及网友投稿,本不保证资源的完整性以及安全性,请下载后自行测试。
本站资源仅供下载者学习技术,版权归资源原作者所有,请在下载后24小时之内自觉删除。
本站资源仅供下载者学习IT编程开发技术,请遵守国家法律法规,严禁用于非法用途。
若作商业用途,请购买正版,由于未及时购买正版发生的侵权行为,与本站无关。
如您是版权方,本站源码有侵犯到您的权益,请邮件联系331752841@qq.com 删除,我们将及时处理!

云创源码 » 纯代码实现WordPress站内搜索页面url静态化

发表评论