DUX 主题添加首页全屏Banner图

这个功能是我参照 DUX 主题的首页焦点图改的，虽说是参照这个功能改的，但基本上代码属于重写了一遍。测试了几天目前并没有发现什么重大的问题，所以分享出来希望能帮助到有同样需要此功能的朋友们。值得注意的是功能的很多样式是采用了 bootstrap.min.css 文件中的样式，并且后台的设置选项是基于Options Framework 的，所以如果你的主题是采用的BootScript 与 Options Framework 框架，那么这个功能应该也是可以使用的。

好了，废话不多说。还是简单来说下实现的具体步骤。修改主题前还是希望大家备份一下将要修改的文件，以防不测！！！

新建 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')
            }
        });
    })
}

基本上所有的内容就这些了，写的比较粗糙，最近几天没什么精力，如果有不太清楚的地方还请见谅。

取消

评论提交中...

昵称昵称(必填)
邮箱邮箱(必填)
ＱＱＱＱ(选填)
网址网址(选填)

#0

我的就调的挺好的！ :twisted:

AEMOM 5年前 (2019-08-24) 展开回复
#0

按照你文章的内容去添加，啥都没显示 :cry:

少年桑旭 6年前 (2019-03-22) 展开回复
- 应该可以用呀，我刚才开了下没问题啊！
  
  蝈蝈要安静 6年前 (2019-03-22) 展开回复
#0

DUX 主题添加首页全屏Banner图，手机不显示Banner图，电脑显示正常

果冻 6年前 (2019-01-19) 展开回复
- 手机端隐藏了，调下CSS就好。
  
  蝈蝈要安静 6年前 (2019-01-20) 展开回复
#0

这个能简单说下，怎么自适应么，调了好久感觉自适应挺难的

zhattyt 6年前 (2019-01-14) 展开回复
- 简单调下 CSS 应该就可以了。
  
  蝈蝈要安静 6年前 (2019-01-14) 展开回复
  - 哇，按钮不行啊，最后只能删掉一个按钮，感觉自适应的这种按钮还是挺困难的，padding参数全删了，哈哈
    
    zhattyt 6年前 (2019-01-14) 展开回复
#0

这个教程，老哥可以详细出个视频类的么，这个前端位置一直不好处理，导致各种问题不显示。

zhattyt 6年前 (2019-01-02) 展开回复
- 额，暂时不打算出视频教程，文章写的应该也算详细了。
  
  蝈蝈要安静 6年前 (2019-01-03) 展开回复