Bricks 纯 CSS 无限滚动 Logo 墙：ACF + 自定义文章类型

客户/合作伙伴 logo 墙是外贸站标配。这篇教你用 ACF 自定义文章类型管 logo，再用纯 CSS 动画做无限横向滚动——不装轮播插件、不引 JS 库。

本文基于 BricksLabs 公开免费教程实译，代码完整可复用。原文：How to create a dynamic infinite logo slider with ACF and Bricks

需求与准备

• Bricks Builder
• ACF（高级自定义字段）
• 子主题 functions.php（注册 CPT 用）

步骤一：注册 Logos 自定义文章类型

在子主题 functions.php 注册一个 Logos CPT，方便集中管理 logo：

// 注册名为 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 Archi

步骤二：Bricks 里搭 Query Loop

在 Bricks 用 Query Loop 拉取 logos CPT，每个 logo 一张图，套在 .logo-track 容器里。

步骤三：纯 CSS 无限滚动

用 grid 自动列流 + keyframes 平移实现无限滚动：

root, root > .logo-track{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
}

.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%);
   }
}

悬浮暂停与小结

• hover 时 animation-play-state: paused 暂停滚动，方便用户看清
• 纯 CSS 方案性能优于 JS 轮播，移动端也流畅
• logo 用 ACF 集中管理，运营自己就能加

延伸阅读

• Bricks 表单生成器完整指南
• Query Loop 从 API 拉数据

站长

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.

获取报价 →浏览全部教程