首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在编辑器中向Gutenberg块包装器添加其他类

是指在使用WordPress的Gutenberg编辑器时,向特定的块(block)添加额外的CSS类。这样做可以通过自定义CSS样式来改变块的外观和行为。

Gutenberg是WordPress 5.0及更高版本中默认的编辑器,它使用块的概念来构建内容。每个块都有自己的设置和样式,但有时候我们可能需要为特定的块添加额外的类,以便进一步自定义它们。

要向Gutenberg块包装器添加其他类,可以按照以下步骤进行操作:

  1. 打开WordPress的后台管理界面,并进入希望编辑的页面或文章。
  2. 在编辑器中选择要添加额外类的块。可以通过点击块的边框或在块上右键单击来选择块。
  3. 在右侧的“块设置”面板中,展开“高级”选项。
  4. 在“附加CSS类”字段中,输入要添加的额外类的名称。可以输入多个类名,用空格分隔。
  5. 完成后,保存页面或文章,并预览更改。

通过向Gutenberg块包装器添加其他类,可以实现以下目的:

  1. 自定义样式:通过添加自定义CSS类,可以为特定的块应用自定义样式,改变其外观和布局。
  2. JavaScript交互:通过添加特定的类名,可以在JavaScript中选择和操作这些块,实现更高级的交互效果。
  3. 与其他插件或主题集成:某些插件或主题可能要求在特定的块上添加特定的类名,以实现它们的功能或样式。

腾讯云提供了一系列与WordPress相关的产品和服务,可以帮助用户搭建和管理WordPress网站。具体而言,腾讯云的云服务器CVM、云数据库MySQL、云存储COS等产品都可以与WordPress集成使用。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于这些产品的详细信息和使用指南。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

展望 WordPress 5.0 会给我们带来哪些更新?

多年),全名叫约翰内斯·古腾堡,WordPress 新的编辑器取名古腾堡意在这段历史致敬。...WordPress 新的编辑器被命名为 Gutenberg ,显然被寄予了极大的期望。作为模块编辑器Gutenberg 的开发目标是,让用户添加和编辑富文本内容更加简单和愉悦。...使用新的编辑器添加内容,基本上不需要用户掌握任何 HTML 知识,不需要输入短代码,不需要为嵌入其他网页的 embed 元素而发愁。...界面风格 接下来,将逐步介绍新版编辑器与旧版编辑器的不同 文章格式工具栏(旧版) 文章格式工具栏(新版) 旧版的编辑器,工具栏位于正文的上方,而新版的编辑器则进行了拆分,首先是左上角的加号 添加内容...右边栏操作界面 这里,你可以设置文字的大小、背景颜色、字体颜色、对齐方式,甚至可以添加 CSS 的,使得样式的调整更加灵活了。

1.4K30

更改WordPress Gutenberg编辑器的宽度

要更改WordPress Gutenberg编辑器的宽度,您需要为其加载自定义CSS规则。以下是如何快速更改宽度的概述,包括加载样式表和添加将增加Gutenberg编辑器内容区域宽度的特定规则。...加载Gutenberg编辑器的自定义CSS 在你的主题的functions.php里面添加以下函数和钩子。这将加载editor.css主题目录的根目录调用的CSS文件。...$version ); } add_action( 'enqueue_block_editor_assets', 'kl_block_editor_styles' ); CSS规则更改宽度 为编辑器添加规则后...,打开editor.css文件添加以下规则以更改Gutenberg编辑器的内容宽度。...} /* Width of "full-wide" blocks */ .wp-block[data-align="full"] { max-width: none; } 这在主题支持下的编辑器手册概述

