子比主题幻灯片加入搜索框

阿七

2022 年 07 月 08 日

33 次浏览

暂无评论

1806字数

WordPress 网站开发

## 预览图如下

###电脑端效果：

![](https://tvax4.sinaimg.cn/large/006wpQX4gy1gx6kjxgal8j31h90pyafl.jpg)

###移动端效果：

![](https://tvax3.sinaimg.cn/large/006wpQX4gy1gx6kibkmt6j30b10nlwfs.jpg)

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

```html
        <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" 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样式

```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;
}

}
```

最后修改：2022 年 07 月 09 日