这个功用是我参照 DUX 主题的首页焦点图改的，虽说是参照这个功用改的，但根本上代码属于重写了一遍。测试了几天目前并没有发现什么严重的问题，所以分享出来希望能协助到有同样需求此功用的朋友们。值得留意的是功用的很多款式是采用了 bootstrap.min.css 文件中的款式，并且后台的设置选项是基于Options Framework 的，所以假如你的主题是采用的BootScript 与 Options Framework 框架，那么这个功用应该也是能够运用的。
![图片[1]-DUX 主题添加首页全屏Banner图-孤勇者社区](http://www.gyzsq.com/wp-content/uploads/2022/05/30dc234ac669.png)
好了，废话不多说。还是简单来说下完成的详细步骤。修正主题前还是希望大家备份一下将要修正的文件，以防不测！！！
新建 qgg_banner.php 文件
首先，新建一个名为 qgg_banner.php 的文件，并将如下代码丢到文件中去。留意该文件是完成此功用的中心文件，请务必保证代码的完好性，另外我后面会附上此次主题修正的全部文件以免大家复制代码过程中招致的失误。
<?php /** *Title：首页全屏Banner *Author： QuietGuoGuo *URL： http://www.bolg.quietguoguo.com_addref */ function QGG($name, $default = false) { $option_name = 'dux'; /** // Gets option name as defined in the theme if ( function_exists( 'optionsframework_option_name' ) ) { $option_name = optionsframework_option_name(); } // Fallback option name if ( '' == $option_name ) { $option_name = get_option( 'stylesheet' ); $option_name = preg_replace( "/\W/", "_", strtolower( $option_name ) ); } */ // Get option settings from database $options = get_option( $option_name ); // Return specific option if ( isset( $options[$name] ) ) { return $options[$name]; } return $default; } function qgg_banner( $id='qgg_banner' ){ $indicators = ''; $inner = ''; $sort = QGG($id.'_sort') ? QGG($id.'_sort') : '1 2 3 '; $sort = array_unique(explode(' ', trim($sort))); $i = 0; foreach ($sort as $key => $value) { if( QGG($id.'_src_'.$value) && QGG($id.'_title_'.$value) ){ $indicators .= '<li data-target="#'.$id.'" data-slide-to="'.$i.'"'.(!$i?' class="active"':'').'></li>'; $inner .= '<div class="item'.(!$i?' active':'').'"> <img src="'.QGG($id.'_src_'.$value).'"> <div class="qgg_banner_wenan"> <h1 class="qgg_banner_caption">'.QGG($id.'_title_'.$value).'</h1> <p class="qgg_banner_description">'.QGG($id.'_description_'.$value).'</p> <div class="qgg_banner_button"> <a class="qgg_banner_button1" '.( QGG($id.'_button1blank_'.$value) ? ' target="_blank"' : '').' href="'.QGG($id.'_button1href_'.$value).'" style="'.( QGG($id.'_button1open_'.$value) ? ' ' : ' display:none ').'"> <span>'.QGG($id.'_button1title_'.$value).'</span> </a> <a class="qgg_banner_button2" '.( QGG($id.'_button2blank_'.$value) ? ' target="_blank"' : '').' href="'.QGG($id.'_button2href_'.$value).'" style="'.( QGG($id.'_button2open_'.$value) ? ' ' : ' display:none ').'"> <span>'.QGG($id.'_button2title_'.$value).'</span> </a> </div> </div> </div>'; $i++; } } echo '<div id="'.$id.'" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators">'.$indicators.'</ol> <div class="carousel-inner" role="listbox">'.$inner.'</div> <a class="left carousel-control" href="#'.$id.'" role="button" data-slide="prev"><i class="fa fa-angle-left"></i></a> <a class="right carousel-control" href="#'.$id.'" role="button" data-slide="next"><i class="fa fa-angle-right"></i></a> </div>'; }
复制保管完成后，将 qgg_banner.php 丢到主题的 modules 文件夹下即可。
添加后台控制选项
为了便当大家后台定义的时分愈加灵敏，我设置了一些变量用于控制各个选项，将以下代码添加到主题 options.php 文件中去：
<?php
//蝈蝈要安静首页Banner跨屏大图
// If using image radio buttons, define a directory path
$imagepath = get_template_directory_uri() . '/img/';
$options[] = array(
'name' => __('蝈蝈Banner', 'QGG'),
'type' => 'heading');
$options[] = array(
'name' => __('蝈蝈Banner功用开启', 'QGG'),
'id' => 'qgg_banner_s',
'std' => true,
'desc' => __('开启', 'QGG'),
'type' => 'checkbox');
$options[] = array(
'name' => __('项目排序', 'QGG'),
'id' => 'qgg_banner_sort',
'desc' => '用于设置Banner项目的次第，默许：1 2 3',
'std' => '1 2 3',
'type' => 'text');
for ($i=1; $i <= 3; $i++) {
$options[] = array(
'name' => __('蝈蝈首页Banner项目', 'QGG').$i,
'id' => 'qgg_banner_src_'.$i,
'desc' => __('Banner图片，倡议尺寸：', 'QGG').'1920*600',
'std' => $imagepath . 'banner_1.jpg',
'type' => 'upload');
$options[] = array(
'id' => 'qgg_banner_title_'.$i,
'desc' => __('文案标题','QGG'),
'std' => '蝈蝈要安静 | 一个不学无术的伪程序员',
'type' => 'text');
$options[] = array(
'id' => 'qgg_banner_description_'.$i,
'desc' => '文案描绘',
'std' => '分享网站建立中遇到的WordPress、Linux，Apache，Nginx，PHP，HTML，CSS等的问题及处理计划；分享Windows操作系统及其周边的一些经历学问；分享互联网运用过程中遇到的一些问题及其处置技巧；分享一些本人在读书过程中的心得领会；分享一些本人觉得有意义的音视频内容 ... ...',
'type' => 'textarea');
// 按钮1
$options[] = array(
'id' => 'qgg_banner_button1open_'.$i,
'std' => true,
'desc' => __('按钮1开启', 'QGG'),
'type' => 'checkbox');
$options[] = array(
'id' => 'qgg_banner_button1blank_'.$i,
'std' => true,
'desc' => __('按钮1能否新窗口翻开', 'QGG'),
'type' => 'checkbox');
$options[] = array(
'id' => 'qgg_banner_button1title_'.$i,
'desc' => __('按钮1标题:倡议4字内', 'QGG'),
'std' => '会员中心',
'type' => 'text');
$options[] = array(
'id' => 'qgg_banner_button1href_'.$i,
'desc' => __('按钮1链接', 'QGG'),
'std' => 'http://www.blog.quietguoguo.com',
'type' => 'text');
// 按钮2
$options[] = array(
'id' => 'qgg_banner_button2open_'.$i,
'std' => true,
'desc' => __('按钮2开启', 'QGG'),
'type' => 'checkbox');
$options[] = array(
'id' => 'qgg_banner_button2blank_'.$i,
'std' => true,
'desc' => __('按钮2能否新窗口翻开', 'QGG'),
'type' => 'checkbox');
$options[] = array(
'id' => 'qgg_banner_button2title_'.$i,
'desc' => __('按钮2标题:倡议4字内', 'QGG'),
'std' => '联络我们',
'type' => 'text');
$options[] = array(
'id' => 'qgg_banner_button2href_'.$i,
'desc' => __('按钮2链接', 'QGG'),
'std' => 'http://www.blog.quietguoguo.com',
'type' => 'text');
}
?>
添加代码后会在主题后台呈现一个“蝈蝈Banner”的选项卡，经过这个选项卡我们即可完成首页Banner的自定义设置。
前段显现代码
添加完上述代码后，我们需求将以下代码添加到主题的 index.php 文件中去：
<?php
if( _hui('qgg_banner_s') ){
_moloader('qgg_banner');
}
?>
添加完成后可能前端并不能立刻显现出来，我们需求后台保管一下设置前方可显现。
CSS 款式代码
直接添加完上述代码后前端显现效果可能并不如人意，我们需求添加一些 CSS 款式美化一下，由于该功用调用了一局部 bootstrap.min.css 的款式，这局部代码我们就不细说，大家只需求将以下代码添加到主题的 main.css 文件中去即可。
/** 蝈蝈要安静Banner款式*/
#qgg_banner{
margin: 0 0 30px;
z-index: 0;
width: 100%;
height: 100%;
}
.qgg_banner_control{
position: absolute;
top: 36%;
margin: 0px;
height: 88px;
line-height: 88px;
}
#qgg_banner .carousel-inner .item img{
border-radius: 0px;
}
.qgg_banner_wenan{
position: absolute;
top: 5%;
width: 80%;
height: 90%;
right:10%;
left:10%;
}
.qgg_banner_caption{
position: absolute;
z-index: 10;
top:10%;
width: 100%;
padding:0 16%;
color: #fff;
font-size: 30px;
text-align: center;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.qgg_banner_description{
position: absolute;
z-index: 10;
top:36%;
height: 48px;
width: 100%;
margin:10px 0px;
padding:0 12%;
color: #fff;
font-size: 16px;
overflow:hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: center;
}
.qgg_banner_button{
position: absolute;
z-index: 10;
top: 66%;
padding: 0px 32%;
}
.qgg_banner_button1{
float:left;
vertical-align: middle;
width: auto;
margin:9px;
padding: 9px 30px;
background: #45b6f7;
color: #FFF;
border:1px solid #45b6f7;
border-radius: 120px;
font-size: 16px;
font-weight: bold;
}
.qgg_banner_button2{
float:left;
width: auto;
margin: 9px;
padding: 9px 30px;
background: #45b6f7;
color: #FFF;
border:1px solid #45b6f7;
border-radius: 120px;
font-size: 16px;
font-weight: bold;
}
.qgg_banner_button a:hover{
color:#FFF;
font-size:15px;
border:0px solid #45b6f7;
}
.carousel-indicators{ left:51%; width:50%}
@media (max-width: 1200px){
#qgg_banner{display: none;}
}
款式自身就是个多变的东西，可能我调整的款式并不能完整契合你的心意，内容的获取代码上面曾经有了，款式的话大家能够依据本人爱好自在调整。
JavaScript 滚动代码
关于滚动的 JS 代码，我沿用的是主题“首页焦点图”功用的滚动代码，在主题的 main.js 文件中，详细代码如下：
if( $('.carousel').length ){
var el_carousel = $('.carousel')
el_carousel.carousel({
interval: 4000
})
tbquire(['hammer'], function(Hammer) {
// window.Hammer = Hammer
var mc = new Hammer(el_carousel[0]);
mc.on("panleft panright swipeleft swiperight", function(ev) {
if( ev.type == 'swipeleft' || ev.type == 'panleft' ){
el_carousel.carousel('next')
}else if( ev.type == 'swiperight' || ev.type == 'panright' ){
el_carousel.carousel('prev')
}
});
})
}
根本上一切的内容就这些了，写的比拟粗糙，最近几天没什么精神，假如有不太分明的中央还请见谅。
感谢您的来访，获取更多精彩文章请收藏本站。
© 版权声明
本站网络名称：
孤勇者社区
本站永久网址：
https://www.gyzsq.com
网站侵权说明：
本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ324470778删除处理。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
喜欢就支持一下吧
相关推荐
评论 共1条
欢迎您留下宝贵的见解！
- 最新
- 最热
只看作者