avatar
A-A+
摘要:

我呢是个比较嫉妒那些别人博客有,我没有的功能,在我力所能及的范围内的,我都想拥有。特别是在线上看到一个个wordpress博客中,都有语音搜索这个功能,比较眼馋。于是,开始研究这是怎么整滴捏~发现并不难,特别贡献出来,分享一下

我呢是个比较嫉妒那些别人博客有,我没有的功能,在我力所能及的范围内的,我都想拥有。特别是在线上看到一个个wordpress博客中,都有语音搜索这个功能,比较眼馋。于是,开始研究这是怎么整滴捏~发现并不难,特别贡献出来,分享一下。

先看下效果

search

操作方法

在header.php中,找到:

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
        <fieldset id="search">

          <input value="Search" onclick="this.value='';" name="s" id="s" type="text" />
          <input name="searchsubmit" value="" id="searchsubmit" class="button" type="submit" />
        </fieldset>
      </form>

用如下的代码替换:

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <fieldset id="search">

          <input onclick="this.placeholder='';" name="s" id="s" type="text" placeholder="输入关键字搜索"<?php if( is_search() ){ echo ' value="'.$s.'"'; } ?> autofocus x-webkit-speech="">
          <input name="searchsubmit" value="" id="searchsubmit" class="button" type="submit" />
        </fieldset>
      </form>

在CSS中找到:

.search_site #searchform #searchsubmit {
	border: none;
	cursor: pointer;
	display: block;
	height: 44px;
	padding: 0;
	position: absolute;
	right: 0px;
	text-indent: -9999px;
	top: 0px;
	width: 44px;
	z-index: 2;
	background:  url("images/arrow-right.gif") no-repeat center;
}

替换成为:

.search_site #searchform #searchsubmit {
	border: none;
	cursor: pointer;
	display: block;
	height: 44px;
	padding: 0;
	position: absolute;
	right: 0px;
	text-indent: -9999px;
	top: 0px;
	width: 44px;
	z-index: 2;
	background: #FFF url("images/arrow-right.gif") no-repeat center;
}

F5刷新,看下首页上的效果吧,语音搜索很esay吧!

  • 本文为原创文章,版权归 金励君   博客所有,转载引用请注明以下信息:
  • 本文作者:
  • 本文标题: 为wordpress主题添加语音搜索
  • 本文地址: http://www.jinlijun.com/add-voice-search-for-wordpress-theme.html +复制链接
  • 本文标签: ,

为wordpress主题添加语音搜索:等您坐沙发呢!

发表评论

(教你设置自己的个性头像)

疑问? 吃西瓜。 生闷气! 偷看。 Hi OK 吃惊。 飞吻! 不要啊! 膜拜! 泡泡糖。 抛钱。 献花。 抓狂! 纠结! 不理你。 抛媚眼。 调皮。 恭喜! 忍! 委屈。 吃饭。

快捷键:Ctrl+Enter