用 ACF 和 Bricks 创建动态无限 Logo 轮播

“环境要求”

• text: “新建自定义文章类型”

• text: “配置自定义字段”

• text: “填充数据”

• text: “Bricks 中的 DOM 结构”

• text: “Bricks 设置”

• text: “CSS 动画”

• text: “结论”

— 本教程提供完整的构建器设置、PHP 与 CSS 代码，教你用纯 CSS 在 Bricks Builder 里做出一个无限循环的 Logo 轮播——Logo 由 ACF 自定义字段驱动，之后改 Logo 完全不用动构建器。 ## 环境要求 开始之前，请确保你的环境满足以下条件： - Bricks 1.5 beta 或以上版本

• Bricks 子主题

• ACF 免费版或 Pro 版 ## 新建自定义文章类型 第一步是新建一个自定义文章类型（CPT），用来方便地添加/组织 Logo。实现方式有很多种，但作者不想多装插件，所以把 PHP 代码写进子主题。为了省事，可以用文章类型生成器，比如 https://generatewp.com/post-type/。 下面是粘贴到子主题 functions.php 的最终代码： php // Register a Custom Post Type named Logos function bl_logos_custom_post_type() { $labels = array( 'name' => _x( 'Logos', 'Post Type General Name', 'text_domain' ), 'singular_name' => _x( 'Logo', 'Post Type Singular Name', 'text_domain' ), 'menu_name' => __( 'My Logos', 'text_domain' ), 'name_admin_bar' => __( 'Logo', 'text_domain' ), 'archives' => __( 'Item Archives', 'text_domain' ), 'attributes' => __( 'Item Attributes', 'text_domain' ), 'parent_item_colon' => __( 'Parent Item:', 'text_domain' ), 'all_items' => __( 'All Items', 'text_domain' ), 'add_new_item' => __( 'Add New Item', 'text_domain' ), 'add_new' => __( 'Add New', 'text_domain' ), 'new_item' => __( 'New Item', 'text_domain' ), 'edit_item' => __( 'Edit Item', 'text_domain' ), 'update_item' => __( 'Update Item', 'text_domain' ), 'view_item' => __( 'View Item', 'text_domain' ), 'view_items' => __( 'View Items', 'text_domain' ), 'search_items' => __( 'Search Item', 'text_domain' ), 'not_found' => __( 'Not found', 'text_domain' ), 'not_found_in_trash' => __( 'Not found in Trash', 'text_domain' ), 'featured_image' => __( 'Featured Image', 'text_domain' ), 'set_featured_image' => __( 'Set featured image', 'text_domain' ), 'remove_featured_image' => __( 'Remove featured image', 'text_domain' ), 'use_featured_image' => __( 'Use as featured image', 'text_domain' ), 'insert_into_item' => __( 'Insert into item', 'text_domain' ), 'uploaded_to_this_item' => __( 'Uploaded to this item', 'text_domain' ), 'items_list' => __( 'Items list', 'text_domain' ), 'items_list_navigation' => __( 'Items list navigation', 'text_domain' ), 'filter_items_list' => __( 'Filter items list', 'text_domain' ), ); $args = array( 'label' => __( 'Logo', 'text_domain' ), 'description' => __( 'A list of of partner\'s logos', 'text_domain' ), 'labels' => $labels, 'supports' => array( 'title' ), 'taxonomies' => array(), 'hierarchical' => false, 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'menu_position' => 5, 'show_in_admin_bar' => false, 'show_in_nav_menus' => false, 'can_export' => true, 'has_archive' => false, 'exclude_from_search' => true, 'publicly_queryable' => false, 'capability_type' => 'page', ); register_post_type( 'bl_logo', $args ); } add_action( 'init', 'bl_logos_custom_post_type', 0 ); 如果不想自己写 PHP，也可以用 CPT UI 这类插件，效果一样。 ## 配置自定义字段 进入 ACF，新建一个名为 Logos 的字段组，添加两个字段： - 图片字段 Logo Image（Logo 图片）

