wordpress添加高级搜索的简单方法

我们都知道,wordpress的搜索功能并不强大,但是时至今日也没有看到wordpress在搜索上的改进,如提供分类搜索,标签搜索,自定义文章类型等这些有用的选项。因为每次搜索都要全部搜索一下,实在是没有必要。那么有没有办法实现这样的自定义的高级搜索呢?方法是有的。笔者在开发一个wordpress主题时曾用代码实现了这个功能。今天我要介绍一个更加简单的方法。那就是使用插件来实现。这款wordpress插件叫Facetious

一、Facetious插件介绍

Facetious允许我们直观的添加一个高级搜索功能,并且使用侧边栏来展示wordpress搜索框 ,其功能包括:

  • 分类 (标签, 分类目录和自定义文章分类)
  • 按月
  • 搜索输入盒

并且可以限制文章类型。

advanced search2

 

我们可以看到简单的选项,依次为小工具标题,搜索按钮文本,显示字段,文章类型设置等。

二、如何使用Facetious添加wordpress高级搜索功能

首先你需要下载Facetious,通过官方地址http://wordpress.org/plugins/facetious/或使用wordpress后台插件直接搜索安装。安装之后激活,把它放在侧边栏小工具区上即可显示wordpress高级搜索功能。这里需要说明一下:这个侧边栏小工具不一定就是在左边或右边,你完全可以把其自定义在任何一个位置。

那么如何把高级搜索功能放在wordpress主题模板呢呢?

Facetious提供了一个语法,如下:

do_action( ‘facetious’, $args );

‘$args’是数组变量:

  • submit -字节变量,提交按钮文本。
  • echo – 布尔 – 是否表单输出。
  • class – 字节 – 表单名类。
  • id – 字节 – 表单ID属性。
  • fields – 数组 – 显示字段列表。

下面是示例:

<pre><code>do_action( 'facetious', array(
    'submit' => '搜索',
    'fields' => array(
        's',
        'custom_tax_1' => array(
            'label' => '选择选项',
            'class' => 'my_tax_class',
            'id'    => 'my_tax_id',
            'all'   => 'All terms'
        )
        'custom_tax_2',
        'm'
    )
) );</code></pre>

三、Facetious前台外观展示

垂直展示:

advanced search

 

这是默认展示。

水平展示:

advanced search1

这个展示需要重新定义css,你可以把下面的代码放大你的主题样式里:

</p>

<div>#facetious_form {</div>
<div>background:#f4f4f4;</div>
<div>padding:10px;</div>
<div>border:1px solid #ccc;</div>
<div>margin-bottom:1em;</div>
<div>overflow:auto;</div>
<div>}</div>
<div></div>
<div>#facetious_form select {</div>
<div>width:auto;</div>
<div>}</div>
<div></div>
<div>#facetious_form select,</div>
<div>#facetious_form input {</div>
<div>font-size:1em;</div>
<div>}</div>
<div></div>
<div>#facetious_form p {</div>
<div>float:left;</div>
<div>margin:0 5px 0 0;</div>
<div>}</div>
<div></div>
<div>#facetious_form .facetious_submit {</div>
<div>float: right;</div>
<div>margin-top: 2em;</div>
<div>}</div>
<div></div>
<div>.facetious_submit_button {</div>
<div>background-color:#981e32;</div>
<div>background-repeat:repeat-x;</div>
<div>filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#c32640",endColorstr="#6e1524");</div>
<div>background-image:-khtml-gradient(linear,left top,left bottom,from(#c32640),to(#6e1524));</div>
<div>background-image:-moz-linear-gradient(top,#c32640,#6e1524);</div>
<div>background-image:-ms-linear-gradient(top,#c32640,#6e1524);</div>
<div>background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#c32640),color-stop(100%,#6e1524));</div>
<div>background-image:-webkit-linear-gradient(top,#c32640,#6e1524);</div>
<div>background-image:-o-linear-gradient(top,#c32640,#6e1524);</div>
<div>background-image:linear-gradient(#c32640,#6e1524);</div>
<div>border-color:#6e1524 #6e1524 #981e32;</div>
<div>color:#fff!important;</div>
<div>text-shadow:0 -1px 0 rgba(0,0,0,0.33);</div>
<div>-webkit-font-smoothing:antialiased;</div>
<div>padding:2px 5px;</div>
<div>}</div>
<div></div>
<div>.facetious_submit_button:hover {</div>
<div>background-position:0 0;</div>
<div>background-color:#701;</div>
<div>background-repeat:repeat-x;</div>
<div>filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ad001a",endColorstr="#47000a");</div>
<div>background-image:-khtml-gradient(linear,left top,left bottom,from(#ad001a),to(#47000a));</div>
<div>background-image:-moz-linear-gradient(top,#ad001a,#47000a);</div>
<div>background-image:-ms-linear-gradient(top,#ad001a,#47000a);</div>
<div>background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ad001a),color-stop(100%,#47000a));</div>
<div>background-image:-webkit-linear-gradient(top,#ad001a,#47000a);</div>
<div>background-image:-o-linear-gradient(top,#ad001a,#47000a);</div>
<div>background-image:linear-gradient(#ad001a,#47000a);</div>
<div>border-color:#47000a #47000a #701;</div>
<div>}</div>
<p style="text-align: left;">

微信扫一扫,关注微信公众号,获取最新资讯

留下回复

您的电邮不会被公布 必填字段标记为*