首页 » WP教程 » 主题教程 » 如何把WordPress相册转换成幻灯片显示

如何把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 代码你可以修改，如果有必要的话。