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

WordPress:向古腾堡组块添加自定义样式

WordPress是一种流行的开源内容管理系统(CMS),用于创建和管理网站。它提供了一个易于使用的界面,使用户能够轻松地创建和编辑网站内容,而无需编写代码。

古腾堡(Gutenberg)是WordPress 5.0版本中引入的新编辑器,它使用块(blocks)的概念来构建和组织页面内容。块可以是文本、图像、视频、按钮等元素,用户可以通过拖放和自定义设置来创建自己的页面布局。

要向古腾堡组块添加自定义样式,可以通过以下步骤实现:

  1. 创建一个自定义主题:首先,您可以创建一个自定义主题,以便在WordPress中应用您自己的样式。您可以使用HTML、CSS和PHP来构建主题,并将其上传到WordPress主题目录中。
  2. 添加自定义CSS:在您的自定义主题中,您可以创建一个单独的CSS文件,用于添加自定义样式。您可以使用CSS选择器来选择特定的古腾堡块,并为其应用样式。例如,如果您想为标题块添加自定义样式,您可以使用类似于.wp-block-heading的选择器。
  3. 使用自定义类名:古腾堡允许您为块添加自定义类名。在编辑器中,选择要添加样式的块,然后在“块设置”面板中找到“附加CSS类名”选项。在这里,您可以输入您自定义的类名,并在自定义CSS文件中为该类名添加样式。
  4. 使用自定义主题样式:如果您不想创建一个完整的自定义主题,您还可以使用WordPress的主题自定义功能来添加自定义样式。在WordPress仪表板中,导航到“外观”>“自定义”,然后选择“其他CSS”选项。在这里,您可以添加自定义CSS代码,以为古腾堡块添加样式。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):提供可扩展的虚拟服务器实例,适用于各种应用场景。产品介绍链接
  • 云数据库MySQL版:提供高性能、可扩展的MySQL数据库服务,适用于WordPress等应用程序。产品介绍链接
  • 云存储COS:提供安全、可靠的对象存储服务,用于存储和传输网站的静态资源。产品介绍链接
  • 云安全中心:提供全面的云安全解决方案,包括DDoS防护、Web应用防火墙等,保护网站免受攻击。产品介绍链接

请注意,以上推荐的腾讯云产品仅供参考,您可以根据实际需求选择适合的产品。

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

相关·内容

WordPress 5.3 发布,全面优化编辑器

WordPress 5.3 主要是扩展和完善了 5.0 版本引入的块编辑器,既编辑器,除了加入新的块,交互和体验都更加直观。...这些新功能增加了设计自由度,提供了更多的布局选项和样式变化,从而使设计师可以完全控制站点的外观。...无障碍的改进包括了管理界面整合区块编辑器样式。...这些改进过的样式修正了许多无障碍访问的问题:表单字段和按钮的颜色对比度、编辑器和管理界面的外观一致性、新的底部通知、标准化的WordPress配色方案和全新的Motion交互,能让区块移动时更加流畅及自然...新的群组区块让您轻松将页面分割为多彩的章节 栏目区块现在支持固定栏宽 全新预定义布局让排列内容为高级设计变得十分简单 标题区块现在可以设置字体颜色 更多样式选项让您能够为任何支持此选项的区块设置样式

57830

WordPress 5.7 发布,更好用的编辑器

WordPress 5.7 发布,新版本改善了编辑器的编辑体验,并使用户能够轻松创建更多高级块,并为块编辑器添加更强大的自定义项,还有 HTTPS 切换等其他功能改进​。...编辑器更易使用 增强字体调整:编辑器很多的地方都可以调整字体,比如列表,代码等块,并且无需切换界面。 增强可重用块,更加稳定,更好用,并且支持自动保存。...支持拖放:支持将块和块组从插入器中直接拖放到编辑器。 更多的块 不懂代码也可以实现功能,做更多的事情。 封面块:可以制作一个填充整个窗口的封面块。...jQuery 升级到 3.5.1 WordPress 还是会一直支持 jQuery,因为太多的插件和主题是基于 jQuery 做的交互,WordPress 将 jQuery 升级到最新版,并移除 jQuery...migrate,并且为了减少对开发者的打扰,WordPress 会在在 console 输出更少 jQuery 相关的信息。

70120

屏蔽 WordPress 编辑器,换回经典编辑器