82920
  • WordPress 4.9.8版本正式发布,修复了46个问题

    插件,以测试他们的现有内容和插件如何与编辑器一起使用。...它还提供了安装 Classic Editor 插件的选项 ,如果他们觉得需要更多时间来准备切换到编辑器。... WordPress 4.9.8 ,标注将显示给以下用户: 如果未安装或激活 Gutenberg,则会在单个站点上管理员用户显示标注,多站点上显示超级管理员用户。...如果 Gutenberg 被安装和激活,标注将显示给贡献者用户及以上。 如果安装并激活了经典编辑器插件,则将为所有用户隐藏标注。...隐私修复/增强功能 此版本包括 18 个隐私修复,专注于确保 4.9.6 添加的新个人数据工具的一致性和灵活性,包括: 正在确认的请求类型现在包含在所有隐私确认电子邮件的主题行

    1.3K20

    WordPress 5.0 发布,新增基于「」的编辑器 Gutenberg

    WordPress 5.0 终于发布,该版本最大的更新就是编辑器,正式引入新的基于(block-based)的编辑器Gutenberg,它可以给用户提供更简化的编辑体验。...Gutenberg 编辑器 新的 Gutenberg 编辑器不会改变内容在前端的展示,它可以让博客作者快速插入任何类型的多媒体内容,并重新排列你想要核心展示的内容。每块内容都在自己的,便于操作。...如果你精通 HTML 和 CSS,Gutenberg 编辑器也不会阻挡你,他只会简化你的编辑过程,而不是效果。 WordPress 默认提供大量的,而且社区也不断添加新的。...如果你正在为客户构建站点,则可以创建可重用的,这有益于你的客户随时添加新内容,同时仍保持一致的外观。...切换回经典编辑器 如果你不习惯默认的编辑器,你可以切换回使用经典编辑器,经典编辑器插件将保持 WordPress 核心代码,直到 2021 年。

    47330

    神级WordPress主题框架Genesis 2.8发布:容易引起极大舒适感

    通过一键导入演示数据的功能,主题开发者可以很轻松地一个使用了该主题的新站上将所需插件和精心设计好的Gutenberg导入进来。...此外,默认Gutenberg和定制化内容可以随演示内容一同导入,具有复用性,内容作者可以在其他任何页面或日志上重复使用,将来构建新内容时会感到更加强大更加模块化。...Genesis研发团队将在未来为引导工具添加更多其他功能,包括导入侧栏/菜单(需要等到WordPress 核心代码支持),将演示内容导入到任何类型的页面/日志,以及其他需要用到内容导入的体验都会变得非常愉快...使开发人员能够开发易于维护的主题 Genesis 2.8添加的第二个主要功能是Genesis Configuration API。...Configuration API可以支持开发者保存特定主题的个性化设计配置,比如Gutenberg样式,调色板,编辑器的字体大小和主题要用到的数组。

    2K11

    WordPress 5.0默认老版编辑器

    方法3一句代码禁用Gutenberg古腾堡 编辑器其实之前经典的Classic Editor编辑器代码,WordPress 50并没有被删除,上述插件也只是个切换开关而已。...关键代码就一句 addfilteruseblockeditorforpost,returnfalse将代码添加到当前主题函数模板functionsphp,即可切换回之前的编辑器,根本不需要那些插件。...这款插件可以设置同时保留Gutenberg和Classic编辑器。进入WordPress后台设置 撰写页面,“经典编辑器设置”下勾选选项即可。 ?...方法3:一句代码禁用Gutenberg(古腾堡) 编辑器 其实之前经典的Classic Editor编辑器代码,WordPress 5.0并没有被删除,上述插件也只是个切换开关而已。...关键代码就一句: add_filter('use_block_editor_for_post', '__return_false'); 将代码添加到当前主题函数模板functions.php,即可切换回之前的编辑器

    1.3K10

    niRvana · 轻拟物主题4.8完美版

    Editor”(区块编辑器),在这种编辑器下,原有的“短代码”就显得非常的落后了: 短代码存在的问题:旧的TinyMCE编辑器,短代码往往需要手动输入和编辑,很难记忆和使用。...编辑器的优势:完全的可视化操作,无论是插入内容还是编辑参数,都可以可视化的操作,而无须去修改繁琐的代码。...编辑器标题区块前端动画效果 v4.3.0 1、新增WordPress编辑器Gutenberg优酷视频区块 2、新增卡片式音频Gutenberg自定义区块 v4.2.0 1、新增:新增网站蹦迪功能 2、新增...编辑器段落文字标记功能,可设置部分文本颜色、背景色等 3、新增:Gutenberg文本提示语功能,可给选中的文本设置鼠标悬停效果 4、新增:阅读量显示。...2、修复登陆界面被添加了前台样式和脚本的BUG 3、自定义标题分隔符:没什么用又偏有强迫症需要 4、默认启用语音合成 5、相册使用Gutenberg编辑器 v1.2.3 1、全站不刷新加载页面开启后,页面

    8.6K10

    WordPress 5.0“Bebo” 正式版发布

    WordPress 5.0 最大的亮点就是正式引入新的基于(block-based)的编辑器 —— Gutenberg,给用户提供更简化的编辑体验。...新的 Gutenberg 编辑器不会改变访问者对你的内容的观感,它的作用是让你快速插入任何类型的多媒体并重新排列你想要核心展示的内容。每块内容都在自己的,有单独的封装,便于操作。 ?...WordPress 默认提供大量的,而且社区也不断添加新的。 ? 这种全新的编辑体验为设计和内容提供了更加一致的处理。...如果你正在构建 client 站点,则可以创建可重用的,这有益于你的客户随时添加新内容,同时仍保持一致的外观。...当然,不想改变习惯的用户可以继续使用经典编辑器。经典编辑器插件将支持到 2021 年。

    52930

    WordPress 6.1 正式版已发布,最全新功能图文介绍

    状态和可见性面板现在称为摘要 摘要面板下的永久链接和模板选项 改进的信息面板 站点图标将替换 WordPress 徽标 新的首选项 站点编辑器创建更多模板 快速搜索和使用模板部分 站点编辑器快速清除自定义...WordPress 6.1 将包括从 13.1 到 14.1 的 古腾堡 Gutenberg 版本引入的更改。这些 Gutenberg 版本的主要重点是为不同的设计工具的可用性带来一致性。...站点编辑器,“查看”按钮现在还包含一个链接,用于新选项卡查看您的网站。 状态和可见性面板现在称为摘要 发布设置下的状态和可见性面板将重命名为摘要。...单个页面 单个文章 分类法的单个分类 单个类别 自定义模板(可用于任何帖子或页面) 只需转到外观»编辑器,然后从左侧边栏中选择模板。之后单击添加新按钮以查看可用选项。...站点编辑器快速清除自定义 WordPress 6.1 现在允许您在使用站点编辑器时快速清除自定义。

    4.7K30

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

    WordPress作为内容管理工具的一个好处是,几乎所有文字处理软件能做的事情(例如文本格式,布局格式,嵌入图像等等)都可以WordPress编辑器完成,但比较欠缺的一种功能是表格设计。...WordPress最新版Gutenberg编辑器已经有了表格“”的功能。你可以在这里在线体验一下:https://wordpress.org/gutenberg/。可以快速插入一个简单的表格。...Gutenberg的表格工具 除此之外,你还在WordPress手写代码进行插入表格操作: ?...为你的网站添加有趣的互动方式 以下是一些比较好用的WordPress表格插件推荐 TinyMCE Advanced TinyMCE Advanced让用户可以不编辑HTML代码的情况更好地控制内容,该插件还有在编辑器工具栏中有附带了许多其他功能...或许你不会在WordPress中经常用到表格工具,但是从上面可以了解到WordPress添加表格也是很容易的事情,可以无痛添加

    5K20

    命令行上的数据科学第二版 四、创建命令行工具

    在这一章,你将熟悉用两种方式创建命令行工具。首先,我解释了如何将这些一行程序转换成可重用的命令行工具。通过命令添加参数,您可以增加编程语言提供的灵活性。...$ fc 运行fc调用默认的文本编辑器,它存储环境变量编辑器 Docker 容器,这被设置为nano,一个简单的文本编辑器。...同样,你可以随意使用任何你喜欢的编辑器,但我将坚持使用nano,它安装在 Docker 映像。...这样,您将在每一行之间添加一个小的延迟,以便更容易确认工具不会等待所有的输入数据,而是逐行操作。 4.4 总结 intermezzo 这一章,我您展示了如何构建自己的命令行工具。...4.5 进一步探索 当工具需要记住许多选项时,工具添加帮助文档就变得非常重要,尤其是当您希望与他人共享您的工具时。是一个语言无关的框架,提供帮助并定义您的工具可以接受的可能选项。

    2.2K40

    WordPress 4.9.8 发布,你可以开始尝试最新的编辑器 Gutenberg

    WordPress 发布了 4.9.8 这个修订版,这个版本除了修正了 46 个bug和其他一些功能增强之外,最重要的就是 “Try Gutenberg” 的功能,让你可以开始尝试 WordPress...新一代的编辑 Gutenberg: WordPress 5.0 将会把 Gutenberg 编辑器作为默认的编辑器,WordPress 为了让主题和插件开发者检查自己的插件或者主题是否兼容 Gutenberg...,WordPress 提供了 Gutenberg 插件让大家先测试。...所以现在在仪表盘会出现让你尝试 Gutenberg 的面板,如果你觉得很烦,可以通过下面的代码彻底屏蔽掉: remove_action( 'try_gutenberg_panel', 'wp_try_gutenberg_panel...' ); 到了 WordPress 5.0 正式发布的时候,Gutenberg 将会内置到核心代码,这时候,如果你还不习惯,WordPress 也推出了 Classic Editor 的插件,让你继续使用之前的经典编辑器

    33420

    超强VS Code,8个顶级扩展插件让前端开发如虎添翼!

    但也许最酷的是 VS Code 提供了规模超大的扩展插件,扩展 商店 有大量的免费扩展可用于支持新语言、调试代码或添加各种其他自定义功能。你可以灵活的配置自己的编辑器,更好地满足日常开发的需要。...Git增强:GitLens [1240] GitLens 虽然Git功能已内置于 VS Code ,但 GitLens 能够提供更多的版本控制功能来“增强”你的编辑器。...它利用了 VS Code 已有的 Online JavaScript Beautifier,允许你轻松更改其样式。这意味着你可以根据内容设置缩进、换行和其他细节。...它有许多方便的功能,包括代码、watches 和控制台中设置断点的功能。另外你可以 VS Code 运行Chrome实例,或把调试附加到单独运行的浏览实例。...msjsdiag.debugger-for-chrome * * * 环境增强:React Native Tools [1240] React Native Tools React 是最引人注目的JS库之一 —— 以至于新的 WordPress 编辑器

    3.6K00

    WordPress 禁用 Rest API 默认路由兼容古腾堡 Gutenberg 编辑器

    API 默认路由后有利于 WordPress 站点安全及避免暴露网站所有内容,所有子凡的所有 WordPress 网站都是直接禁用了 WordPress 默认路由的,但是由于 WordPress 默认使用编辑器...(古腾堡 Gutenberg),所有如果直接使用代码禁用 WordPress Rest API 默认路由就会导致后台编辑器无法正常使用。...(){//兼容 古腾堡编辑器 global $post; if( !...需要说明的是,以上代码的主要实现原理就是判断用户是否登录以及是都有编辑权限,只有当用户登录,且拥有文章编辑权限的用户才不会禁用默认路由,以达到兼容古腾堡编辑器的目的,当然如果你像子凡一样只用 WordPress...经典编辑器,那么建议直接禁用 WordPress 默认路由即可。

    71390

    8 个给前端的顶级 VS Code 扩展插件

    但也许最酷的是 VS Code 提供了规模超大的扩展插件,扩展商店【https://marketplace.visualstudio.com/】有大量的免费扩展可用于支持新语言、调试代码或添加各种其他自定义功能...GitLens 虽然Git功能已内置于 VS Code ,但 GitLens 能够提供更多的版本控制功能来“增强”你的编辑器。它提供了对代码的深入分析功能,可以向你显示更改时间以及更改后的代码。...它利用了 VS Code 已有的 Online JavaScript Beautifier,允许你轻松更改其样式。这意味着你可以根据内容设置缩进、换行和其他细节。...它有许多方便的功能,包括代码、watches 和控制台中设置断点的功能。另外你可以 VS Code 运行Chrome实例,或把调试附加到单独运行的浏览实例。...React Native Tools React 是最引人注目的JS库之一 —— 以至于新的 WordPress 编辑器(又名 Gutenberg)是基于它建立的。

    96131

    从Rust到远方:PHP星系

    Gutenberg项目是WordPress的一个新编辑器,因为Wordpress是用PHP编写的,很自然的我们需要一个PHP的原生扩展来解析Gutenberg博客格式。...要将Rust解析移植到PHP,我们首先需要将它移植到C。这在上一节已经完成。...下面我们来声明这些! 声明 注意:后面的4个代码不是本文的核心,它只是需要编写的代码,如果不打算编写一个PHP扩展,可以跳过它。...初始化的过程我们将在用户态创建以及声明其属性等。...我们已经看到现实世界如何用Rust编写一个解析,如何将其绑定到C然后编译到一个静态库和C头文件,如何创建一个PHP扩展暴露一个函数和两个对象,如何将C绑定集成到PHP,以及如何在PHP中使用这个扩展

    1.1K40

    Argon主题短代码

    文章插入短代码即可让其被解析。 该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。 介绍 该短代码可以插入一个进度条。...文章插入短代码即可让其被解析。 该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。 介绍 该短代码可以插入一个提示条。...文章插入短代码即可让其被解析。 该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。 介绍 该短代码可以插入一个警告。...文章插入短代码即可让其被解析。 该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。...文章插入短代码即可让其被解析。 该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。

    11510
    领券