本文的重點是解決 WordPress 佈景貳零壹肆的特色內容(Featured )不能自動輪播的問題。
WordPress 3.9之後的版本,若安裝的佈景主題為:貳零壹肆 (Twenty Fourteen),將指定的文章的標籤(Tag)設為定特色內容(Featured ),或是將指定的文章置頂,然後在佈景主題的「自訂」將「特色內容」的版面選擇「輪播」,首頁會出現大型的幻燈片,但令人驚訝的是:必須用手動切換,不會自動播放! 用手動方式點按前進、後退的箭頭之後,幻燈片才會替換。
為了讓 Featured Content 幻燈片自動播放,在網上找到這篇文章,解決了這個問題。根據「冼大蔥」先生的說法:
這3.9版本的WordPress使用的幻燈片輪播程式是一個很好的幻燈內核,名為Flexslider。 只是WordPress在設計的時候,可能為了節省系統的消耗,把許多功能都置之一旁,只截取最基本的功能。結果,讓我們回到石器時代去過活。
要讓幻燈播放程式自動運作只需要兩個步驟:
一、建立一個 myautosliding.js 文件
將下列程式碼完整複製後,使用Notepad,或Notepad++之類的編輯器貼上,然後存為 myautosliding.js 檔案,再將此檔,使用 FTP 軟體上傳到 WordPress 安裝目錄下的 wp-content\themes\twentyfourteen\js 。
[code language=”javascript”]
jQuery(document).ready(function ($){
var timeOut = null;
var slidingPeriod = 3000;
//這裡的3000就是設定每張幻燈圖停留3秒。可以根據需要設定。
$(‘.featured-content .post-thumbnail img’).mouseover(function(e,simulated){
//what happen if you hover your mouse
if(!simulated){
clearTimeout(timeOut);
//if you don’t hover anymore
}
}).mouseout(function(e,simulated){
timeOut = setTimeout(autoAdvance, slidingPeriod);
});
// An autoslide function
function autoAdvance (){
// Simulated by a click on the next arrow.
$(‘#featured-content .slider-next’).trigger(‘click’,[true]);
// Setting delay in 7 seconds, as explained above
timeOut = setTimeout(autoAdvance, slidingPeriod);
}
autoAdvance();
});
[/code]
二、修改 functions.php,加上一段呼叫 myautosliding.js 的程式碼
從「控制台」找到:外觀>主題編輯器,編輯貳零壹肆佈景的 functions.php 檔案,在該檔案的最底下加上下列程式碼。注意要與原來的內容至少相隔一行空白。
[code language=”javascript”]
function my_autosliding_tf_child() {
if (!is_admin()) {
if (is_front_page()) {
wp_enqueue_script( ‘my_Autosliding’,
get_stylesheet_directory_uri() .
‘/js/myautosliding.js’, ”, ‘1.0’, true );
}
}
}
add_action(‘wp_enqueue_scripts’,
‘my_autosliding_tf_child’);
[/code]
這樣就完成了,享受自動播放幻燈片的功能吧!
真是太專業了
拔兄:
慚愧慚愧,在下對於 Javascript 不熟,是對岸的人夠專業,我只是轉述他的大作。
謝謝Steven兄非常專業的「引用」。在今時今日,引用了還特別註明來源和出處的做法,已經是鳳毛麟角了。
感恩。
另:更正您在回覆中的一處說法:「……是對岸的人夠專業……」,哈哈,我不是「對岸」的,也不是您這一「岸」的……