在電子商務網站上，有時我們需要將訪客從商品頁面導向到其他網站或頁面，例如合作夥伴網站、特定的促銷頁面等。這篇文章將介紹如何在 WooCommerce 中新增一個自定義功能，讓我們可以輕鬆管理商品頁面的重定向。
功能概述
我們將新增一個自定義欄位，讓網站管理員可以在 WooCommerce 的商品編輯頁面中設置重定向 URL，並加上一個選項來啟用或停用該重定向功能。此外，還會創建一個後台管理頁面，列出所有啟用了重定向的商品，方便管理。
實現步驟
1. 新增自定義欄位
首先，我們會在商品編輯頁面新增兩個自定義欄位：
- 重定向 URL：輸入希望訪客被導向的完整網址。
- 啟用重定向：打勾啟用該商品的重定向功能。
這樣，我們可以靈活地為不同的商品設置不同的重定向網址。
2. 設置自動重定向
當用戶訪問商品頁面時，我們將檢查該商品是否啟用了重定向功能。如果啟用了，則會自動將用戶導向到指定的重定向 URL。
3. 管理頁面
在網站後台，我們會新增一個「重定向管理」頁面，列出所有啟用了重定向的商品及其對應的 URL。這使得我們可以快速查看和管理所有設定了重定向的商品，進一步提升網站管理的效率。
完整代碼
以下是實現上述功能的完整代碼，將其添加到主題或子主題的 functions.php 文件中：
function add_redirect_url_functionality() {
// 添加自定義字段到產品編輯頁面
function add_custom_redirect_fields() {
echo '<div class="options_group">';
// 重定向 URL 輸入欄位
woocommerce_wp_text_input(
array(
'id' => '_custom_redirect_url',
'label' => __( '重定向 URL', 'woocommerce' ),
'placeholder' => 'http://example.com',
'desc_tip' => 'true',
'description' => __( '輸入要重定向的完整 URL。', 'woocommerce' )
)
);
// 啟用重定向選項
woocommerce_wp_checkbox(
array(
'id' => '_enable_custom_redirect',
'label' => __( '啟用重定向', 'woocommerce' ),
'description' => __( '勾選此項以啟用重定向。', 'woocommerce' ),
'desc_tip' => 'true',
)
);
echo '</div>';
}
add_action( 'woocommerce_product_options_general_product_data', 'add_custom_redirect_fields' );
// 保存自定義字段數據
function save_custom_redirect_fields( $post_id ) {
$custom_redirect_url = isset( $_POST['_custom_redirect_url'] ) ? $_POST['_custom_redirect_url'] : '';
$enable_custom_redirect = isset( $_POST['_enable_custom_redirect'] ) ? 'yes' : 'no';
update_post_meta( $post_id, '_custom_redirect_url', esc_url( $custom_redirect_url ) );
update_post_meta( $post_id, '_enable_custom_redirect', $enable_custom_redirect );
}
add_action( 'woocommerce_process_product_meta', 'save_custom_redirect_fields' );
// 在單一產品頁面加載時重定向
function redirect_to_custom_url() {
if ( is_product() ) {
global $post;
$enable_redirect = get_post_meta( $post->ID, '_enable_custom_redirect', true );
$redirect_url = get_post_meta( $post->ID, '_custom_redirect_url', true );
if ( $enable_redirect === 'yes' && ! empty( $redirect_url ) ) {
wp_redirect( esc_url( $redirect_url ) );
exit;
}
}
}
add_action( 'template_redirect', 'redirect_to_custom_url' );
// 添加管理頁面
function add_redirect_management_page() {
add_menu_page(
'重定向管理', // 頁面標題
'重定向管理', // 菜單標題
'manage_options', // 能力
'redirect-management', // 菜單 slug
'display_redirect_management_page', // 回調函數
'dashicons-admin-links' // 圖示
);
}
add_action( 'admin_menu', 'add_redirect_management_page' );
// 顯示重定向管理頁面
function display_redirect_management_page() {
?>
<div class="wrap">
<h1><?php _e( '產品重定向管理', 'woocommerce' ); ?></h1>
<table class="wp-list-table widefat fixed striped">
<thead>
<tr>
<th><?php _e( '產品名稱', 'woocommerce' ); ?></th>
<th><?php _e( '重定向 URL', 'woocommerce' ); ?></th>
<th><?php _e( '狀態', 'woocommerce' ); ?></th>
</tr>
</thead>
<tbody>
<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => -1,
'meta_query' => array(
array(
'key' => '_enable_custom_redirect',
'value' => 'yes',
'compare' => '='
)
)
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$product_id = get_the_ID();
$redirect_url = get_post_meta( $product_id, '_custom_redirect_url', true );
$enable_redirect = get_post_meta( $product_id, '_enable_custom_redirect', true );
echo '<tr>';
echo '<td>' . get_the_title() . '</td>';
echo '<td>' . esc_url( $redirect_url ) . '</td>';
echo '<td>' . ( $enable_redirect === 'yes' ? '啟用' : '未啟用' ) . '</td>';
echo '</tr>';
}
} else {
echo '<tr><td colspan="3">' . __( '目前沒有設定重定向的產品。', 'woocommerce' ) . '</td></tr>';
}
wp_reset_postdata();
?>
</tbody>
</table>
</div>
<?php
}
}
// 呼叫函數以初始化所有功能
add_redirect_url_functionality();
實用性與優勢
透過這個功能，我們可以輕鬆管理商品頁面的重定向，適用於以下情境：
- 跨站點銷售：導引訪客到其他網站進行購物。
- 促銷活動：將訪客導向特定的促銷頁面，提高銷售轉化率。
- 產品推薦：推薦相關產品或服務，增加收入來源。
希望這篇文章對你在 WooCommerce 中管理產品頁面的重定向有所幫助！