子比主题美化网站首页全屏视频+搜索框

前言

这个功能使用的视频格式和分辨率都可能比较高（不高体验可能不太好），因此会增加相应的服务器带宽消耗。如果您的网络带宽比较小，使用视频功能可能会导致视频加载时间过长或者视频播放卡顿不流畅。此外，如果您使用了云储存来存储大量视频文件，需要注意可能造成的流量消耗问题。因此，在使用视频功能之前最好仔细评估自身的带宽和储存资源情况，以避免不必要的困扰和额外费用

效果预览：

正文

首先在子比主题下面创建一个 php 文件，文件名为 func.php （一定要是这个文件名，这样做的好处可以防止主题更新时覆盖掉原有的 functions.php 导致功能失效

<?php
    add_action('wp_head', 'zibll_Add_ons_newindex');

/* 首页视频+搜索框 开始 */
function zibll_Add_ons_newindex() {
    if(is_home()) {
    ?>
    <div id="page-wrapper">
        <div class="home-banner por">
            <section class="section" style="height: calc(100vh - 120px);max-height: 800px;">
                <div class="video-wrapper">
                    <video autoplay="" playsinline="" poster="填入正在加载时显示的图片链接" loop="" muted="" src="填入视频链接"></video>
                </div>
                <div class="video-overlay">
                </div>
            </section>
            <div class="wrapper poa" style="top: 20%;">
                <div class="home-banner-content Onecad_clearfix">
                    <div class="slogan-text por fl">
                        <p>
                            <?php echo get_bloginfo('name');?>
                            <i class="iblock poa corner"
                               style="background:url(//www.你的域名.com/wp-content/themes/zibll/img/hot.svg) no-repeat;"></i>
                        </p>
                        <p class="promote-sub-title line-one">已发布
                            <span style="display: inline-block;overflow: hidden;line-height: 34px;vertical-align: -9px;">
                                <em id="goal-works" value="5351266" style="font-style: normal;">
                                    <ps style="color: #f4ff54;">
                                        <?php $count_posts = wp_count_posts();
                                            echo $published_posts =$count_posts->publish;
                                        ?>
                                    </ps>
                                </em>
                            </span>篇文章内容
                        </p>
                    </div>
                </div>
                <div class="home-banner-search por searchv2-top-m">
                    <div class="primary-menus" style=" position: unset;transform: translate(1px, 1px);">
                        <div class="cont">
                            <div class="left-cont">
                                <form class="search" id="search_4" action="/?s=" method="get" target="_blank">
                                    <input type="text" name="s" class="s" placeholder="输入关键词 按回车搜索">
                                    <button type="submit" name="" class="btn">
                                        站内搜索
                                    </button>
                                </form>
                                <!--<a href="/?s=电脑软件" target="_blank">电脑软件</a><a href="/?s=模板 " target="_blank">模板</a><a href="/?s=插件" target="_blank">插件</a>-->
                                <div class="tag">
                                    <a href="/?s=软件" target="_blank">软件</a>
                                    <a href="/?s=源码" target="_blank">源码</a>
                                    <a href="/?s=模板 " target="_blank">模板</a>
                                    <a href="/?s=插件" target="_blank">插件</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 头部快速链接导航 -->
        </div>
    </div>
    <div id="home-row-qukuai" class=" home_row home_row_1 module-qukuai " style="background-color:;">
        <div class="wrapper">
            <div class="home-row-left content-area ">
                <div class="sort jitheme_radius" style="margin-top:-80px ;">
                    <ul class="sort-config">
                        <li>
                            <div class="sort-config-item">
                                <img class="sort-config-icon"
                                     src="填入图标路径">
                                <a href="填入你想要的链接" target="_blank">
                                    <p class="sort-config-title">这是一个菜单模板
                                    </p>
                                </a>
                                <span class="sort-config-desc">这是一个菜单模板</span>
                            </div>
                        </li>
                        <li>
                            <div class="sort-config-item">
                                <img class="sort-config-icon"
                                     src="填入图标路径">
                                <a href="填入你想要的链接" target="_blank">
                                    <p class="sort-config-title">这是一个菜单模板
                                    </p>
                                </a>
                                <span class="sort-config-desc">这是一个菜单模板</span>
                            </div>
                        </li>
                        <li>
                            <div class="sort-config-item">
                                <img class="sort-config-icon"
                                     src="填入图标路径">
                                <a href="填入你想要的链接" target="_blank">
                                    <p class="sort-config-title">这是一个菜单模板
                                    </p>
                                </a>
                                <span class="sort-config-desc">这是一个菜单模板</span>
                            </div>
                        </li>
                        <li>
                            <div class="sort-config-item">
                                <img class="sort-config-icon"
                                     src="填入图标路径">
                                <a href="填入你想要的链接" target="_blank">
                                    <p class="sort-config-title">这是一个菜单模板
                                    </p>
                                </a>
                                <span class="sort-config-desc">这是一个菜单模板</span>
                            </div>
                        </li>
                        <li>
                            <div class="sort-config-item">
                                <img class="sort-config-icon"
                                     src="填入图标路径">
                                <a href="填入你想要的链接" target="_blank">
                                    <p class="sort-config-title">这是一个菜单模板
                                    </p>
                                </a>
                                <span class="sort-config-desc">这是一个菜单模板</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <style>
        #page-wrapper{padding-bottom:16px;margin-top:-16px}.page-cover{padding-bottom:calc(30% + 100px)}.left-cont a,.sort jitheme_radius li,.sort jitheme_radius ul,.sort-config span,.wrapper p{border:0;font-family:inherit;font-style:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;word-wrap:break-word;box-sizing:border-box}.home-banner{position:relative;background-position:0 100%;animation:gradient 12s ease-in-out infinite}.home-banner .section{position:relative;width:100%;overflow:hidden}.home-banner .section .video-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;overflow:hidden;z-index:0}.home-banner .section .video-wrapper video{visibility:visible;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;width:100%;object-fit:cover}canvas,img,video{max-width:100%;height:auto;box-sizing:border-box}audio,canvas,iframe,img,svg,video{vertical-align:middle}.home-banner .section .video-overlay{height:100%;width:100%;top:0;left:0;position:absolute;background:rgba(45,47,54,.15)}.poa{color:#fff}.slogan-text.por.fl{text-align:center;width:100%;margin-bottom:50px}.fl{float:left}.por{position:relative}.home-banner-content .slogan-text p:nth-of-type(1){font-weight:600;font-size:55px;line-height:46px;letter-spacing:6px;text-shadow:0 2px 4px rgb(0 0 0/25%);margin-bottom:20px}.home-banner .corner{width:28px;height:21px;position:absolute;border-radius:4px;margin:0}.home-banner-content .slogan-text p{font-size:23px;line-height:24px;letter-spacing:5px;font-weight:600;text-shadow:0 2px 4px rgb(0 0 0/25%)}.Onecad_clearfix:after{content:"";clear:both;display:block;height:0;visibility:hidden;font-size:0;line-height:0}.home_row{position:relative;margin-bottom:1px}.home_row>div{display:flex;position:relative;margin:16px auto 0}.poa{position:absolute;width:calc(100% - 200px);margin:0 100px}.content-area,.home-row-left.content-area,.home_row>div{max-width:100%}.archive .content-area,.b2-content .content-area,.post-style-2 .content-area{margin:0 auto}.content-area{width:100%}.sort{position:relative;z-index:3;padding:26px;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.sort-config{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.jitheme-pages-vip ol,li,ul{list-style:none}.sort-config>li{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;height:100%}.sort-config-item{display:block;height:100%}.sort-config-item img{float:left;width:62px;height:62px;margin-right:12px}a,a:active,a:visited{text-decoration:none;transition:all .2s}.sort-config-title{line-height:34px;font-size:18px;font-weight:600;color:var(--main-color);-webkit-transition:.3s;transition:.3s}.sort-config-desc{float:left;line-height:22px;font-size:14px;color:#8e8e8e}.hidden{display:none!important}.home-banner-search{width:70%;height:auto;margin:auto}.left-cont{border:5px solid rgb(255 255 255/8%);border-radius:30px}.home-banner-search form>input{width:100%;height:50px;background:rgb(255 255 255/20%);transition:background-color .5s ease;border:0;padding:18px 22px;font-size:14px;color:#fff;border-radius:30px}.home-banner-search form>input::-webkit-input-placeholder{color:#e1cfcf}.home-banner-search form>input:focus::-webkit-input-placeholder{color:#4e5358}.home-banner-search form>input:focus{background:#fff}.home-banner-search input,textarea{border-radius:0}button,input[class=s]{-webkit-appearance:none;outline:0;-webkit-tap-highlight-color:transparent;box-sizing:border-box}input[class=s]{border:1px solid #ccc}.primary-menus .left-cont button{height:50px;box-sizing:border-box;min-width:100px;cursor:pointer;color:#fff;font-size:15px;line-height:40px;position:absolute;right:5px;top:5px;border-radius:1px 30px 30px 1px;padding:0 15px;transform:translateY(0)}.button,button{background-color:rgb(255 64 64/55%);transition:background-color .5s ease;border:1px solid #fc3c2d;border-radius:0}.button,button:hover{background-color:#ff4040}.home-banner-search .tag{position:absolute;right:100px;top:0;padding:15px 10px;display:none}.home-banner-search .tag a{display:inline;padding:0 8px;border-radius:10px;background-color:rgb(239 239 239/70%);float:left;margin:5px;height:20px;line-height:20px;color:#a39984;font-size:12px}.home-banner-search .tag a:hover{background:#fc3c2d;color:#fff}@media (max-width:776px){#home-row-qukuai,#page-wrapper{display:none}}@media (min-width:1440px){.home-banner-search .tag{display:block}}
        /* 首页视频+搜索框 结束 */
    </style>


<?php
  }
}

这里还需要你手动修改一些东西，这里标出行号，具体修改内容已经在代码中写上了

第12行，填入poster（加载时的预览图链接）和src（视频链接）
第23行，填入你的站点域名即可，不要https或http
第70~120行，在标签中的src填入菜单的图标链接，在标签中的 href 属性中将你需要的菜单链接替换，在

标签中替换 “这是一个菜单模板”
都替换完成了就恭喜你，拥有了一个高质量的网站首页啦