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