Twenty Fourteen 的輪播不會自動播放

slider本文的重點是解決 WordPress 佈景貳零壹肆的特色內容(Featured )不能自動輪播的問題。

WordPress 3.9之後的版本,若安裝的佈景主題為:貳零壹肆 (Twenty Fourteen),將指定的文章的標籤(Tag)設為定特色內容(Featured ),或是將指定的文章置頂,然後在佈景主題的「自訂」將「特色內容」的版面選擇「輪播」,首頁會出現大型的幻燈片,但令人驚訝的是:必須用手動切換,不會自動播放! 用手動方式點按前進、後退的箭頭之後,幻燈片才會替換。

featured_slider

為了讓 Featured Content 幻燈片自動播放,在網上找到這篇文章,解決了這個問題。根據「冼大蔥」先生的說法:

這3.9版本的WordPress使用的幻燈片輪播程式是一個很好的幻燈內核,名為Flexslider。 只是WordPress在設計的時候,可能為了節省系統的消耗,把許多功能都置之一旁,只截取最基本的功能。結果,讓我們回到石器時代去過活。

要讓幻燈播放程式自動運作只需要兩個步驟:

一、建立一個 myautosliding.js 文件

將下列程式碼完整複製後,使用Notepad,或Notepad++之類的編輯器貼上,然後存為 myautosliding.js 檔案,再將此檔,使用 FTP 軟體上傳到 WordPress 安裝目錄下的 wp-content\themes\twentyfourteen\js 。

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();

});

 

二、修改 functions.php,加上一段呼叫 myautosliding.js 的程式碼

從「控制台」找到:外觀>主題編輯器,編輯貳零壹肆佈景的 functions.php 檔案,在該檔案的最底下加上下列程式碼。注意要與原來的內容至少相隔一行空白。

edit_functions_php


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');

這樣就完成了,享受自動播放幻燈片的功能吧!

3 關於 “Twenty Fourteen 的輪播不會自動播放” 的評論

    • 拔兄:

      慚愧慚愧,在下對於 Javascript 不熟,是對岸的人夠專業,我只是轉述他的大作。

  1. 謝謝Steven兄非常專業的「引用」。在今時今日,引用了還特別註明來源和出處的做法,已經是鳳毛麟角了。

    感恩。

    另:更正您在回覆中的一處說法:「……是對岸的人夠專業……」,哈哈,我不是「對岸」的,也不是您這一「岸」的……

發表迴響