iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0
自我挑戰組

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

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

  • 分享至 

  • xImage
  •  

大家好,我是 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〉一文。

引數 | 引數值型別 | 說明
------+------+------
post_type | 字串 string | 自訂內容類型的名稱,如果是文章的話就是 'post'
posts_per_page | 整數 int | 每一頁顯示幾篇內容,預設是後台 [設定] 的數值。如果設為 -1,則會顯示全部內容。
p | 整數 int | 直接指定內容 ID。
post__in | 陣列 array | 指定多個特定內容 ID。
post__not_in | 陣列 array | 排除特定內容 ID。
category_name | 字串 string | 透過文章分類的代稱 (slug) 來查詢。

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

還記得我們在第 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)」機制,來針對特定外掛的功能,進行擴充的客製化。


上一篇
Day 23 WordPress 的自訂欄位 (custom fields)
下一篇
Day 25 WordPress 的短代碼 (shortcode) 機制與客製化
系列文
WordPress 客製化從 0 開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言