非插件方法实现WordPress 首页幻灯片

  假如你想让你的WordPress站点有CMS的气势气魄,首页幻灯片必定是必需的。实现WordPress首页幻灯片的插件有许多,好比D13Slideshow就很好用。但幻灯片往往是嵌入到主题中的,因此非插件大概会较量符合。

  这篇文章先容的要领是将Orbit幻灯片插件整合到WordPress主题中,Orbit是一款基于jquery的轻巧型幻灯片展示东西。本次先容的要领仅仅是幻灯片,并不能实现自动从WordPress中获取图片,想要添加或修改这个幻灯片的内容,你只妙手动修改代码。

  这个幻灯片的结果预览请到Orbit官网查察。

第一步:下载所需文件

  我们需要3个文件和一包图片,这三个文件包罗Orbit的js文件和CSS,尚有一个是jquery-1.5.1.min,假如你的主题中已经挪用了jquery,那么你大概不需要它。最后是一包图片,内里是幻灯片展示用到的一些图标。

下载地点:orbit-for-wordpress.zip (4)

下载完毕后请把这些文件上传到主题根目次下,好比/wp-content/themes/inove/

第二步:添加代码

  一般幻灯片只需要在首页显示,因此我们只需要修改主题的index.php文件(有些主题首页模板大概不是index.php)。

   打开index.php文件后,在需要添加幻灯片的处所加上以下代码:

<link rel="stylesheet" href=http://down.chinaz.com/"<?php bloginfo('template_url'); ?>/orbit-1.2.3.css">
<script type="text/javascript" src=http://down.chinaz.com/"<?php bloginfo('template_url'); ?>/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src=http://down.chinaz.com/"<?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=http://down.chinaz.com/"/1.jpg" />
<img src=http://down.chinaz.com/"/2.jpg" />
<img src=http://down.chinaz.com/"/3.jpg" />
</div>

代码说明:

1.以上代码中的<div id="featured">这句之后的即是要展示的图片,这里假设是url别离为1.jpg、2.jpg、3.jpg的3张图片,请按照需要修改,增加图片只需要另起一行再加个<img>标签即可。你也可以插手超链接,好比<a href="#"><img src="1.jpg"></a>。

2.第一行代码是加载jquery库,假如你的主题中已经加载了jquery,那么你可以将第一行删除。

3.所需要展示的图片最好是尺寸全都一致的。

第三步:修改幻灯片样式

  此时幻灯片应该已经乐成运行了,你此刻需要修改它的巨细及其他样式。打开第一步中上传的文件中的orbit-1.2.3.css,个中第二行和第三行就是幻灯片的高度和宽度,假如你分明CSS,可以在这个文件中修改其他样式。

  OK,大功告成!

WordPress下载:

WordPress v4.4.2 英文版下载

非插件要领实现WordPress 首页幻灯片

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/10382.html