在 B2B 独立站（如机械设备类）的产品详情页中，展示“应用场景”能有效帮助客户对号入座，提升询盘转化率。本文将详细说明如何使用 WordPress 的 ACF（Advanced Custom Fields）插件与自定义短代码，实现后台富文本录入、前台背景图与遮罩层渲染、整个卡片可点击跳转，且支持自动适应列数（PC 端填几个铺满几个，移动端强制两列）的完整流程。

一、后台配置 ACF 字段组

为了让编辑人员可以灵活上传图片、输入标题、副标题以及添加链接，我们需要在 ACF 中创建一个包含富文本编辑器的组字段。

  1. 进入 WordPress 后台，点击 ACF > 字段组 > 添加新建。
  2. 标题 填写：Applications （此处为字段组名称）。
  3. 点击 添加字段：
    • 字段标签：Application
    • 字段名称：lier_applications
    • 字段类型：选择 Group（组）。
  4. 在 Group 字段下，点击 添加字段 创建子字段。子字段必须全部为 WYSIWYG 编辑器（富文本编辑器），建议建立 4 个，名称分别如下：
    • 字段 1：application_scenarios_one
    • 字段 2：application_scenarios_two
    • 字段 3：application_scenarios_three
    • 字段 4：application_scenarios_four
  5. 保存字段组，并在 位置规则 中设置显示于 文章类型 = 产品 (Product)。

二、后台内容录入规范

在编辑具体产品时，应用场景的录入方式直接影响前端的呈现效果。在每个 WYSIWYG 编辑器中，请按以下顺序操作：

  1. 点击 Add Media（添加媒体），插入一张场景图。
  2. 敲击回车，输入场景的标题（如 Seafood Processing），并可以在编辑器中将其设为标题（H3 或 H4）。
  3. 敲击回车，输入场景的副标题或简短描述。
  4. 添加链接（可选）：选中需要加链接的文字，点击添加链接，填入目标 URL。
    • 注意：只要这个富文本区域内包含一个 <a> 标签，前端程序就会自动提取该链接，使整个卡片都变为可点击状态。如果没有添加链接，卡片则不可点击。

三、添加 PHP 短代码代码

将以下代码添加到当前主题的 functions.php 文件末尾。此代码会自动解析富文本内容，提取第一张图片作为背景图，并自动判断有效填写的场景数量，从而动态分配列数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// =========================================================================
// 2. 短代码：【应用场景】卡片网格展示 (支持自动提取图片、背景遮罩、响应式列数)
// 用法：[lier_app_scenarios group="Applications" group_name="lier_applications" columns="4"]
// =========================================================================
if ( ! function_exists( 'lier_app_scenarios_shortcode' ) ) {
    function lier_app_scenarios_shortcode( $atts ) {
        $atts = shortcode_atts(
            array(
                'group'      => 'Applications',      
                'group_name' => 'lier_applications', 
                'post_id'    => false,
                'columns'    => '', // 默认留空，代表自动计算
            ),
            $atts,
            'lier_app_scenarios'
        );

        $post_id = $atts['post_id'] ? $atts['post_id'] : get_the_ID();
        if ( ! $post_id ) return '';

        $group_data = get_field( $atts['group_name'], $post_id );
        if ( empty( $group_data ) || ! is_array( $group_data ) ) return '';

        $output_items = '';
        $valid_count = 0; // 统计有效填写的场景数量

        foreach ( $group_data as $key => $content ) {
            if ( empty( $content ) ) continue;
            
            $valid_count++; // 找到一个有效内容，加1

            // 1. 提取第一张图片
            $bg_image = '';
            if ( preg_match( '/<img.*?src=["\'](.*?)["\']/i', $content, $matches ) ) {
                $bg_image = $matches[1];
            }

            // 2. 提取链接
            $link_start = '';
            $link_end = '';
            if ( preg_match( '/<a.*?href=["\'](.*?)["\'].*?>/i', $content, $link_matches ) ) {
                $url = $link_matches[1];
                $link_start = '<a href="' . esc_url( $url ) . '" class="lier-scenario-card" target="_blank">';
                $link_end = '</a>';
            } else {
                $link_start = '<div class="lier-scenario-card no-link">';
                $link_end = '</div>';
            }

            // 3. 清理文本
            $text_content = preg_replace( '/<img[^>]+>/i', '', $content ); 
            $text_content = preg_replace( '/<a[^>]+>(.*?)<\/a>/is', '$1', $text_content );
            $clean_text = wp_kses_post( $text_content );

            // 4. 组装 HTML
            $output_items .= $link_start;
            if ( $bg_image ) {
                $output_items .= '<div class="lier-scenario-bg" style="background-image: url(' . esc_url( $bg_image ) . ');"></div>';
            } else {
                $output_items .= '<div class="lier-scenario-bg" style="background-color: #334155;"></div>';
            }
            $output_items .= '<div class="lier-scenario-overlay"></div>';
            $output_items .= '<div class="lier-scenario-content">' . $clean_text . '</div>';
            $output_items .= $link_end;
        }

        if ( empty( $output_items ) ) return '';

        // 【核心逻辑】判断列数
        if ( empty( $atts['columns'] ) ) {
            // 如果用户没有设置 columns，则根据有效数量自动决定列数 (最大4列)
            $cols = min( $valid_count, 4 );
        } else {
            // 如果用户设置了，就使用用户设置的
            $cols = $atts['columns'];
        }

        // 返回外层容器，带上 data-cols 属性，并且在 style 里直接写入 grid-template-columns 作为备用
        return '<div class="lier-scenarios-wrapper" data-cols="' . esc_attr( $cols ) . '">' . $output_items . '</div>';
    }
}
add_shortcode( 'lier_app_scenarios', 'lier_app_scenarios_shortcode' );

