Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

[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 之如此好用的一項重要功能:短代碼。

*Post type 目前的通譯名稱為「文章類型」,但是 post 應為「內容儲存」的單位,因此這個網站將以「內容類型」稱之。

預設圖片
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料