如何把WordPress相册转换成幻灯片显示

2012/04/25

今天找到了一篇好文章,关于如何把Wordpress相册转换成幻灯片显示的文章,特此介绍如下:
Wordpress相册的短代码自2.5版本就被介绍了,但是恕我直言,这个相册效果一点都不好看,例如在Twenty Eleven主题效果如下:

Gallery to Slideshow: Before
太普通了,是不是?因此需要改变,对不?让相册看上去像如下的效果:

要实现以上的效果,无需幻灯片插件即可实现,也就是说把这个整合到主题内。我将使用 Twenty Eleven主题为例实现以上效果。

用户对象

这篇教程的使用者,需要你具备 WordPress主题开发知识, HTML, PHP, CSS, 以及 Javascript 使用 jQuery框架。

需求

jQuery Cycle Plugin. 可从 jquery.malsup.com获取. 获取 ZIP格式,包含例子和代码。
随便一款WordPress 主题. 你可以到点金wordpress主题网下载任意一款主题即可。
步骤1: 目录结构改变

把下载下来的 jQuery Cycle Plugin解压,然后在主题目录下建立一个js文件夹,把 jquery.cycle.all.min.js 文件复制到js文件夹内. 重命名jquery.cycle.all.min.js 为jquery.cycle.js ,这主要是方便辨识.

接下来,在js文件夹下,创建一个文件gallery.js. 这个不会?使用记事本即可创建.

步骤2: 文件修改

打开 functions.php文件爱你,在 twentyeleven目录下. 插入下面的代码 (在 add_filter函数后面把类添加进 <body>标签).

function twentyeleven_enqueue() {
if (is_singular()) {
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-cycle', get_template_directory_uri() . '/js/jquery.cycle.js');
wp_enqueue_script('post-format-gallery', get_template_directory_uri() . '/js/gallery.js');
}
}
add_action('the_post', 'twentyeleven_enqueue');

为什么要使用条件语句,其目的就是组织没有必要的文件产生,如不是文章页.

接下来, 打开gallery.js 文件,在twentyeleven > js 下,就是刚才创建的. 插入如下代码。
function tutorial_create_slideshow() {
// Remove the HTML tags generated in the gallery.
jQuery('.single-format-gallery style').remove();
jQuery('.gallery br').remove();
// Wrap the gallery.
jQuery('.gallery').wrap('<div>');
// Add the slideshow controller.
jQuery('.gallery-wrap').append('<div id="slideshow-controller"><span id="jqc-pages"></span></div>');
// Add the controls.
jQuery('#slideshow-controller').prepend('<button id="jqc-prev" href="#">Prev</button>');
jQuery('#slideshow-controller').append('<button id="jqc-next" href="#">Next</button>');
jQuery('.gallery').cycle({
fx : 'fade',
speed : 1000,
timeout : 3000,
cleartypeNoBg : true,
activePagerClass : 'jqc-active',
pager : '#jqc-pages',
prev : '#jqc-prev',
next : '#jqc-next',
pause : true,
pagerAnchorBuilder: function (index,elem) {
return '<button id="jqc-button-' + index + '" value="' + index + '"><span>' + (index+1) + '</span></button>';
}
});
}
jQuery(document).ready(function() {
jQuery.noConflict();
tutorial_create_slideshow();
});

最后, 打开 style.css, 在 twentyeleven 下, 添加如下代码:
#content .gallery-wrap {
margin: 0 0 1.625em 0;
width: 100%;
}
#content .gallery {
margin: 0;
width: 100%;
}
#content .gallery-item {
width: 100%;
height: 300px;
position: relative;
}
#content .gallery-item .gallery-icon {
width: 100%;
height: 300px;
overflow: hidden;
}
#content .gallery-item .gallery-icon img {
border: 0 none;
padding: 0;
max-width: 100%;
}
#content .gallery-item .gallery-caption {
position: absolute;
top: 7px;
left: 7px;
padding: 1em;
background: rgba(255, 255, 255, 0.9) none;
max-width: 260px;
}

这个 CSS 代码你可以修改,如果有必要的话。

最后

为了让幻灯片相册正常起作用,你必须要插入相册,这个短代码应是像下面的:

[ gallery size=”large” ]

顺便提示:如果复制上面的代码,移去“ [ ”后和“]”前的空格. 设置size为 large 为了使幻灯片更具表现力。如果设置为 thumbnail是不合理的。

 

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注