现在位置: 首页 > 程序设计 > 正文
A+

给自己的主题首页添加幻灯片功能

6个月前 程序设计 497 13

幻灯片这个功能其实对于博客来说可有可无,但大部分的主题有了之后会给主题增加更多的是美感,且博主认为重要的文章可以放在幻灯片里提供给读者快捷浏览,所以我给我的主题也增加了这个功能。

说到首页的幻灯片,我刚开始装的是ml-slider插件,这个插件功能非常强大,也非常好用,集成在我的主要里也没有什么违和感,但无奈插件体积太大,对于我这种小空间来说还是能省则省吧。

那么怎样在不用插件的情况想给自己的主题增加此功能呢,我最初在网上找了大量的教程,但感觉都没有一个完整的教程,所以我只能通过摸索自己去写这些代码!

要添加幻灯片不能没有后台功能的配合,所以我经过网络的筛选,选择了阿树工作室提供的Framework框架来给后台增加幻灯片的自定义板块。

首先去阿树工作室下载最新的Framework框架。

他的博客里有详细的使用教程,建议多研究一下这个框架,很好用,且有非常大的扩展空间。

下载好框架后把整个文件叫拷贝到你主题的任何一个目录都可以,当然你也可以更改文件夹或者文件的名称,只要到下面步骤的时候填写正确就可以了!

在主题的任意位置新建一个PHP文件,展开,把代码拷贝进去!展开

在主题跟目录找到function.php文件,把下面的代码放进去,记住Framework框架一定要在前面。

  1. //framework框架
  2. require?get_template_directory()?.?'/inc/framework/ashuwp_framework_core.php';
  3. //?幻灯片
  4. require?get_template_directory()?.?'/inc/functions/feng_slider.php';

注意:/inc/framework/ashuwp_framework_core.php;? 路径和inc/functions/feng_slider.php路径和文件名称替换成你自己修改过的,我的这个路径是自己修改的!

如果以上步骤都操作正确的话,进入后台就可以看到你的幻灯片这个自定义板块了,先添加几个内容进去,等一下可以方便调试!

既然后台添加完了,现在要着手解决的是怎么把这些你添加的内容显示在前端首页!

在主题的任意位置新建一个PHP文件,把以下代码添加到文件里保存:展开

找到主题根目录下的index.php文件,在适当的位置加入以下代码!

主题代码里面的inc/slider路径是你刚刚新建文件的路径,我这边新建的文件名是slider,且这个文件在inc的目录下!

如果你要在后台添加一个开关的话代码是:

当然这段代码就要根据自己主题的后台代码去更改了,如果没有完全可以忽略!

下面就是添加JS文件了,首先你的主题要引用jquery库,不管你用什么方式,反正一定要有。

然后下载本页最后的JS文件添加到主题的js目录里去。

打开function.php文件,添加一下代码:

接下来就是css样式了,这种东西每个人的需求不同,所以我把我的CSS样式发出来提供大家参考!

最后,现在刷新你网站的首页,应该就有幻灯片了,至于效果就看看我首页的幻灯片效果吧!

提取码:seku

发表评论

评论列表 ( 有 497 次浏览 和 13 条评论 其中 访客有 7 条 博主有 6 条 )
搜索