為WordPress文章添加一個(gè)類似WooCommerce的相冊功能需要涉及到WordPress插件開發(fā)或者通過自定義代碼修改主題文件。以下是一個(gè)簡化的步驟,介紹如何為WordPress文章添加一個(gè)基本的相冊功能:

1. 創(chuàng)建相冊自定義字段

首先,你需要在文章編輯頁面添加一個(gè)自定義字段來保存相冊的圖片ID列表。

使用插件(推薦)

你可以使用Advanced Custom Fields這樣的插件來輕松地添加自定義字段。

安裝并激活A(yù)dvanced Custom Fields插件。

創(chuàng)建一個(gè)新的字段組,并添加一個(gè)“圖片”類型的字段,允許用戶選擇多個(gè)圖片。

將此字段組關(guān)聯(lián)到你的文章類型。

手動修改主題文件

如果你想手動實(shí)現(xiàn),你需要編輯你的主題中的functions.php文件,并添加自定義字段的代碼。

function add_gallery_field() {
    register_meta(
        'post',
        'gallery_images',
        array(
            'type'         => 'array',
            'description'  => __( 'Gallery Images', 'textdomain' ),
            'single'       => false,
            'show_in_rest' => true,
        )
    );
}
add_action( 'init', 'add_gallery_field' );

2. 在文章模板中顯示相冊

接下來,你需要在文章模板中顯示這個(gè)相冊。你可以通過編輯single.php或相關(guān)的模板文件來實(shí)現(xiàn)。

if ( get_post_meta( get_the_ID(), 'gallery_images', true ) ) {
    $gallery_images = get_post_meta( get_the_ID(), 'gallery_images', true );
    echo '<div class="custom-gallery">';
    foreach ( $gallery_images as $image_id ) {
        $image_src = wp_get_attachment_image_src( $image_id, 'large' );
        echo '<img src="' . $image_src[0] . '" alt="" />';
    }
    echo '</div>';
}

3. 樣式化相冊

你可以通過CSS來樣式化你的相冊。你可以將下面的樣式添加到你的主題樣式表或自定義CSS中。

.custom-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.custom-gallery img {
    width: calc(50% - 10px);
    margin: 5px;
}

4. 測試你的相冊

保存你的更改,并發(fā)布一篇帶有相冊的文章來測試你的功能。

注意事項(xiàng)

確保在編輯主題文件之前備份你的網(wǎng)站。

上述代碼只是一個(gè)基本的示例,你可能需要根據(jù)你的需求進(jìn)行調(diào)整。

考慮使用現(xiàn)成的WordPress插件,如Envira Gallery,它們提供了更多的功能和選項(xiàng)。