这个功能是我参照 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')
            }
        });
    })
}

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