You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

WordPress区块主题:网站编辑器如何为各页面设置不同英雄头部?

WordPress块主题给不同页面设置独立Hero Header的方法

方法一:模板部件+条件显示(官方原生无插件方案)

  • 先在网站编辑器→模板→模板部件里,创建好你需要的多个Header模板部件(比如你说的Header 2、Header 3)
  • 打开要自定义头部的单个页面(比如联系页)编辑界面,点击顶部「编辑站点」进入页面专属的网站编辑模式
  • 找到页面上的Header区块,点击工具栏的「替换」按钮,选择对应页面要用的Header模板部件
  • 替换完成后,在右侧区块设置面板的「高级」选项里,找到「条件」设置,选择「仅应用于当前页面」并保存,这个页面就会单独使用该Header

方法二:创建页面专属模板

  • 进入网站编辑器→模板,点击「添加新模板」
  • 在选项里选「页面」,然后从列表中挑出目标页面(比如关于页),生成该页面的专属模板
  • 在这个专属模板里,把默认Header替换成对应模板部件,保存后该页面会自动加载这个专属模板的Header,不会和其他页面冲突

方法三:自定义字段+代码片段(适合有开发基础的用户)

  • 编辑目标页面时,打开右上角「选项」面板,勾选「自定义字段」,添加一个字段(比如命名为custom_header),值填对应Header模板部件的名称(比如header-about)
  • 在主题的functions.php文件中添加以下代码:
add_filter( 'block_theme_settings', 'custom_page_header' );
function custom_page_header( $settings ) {
    if ( is_page() ) {
        $custom_header = get_post_meta( get_the_ID(), 'custom_header', true );
        if ( ! empty( $custom_header ) && wp_get_template_part( 'parts/header', $custom_header ) ) {
            $settings['header'] = 'parts/header-' . $custom_header;
        }
    }
    return $settings;
}

你之前的操作误区在于:块主题的Header模板部件不能直接批量分配页面,而是要通过「页面专属编辑」或「专属模板」来绑定,和经典主题逻辑不同——不是在Header模板里选页面,而是在页面/页面模板里选Header。

内容的提问来源于stack exchange,提问作者ubali

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.28 04:36:02