电脑端效果：

移动端效果：

• 在自定义小工具中首页添加一个幻灯片，并将以下代码加入幻灯片文案或幻灯片简介中

        <form method="get" id="searchform" action="?php echo esc_url( home_url() ) ?>">
          <!--action 属性规定当提交表单时，向何处发送表单数据。?php echo esc_url( home_url() ) ?>-->
          <div class="container">
            <div id="searchs">
              <input type="text" placeholder="输入关键词搜索..." name="s" id="s" class="searchInput" autocomplete="off" />
              <input class="n-button" type="submit"
                onclick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';"
                value="搜索" />
            </div>
          </div>
        </form>

• 后台自定义CSS样式

/*幻灯片搜索样式*/
.n-button {
  top: 1px;
  right: -6px;
  width: 120px;
  height: 42px;
  border: 1px solid #ffffff14;
  border-radius: 5px;
  background: #504bcc;
  cursor: pointer;
  font-size: 16px;
  color: #fff;
  font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
    Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

#searchs input[type="text"] {
  overflow: hidden;
  margin: 0 auto;
  padding-left: 19px;
  width: 600px;
  height: 42px;
  border: 1px solid #ffffff14;
  border-radius: 4px;
  background: rgb(255 255 255 / 62%);
  box-shadow: none;
  color: #757575;
  font-size: 14px;
  line-height: 32px;
  font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
    Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}


/*幻灯片手机搜索样式*/
@media (max-width: 934px) {
    #searchs input[type="text"] {
        width: auto;
    }
 
.absolute .container {
  width: 100% !important;
  padding: 0;
  margin: 0;
}

.absolute #searchs {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.absolute #searchs input[type="text"] {
  width: 100%;
}

.absolute .n-button {
  width: 30%;
  margin-top: 4px;
}

  }