今天找到了一篇好文章,關於如何把 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 是不合理的。