代码开发的wp主题如何开启古腾堡区块样式支持

代码开发的wp主题如何开启古腾堡区块样式支持

问题:自定义的WP代码开发的主题,在产品详情页中无法控制引入区块的边距和对齐的样式


方案:functions.php开启区块样式支持

function my_theme_gutenberg_support() {
    // 1. 开启最关键的“区块间距(gap)”和布局控制工具(解决你找不到元素间距的问题)
    add_theme_support( 'appearance-tools' );
    add_theme_support( 'spacing-slider' );

    // 2. 开启支持古腾堡的默认区块样式(让前台和后台编辑器看到的样式一致)
    add_theme_support( 'wp-block-styles' );

    // 3. 开启宽幅(Wide)和全宽(Full)对齐支持(让图片或容器可以撑满屏幕)
    add_theme_support( 'align-wide' );

    // 4. 开启响应式嵌入内容支持(如自动缩放 YouTube 视频等)
    add_theme_support( 'responsive-embeds' );

    // 5. 开启自定义编辑器调色盘(如果你想限制或自定义颜色面板)
    // add_theme_support( 'editor-color-palette', array(...) );

    // 6. 开启编辑器字号控制
    add_theme_support( 'editor-font-sizes', array(
        array( 'name' => '小', 'size' => 14, 'slug' => 'small' ),
        array( 'name' => '正常', 'size' => 16, 'slug' => 'normal' ),
        array( 'name' => '大', 'size' => 24, 'slug' => 'large' )
    ) );
}
add_action( 'after_setup_theme', 'my_theme_gutenberg_support' );

Comments are closed.