现在的位置: 首页wordpress, 小技巧>正文
wordpress如何在网页插入图片轮播幻灯片
2013年03月08日 wordpress, 小技巧 暂无评论

如果想要网站漂亮好看,在网页插入幻灯片是不可少的,其实这样的插件很多,但有些同学E文不是很好,所以难免会有一些例外,另外要是wordpress主题不相容的话插件也不能用,在此介绍一个好的汉化幻灯插件WP flash img show。wp flash img show是一个flash图片幻灯片轮换wordpress插件,你可以利用它展示热门日志、艺术图片、商品、产品。通过改变用户设置,还可以用来做图片广告、宣传标语等等。请发挥创意。

安装插件:

步骤1. 用管理员身份登录后台,安装插件索WP flash img show安装,在“插件”选项内激活 “WP flash img show” 插件

步骤2. 在 ‘设置’ — ‘WP flash img show’ 设置图片地址和显示参数,这时候通过预览你可以看到效果

步骤3.(这里可以分2中添加方式,一种是HTML:方便而且那里都可以加,另一种是PHP代码:效果一样,也许加载会快一点。从v1.3版本开始,你可以直接在后台“WP flash img show”设置页面的预览下面找到并点击“获取代码”直接复制可用,可以免去自己改下面两种代码的麻烦了)

方法1: 把这句HTML代码复制到你的主题文件/文章/边栏小工具(文本小工具): <div id="wp_flash_img_show_here">wp_flash_img_show will diaplay here</div> , 用这样的代码显示你的自定义配置(替换 COMFIGNAME):<div id="wp_flash_img_show_here_COMFIGNAME">wp_flash_img_show will diaplay here</div>

方法2: 把这句PHP代码复制到你的主题文件中: <?php if (function_exists('wp_flash_img_show')) {wp_flash_img_show();} ?> 用这样的代码显示你的自定义配置(替换 COMFIGNAME): <?php if (function_exists('wp_flash_img_show')) {wp_flash_img_show('COMFIGNAME');} ?>

这里还有一些关于如何使用代码的例子(点击显示大图):

注意:要使插件正常运行确保你的主题模板文件中有一个 wp_head() 在 </head> 之前, 而且有一个 wp_footer() 在 </body> 标签之前(wp_footer()函数仅会影响使用HTML代码的情况), 否则很多插件无法使用,包括本插件(请手动添加到主题模板文件中).点击上面相应的链接有官方的说明以及自己添加这个标签到主题文件的教程。

以上全是中文设置估计大家都是会的。

不用插件实现图片轮播幻灯片方法如下:

第一步:下载所需文件

  我们需要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="<?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,可以在这个文件中修改其他样式。


分享到:



给我留言

留言无头像?