WordPress 5.0 带来的编辑器(英文名是 Gutenberg)非常酷,也叫做块编辑器(block editor),它把内容当作一块一块来处理,每一块有自己的设置,使用起来非常清晰好用:...编辑器使用不习惯 但是习惯是一件很难改变的事情,很多人习惯了经典的编辑器,对于编辑器总是用不习惯。...可能编辑器大部分的界面都是关注内容部分,对于摘要,特色图片,分类这些都放到侧边,并且默认隐藏,这个造成了很多人非常不习惯,甚至不知道哪里去设置。...我为了习惯的编辑模式,我把很多的针对文章的操作都移到了文章列表,比如在后台的文章列表设置文章特色图片,设置文章摘要,一键上传外部图片等,让编辑器专注于文章内容管理。...如何屏蔽编辑器 为了兼容,WordPress 官方也提供了 Classic Editor 插件,可以通过各种方式在编辑器和经典编辑器切换使用: 管理员可以设置默认的编辑器。

37720

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

禁用 WordPress Rest API 默认路由后有利于 WordPress 站点安全及避免暴露网站所有内容,所有子凡的所有 WordPress 网站都是直接禁用了 WordPress 默认路由的,...但是由于 WordPress 默认使用块编辑器( Gutenberg),所有如果直接使用代码禁用 WordPress Rest API 默认路由就会导致后台编辑器无法正常使用。...故此子凡就来分享一个兼容 WordPress 编辑器的情况下,对外也能够禁用 WordPress rest api,具体代码如下: add_action('plugins_loaded',function...(){//兼容 编辑器 global $post; if( !...需要说明的是,以上代码中的主要实现原理就是判断用户是否登录以及是都有编辑权限,只有当用户登录,且拥有文章编辑权限的用户才不会禁用默认路由,以达到兼容编辑器的目的,当然如果你像子凡一样只用 WordPress

68990

Wordpress如何禁用编辑器,使用传统经典编辑器

编辑器和经典编辑器到底哪个更好用?这个因人而异,每个人的习惯都不相同,选择适合自己的就好了。...悦然网络工作室为客户制作企业网站都是使用的新版wordpress程序,而新版早就全面启用了编辑,这是一种模块化的编辑器,其实是非常好用的,不过也有一些用户不太习惯,还是想换回以前常见的那种编辑器。...二、使用网站模板自带功能 有些wordpress网站模板中集中了经典编辑器的切换开关,大家只需要设置一下就可以了。...操作如下: 登陆网站后台,依次点开“网站优化”-“WP优化”,然后在右侧看到会有一个“禁用编辑器的开关,把它打开就可以返回经典编辑器了。...如上图,经典编辑器就是这个样式,就是我们常见的那种,其实不管是哪种编辑器,它都只是我们编辑内容的一个工具而已,对网站建设、SEO优化没什么关系,一切只看各人习惯,习惯用哪个就用哪个吧

1.3K00

WordPress 5.6 发布,新的 2021 主题和编辑器大更新

WordPress 5.6 发布,这个版本发布了新的默认主题 2021,然后给增加大量的模块,让你更加方便插入图片,声音和视频。...编辑器更新 更灵活的布局:编辑器更加方便设置布局,支持单栏或者多栏,支持固定宽度,全屏头部,背景图支持渐变。...更好的视频字幕:为了帮助大家想视频中添加字幕,您现在可以在帖子或页面中上传字幕。这样,比以往任何时候都更容易使需要或喜欢使用字幕的任何人都可以访问您的视频。...2021主题 2021 是一个完全为全新的编辑器创建的主题,并且带有自己专属的快模式,花几秒钟试试它不同的布局,就可以让你的文章脱颖而出。...版本则将 jQuery 升级到最新版并添加了 jQuery Migrate 3.3.2,5.7 将移除 jQuery Migrate 3.3.2。

82840

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

多年),全名叫约翰内斯·WordPress 新的编辑器取名古意在这段历史致敬。...()。...右边栏操作界面 这里,你可以设置文字的大小、背景颜色、字体颜色、对齐方式,甚至可以添加 CSS 的类,使得样式的调整更加灵活了。...至此,我相信读者已经发现的一个特点,那就是操作都是围绕块(Block)进行的,这也是新版编辑器的一个理念。...目前互联网上的一些自媒体平台都是采用这种理念,比如国际知名的写作平台 Medium Medium 编辑界面 以上,便是关于 WordPress 新版编辑器 Gutenberg- 的基本介绍,更多新功能和玩法大家可以自行安装体验

1.4K30

WordPress 6.0 发布,全面增强编辑器和全站编辑

对于建站用户,WordPress 6.0 将编辑器进一步扩展到全站编辑,体验更加直观,让大家可以更自由发挥自己的创意。...对于撰写内容的用户,WordPress 6.0 也提供了一系列改善写作体验,比如构建更好的块功能以及添加新的直观样式切换器等新功能。...一些编辑块进行类型转换的时候,可以保持现有的样式,比如段落块转成代码块。 创建的自定义或者任何新的按钮,能自动保留自定义样式。 标签云和社交图标可以通过的新的设置功能做得更好看。...更多的快主题模板 WordPress 6.0 新增了5个块主题模板:作者、日期、分类、标签和自定义分类,这些新增的模板为全站编辑提供了更大的灵活性。...在一组块中,可以一次控制他们的间隙,外边距,排版等。 在堆,行,组和组变量之间切换位置以及具有更大布局灵活性的块组。

59520

WordPress 6.2 发布,全面提升站点编辑体验

WordPress 6.2 也是 2023 年的第一个主要版本,涵盖了 900 多项功能增强和修复,它也是 WordPress 开发路线图中的一个重要的过渡点,开发的重点将从样式定制转移到对工作流和协作的探索...导航块支持多种方式菜单管理 新导航块的侧边栏使得编辑站点菜单更加容易,可以快速添加、删除和对菜单项的重新排序。...无干扰模式专注写作 编辑器也支持无干扰写作模式了,可以一键隐藏侧边栏,所有面板和控件等,专注自己的创作。...自定义 CSS 用户可以通过设计工具和自定义 CSS 以自己希望的方式增强站点的外观,这不仅达到了更高级别的样式控制,也能实现在站点设计中实现最大的创造力和艺术性。...简单说 WordPress 6.2 主要的更新就是块编辑器的更新,没有类似 WordPress 6.1 无需第三方插件就能实现首页 0 SQL 这个大的更新。

1.1K40

WPJAM TinyMCE:一键增强 WordPress 经典编辑器

现在大家都开始使用编辑器了,特别是 WordPress 最新几个版本的发行,大部分更新都围绕编辑器,不过在一些地方还是有用到经典编辑器的,比如我们花生小店的商品编辑,就用不到那么高级的编辑器...经典编辑器基本够用,但是有些格式化工具缺失,还是挺烦人,所以我们为了商家在花生小店的时候方便编辑商品,我们做了一个 WordPress 经典编辑器增强插件,为了方便就叫做 WPJAM TinyMCE。...添加编辑器按钮 WPJAM TinyMCE 这个插件首先增加几个样式按钮:下划线,背景颜色,两端对齐等,增加了常用的 WordPress 内容分页按钮,还支持设置字体和大小,最后还把按钮布局调整了一下,...直接插入屏幕截图 对于我们技术类型博客来说,在写说明的时候插入屏幕截图,是非常常见的操作,之前可能需要用到一些截图软件,把截图保存到电脑桌面,然后再上传到 WordPress 媒体库。

76610

WordPress给文章内容添加密码查看

WordPress给文章内容添加密码查看 ---- WordPress给文章内容添加密码是我很久就弄好的,一直没有时间写文章进行分享,我们在写文章的过程中可能需要对一些文章进行隐藏或者添加密码,只有密码才能进行阅读文章加密码的那一部分内容...WordPress当然也自带这样的功能,但是样式非常的简洁,所有我就在网上找PHP代码,进行样式的美化,是文章内容加密码更加的美观、大气、符合自己主题的样式以及大众的审美观。...第二步:添加CSS代码样式 后台主题设置–》自定义CSS代码里面添加下面的代码即可。...在编辑文章时,经典编辑器在“文本”模式下添加下面代码。编辑器–》添加自定义HTML模块或者简码模块–》添加下面代码。...编辑器正确操作如下图 声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。

48420

WPJAM「代码高亮」:一键实现 WordPress 页面代码高亮显示

整个插件自己写的代码只有不到 30 行,就是利用 WordPress 的 wp_enqueue_scripts 接口让页面加载 prism 的样式和脚本代码。...然后插件也兼容 WPJAM「静态文件」插件,不单独加载 prism 的样式和脚本代码,把 prism 的样式和脚本代码合并到整个站点唯一的样式和脚本文件中: 所以这个从另外一个侧面说明 WPJAM 出品的插件...如果你使用编辑器的话,先点击选择创建一个代码块: 然后输入代码,选择该该区块: 点击右侧区块属性框,在额外的CSS类中输入:language-php,如果你的代码是 JS 则,输入 language-javascript...,然后把代码放到: 和  之间即可,如下图所示: pre 标签的 class 定义就是语言,如何设置,和上面的设置方式是一样的...,自己灵活处理一下,个人感觉还是编辑器方便一点。

1.7K30

WPJAM Basic 去掉了「屏蔽 REST API」功能

的 REST API 因为有 WPJAM Basic 自带的 REST API,那就在 WPJAM Basic 的「优化设置」中添加了屏蔽 REST API 功能,觉得自己不用,就增加个选项可以勾选去掉...随着 WordPress 版本的推进,功能的叠加,功能也产生了依赖,WordPress REST API 成为很多功能的基础,比如编辑器就是基于 REST API 的,所以很多人在 WPJAM Basic...的「优化设置」把 REST API 功能屏蔽了,然后发现没法用了,就来怼我:装了 WPJAM Basic,都不能用了。...所以很无语,虽然在「优化设置」已经做了处理,勾选了「屏蔽」才能勾选「屏蔽 REST API」,但是不知道什么原因,可能其他插件或者主题把编辑器屏蔽了,然后所有的罪都由 WPJAM Basic...rest_cookie_collect_status'); remove_filter('rest_authentication_errors', 'rest_cookie_check_errors', 100 ); 添加代码之前一定要三思哦

42720

屏蔽 WordPress 小工具区块编辑器模式,切换回经典模式

通过 WPJAM Basic 屏蔽 WordPress 编辑器,换回经典编辑器之后,WordPress 的小工具还是区块编辑模式的,本来我想在屏蔽编辑器的时候,同时也屏蔽小工具的区块编辑器模式...不过提供一下如何禁用 WordPress 小工具区块编辑器模式,切换回经典模式的方法,一共有三种: 一、使用 remove_theme_support 函数 主题可以通过调用 remove_theme_support...( 'widgets-block-editor' ) 来屏蔽小工具区块编辑器模式,在主题的 functions.php 文件中添加如下的代码: add_action('after_setup_theme...比如可以通过以下的代码屏蔽小工具区块编辑器模式: add_filter('use_widgets_block_editor', '__return_false'); 使用过滤器接口,就有更多可定制性,可以加入一些自定义功能

25610

WordPress 4.9“Tipton”正式版已于11月14号正式发布

自定义工作流程改进 ? 网站设计自定义的草稿和定期发布 是的,你没看错。就像你起草和修改文章,并安排网站按照选择的日期和时间进行发布一样,你现在也可以对网站的自定义设置保存草稿,并选择时间定期发布。...WordPress 4.9 给 CSS 样式编辑器和 WordPress 4.8.1 增加的 HTML 小工具,增加了语法高亮显示和错误检查功能,你可以快速找到问题所在。...新的相册小工具 对WordPress 4.8中的媒体小工具采取了渐进式的改进。选择你可以通过这个新的小工具来添加相册。没错! 点击按钮,发布媒体 想要给你的文本小工具添加媒体文件吗?...现在,在自定义面板中,在部署新主题之前,你可以搜索、浏览和预览 2600 多个主题。此外,你还可以使用主题、功能、布局等条件来过滤主题。...与合作 WordPress 团队正在致力于一种新的方式,来创建和管理你的网站内容,需要所有用户的合作。感兴趣的用户可以进行测试这个项目,并帮助开发者一起改进!

1K20

WordPress 推出了全新的区块样板构建器

不过你多喜欢和怀念经典编辑器,WordPress 已经在编辑器路上狂奔了,为了让大家更加方便使用编辑器,现在 WordPress.org 推出了全新的区块样板构建器,这个距离 WordPress.org...只要你拥有一个 WordPress.org 的账号,就可以通过「区块样板构建器」构建、编辑和提交自己的制作区块样板到 WordPress.org 的区块样板目录了,其他人可以复制到自己 WordPress...当然也可以点击查看该区块样板的详情,再复制使用: 区块样板创建器 顾名思义,不过是设计师,还是内容编辑,区块样板创建器可以让任何人创建自己的自定义样板,根据自己的想法,以任意方式排列区块的集合。...与 WordPress.org 中的其他东西一样,一旦提交到 WordPress 区块样板目录,这些样板就可供公众使用。...最后需要简单说一下,WordPress 的区块样板,基本都可以运行在所有的 WordPress 主题,但是在一些针对堡主题,可能运行的更好,比如你可以尝试一下默认的 2022 主题来测试这些区块样板

36240

一款简单的WordPress主题June

主题介绍 更新记录 详细信息 一款基于Bootstrap 5前端框架开发的WordPress主题,CSS3+HTML5和响应式设计,可自定义背景风格(颜色或图片),支持绝大数浏览器浏览...主题特色 响应式设计 兼容PC端、手机端和平板等各类设备访问 交互体验 点赞、评论、打赏样样俱全,丰富的用户交互体验 多种分类页样式 多种分类页面样式,在编辑分类的时候可以选择使用哪一个样式 SEO...数据库优化 SMTP邮箱设置 主题集成SMTP发信功能 ,简单设置后即可实现邮箱发信功能 禁用编辑器 还没有习惯,所以通过这个选项恢复到经典编辑器 去除分类标志 可去除链接中的分类category...标志,据说有利于SEO优化 网页后缀 页面链接添加.html后缀 评论等级 按评论数显示等级,评论达到1级才会显示评论者链接 网页后缀 页面链接添加.html后缀 多样的文章样式 不同文章形式显示方式不同...视频文章 视频自定义文章类型。 书籍文章 书籍自定义文章类型,显示正在看或看过的书,并可以发表书评。 简言(说说) 可以发表类似微信朋友圈的说说。 。。。。。。

1K20
领券