为WordPress文章添加一个类似WooCommerce的相册功能需要涉及到WordPress插件开发或者通过自定义代码修改主题文件。以下是一个简化的步骤,介绍如何为WordPress文章添加一个基本的相册功能:

1. 创建相册自定义字段

首先,你需要在文章编辑页面添加一个自定义字段来保存相册的图片ID列表。

使用插件(推荐)

你可以使用Advanced Custom Fields这样的插件来轻松地添加自定义字段。

安装并激活Advanced Custom Fields插件。

创建一个新的字段组,并添加一个“图片”类型的字段,允许用户选择多个图片。

将此字段组关联到你的文章类型。

手动修改主题文件

如果你想手动实现,你需要编辑你的主题中的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. 在文章模板中显示相册

接下来,你需要在文章模板中显示这个相册。你可以通过编辑single.php或相关的模板文件来实现。

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. 测试你的相册

保存你的更改,并发布一篇带有相册的文章来测试你的功能。

注意事项

确保在编辑主题文件之前备份你的网站。

上述代码只是一个基本的示例,你可能需要根据你的需求进行调整。

考虑使用现成的WordPress插件,如Envira Gallery,它们提供了更多的功能和选项。