今天找到了一篇好文章,关于如何把 Wordpress 相册转换成幻灯片显示的文章,特此介绍如下:
Wordpress 相册的短代码自 2.5 版本就被介绍了,但是恕我直言,这个相册效果一点都不好看,要实现以上的效果,无需幻灯片插件即可实现,也就是说把这个整合到主题内。我将使用 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 是不合理的。