如何让 WordPress 页面使用不同布局与模板?

如何让 WordPress 页面使用不同布局与模板?

页面、文章或自定义文章详情需要不同布局时,先使用 WordPress 模板层级和页面模板;只有当编辑需要在后台选择有限的展示变体时,再加入 ACF 字段。不要把字段值直接拼进 include 路径。

方案一:模板层级

经典主题会按从具体到通用的顺序查找模板。例如:

single-product-special.php
single-product.php
single.php
singular.php
index.php

特定页面还可以使用 page-{slug}.phppage-{id}.php。这种方式适合“内容类型本身就决定布局”的场景,不需要额外字段。

方案二:可选择的页面模板

在经典主题 PHP 文件顶部声明:

<?php
/**
 * Template Name: Campaign Landing Page
 * Template Post Type: page
 */

编辑页面时即可从模板列表选择。模板名称属于主题公共界面,改名或删除前要检查已有页面引用。

方案三:ACF 选择有限布局

ACF Radio Button 配置

ACF Radio Button 可将保存值与后台文案分开:

default : 默认详情
landing : 营销落地页
download : 下载中心

模板中先做白名单校验,再加载固定片段:

<?php
$allowed_layouts = array(
    'default',
    'landing',
    'download',
);

$layout = (string) get_field( 'page_layout' );

if ( ! in_array( $layout, $allowed_layouts, true ) ) {
    $layout = 'default';
}

get_template_part(
    'template-parts/page/layout',
    $layout,
    array(
        'post_id' => get_the_ID(),
    )
);

文件结构:

template-parts/
└── page/
    ├── layout-default.php
    ├── layout-landing.php
    └── layout-download.php

白名单很重要。即使后台字段通常由可信编辑操作,也不应该让任意字符串决定服务器包含哪个 PHP 文件。

组合字段组织内容

ACF Group 配置

当每种布局需要一组专属字段,可以用 ACF Group 组织命名空间:

<?php
$hero = get_field( 'hero' );

if ( is_array( $hero ) ) {
    $title = isset( $hero['title'] )
        ? (string) $hero['title']
        : '';
    $image_id = isset( $hero['image'] )
        ? absint( $hero['image'] )
        : 0;
}

建议让图片字段返回附件 ID,再用 wp_get_attachment_image() 输出。不要假设组字段、图片数组和所有子键永远存在。

不同模板字段示例

什么时候用 Flexible Content

如果后台需要自由排序 Hero、图文、视频、表单等模块,ACF Flexible Content 比“几十个显示/隐藏字段”更合适。但仍应:

  • 限制允许的模块和嵌套深度。
  • 每种模块使用独立模板片段。
  • 为缺失字段提供可预期的空态。
  • 控制图片尺寸、视频来源和富文本允许标签。
  • 对最终组合做视觉回归和性能检查。

布局模块示例

页面效果示例

参考:WordPress Template HierarchyACF Radio ButtonACF Group

最后更新于

ihopeful Blog 由博主亲笔撰写,重要信息可放心引用。