教程前言：
汇站今天给大家带来的是美化主题主页，发现在原来的幻灯片上加了一个大搜索框很好看。传统幻灯片我看腻了，就不废话了。下面为大家提供详细的安装教程！
截图
第一步：PHP代码
将下面代码放入主题目录下的 index.php 文件，放到<div class=”b2-content”>这个代码之后即可。注意：放入我给的代码就好，本来的代码不要删哦！
这里调用了我的阿里巴巴矢量图标，你们换成自己的。
<div id="primary-home" class="content-area">
<div class=" home_row home_row_0 module-sliders home_row_bg home_row_bg_img" style="background-color:#fcfcfc;background-image:url(https://s1.ax1x.com/2020/05/25/tpdmCD.jpg);">
<div class="wrapper"><div class="home-row-left content-area " style="width:1440px"><div class="slider-7">
<div class="slider-7-carousel slider-height" style="width:1300px;max-width:100%;">
<p class="sousuotopTitle">这里可能有你想要的资料哦！</p>
<form action="?s=&amp;post_type=post" class="searchform">
<input type="text" name="s" id="sss" placeholder="搜索相关文章" class="search-keyword">
<input type="hidden" name="post_type" value="post">
<button type="submit" class="search-submit"><i class="xu icon-sousuo3-copy"></i> 搜 索</button>
</form><div class="remensousuo"><div class="sousuocenter"><span><i class="xu icon-iconfonthuo-copy"></i> 热门搜索：</span><ul>
<li><a href="/chanpinxian/youyanji" class="shejipsd">美化</a></li>
<li><a href="/chanpinxian/xiwanji" class="shejixd">主题</a></li>
<li><a href="/chanpinxian/zaoju" class="shejifigma">插件</a></li>
<li><a href="/chanpinxian/zhengkaowei" class="shejisketch">APP 源码</a></li>
<li><a href="/chanpinxian/reshuiqi" class="shejisketch">影视源码</a></li>
</ul></div></div>
</div>
</div></div></div></div>
第二步：css代码
将 CSS 代码放进主题全局 CSS 文件或者放入主题的style.css里面即可
/*大大的搜索框*/
.home .site-header{margin-bottom:0 !important;}
.header .wrapper{background:none;
height: 72px;
}
.site-header{height: 72px;}
.home .home_row_0 .content-area{border-radius:6px}
.home .content-area{border:0 !important}
.home .action .top-style-blur{background:#672d2d2e;height:72px}
.home .top-style-blur{background:#00000012;height:72px}
.top-style-blur{background:#383838;height:72px}
.home .b2-content{margin-top:-73px;}
.top-menu-ul > li.depth-0:first-child > a{color:#fff}
.top-menu ul li.depth-0 > a{color:#fff}
.home_row_bg, .home_row_bg_img{margin:0;padding:60px 0}
/*.home_row_0 .wrapper{padding:0 15px}*/
.site.up .site-header-in{transform: translate(0,-70px);}
.post-list-cats{background:none}
.picked.post-load-button span:hover{color:#fff}
.slider-7 .search-keyword{ margin:0 auto;
width: 600px;
color: #FFF;
font-size: 16px;
overflow: hidden;
height: 54px;
line-height: 32px;
border-radius: 4px;
box-shadow: none;
padding-left: 19px;
background: #ffffff38;
border: 1px solid #ffffff14;}
.slider-7 .searchform{ width: 750px;
border-radius: 6px;
margin: 0 auto;}
.slider-7{padding:60px 0}
.slider-7 .searchform input::-webkit-input-placeholder{color:#eee}
.slider-7 .search-submit{ display: block;border-radius: 4px;background: #fd6360;
width: 120px;
height: 54px;
position: relative;
border: 1px solid #ffffff14;
font-size:18px;
right: 6px;}
.slider-7 .search-submit:hover{background:#f53224;color:#fff}
.slider-7 .ri-search-line{position:relative;top:3px;font-size:18px;margin-right:5px}
.slider-7 .sousuotopTitle{text-align:center;font-size:25px;color:#eee;margin-bottom:40px;}
.slider-7 .sousuotopTitle:before{ content: "//";
font-weight: 900;
position: relative;
left: -17px;
opacity: .5;}
.slider-7 .sousuotopTitle:after {
content: "//";
font-weight: 900;
position: relative;
left: 17px;
opacity: .5;
}
.login-box-content{background:#fff}
.header-login-button .empty {color:#fff;}
.header-login-button .empty i{position:relative;top:2px;margin-right:2px}
.login-button .header-login-button button{font-size:14px;
background: #ff5757;}
.header-user{top:21px;}
.login-box-content{
background: #fd6360;
background-image: url(https://s1.ax1x.com/2020/05/25/tpdmCD.jpg);
background-position: 145px bottom;
background-repeat: no-repeat;}
.sheji_com_login {width: 400px;
height:auto;
float: left;
}
.login-box-content .login-box-top{ width: 400px;
float: left;background: #fff;}
.modal-content{width:800px}
.sheji_com_login .wxlogin-sidebar{
padding: 50px 50px 0;}
.sheji_com_login .wxlogin-sidebar h2 {
font-size: 22px;
margin-bottom: 30px;
color:#fff;
}
.sheji_com_login .wxlogin-sidebar ul li{
display: block;
margin-bottom: 10px;
font-size: 15px;
color:#fff;
}
p.module-desc {
border-left: 0px solid #fb5f3c;
padding-left: 0px;
}
.sheji_com_login .wxlogin-sidebar ul li i{
margin-right: 10px;
opacity: .52;
position: relative;
top:2px;
}
.login-title span{padding:10px 10px;font-size:16px;color:#252525;}
.login-title span b{color:#252525;}
.login-box-content .login-box-top{padding:36px 24px}
.header .ri-medal-line{ color: #ffd2ab;
font-size: 18px;
position: relative;
top: 3px;
margin-right: 3px;}
.shejihot{ display: block;
width: 14px;
height: 16px;
background: url(https://s1.ax1x.com/2020/05/25/tpdmCD.jpg) no-repeat;
position: relative;
top: -3px;
margin-left: 6px;
background-size: contain;}
.remensousuo{margin:0 auto;height:80px;padding-top:30px; color:#fff; display: flex;font-size: 14px;}
.remensousuo .sousuocenter{ margin: 0 auto;
padding: 0 60px;
line-height: 40px;
border-radius: 73px;
position: relative;
height: 40px;
vertical-align: middle;
display: inline-block;
text-align: center;
background: rgba(0, 0, 0, 0.26);
}
.home_row_bg_img::after{background: #bf4d4936;}
.remensousuo span{float:left;color:#e6e6e6; position: relative;top: 1px;}
.remensousuo span .ri-fire-fill{ background: #fff3;
border-radius: 50%;
width: 18px;
height: 18px;
color: #fff;
display: block;
float: left;
position: relative;
top: 12px;
margin-right: 7px;
}
.remensousuo span .ri-fire-fill:before {
content: "ecf4";
position: relative;
top: -12px;
}
.remensousuo li a:hover{color:#f44336}
.remensousuo ul{margin:0 auto;float:left}
.remensousuo li {float:left;margin-right:20px;}
.remensousuo li a {float:left;color:#e6e6e6; padding: 0px 9px;}
/*.remensousuo li .shejipsd{background: url(https://img.94kan.cn/2020/04/165c14e9643e9a.png) no-repeat;background-size: contain;}
.remensousuo li .shejisketch{background: url(https://img.94kan.cn/2020/04/16549ef5679a34.png) no-repeat;background-size: contain;}
.remensousuo li .shejixd{background: url(https://img.94kan.cn/2020/04/163e49e457c593.png) no-repeat;background-size: contain;}
.remensousuo li .shejifigma{background: url(https://img.94kan.cn/2020/04/1797362e59ec44.png) no-repeat;background-size: contain;}
.remensousuo li .shejisketch{background: url(https://img.94kan.cn/2020/04/16549ef5679a34.png) no-repeat;background-size: contain;}*/
.login-social-button .login-qq {
color: #ff7a09;
}
结语
完成以上操作即可，可能还需要修改一些样式。比如搜索旁边有个阿里巴巴矢量图标，需要改成自己的。自己造好了再看。
转载请注明：汇站网 » WordPress 美化/主题首页美化添加搜索框