四、添加 CSS 样式

将以下样式添加到 Avada 的 Options -> Custom CSS 中。CSS 使用了 grid-template-columns 配合媒体查询，确保电脑端按指定列数或自适应数量展示，手机端则强制变为两列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/* 容器基础 */
.lier-scenarios-wrapper {
    display: grid;
    gap: 20px; 
    width: 100%;
    margin: 30px 0;
}

/* 根据 data-cols 属性动态设置 PC 端列数 */
.lier-scenarios-wrapper[data-cols="1"] { grid-template-columns: 1fr; }
.lier-scenarios-wrapper[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.lier-scenarios-wrapper[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.lier-scenarios-wrapper[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

/* 移动端强制两列 (屏幕宽度小于 768px 时) */
@media (max-width: 768px) {
    .lier-scenarios-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px; 
    }
}

/* 极小屏幕单列 */
@media (max-width: 480px) {
    .lier-scenarios-wrapper {
        grid-template-columns: 1fr !important;
    }
}

/* 卡片样式 */
.lier-scenario-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3; 
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none !important;
    color: #ffffff !important; 
    transition: all 0.4s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.lier-scenario-card:not(.no-link) {
    cursor: pointer;
}

/* 背景图 */
.lier-scenario-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    z-index: 1;
}

.lier-scenario-card:hover .lier-scenario-bg {
    transform: scale(1.08);
}

/* 渐变遮罩 */
.lier-scenario-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
    z-index: 2;
    transition: opacity 0.3s ease;
}

.lier-scenario-card:hover .lier-scenario-overlay {
    opacity: 0.8; 
}

/* 文字内容 */
.lier-scenario-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    z-index: 3;
    box-sizing: border-box;
}

.lier-scenario-content h1,
.lier-scenario-content h2,
.lier-scenario-content h3,
.lier-scenario-content h4 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 5px 0;
    padding: 0;
    line-height: 1.2;
}

.lier-scenario-content p {
    color: #e2e8f0; 
    font-size: 14px;
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

五、前台短代码的使用方法

代码添加完毕后，你可以在页面的短代码区块（或 Avada 的 Code Block 中）灵活调用。

1. 自动铺满（推荐，最智能）
不填写 columns 参数。如果后台填了 3 个场景，PC 端就会自动生成 3 列铺满；填了 4 个就会生成 4 列铺满。

1
[lier_app_scenarios group_name="lier_applications"]

这个里面的name里面的就是你在ACF里面添加的自定义字段组的name，不是label。

2. 强制指定列数
如果后台只填了 3 个，但你希望在 PC 端展示为 4 列（第四个留空），可以通过指定 columns 参数强制控制。

1
2
3
[lier_app_scenarios group_name="lier_applications" columns="4"]
[lier_app_scenarios group_name="lier_applications" columns="3"]
[lier_app_scenarios group_name="lier_applications" columns="2"]