本教程提供完整的构建器设置、PHP 与 CSS 代码，教你用纯 CSS 在 Bricks Builder 里做出一个无限循环的 Logo 轮播——Logo 由 ACF 自定义字段驱动，之后改 Logo 完全不用动构建器。
环境要求
开始之前，请确保你的环境满足以下条件：
新建自定义文章类型
第一步是新建一个自定义文章类型（CPT），用来方便地添加/组织 Logo。实现方式有很多种，但作者不想多装插件，所以把 PHP 代码写进子主题。为了省事，可以用文章类型生成器，比如 https://generatewp.com/post-type/。
下面是粘贴到子主题 functions.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 字段里：
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）里：
.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 实现。
结论
按步骤全部配置正确的话，前端效果如下：
以后要改 Logo，完全不用动 Bricks 构建器——只要编辑自定义文章类型里的文章，所有跑查询循环的地方会自动更新。