更好的 wordpress 搜索框 [英] Better Search box for wordpress

查看：44
本文介绍了更好的 wordpress 搜索框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请查看 this WordPress 主题，当您点击搜索图标时，页面中间会出现一个搜索框，效果很酷.我想将此添加到我的 WordPress 网站.我在谷歌上看过，但仍然没有运气，请给我推荐一个插件或文章.

谢谢

解决方案

它使用引导模式弹出窗口的工作方式是这样的.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/><!-- 按钮触发模态--><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">搜索<!-- 模态--><div class="modalfade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span><h4 class="modal-title" id="myModalLabel">搜索</h4>

<div class="modal-body"><?php get_search_form();?>

<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

Please take a look on this WordPress theme, when you click on search icon, a search box appear in the middle of page with a cool effect. I want to add this to my WordPress site. I have looked on google but still no luck, Please suggest me a plugin or article.

Thanks

解决方案

Hi There it work like this using bootstrap modal popup.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Search
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Search</h4>
      </div>
      <div class="modal-body">
        <?php  get_search_form(); ?>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>     
      </div>
    </div>
  </div>
</div>

这篇关于更好的 wordpress 搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