| 标题 | 分享不用插件实现WordPress首页幻灯片效果 |
| 内容 | 如果你想让你的WordPress站点有CMS的风格，首页幻灯片肯定是必须的。实现WordPress首页幻灯片的插件有很多，比如D13Slideshow就很好用。但幻灯片往往是嵌入到主题中的，因此非插件可能会比较合适。 这篇文章介绍的方法是将Orbit幻灯片插件整合到WordPress主题中，Orbit是一款基于jquery的轻巧型幻灯片展示工具。本次介绍的方法仅仅是幻灯片，并不能实现自动从WordPress中获取图片，想要添加或修改这个幻灯片的内容，你只能手动修改代码。 这个幻灯片的效果预览请到Orbit官网：/uploads/202504/02/载所需文件BR 我们需要3个文件和一包图片，这三个文件包括Orbit的js文件和CSS，还有一个是jquery-1.5.1.min，如果你的主题中已经调用了jquery，那么你可能不需要它。最后是一包图片，里面是幻灯片展示用到的一些图标。BR 下载地址：orbit-for-wordpress3231.zip （23） 下载完毕后请把这些文件上传到主题根目录下，比如/wp-content/themes/inove/ 第二步：添加代码 一般幻灯片只需要在首页显示，因此我们只需要修改主题的index.php文件（有些主题首页模板可能不是index.php）。 打开index.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"> <img src="/1.jpg" /> <img src="/2.jpg" /> <img src="/3.jpg" /> </div> 代码说明： 1.以上代码中的<div id="featured">这句之后的便是要展示的图片，这里假设是url分别为1.jpg、2.jpg、3.jpg的3张图片，请根据需要修改，增加图片只需要另起一行再加个标签即可即可。你也可以加入超链接，比如<a href="#"><img src="1.jpg"></a>。 2.第一行代码是加载jquery库，如果你的主题中已经加载了jquery，那么你可以将第一行删除。 3.所需要展示的图片最好是尺寸全都一致的。 第三步：修改幻灯片样式 此时幻灯片应该已经成功运行了，你现在需要修改它的大小及其他样式。打开第一步中上传的文件中的orbit-1.2.3.css，其中第二行和第三行就是幻灯片的高度和宽度，如果你懂得CSS，可以在这个文件中修改其他样式。 大功告成！ |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。