MIS 腳印 logo

MIS 腳印

記錄 IT 學習的軌跡

WordPress Custom Fields 自訂欄位 for 客製專題系列文章

啟用 WordPress Custom Fields (自訂欄位) 結合 get_post_meta() 獲取文章設定的 key 與 value,在搭配 WP_Query 查詢關聯文章,即可於佈景主題客製【專題系列文章】功能。在將 Custom Fields 整合至管理介面文章列表,即可更好查看文章屬於哪個【專題系列】。

WordPress.ORG

WordPress 自訂欄位用途?

WordPress Custom Fields (自訂欄位) 可用來添加文章與頁面的其它資訊,例如本文要使用它來完成【客製專題系列文章】功能。

啟用 WordPress 自訂欄位

進入文章編輯後點擊【設定】並勾選【自訂欄位】。

這時文章最下面就會出現【自訂欄位】區塊。

客製專題系列文章

新增自訂欄位

編輯一篇要使用【專題系列】的文章後點擊【輸入新的欄位名稱】。

輸入下述資訊後點擊【新增自訂欄位】。

  • 【欄位名稱】key:自訂一個【專題系列文章】專用的名稱。
  • 【欄位內容】value:該文章屬於哪個【專題系列文章】。

新增自定欄位完成後點擊【儲存】或【更新】文章。

取得包含特定自訂欄位相關文章

程式碼的主要組成步驟如下:

  1. 使用 get_post_meta() 獲取當前文章【自訂欄位】key (名稱) 等於【專題系列文章】的第一個 value。
  2. 使用 WP_Query 查詢來獲取當前文章【自訂欄位】key 等於【專題系列文章】且 value 相同的文章,並依文章發佈日期舊到新排序。
  3. 比對是否為當前文章。

程式碼檔案路徑 /wp-content/themes/my-theme-name/template-parts/series-post.php (可依需求自行調整):

<?php
/**
 * 獲取專題系列文章
 */

// 獲取當前文章【自訂欄位】Key (名稱) 等於 '專題系列文章' 的第一個 value (值)
$metaValue = get_post_meta(get_the_ID(), '專題系列文章', true);

if ($metaValue) {
    // 儲存當前文章 ID (用來比對專題系列文章內是否為當前的文章)
    $current_post_id = get_the_ID();
    
    // 查詢參數
    $args = array(
        'meta_key'      => '專題系列文章',   // 【自訂欄位】key
        'meta_value'    => $metaValue,      // 【自訂欄位】value
        'orderby'       => 'post_date',     // 依文章發佈日期排序
        'order'         => 'ASC'            // 依 orderby 遞減排序
    );
    // 執行查詢
    $query = new WP_Query($args);

    while ($query->have_posts()) :
        $query->the_post();

        // 當前文章
        if ($current_post_id == get_the_ID()) {
            $tablist .= '<button type="button" class="list-group-item list-group-item-success text-left">' . get_the_title() . '</button>';
        // 其它文章
        } else {
            $tablist .= sprintf('<a href="%s" id="%s" class="list-group-item list-group-item-action" title="%s">%s</a>', esc_url(get_permalink()), basename(get_permalink()), the_title_attribute('echo=0'), get_the_title());
        }
    endwhile;

    wp_reset_postdata();

    // 如有存放資料在輸出
    if ($tablist) {
        echo '
            <div class="col-12 mt-5 mb-3">
                <strong>專題系列文章</strong>
                <div class="list-group list-group-flush mt-2">' . $tablist . '</div>
            </div>';
    }
}

使用 get_template_part() 將 series-post.php 加載到 /wp-content/themes/my-theme-name/single.php 模板中。

<?php
get_template_part('template-parts/series-post', get_post_format());

呈現畫面

本文章範例的【專題系列文章】有 6 篇,在當前文章時會呈現綠色背景且無超連結功用,點擊其它文章即可直接連結過去,下圖實際呈現的畫面與效果可參考 Python 基礎語法

客製管理介面文章列表欄位

客製專題系列文章完成後,為了能更好查看文章屬於哪個【專題系列】,我們需要能在管理介面的文章列表顯示【專題系列文章】欄位,並且呈現文章所設定的【自訂欄位】value。

目前管理介面文章列表所有顯示的欄位如紅框處。

添加欄位

添加【專題系列文章】欄位,並且呈現文章所設定的【自訂欄位】value,於 /wp-content/themes/my-theme-name/functions.php 添加下述程式碼:

<?php
/*
 * 後台管理介面 > 使用【自訂欄位】添加文章列表欄位
 */

// 添加管理介面文章列表顯示客製欄位名稱【專題系列文章】與【自訂欄位】key 的關聯
function fm_add_post_columns($defaults){
    // field vs displayed title
    $defaults['專題系列文章'] = __('專題系列文章');
    return $defaults;
}
add_filter('manage_posts_columns', 'fm_add_post_columns', 5);

// 呈現文章【自訂欄位】key 等於【專題系列文章】value
// Populate the new columns with values
function fm_get_post_column_values($column_name, $postID){
    if($column_name == '專題系列文章'){
        echo get_post_meta($postID, '專題系列文章', true);
    }
}
add_action('manage_posts_custom_column', 'fm_get_post_column_values', 5, 2);

己添加【專題系列文章】欄位。

移除欄位

如果想要移除已存在的欄位 (可參考 manage_posts_columns | Hook),例如移除【作者】欄位,於 /wp-content/themes/my-theme-name/functions.php 添加下述程式碼:

<?php
/*
 * 後台管理介面 > 移除文章列表不需要顯示的欄位
 */
function fm_remove_unwanted_columns($defaults){
    // 移除【作者】欄位
    unset($defaults['author']);
    return $defaults;
}
add_filter('manage_posts_columns', 'fm_remove_unwanted_columns');

已移除【作者】欄位。

參考

發表迴響