[WordPress 筆記] Day 6 Advanced Custom Fields (下)

上一篇 Day 5 Advanced Custom Fields (上) 主要討論的是 ACF 的優點與基本取得資料的方法，這裡筆記一些我目前為止透過 ACF 實作過的小功能，未來有可能繼續增加。

一、結合 Repeater 與 Owl Carousel 製作客製化投影片輪播

大部分的外掛是透過新增內容類型 (post type) 的方式去管理投影片輪播，不過如果客戶的佈景主題會在每一頁都需要出現投影片輪播時，用自訂欄位的方式，在編輯時會更為直觀。

事前準備

在開始以前，先前往 Owl Carousel 的專案下載 CSS 樣式表與 JS 檔案。請注意，該專案已無維護，以下僅針對觀念進行說明，可以自行選用其他適合的投影片輪播函式庫。

使用欄位

Custom Fields 的條件，針對特定內容類型（如：商品、成效）顯示。建立欄位如下：

欄位名稱	（類型）說明
carousel_row	(Repeater) 用於儲存投影片輪播的資料。
carousel_image	(Image) 使用的圖片，選擇回傳陣列值 (array)。

<?php
/**
 * 先把必要的樣式與語法引入。
 */
add_action( 'wp_enqueue_scripts', 'custom_script_style' );
function custom_script_style(){
    wp_enqueue_style( 'owl-carousel-css', get_template_directory_uri()
        . '/assets/owl.carousel.min.css');
    wp_enqueue_style( 'owl-carousel-css-theme', get_template_directory_uri()
        . '/assets/owl.theme.custom.min.css' );
    wp_enqueue_script( 'owl-carousel-js', get_template_directory_uri()
        . '/js/owl.carousel.min.js', array('jquery') );
}
/**
 * 用 shortcode 的方法顯示自訂的投影片輪播
 */
add_shortcode( 'custom-slide', 'custom_slide' );
function custom_slide(){
    $output = '<div class="owl-carousel owl-theme" id="carousel">' ;
    while ( have_rows( 'carousel_row' ) ) : the_row();
        $img = get_sub_field( 'carousel_image' );
        $output .= '<div class="item"><img src="'
            . esc_url($img['url']) . '" alt="'
            . $img['alt']. '"><p>' . $img['caption'] . '</p></div>';
    endwhile;
    $output .= '</div>';
    return $output;
}

小結

以上是透過 ACF 與其他 WordPress 勾點，實現自訂小功能的方法。除了勾點外，本文中使用了 add_shortcode 這項功能，add_shortcode，顧名思義，就是新增短代碼的意思。接下來，我們就來談談讓 WordPress 之如此好用的一項重要功能：短代碼。