如何使用WordPress短代码添加搜索框文章中

经常会用用户询问,我想很方便的使用搜索框,也就是说能够快速添加短代码到文章中,有没有解决方案?回答是肯定的。只需要在functions.php文件中加入如下代码即可实现:

add_shortcode('wpbsearch', 'get_search_form');

这会显示默认搜索框,但是有人说样式不好看,ok,可以设置自定义的样式的,使用下面的代码,放到functions.php函数文件里:

<?php 
// 在文章内添加搜索功能 开始
function wpbsearchform( $form ) {

$form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
 <div>
 <input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="请输入你要搜索的关键词"/>
 <input type="submit" id="searchsubmit" value="'. esc_attr__('搜索') .'" />
 </div>
 </form>';
 echo "<style>
 #searchform{background:rgba(165,185,173,0.38);padding:10px 5px;width:100%;}
 #s{width:79%}
 #searchsubmit{width:18%}
 </style>";
return $form;
}

add_shortcode('wpbsearch', 'wpbsearchform');
// 在文章内添加搜索功能 结束
 ?>

然后在些文章的时候,可以插入短码就可以实现一个搜索框,短码跟常规的短码使用方法一样的,具体短码如下,由于这里被浏览器解析了,我只能表达:

一对英文的中括号,里面的文字是wpbsearch,跟上面的钩子名称一致。

效果如下:

定义下这个搜索框的CSS样式可以写在单独的样式表中,这里仅仅是作为一个演示,只需把里面style那部分的css样式代码抽离出去即可。

具体样式根据自己的喜好。

未经允许不得转载:哈勃私语 » 如何使用WordPress短代码添加搜索框文章中

本文共899个字 创建时间:2017年10月9日21:36   

分享到:更多 ()