您的浏览器需要启用 JavaScript 才能正常访问此网站。
萨龙网络
登录
首页-WordPress文章-WordPress-正文

WordPress 如何根据文章类型向编辑器添加 CSS

萨龙龙萨龙龙WordPress3年前002.36W
在 WordPress 中,我们可以通过向主题中添加 CSS 文件来为页面和文章添加样式。但是,如果您希望根据文章类型添加自定义样式,该怎么办呢?在本文中,我们将介绍如何在文章编辑器中添加自定义 CSS 样式,以根据文章类型为区块编辑器添加样式。 步骤 1:创建一个新的 CSS 文件 首先,我们需要创建一个新的 CSS 文件,其中包含我们想要为区块编辑器添加的样式。将该文件命名为 custom-editor-style.css,并将其放置在您的主题文件夹中的任何位置。 步骤 2:将 CSS 文件链接到主题 接下来,我们需要将 CSS 文件链接到我们的主题中。在您的主题的 functions.php 文件中添加以下代码:
function salong_add_editor_style() {
    global $post;

    if( 'post' === $post->post_type ) {
        add_editor_style( 'path/to/custom-editor-style.css' );
    }
}
add_action( 'admin_init', 'salong_add_editor_style' );
请将上面的代码中的“post_type_name”替换为您的文章类型的名称。此代码将确保只在编辑该文章类型时添加自定义样式。 步骤 3:为您的文章类型添加样式 最后,在 custom-editor-style.css 文件中添加您想要为您的文章类型添加的样式。您可以使用选择器针对您的文章类型添加样式,例如:
.post-type-name .wp-block {
    /* 自定义样式 */
}
现在,当您编辑您的文章类型时,将会应用您为该文章类型添加的自定义样式。
标签:
本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/wordpress-editor-add-css.html
萨龙龙

萨龙龙

侠客
一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1422.44M457.21W4.42W
加载中…
分享:
WordPress 主题 Slearn Pro 产品插件之属性设置
WordPress 主题 Slearn Pro 产品插件之属性设置上一篇
WordPress 出现 Allowed memory size of 134217728 bytes exhausted 错误如何修复下一篇
WordPress 出现 Allowed memory size of 134217728 bytes exhausted  错误如何修复
相关文章
总数:115

WordPress 一键数据库初始化重置插件:WordPress Reset

在开发 WordPress 主题中,需要 N 多次测试,这样就需要多次重装测试网站,这样相当的麻烦。今天了解到一款数据库初始化插件:WordPr…
萨龙龙萨龙龙WordPress7年前002.01W0

WordPress龙霄加盟推广系统 —— 数据一目了然,结算一步到位:多语言电商推广管理后台

一、开发背景与定位龙霄加盟推广插件(LongXiao Affiliate)是由萨龙网络出品的一款深度 WordPress 电商加盟推广管…
萨龙龙萨龙龙WordPress2个月前009610

WordPress强大的开源后台框架Redux Framework介绍与使用

开发一个WP主题有了前端页面设计的美观与布局外,后台选项也是相当重要的一个组成部分,好的后台框架在使用主题时方便快捷的设置各个功能,也让主题开发…
萨龙龙萨龙龙WordPress10年前002.47W0

WordPress 功能函数—— add_blog_option(为指定的博客ID添加新选项)

描述 您不需要序列化值。如果需要序列化值,则在将其插入数据库之前将其序列化。请记住,资源不能序列化或作为选项添加。 …
萨龙龙萨龙龙WordPress Functions7年前001.24W0

删除或失效WordPress文章中的图像大小属性

默认情况下,WordPress会将图像元素width和height属性添加到图像元素中。这些属性会影响CSS宽度和高度属性,图片延迟加载时默认图…
萨龙龙萨龙龙WordPress, 前端资讯7年前001.26W0

WooCommerce 通过woocommerce_cart_item_thumbnail钩子修改购物车缩略图

在开发基于 WooCommerce 的商城主题时,我们一般会将模板文件添加到主题中来进行修改,对于有钩子或接口的地方,就没有必要再修改模板代码了…
萨龙龙萨龙龙WooCommerce6年前001.75W0

在WooCommerce中添加“立即购买”按钮直接跳转到结算页面

MNews 主题集成了 WooCommerce 商城插件,有些用户要求增加一个『立即购买』按钮,这篇文章介绍下如何在WooCommerce中添加…
萨龙龙萨龙龙WooCommerce8年前003.26W0

修改Woocommerce商品固定链接其它自定义文章类型适用

在更新Concise主题时集成了前端用户中心和商城插件,发现插件中为商城产品文章设置好了固定链接,所以把萨龙网络的作品集与商城的两种自定义类型的…
萨龙龙萨龙龙WooCommerce11年前001.51W0

CSS3 background-attachment:fixed实现滚动视差效果

一直都想设计一个有滚动视差效果的主题,而网上所有的介绍和有视差效果的主题都是使用jQuery来实现,而且由于视差背景图是一张满屏的大小,所以一直…
萨龙龙萨龙龙WordPress11年前001.61W0

Nuxt.js Headless WordPress 项目中的数据缓存优化策略

在 Headless WordPress + Nuxt.js 的架构中,WordPress 作为内容后端通过 REST API 提供数据,Nux…
萨龙龙萨龙龙WordPress2个月前007270

WordPress 媒体库支持 SVG 图标的上传与预览

WordPress 默认支持多种图片格式包括 .jpg,.jpeg,.png,和.gif,出于安全考虑不能上传可缩放矢量图形(SVG)。SVG是…
萨龙龙萨龙龙WordPress7年前001.33W0

WordPress按自定义文章类型进行搜索

一般的Wordpress主题中都有多种自定义文章类型,除了了默认的文章还会有作品、商品等自定义类型的文章,而WordPress默认只能搜索到文章…
萨龙龙萨龙龙WordPress10年前001.36W0
评论表单游客 您好,欢迎参与讨论。
加载中…
评论列表
总数:0
萨龙网络
没有相关内容