• 网址字段 Logo URL（Logo 链接） 记得把字段组关联到自定义文章类型 Logos 上。 ## 填充数据 接下来在自定义文章类型 Logos 里新建文章，上传 Logo 图片并填写链接。 如果字段组正确关联到了自定义文章类型，编辑文章时就能看到这两个字段： ## Bricks 中的 DOM 结构 CPT/ACF 部分搞定后，回到 Bricks 构建器创建 Logo 轮播。DOM 结构如下： - 一个总容器（div 元素）

• 一个轨道 track（div 元素）

• URL 容器（div 元素）——在这里应用查询循环

• Logo 图片（图片元素） ## Bricks 设置 逐个元素配置参数。 ### Logo 容器 创建一个类，命名为 logo-container。 这个容器不需要特殊样式，唯一要做的是把下面这段代码粘贴到它的 Custom CSS 字段里： css root, root > .logo-track{ display: grid; grid-auto-flow: column; grid-auto-columns: max-content; } ### Logo 轨道 跟容器一样，给元素加上 logo-track 类，保持默认样式即可。 ### Logo URL 这里才是 Bricks 魔法的主场！先给元素加 logo-url 类，然后开启查询循环（query loop）选项，选择自定义文章类型 Logos（见第二张截图）。 查询循环设置好之后，把 Link（链接）选项改为 Dynamic Data（动态数据），选择 ACF 字段 Logo URL。 再把 HTML 标签改成超链接（hyperlink）： 接着给 .logo-url 类加一些外边距： 然后应用下面的滤镜选项： - Brightness（亮度）设为 0

• Opacity（不透明度）设为 30

• Saturation（饱和度）设为 0 再给元素加一个 200ms 的 CSS transition。 ### Logo 图片 图片元素只需要把图片来源设为 ACF 字段 Logo Image，object-fit 设为 Contains（包含）。 另外希望所有 Logo 高度一致，切到样式面板把 Height（高度）设为 35px。 ### 复制轨道 所有设置完成后，需要复制 Track 元素。如果只有 5-6 个 Logo，复制一条轨道基本够用；但为了在大屏上也能铺满全宽，建议复制两份。 最终 DOM 结构： ## CSS 动画 最后一步，把下面的 CSS 加到页面设置（page settings）里： css .logo-track { animation: 20s infiniteScroll linear infinite; } .logo-container:hover .logo-track{ -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .logo-url:hover { filter: none; } @keyframes infiniteScroll { 100%{ transform: translateX(-100%); } } 想调整轮播速度，改 20s 这个值就行——动画时长调大变慢，调小变快。 注意：logo-url:hover 的样式本来可以放进 Bricks 的 :hover 状态里，但因为 Bricks 1.5 beta 存在一个 bug，作者决定用纯 CSS 实现。 > 相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

结论 按步骤全部配置正确的话，前端效果如下： 以后要改 Logo，完全不用动 Bricks 构建器——只要编辑自定义文章类型里的文章，所有跑查询循环的地方会自动更新。

常见误区

几个坑：一是 Logo 用原图不限制尺寸、客户端硬缩，大图拖慢轮播，上传时统一压到合适宽度；二是无限循环靠复制一份列表实现，没处理无缝衔接会闪一下，按本文的复制逻辑做；三是以后加 Logo 只改 ACF 文章、别回构建器，本文已帮你解耦。Logo 轮播适合客户/合作伙伴墙，数量别太多，太多加载重、视觉也乱。

延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

以后加 Logo 要动 Bricks 吗？ 不用，只要在 ACF 自定义文章类型里加文章、传图，所有跑 Query Loop 的地方自动更新。

大图会拖慢吗？ 会，上传时统一压到轮播需要的宽度，别让原图在前端硬缩。

无限滚动闪一下？ 检查复制列表/无缝衔接的逻辑，按本文做法让首尾衔接不跳帧。

Logo 数量多少合适？ 看版面，太多加载重且视觉乱，挑重要的客户/合作伙伴即可。

• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程