WordPress美化 – 94设计素材网大气搜索框区块

这是一款来自94设计的大气搜索框区块，是一款带有搜索功能的区块，理论上支持所有主题的搜索功能。

实现代码

 <!--载入CSS样式--> 
  <link href="style.css" rel="stylesheet" type="text/css" /> 
  
  
  <div class="page-section-content"> 
   <div class="page-section-background"> 
   </div> 
   <div class="n-box"> 
    <!--文本--> 
    <div class="n-text"> 
     <h1 class="index-title"> 
      <!--分类统计--> Npcink </h1> 
     <h2 class="index-subtitle"> 
      <!--副标题--> // 开通会员，海量UI设计源文件随心下载 // </h2> 
    </div>
    <!--.n-text--> 
    <!--搜索--> 
    <div class="n-search"> 
     <form method="get" id="searchform" action="?php echo esc_url( home_url() ) ?>"> 
      <div class="container"> 
       <div id="searchs"> 
        <input type="text" placeholder="搜索素材" name="s" id="s" class="searchInput" /> 
        <input class="n-button" type="submit" onclick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';" value="搜索" /> 
       </div> 
      </div> 
     </form> 
    </div>
    <!--.n-search--> 
    <div class="remensousuo">
     <div class="sousuocenter">
      <span>热门搜索：</span>
      <ul> 
       <li><a href="https://www.npc.ink/6663.html" class="shejipsd">psd素材</a></li> 
       <li><a href="https://www.npc.ink/6663.html" class="shejixd">xd素材</a></li> 
       <li><a href="https://www.npc.ink/6663.html" class="shejifigma">figma素材</a></li> 
       <li><a href="https://www.npc.ink/6663.html" class="shejisketch">sketch素材</a></li> 
       <li><a href="https://www.npc.ink/6663.html" class="shejisketch">ai素材</a></li> 
      </ul>
     </div>
    </div> 
   </div>
   <!--.n-box--> 
  </div>
  <!--.page-section-content--> 
  <style type="text/css" media="screen">


</style> 
  <script type="text/javascript">
    $(document).ready(function(){
    // 当鼠标聚焦在搜索框
    $('#s').focus(
    function() {
    if($(this).val() == '输入关键字') {
    $(this).val('').css({color:"#454545"});
    }
    }
    // 当鼠标在搜索框失去焦点
    ).blur(
    function(){
    if($(this).val() == '') {
    $(this).val('输入关键字').css({color:"#333333"});
    }
    }
    );
    });
</script> 

如何使用

复制代码到需要的地方，例如古登堡的HTML区块或是小工具里面的“自定义HTML”，另外，记得看代码注释哦(。・∀・)ノ