搜索到
4
篇与
的结果
-
typecho博客Joe主题修改首页滚动广告及加入文章顶部广告 一、添加后台打开 functions.php 添加以下代码{tabs}{tabs-pane label="代码"}$JADPost = new Typecho_Widget_Helper_Form_Element_Textarea( 'JADPost', NULL, NULL, '文章页顶部广告', '介绍：用于设置文章页顶部广告 <br /> 格式：广告图片 || 跳转链接 （中间使用两个竖杠分隔）<br /> 注意：如果您只想显示图片不想跳转，可填写：广告图片 || javascript:void(0) <br /> 其他：一行一个，一行代表一个轮播广告图' ); $JADPost->setAttribute('class', 'joe_content joe_post'); $form->addInput($JADPost);{/tabs-pane}{tabs-pane label="代码位置"} {/tabs-pane}{/tabs}这是文章页的代码，因为首页广告主题自带了二、添加滚动广告栏{tabs}{tabs-pane label="首页"}因为首页已经有广告位了，所以直接替换就行了将主题 index.php 的以下代码直接替换为新代码 <div class="joe_index__ad"> <?php $index_ad = []; $index_ad_text = $this->options->JIndex_Ad; if ($index_ad_text) { $index_ad_arr = explode("\r\n", $index_ad_text); if (count($index_ad_arr) > 0) { for ($i = 0; $i < count($index_ad_arr); $i++) { $img = explode("||", $index_ad_arr[$i])[0]; $url = explode("||", $index_ad_arr[$i])[1]; $index_ad[] = array("img" => trim($img), "url" => trim($url)); }; } } ?> <?php if (sizeof($index_ad) > 0) : ?> <div class="swiper-container"> <div class="swiper-wrapper"> <?php foreach ($index_ad as $item) : ?> <div class="swiper-slide"> <a class="item" href="<?php echo $item['url'] ?>" target="_blank" rel="noopener noreferrer nofollow"> <img width="100%" class="image lazyload" src="<?php _getLazyload() ?>" data-src="<?php echo $item['img'] ?>" /> </a> </div> <?php endforeach; ?> </div> <div class="swiper-pagination"></div> <span class="icon">广告</span> </div> <?php endif; ?> </div>{/tabs-pane}{tabs-pane label="文章页"}文章页直接在主题的 post.php 文件内合适的地方加入以下代码 <div class="joe_post__ad"> <?php $JADPost = []; $JADPost_text = $this->options->JADPost; if ($JADPost_text) { $JADPost_arr = explode("\r\n", $JADPost_text); if (count($JADPost_arr) > 0) { for ($i = 0; $i < count($JADPost_arr); $i++) { $img = explode("||", $JADPost_arr[$i])[0]; $url = explode("||", $JADPost_arr[$i])[1]; $JADPost[] = array("img" => trim($img), "url" => trim($url)); }; } } ?> <?php if (sizeof($JADPost) > 0) : ?> <div class="swiper-container"> <div class="swiper-wrapper"> <?php foreach ($JADPost as $item) : ?> <div class="swiper-slide"> <a class="item" href="<?php echo $item['url'] ?>" target="_blank" rel="noopener noreferrer nofollow"> <img width="100%" class="image lazyload" src="<?php _getLazyload() ?>" data-src="<?php echo $item['img'] ?>" /> </a> </div> <?php endforeach; ?> </div> <div class="swiper-pagination"></div> <span class="icon">广告</span> </div> <?php endif; ?> </div>{/tabs-pane}{/tabs}三、修改广告栏样式{tabs}{tabs-pane label="首页"}直接在 Joe/assets/css 打开 joe.index.min.css 然后在最后添加以下代码.joe_index__ad .swiper-container{height: 180px!important;border-radius: var(--radius-inner);}.joe_index__ad .swiper-container .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}@media (max-width: 768px){.joe_index__ad .swiper-container{height: 120px!important}.joe_index__ad .swiper-container .image{height: 120px;object-fit: cover;border-radius: var(--radius-inner);}}{/tabs-pane}{tabs-pane label="文章页"}直接在 Joe/assets/css 打开 joe.post.min.css 然后在最后添加以下代码.joe_post__ad .swiper-container{height: 180px!important;margin-top:15px;border-radius: var(--radius-inner);}.joe_post__ad .swiper-container .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}@media (max-width: 768px){.joe_post__ad .swiper-container{height: 120px!important}.joe_post__ad .swiper-container .image{height: 120px;object-fit: cover;border-radius: var(--radius-inner);}}{/tabs-pane}{/tabs}四、添加滚动效果首页的修改已经结束，到后台填入广告信息就可以了文章页首先在主题的 post.php 文件内 <head> 标签内加入以下代码<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css" /> <script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>然后再在 Joe/assets/js 打开 joe.post_page.min.js 然后在最后添加以下代码if(0!==$(".joe_post__ad .swiper-container").length){let e="vertical";new Swiper(".swiper-container",{keyboard:!1,direction:e,loop:!0,autoplay:!0,mousewheel:!0,pagination:{el:".swiper-pagination"},})} -
-
子比主题美化网站首页全屏视频+搜索框 前言这个功能使用的视频格式和分辨率都可能比较高（不高体验可能不太好），因此会增加相应的服务器带宽消耗。如果您的网络带宽比较小，使用视频功能可能会导致视频加载时间过长或者视频播放卡顿不流畅。此外，如果您使用了云储存来存储大量视频文件，需要注意可能造成的流量消耗问题。因此，在使用视频功能之前最好仔细评估自身的带宽和储存资源情况，以避免不必要的困扰和额外费用效果预览：正文首先在子比主题下面创建一个 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 属性中将你需要的菜单链接替换，在标签中替换 “这是一个菜单模板”都替换完成了就恭喜你，拥有了一个高质量的网站首页啦
-
CC BY-NC-ND