发布价值信息
Wordpress、Software、VPN。。

纯代码为 WordPress 添加分类搜索选项

最早在哪儿看到这个东西的忘记了,最近在 banyuner 的博客看到了类似功能,当然他也分享了代码(代码来自露兜博客)。

暂时只做记录,这玩意儿对我其实没多大用处,不过难免以后会用到。

纯代码为 WordPress 添加分类搜索选项

正文:

相关代码:

<form action="<?php bloginfo('home'); ?>" method="get">
        <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
        <input type="hidden" name="cat" value="22" />
        <input type="submit" id="searchsubmit" value="Search" />
</form>

上面是单个分类,露兜博客同时也提供了下拉的方式的筛选:

<form action="<?php bloginfo('home'); ?>" method="get">
        <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
<div>
        <select name="cat" class="search-option">
            <option value="11" selected="selected">搜音乐</option>
            <option value="22">搜图片</option>
        </select>
<div>
        <input type="submit" id="searchsubmit" value="Search" />
</form>

PS:代码中的 value 后的数字是可以自己替换的,这个就是搜索分类的 ID,那么这个 ID 该如何获取呢?直接在后台爱点击分类,看到地址栏上面的分类链接你就可以知道了。

当然如果你懂一点 PHP,你可以根据你主题的设置代码来写一段代码,以后直接在主题设置添加就不用修改源文件了,我这里没有办法具体演示,毕竟每个主题使用的方式不尽相同,如果你不懂 PHP 你应该忽略我这段话。

用以上代码替换你主题的搜索代码,打个比方,何先生使用的是 DUX 主题,我们复制以上代码,打开 header.php 文件,最下面我们看到了这样的代码:

echo '<form method="get" class="site-search-form" action="'.esc_url( home_url( '/' ) ).'" ><input class="search-input" name="s" type="text" placeholder="输入关键字" value="'.htmlspecialchars($s).'"><button class="search-btn" type="submit"><i class="fa fa-search"></i></button></form>';

现在我们需要进行改造:

我们对比一下两上面两段代码

<form action="<?php bloginfo('home'); ?>" method="get">

<form method="get" class="site-search-form" action="'.esc_url( home_url( '/' ) ).'" >
 将
action="<?php bloginfo('home'); ?>"
 改为
action="'.esc_url( home_url( '/' ) ).'"

同理,我们再依次这样替换完整,放进主题搜索原来的位置。

下面是我改造后的代码:

<form method="get" class="site-search-form" action="'.esc_url( home_url( '/' ) ).'" >
        <input class="search-input" name="s" id="s" type="text" placeholder="输入关键字" value="'.htmlspecialchars($s).'">
        <div class="search-select">
        <select name="cat" class="search-option">
            <option value="">分类搜索</option> //这里的值不填写的话,用户选择这个,采用全局搜索。
            <option value="2" selected="selected">WordPress教程</option> //只搜索 WordPress 教程这个分类下的文章
            <option value="7">网络技术</option> //同上,更多分类需要自己填写,或写相关 PHP 代码
        </select>
        <div>
        <button class="search-btn" id="searchsubmit" value="Search" type="submit"><i class="fa fa-search"></i></button>
</form>

顺便来个 CSS :

.search-select {
    position: absolute;
    margin-left: -158px;
    border-color: #ddd;
    border-radius: 2px;
}
select.search-option {
    height: 50px;
    font-size: 16px;
    padding: 0 10px;
    border: 1px solid #ddd;
}

最终效果:
纯代码为 WordPress 添加分类搜索选项

有什么问题可以留言。

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

×
打赏作者
赞(1)           打赏本站
未经允许不得转载:何先生 » 纯代码为 WordPress 添加分类搜索选项
分享到: 更多 (0)

Comments 3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 沙发

    感谢分享

    星空游戏
    3
    1年前 (2017-03-29)回复 Google Chrome 21.0.1180.89| Windows 7 x64| 福建省厦门市 联通
  2. 板凳

    这个方法不错,值得学习,特别是那个下拉的,很给力

    懿古今
    3
    1年前 (2017-04-02)回复 Google Chrome 45.0.2454.101| Windows 7 x64| 广西南宁市 电信
  3. 地板

    站点分类不多的情况下,感觉没必要折腾这个,如果站点内容比较多,这个功能还是很贴心的

    懿古今
    2
    9个月前 (10-23)回复 Google Chrome 55.0.2883.87| Windows 7 x64| 广西南宁市 电信

何先生的博客 专注分享 更优质

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

一木禾赚钱网盘:

点击注册