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

如何在WordPress中添加自定义css样式到Gutenberg块?

在WordPress中添加自定义CSS样式到Gutenberg块的方法如下:

  1. 创建一个自定义CSS文件:首先,你需要创建一个新的CSS文件,用于存储你的自定义样式。你可以使用任何文本编辑器,比如Notepad++或Sublime Text。将文件保存为.css格式,例如custom-style.css。
  2. 添加自定义样式:在custom-style.css文件中,你可以添加你想要的自定义CSS样式。你可以使用CSS选择器来针对特定的Gutenberg块添加样式,或者使用通用的CSS样式来应用于所有的Gutenberg块。
  3. 将CSS文件上传到WordPress:将custom-style.css文件上传到WordPress的主题文件夹中。你可以通过FTP工具(如FileZilla)连接到你的WordPress站点,并将文件上传到wp-content/themes/your-theme/目录下。
  4. 添加自定义CSS代码到WordPress主题:打开WordPress后台,进入外观(Appearance)->自定义(Customize)->附加CSS(Additional CSS)选项。在这里,你可以将自定义CSS代码添加到WordPress主题中。
  5. 将自定义CSS样式应用于Gutenberg块:为了将自定义CSS样式应用于Gutenberg块,你需要使用Gutenberg块的唯一标识符(Block ID)。你可以在编辑Gutenberg块时,在右侧的“块设置”(Block Settings)中找到块的唯一标识符。
  6. 使用自定义CSS类名:在Gutenberg块的“块设置”中,找到“附加CSS类名”(Additional CSS Class)选项。在这里,你可以为该块添加一个自定义的CSS类名,以便将自定义样式应用于该块。
  7. 编辑附加CSS代码:回到WordPress主题的附加CSS选项,使用CSS选择器和Gutenberg块的唯一标识符,编写CSS代码来应用自定义样式。例如,如果你的Gutenberg块的唯一标识符是“my-custom-block”,你可以使用以下代码来应用自定义样式:
代码语言:txt
复制
.my-custom-block {
    /* 在这里添加你的自定义样式 */
}
  1. 保存并预览:保存你的更改,并在WordPress前台预览页面,查看自定义CSS样式是否成功应用于Gutenberg块。

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

  • 云服务器(CVM):提供可扩展的计算能力,满足不同规模业务的需求。产品介绍链接
  • 云数据库MySQL版(CDB):提供高性能、可扩展的MySQL数据库服务。产品介绍链接
  • 云存储(COS):提供安全可靠、低成本的云端存储服务。产品介绍链接
  • 人工智能机器学习平台(AI Lab):提供丰富的人工智能开发工具和资源,帮助开发者快速构建和部署AI模型。产品介绍链接
  • 物联网开发平台(IoT Explorer):提供全面的物联网解决方案,帮助用户快速构建和管理物联网应用。产品介绍链接
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WordPress 5.0默认老版编辑器

有很多专栏作者用户,可能他们使用编辑器的习惯不同,那么他们的选择也是不同的。如果要为某些特定用户和文章类型禁用Gutenberg ,那么,这个插件会很有效。插件下载Disable Gutenberg首先需要安装并启用Disable Gutenberg插件,然后对插件进行设置,点击设置 禁用Gutenberg,保存即可。默认情况下,该插件会为网站上的所有用户禁用Gutenberg。但如果要为某些特定用户和文章类型禁用,则需要取消选中完全禁用选项。取消后将显示更多选项,以便为某些用户,文章类型,主题模板或单个文章有选择性的禁用Gutenberg。如果发现正在使用的WordPress插件与Gutenberg不兼容,而你又希望网站上其他区域可以使用Gutenberg,这款插件正好可以满足。方法3一句代码禁用Gutenberg古腾堡 编辑器其实之前经典的Classic Editor编辑器代码,在WordPress 50并没有被删除,上述插件也只是个切换开关而已。关键代码就一句 addfilteruseblockeditorforpost,returnfalse将代码添加到当前主题函数模板functionsphp中,即可切换回之前的编辑器,根本不需要那些插件。当然你想有更多的选择性,可以安装上述插件。后台禁用block editor编辑器后,前端还是会加载相关的的样式文件,还需要加上一句 removeactionwpenqueuescripts,wpcommonblockscriptsandstyles禁止前端加载样式文件。Classic Editor编辑器代码据WP官方称会延续集成到2021年才会从程序中彻底删除,但大家也不用担心,到时会有全套的Classic Editor编辑器插件让你选择。另外,完整中文版估计遥遥无期,目前50版完全可以用之前的语言文件,除了新编辑器没有汉化,其它没有影响。

01
领券