Day 17 用 WordPress 製作投影片輪播 (slider) 效果

第 12 屆 iThome 鐵人賽

DAY 17

自我挑戰組

WordPress 客製化從 0 開始系列第 17 篇

12th鐵人賽 slick wordpress carousel slider

Eric 桓桓

2020-09-18 23:24:44

2974 瀏覽

分享至

大家好，我是 Eric。

今天來跟大家分享社群上詢問度相當高的主題：投影片輪播 (slider/carousel)。

為什麼學投影片輪播？

許多業主喜歡向廠商提出投影片輪播的製作需求，最主要的原因，除了認為「比較漂亮」外，也認為這樣可以增加使用者瀏覽的趣味性。
但投影片輪播在沒有經過妥善的設計、規劃下，對使用者體驗很不友善：在行動裝置有限的空間裡，要去判斷使用者是點擊，還是捲動投影片，都需要事先思考過。儘管目前的投影片輪播函式庫都對行動裝置做了最佳化調校 (optimization 翻成「優化」是錯譯)，但投影片輪播的真正問題，還是因為欠缺完整規劃，造成差勁的使用者體驗。
下方的延伸閱讀提供了對投影片輪播的不同論點。值得注意的是，底下「反對『反對投影片輪播』」的文章，便是由 WordPress 的投影片輪播外掛開發商所寫，因此更可以了解「在什麼情況下，你還是可以用投影片」。

引用函式庫

今天，我們要使用的函式庫是名為 Slick 的投影片輪播函式庫。關於 Slick 支援的輪播樣式，可以參考該專案的示範網頁。
首先，我們一樣要引用函式庫：

function eric_enqueue_slick(){
    wp_enqueue_script( 'slick', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery') );
    wp_enqueue_style( 'slick-default-style', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css' );
    /** 這個檔案主要是用來存放接下來提到的時間軸 */
}
add_action( 'wp_enqueue_scripts', 'eric_enqueue_slick' );

Slick 基本操作

Slick 是一款相依於 jQuery 的函式庫，我們在示範網頁中可以看到，它使用的基本語法如下：

<div class="slick">
    <div id="slide1">這是第一個</div>
    <div id="slide2">這是第二個</div>
    <div id="slide3">這是第三個</div>
</div>

$('選擇器').slick({ //以上面的 HTML 為例 $('.slick')
    屬性: 屬性值,
    屬性2: 屬性值2
});
/** 在 WordPress 當中的寫法 */
jQuery('選擇器').slick({
    屬性: 屬性值,
    屬性2: 屬性值2
});

這裡簡單介紹常用的屬性與屬性值：

回應式設計

如果使用 responsive 這個屬性，可以用下列的方法，針對不同的裝置斷點 (break point) 指定不同的屬性值：

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: "unslick"
    }
    // 可以在特定的裝置斷點使用 settings: "unslick" 這個屬性，
    // 停用 slick 效果。
  ]
});

上述的範例，可以於這個 CodePen 預覽實際效果 (因為 CSS 樣式載入不完全，所以呈現的樣貌與範例網站有落差。這個 CodePen 主要是要示範各螢幕斷點顯示的投影片數)。

其他解決方案

如果對於自訂投影片輪播有興趣的話，可以嘗試其他投影片的函式庫，例如 Owl Carousel 的分支版本 Tiny Slider 或是同樣相依於 jQuery 的 bxSlider。
除了自行製作投影片輪播的效果外，WordPress 也提供許多相關外掛給網站站長使用。譬如延伸閱讀提到的投影片輪播開發商 Smart Slider 3，便提供了視覺化的介面，讓站長能夠簡單的打造回應式的投影片輪播。Meta Slider 也是相當知名的投影片輪播外掛。如果想要使用 Slick 的函式庫，除了 Slick 的開發者自行提供的付費外掛外，也可以參考 WP Slick Slider and Image Carousel。

結語

今天介紹的投影片輪播，一直是 WordPress 詢問度相當高的外掛類型。然而對於想要使用投影片輪播功能的開發人員來說，如何適當的規劃投影片輪播的使用者經驗，必須妥善安排，否則投影片輪播反而會害使用者無法專注於想要達成的目標，也無法吸引使用者採取預期的行動。

本次鐵人賽介紹的個函式庫算是實用範圍比較廣泛的函式庫，儘管網路上還有各種不同的函式庫，但關於函式庫就先介紹到這裡。下一章，我們將進一步來介紹非同步處理 (Asynchronous)。

WordPress 客製化從 0 開始系列 第 17 篇