Day 24 WordPress 客製化取用資料的基本手段：迴圈 (loop)

第 12 屆 iThome 鐵人賽

DAY 24

自我挑戰組

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

12th鐵人賽 wordpress php loop

Eric 桓桓

2020-09-25 23:34:24

1719 瀏覽

大家好，我是 Eric。

在前兩天的文章中，我們分別提到了自訂內容類型 (custom post type) 與自訂欄位 (custom fields) 的作法。今天，我們要把這兩邊的功能整合起來，透過迴圈 (loop) 的機制，讓 WordPress 可以顯示我們自訂的資料。

迴圈的基本語法

關於迴圈的說明，可以參考各種不同的程式語言，W3schools 對 PHP 的迴圈也有詳細的介紹與實作，建議對迴圈還沒有概念的人可以先試玩看看。

WordPress 迴圈的作法十分白話，我們可以從 Twenty Twenty 的 index.php 中的第 81 行看到：

/* index.php Line 81 */
while ( have_posts() ) {
    /* 省略第 82 到 85 行，非本次討論範圍 */
    the_post();

    get_template_part( 'template-parts/content', get_post_type() );

}

用白話來說，就是：

當目前的查詢還有文章的時候 (while ( have_posts() ))，把文章叫出來 (the_post();)，
並用 template-parts/content-{內容類型}.php 的方式呈現 HTML 的樣貌。
(get_template_part( 'template-parts/content', get_post_type() );)

當我們首次安裝完 WordPress 後，呈現出來首頁的就是透過上述的迴圈來完成的。

迴圈的進階應用：用 WP_Query 自訂查詢

如果說我們要在頁面中使用第二個迴圈，譬如我們要顯示投影片輪播，或是自訂 FAQ 的時候。那該怎麼辦呢？
很簡單，我們自己開啟一個新的查詢就可以了。但是，要記得，我們要提供自訂查詢不同的關鍵字 (引數，arguments)，才能準確查到我們要的東西。

自訂查詢的基本語法如下：

$args = array(
    '屬性名稱'    => '屬性值',
    '屬性名稱 2'  => '屬性值 2',
);
$my_query = new WP_Query( $args );

/* 自訂查詢的迴圈 */
if ( $my_query -> have_posts() ) {
    while ( $my_query -> have_posts() ) {
        $my_query -> the_post();
        
        /* 這裡可以用 get_template_part 取用範本，或是直接寫 HTML */
        get_template_part( 'template-parts/content', get_post_type() );
    }
    
} else {
    /* 自訂查詢無資料 */
}
/* 每次做完自訂查詢，記得要清除，才不會出現未預期的錯誤。 */
wp_reset_postdata();

這邊列出幾個常用的引數，其他詳細的引數可以參考官方的〈WP_Query〉一文。

實作：透過自訂內容類型來打造投影片輪播

還記得我們在第 17 天曾經提過的投影片輪播嗎？今天我們就來透過自訂內容類型 + 自訂欄位 + 自訂查詢來動手做一次自己的首頁投影片輪播吧。

建立自訂內容類型 (custom post type)

首先，透過外掛 CPT UI 建立一個名為 Slide 的自訂內容類型，只需要支援 Title 與 Featured Image 就夠了。或者你也可以透過第 22 天的方式，在子佈景主題的 functions.php 中，新增自訂內容類型的程式碼片段。

建立自訂欄位 (custom fields)

透過外掛 ACF 建立一個名為 Slide Options 的欄位群組 (Field Group)，在裡面新增一個名為 URL 的文字欄位。並選擇在內容類型 (Post Type) 為 Slider 的時候顯示。

建立自訂查詢

接著，我們在子佈景主題中的 index.php 中 (以根據 Twenty Twenty 製作的子佈景主題為例)，找到內容的開始處，在第 20 行，新增下列程式碼：

/* index.php Line 20 */
<main id="site-content" role="main">
    <?php
    if ( is_front_page() ) { // 只要在靜態首頁顯示。
        $args = array(
            'post_type'       => 'slide',
            'posts_per_page'  => 3,
        );
        $my_query = new WP_Query( $args );
        if ( $my_query -> have_posts() ) { // 如果有 slide 的話，才會建立輪播 ?>
        <div class="slick-slider" id="home-slider">
        <?php
            while ( $my_query -> have_posts() ) {
                $my_query -> the_post();
                $url = get_field( 'url' ) ? get_field( 'url' ) : '#';
            ?>
            <div id="slide-<?php echo get_the_ID(); ?>">
                <a href="<?php echo $url; ?>" target="_self">
                    <?php echo get_the_post_thumbnail( get_the_ID(), 'full' ); ?>
                </a>
            </div>
            <?php
            }
        ?>
        </div><!-- .slick-slider -->
        <?php
        }
    }
    ?>
    /* 以下是原本的程式碼 */
	<?php

	$archive_title    = '';
	$archive_subtitle = '';

透過 jQuery 讓投影片輪播發生作用

上述的準備做完後，我們就可以引用我們的 JavaScript 函式庫，並啟用動態效果了。
我們先到子佈景主題的 functions.php 或 Code Snippets 外掛中，引用 Slick 的函式庫：

function eric_enqueue_slick() {
    if ( is_front_page() ) {
        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 的特效：

function eric_slick_init() { 
    if ( ! is_front_page() ) {
        return;
    } else {
    ?>
        <script>
            ( function( $ ){
                $( document ).ready( function() {
                    $( '.slick-slider' ).slick();
                });
            })( jQuery );
        </script>
    <?php
    }
}
add_action( 'wp_footer', 'eric_slick_init' );

結語

到這篇為止，我們可以說將 WordPress 客製化會需要的所有基礎工具都介紹完了。從上述的作法中，我們可以看到，所謂的客製化，就是將前面所提過的各種概念透過拼湊的方式，融合成一個功能。
而因為 WordPress 已經有相當龐大的社群，替大部分的客製化功能都建立了相當實用的外掛，因此我們在客製化網站的過程中，其實只需要透過嘗試不同外掛，了解不同外掛的優勢與限制後，透過不同外掛的排列組合，一樣可以實現強大的客製化功能。
接下來，我們將說明如何透過 WordPress 的「短代碼 (shortcodes)」機制，來針對特定外掛的功能，進行擴充的客製化。