专栏首页许都博客更改WordPress Gutenberg编辑器的宽度

更改WordPress Gutenberg编辑器的宽度

要更改WordPress Gutenberg编辑器的宽度,您需要为其加载自定义CSS规则。以下是如何快速更改宽度的概述,包括加载样式表和添加将增加Gutenberg编辑器内容区域宽度的特定规则。

加载Gutenberg编辑器的自定义CSS

在你的主题的functions.php里面添加以下函数和钩子。这将加载editor.css在主题目录的根目录中调用的CSS文件。如果您愿意,可以从其他位置加载文件,只需相应地调整您看到的位置即editor.css

/**
 * Gutenberg Editor Styles
 */
function kl_block_editor_styles() {
    $version = filemtime( get_stylesheet_directory() . '/editor.css' );
 
    wp_enqueue_style(
        'editor-css',
        get_stylesheet_directory_uri() . '/editor.css',
        [],
        $version
    );
}
add_action( 'enqueue_block_editor_assets', 'kl_block_editor_styles' );

CSS规则更改宽度

为块编辑器添加规则后,打开editor.css文件添加以下规则以更改Gutenberg编辑器的内容宽度。

/* Main column width */
.wp-block {
    max-width: 100%;
}
 
/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
    max-width: 100%;
}
 
/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
    max-width: none;
}

在主题支持下块编辑器手册中概述,是更改Gutenberg编辑器宽度的官方推荐方法。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress 5.0默认老版编辑器

    有很多专栏作者用户,可能他们使用编辑器的习惯不同,那么他们的选择也是不同的。如果要为某些特定用户和文章类型禁用Gutenberg ,那么,这个插件会很有效。插件...

    爱游博客
  • 展望 WordPress 5.0 会给我们带来哪些更新?

    目前 WordPress 最后的一个正式版已经到 4.9.7 了, WordPress 5.0 也即将到来了,那么 WordPress 5.0 会给我们带来哪些...

    明月登楼
  • WordPress 4.9.8版本正式发布,修复了46个问题

    从 WordPress 4.9.8 发布文章:此维护版本修复了 46 个错误(详情参见发行注记),增强功能和祝福任务,包括更新 Twenty Seventeen...

    明月云服务
  • WordPress 5.0“Bebo” 正式版发布

    WordPress 5.0 最大的亮点就是正式引入新的基于块(block-based)的编辑器 —— Gutenberg,给用户提供更简化的编辑体验。无论是首次...

    Debian中国
  • WordPress 5.0 代码禁用Gutenberg编辑器

    在WP升级至5.0版本之后,其中内置并强制启用了新的Gutenberg编辑器(在WP5.0中准确地说应该叫block editor编辑器),据说编辑功能更加强大...

    空木白博客
  • 神级WordPress主题框架Genesis 2.8发布:容易引起极大舒适感

    根本毛病在哪呢?那是因为,当你安装了一个新主题时,这个主题的演示内容不会自动导入进来(译注:这就好比方便面包装上的图,“图片仅供参考”)。这就导致用户需要在文档...

    丘壑
  • Admin Dark Mode:深色模式的WordPress管理后台

    2018年苹果正式发布了新一代的 macOS 11.14 ,代号为「Mojave」, 引入了系统级的深色模式,这是一种较深的配色方案,有益于眼睛且有助于专注开展...

    丘壑
  • 8个用于设计漂亮表格的WordPress插件

    在WordPress中作为内容管理工具的一个好处是,几乎所有文字处理软件能做的事情(例如文本格式,布局格式,嵌入图像等等)都可以在WordPress编辑器中完成...

    丘壑
  • 盘点2020年wordpress常用的50个插件合集-吐血推荐

    盘点2020年wordpress常用的50个插件合集,50个插件已经打包整理好,可以选择性安装或者是去搜索添加。如果后台经常出现安装不成功的!大部分的插件是可以...

    wordpress建站吧
  • [已解决]wordpress网站发布失败:此响应不是合法的JSON响应

    前两天,用WordPress搭建这个博客(https://wpthemes.pythonthree.com),服务器是阿里云香港服务器,使用宝塔控制面板,但是,...

    晓得博客
  • 在WordPress 5.x 中把 HTML 转换成 Markdown 编写文件

    即使在 WordPress 5 启用新的 Gutenberg 编辑器之后,很多 Markdown 的插件都失效了。因为不支援到最新的 WordPress 5。

    用户4539203
  • WordPress Markdown编辑器插件:WP Githuber MD

    兮动人
  • WordPress短代码怎么在当前文章内引用评论

    评论列表可以是整个博客或着一篇文章,支持的参数也有很多,比如post_id、user_id等等,自带排序

    沈唁
  • wordpress提示Updating failed. The response is not a valid JSON response如何解决

      今天客户在发布文章时提示Updating failed. The response is not a valid JSON response.发生此错误的原...

    ytkah
  • WordPress 后台载入速度优化:关闭和禁用更新

    很多站长们都知道 WordPress 默认都是开着自动更新的,并且 WordPress 的更新推送一直还都很不错,更新及时至少。WordPress 保持必要的更...

    明月云服务
  • WP Plugin Info Card : 用于展示WordPress插件信息的最佳插件-

    当你想在WordPress中分享某些优秀的主题或插件时,可以使用WP Plugin Info Card ,该插件可以自动获取相关的各种信息,并在文章中用美观大方...

    丘壑
  • 盘点wordpress有哪些经典的插件值得推荐?

    wordpress总的原则是不不用插件就不要使用插件,能少用插件就少用插件的基本原则,因为各种主题各种插件和功能的附加只会让wordpress显得非常的臃肿庞大...

    wordpress建站吧
  • 盘点wordpress有哪些经典的插件值得推荐?

    wordpress总的原则是不不用插件就不要使用插件,能少用插件就少用插件的基本原则,因为各种主题各种插件和功能的附加只会让wordpress显得非常的臃肿庞大...

    wordpress建站吧
  • 2019年WordPress流行趋势预测

    WordPress的流行趋势和时尚界无异。少数的流行趋势会保持不变,其他的也会冒出来。

    丘壑

扫码关注云+社区

领取腾讯云代金券