YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » WordPress » 给 WordPress 在 Chrome 浏览器中添加语音搜索功能

给 WordPress 在 Chrome 浏览器中添加语音搜索功能

为了优化 BlueNight 主题的用户体验,给 BlueNight 主题添加了对 Chrome 浏览器的语音搜索功能。 语音搜索功能对于于老年人、残障人士、偷懒人群是一个非常有用功能。不过这个功能目前只能在 Chrome 11+ 的谷歌浏览器上看到这个效果。例如本博客在 Google 的 Chrome(23.0.1271.97 m) 浏览器中显示的那样:

wordpress-voice-search-in-chrome

在 Chrome中实现语音搜索很简单,只需要在 WordPress 的 searchform.php 文件的代码加上 x-webkit-speech 特殊属性就可以轻松搞定:

<form method="get" action="/" class="searchform top-searchform" name="searchform" id="top-searchform"> 
	  <input type="text" value="<?php if(is_search()){echo get_search_query();}?>" id="top-s" class="key top-key" name="s" placeholder="<?php _e('Search Articles!','bluenight'); ?>" x-webkit-speech /> 
	  <button type="submit" value="" class="searchsubmit top-searchsubmit" value="<?php _e('Search','bluenight'); ?>" id="top-searchsubmit"></button>
</form>

x-webkit-speechHTML5 的 speech 功能的 API,Google 的 Chrome 浏览器在对 HTML5CSS3 的新技术标准的支持上特别积极,所以很有幸,我们可以在 Chrome 上实现这个实用又很牛逼功能。不要磨蹭了,赶快给你的 WordPress 也添加语音搜索功能吧!

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:给 WordPress 在 Chrome 浏览器中添加语音搜索功能

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)