不用插件在wordpress中插入幻灯片
深圳网站建设网络工作室最近一直在研究wordpress中怎样插入带链接的幻灯片,其实网上的方法是有很多种,用插件是最简单易掌握的,但我们知道,如果wordpress如果插件用得太多,那么网页就刷新的很慢,这样用户的体验度就会降低,因此,能用代码实现的,最好不要用插件,这也是 深圳网站建设网络工作室一直要强调的。
下面进入正题:
首先要下载三个文件与一个图片包:点击下载orbit-for-wordpress.zip
下载后解压,将解压后的三个文件与一个图片文件夹上传到wordpress主题根目录。
然后将下面的代码复制到你要插入幻灯片的样式文件中,例如,你要在首页插入,就在index.php文件的适当位置插入代码,你要在顶部插入,就在header.php文件中插入代码,要在侧边栏中插入就要修改sidebar.php文件。
代码如下:
| <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/orbit-1.2.3.css"> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.orbit-1.2.3.min.js"></script> <script type="text/javascript"> $(window).load(function() { $('#featured').orbit(); }); </script> <div id="featured"> <a href="链接地址1"><img src="图片地址1"></a> <a href="链接地址2"><img src="图片地址2"></a> <a href="链接地址3"><img src="图片地址3"></a> </div> |
代码说明:
所要显示的图片要高,宽相同。
红色背景的代码就是你要插入图片的地址与图片的超链接地址,图片地址用相对路径(<?php bloginfo('template_url'); ?>/header/1.jpg),只需要将绿色背景修改为你要显示图片的位置即可,前面的代码是通用的,保持不变。
orbit-1.2.3.css 文件是修改幻灯片的样式文件,比如高度,宽度等,你们可以自己慢慢研究。
至此,就完成了wordpress的幻灯片制作,大家可以去试试,如有问题,可以留言。
本文是参考网上资料,由 深圳网站建设网络工作室编写,如内容有失误之处,请留言, 深圳网站建设网络工作室定会改正。