这个功能是我参照 DUX 主题的首页焦点图改的,虽说是参照这个功能改的,但基本上代码属于重写了一遍。测试了几天目前并没有发现什么重大的问题,所以分享出来希望能帮助到有同样需要此功能的朋友们。值得注意的是功能的很多样式是采用了 bootstrap.min.css 文件中的样式,并且后台的设置选项是基于Options Framework 的,所以如果你的主题是采用的BootScript 与 Options Framework 框架,那么这个功能应该也是可以使用的。
好了,废话不多说。还是简单来说下实现的具体步骤。修改主题前还是希望大家备份一下将要修改的文件,以防不测!!!
新建 qgg_banner.php 文件
首先,新建一个名为 qgg_banner.php 的文件,并将如下代码丢到文件中去。注意该文件是实现此功能的核心文件,请务必保证代码的完整性,另外我后面会附上此次主题修改的全部文件以免大家复制代码过程中导致的失误。
复制保存完成后,将 qgg_banner.php 丢到主题的 modules 文件夹下即可。
添加后台控制选项
为了方便大家后台定义的时候更加灵活,我设置了一些变量用于控制各个选项,将以下代码添加到主题 options.php 文件中去:
添加代码后会在主题后台出现一个“蝈蝈Banner”的选项卡,通过这个选项卡我们即可实现首页Banner的自定义设置。
前段显示代码
添加完上述代码后,我们需要将以下代码添加到主题的 index.php 文件中去:
添加完成后可能前端并不能立即显示出来,我们需要后台保存一下设置后方可显示。
CSS 样式代码
直接添加完上述代码后前端显示效果可能并不如人意,我们需要添加一些 CSS 样式美化一下,由于该功能调用了一部分 bootstrap.min.css 的样式,这部分代码我们就不细说,大家只需要将以下代码添加到主题的 main.css 文件中去即可。
样式本身就是个多变的东西,可能我调整的样式并不能完全符合你的心意,内容的获取代码上面已经有了,样式的话大家可以根据自己喜好自由调整。
JavaScript 滚动代码
关于滚动的 JS 代码,我沿用的是主题“首页焦点图”功能的滚动代码,在主题的 main.js 文件中,具体代码如下:
基本上所有的内容就这些了,写的比较粗糙,最近几天没什么精力,如果有不太清楚的地方还请见谅。