更改WordPress Gutenberg编辑器的宽度

雷石 96 0

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

加载Gutenberg编辑器的自定义CSS

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

  1. /**
  2.  * Gutenberg Editor Styles
  3.  */
  4. function kl_block_editor_styles() {
  5.     $version = filemtime( get_stylesheet_directory() . '/editor.css' );
  6.  
  7.     wp_enqueue_style(
  8.         'editor-css',
  9.         get_stylesheet_directory_uri() . '/editor.css',
  10.         [],
  11.         $version
  12.     );
  13. }
  14. add_action( 'enqueue_block_editor_assets', 'kl_block_editor_styles' );

CSS规则更改宽度

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

  1. /* Main column width */
  2. .wp-block {
  3.     max-width: 100%;
  4. }
  5.  
  6. /* Width of "wide" blocks */
  7. .wp-block[data-align="wide"] {
  8.     max-width: 100%;
  9. }
  10.  
  11. /* Width of "full-wide" blocks */
  12. .wp-block[data-align="full"] {
  13.     max-width: none;
  14. }

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

发表评论 取消回复
表情 图片 链接 代码

分享