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

  • 时间:
  • 浏览:0
作者:匿名 hihi 来源:EinCy 浏览: 2011-11-22 14:58:00 字号:大 中 小

[摘要]实现WordPress首页幻灯片的插件有所以,但幻灯片往往是嵌入到主题中的,有随后非插件因为会比较最少,Orbit是一款基于jquery的轻巧型幻灯片展示工具,本文介绍的是将Orbit幻灯片插件整合到WordPress主题中。

  因为你想让人的WordPress站点有CMS的风格,首页幻灯片肯定是时需的。实现WordPress首页幻灯片的插件有所以,比如D13Slideshow就很好用。但幻灯片往往是嵌入到主题中的,有随后非插件因为会比较最少。

  这篇文章介绍的依据是将Orbit幻灯片插件整合到WordPress主题中,Orbit是一款基于jquery的轻巧型幻灯片展示工具。本次介绍的依据仅仅是幻灯片,暂且能实现自动从WordPress中获取图片,你要再加或修改这一幻灯片的内容,你里都能能 手动修改代码。

  这一幻灯片的效果预览请到Orbit官网查看。

第一步:下载所需文件

  大伙时需五个文件和一包图片,这有五个 文件包括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="<?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张图片,请根据时需修改,增加图片只时需另起一行再加个<img>标签即可。你也时需加入超链接,比如<a href="#"><img src="1.jpg"></a>。

2.第一行代码是加载jquery库,因为你的主题中因为加载了jquery,这麼让人将第一行删除。

3.所时需展示的图片最好是尺寸所以一致的。

第三步:修改幻灯片样式

  此时幻灯片应该因为成功运行了,你现在时需修改它的大小及某些样式。打开第一步中上传的文件中的orbit-1.2.3.css,其中第二行和第三行所以 幻灯片的深度和深度,因为你懂得CSS,时需在这一文件中修改某些样式。

  OK,大功告成!

WordPress下载:

本文转自:http://www.eincy.com/wordpress-orbit

sssss
Tags: WordPress   WordPress首页幻灯片   WordPress使用   WordPress技巧  
责任编辑:cc120