当前位置:首页-WordPress文章-WordPress-正文

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

在 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 {
    /* 自定义样式 */
}

现在,当您编辑您的文章类型时,将会应用您为该文章类型添加的自定义样式。

本文原创,作者:萨龙龙,其版权均为4166am金沙信心之选所有。
如需转载,请注明出处:/wordpress-editor-add-css.html

\u6b65\u2026@\u8428\u9f99\u7f51\u7edc&appkey=746468751&pic=https:\/\/demo.salongweb.com\/mnews\/images\/default-thumb.jpg&searchPic=true","qq":"https:\/\/connect.qq.com\/widget\/shareqq\/index.html?url=https:\/\/salongweb.com\/wordpress-editor-add-css.html&title=WordPress \u5982\u4f55\u6839\u636e\u6587\u7ae0\u7c7b\u578b\u5411\u7f16\u8f91\u5668\u6dfb\u52a0 CSS&pics=https:\/\/demo.salongweb.com\/mnews\/images\/default-thumb.jpg&summary=\u5728WordPress\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u5411\u4e3b\u9898\u4e2d\u6dfb\u52a0CSS\u6587\u4ef6\u6765\u4e3a\u9875\u9762\u548c\u6587\u7ae0\u6dfb\u52a0\u6837\u5f0f\u3002\u4f46\u662f\uff0c\u5982\u679c\u60a8\u5e0c\u671b\u6839\u636e\u6587\u7ae0\u7c7b\u578b\u6dfb\u52a0\u81ea\u5b9a\u4e49\u6837\u5f0f\uff0c\u8be5\u600e\u4e48\u529e\u5462\uff1f\u5728\u672c\u6587\u4e2d\uff0c\u6211\u4eec\u5c06\u4ecb\u7ecd\u5982\u4f55\u5728\u6587\u7ae0\u7f16\u8f91\u5668\u4e2d\u6dfb\u52a0\u81ea\u5b9a\u4e49CSS\u6837\u5f0f\uff0c\u4ee5\u6839\u636e\u6587\u7ae0\u7c7b\u578b\u4e3a\u533a\u5757\u7f16\u8f91\u5668\u6dfb\u52a0\u6837\u5f0f\u3002

\u6b65\u2026&site=\u8428\u9f99\u7f51\u7edc","zone":"https:\/\/sns.qzone.qq.com\/cgi-bin\/qzshare\/cgi_qzshare_onekey?url=https:\/\/salongweb.com\/wordpress-editor-add-css.html&title=WordPress \u5982\u4f55\u6839\u636e\u6587\u7ae0\u7c7b\u578b\u5411\u7f16\u8f91\u5668\u6dfb\u52a0 CSS&desc=\u5728WordPress\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u5411\u4e3b\u9898\u4e2d\u6dfb\u52a0CSS\u6587\u4ef6\u6765\u4e3a\u9875\u9762\u548c\u6587\u7ae0\u6dfb\u52a0\u6837\u5f0f\u3002\u4f46\u662f\uff0c\u5982\u679c\u60a8\u5e0c\u671b\u6839\u636e\u6587\u7ae0\u7c7b\u578b\u6dfb\u52a0\u81ea\u5b9a\u4e49\u6837\u5f0f\uff0c\u8be5\u600e\u4e48\u529e\u5462\uff1f\u5728\u672c\u6587\u4e2d\uff0c\u6211\u4eec\u5c06\u4ecb\u7ecd\u5982\u4f55\u5728\u6587\u7ae0\u7f16\u8f91\u5668\u4e2d\u6dfb\u52a0\u81ea\u5b9a\u4e49CSS\u6837\u5f0f\uff0c\u4ee5\u6839\u636e\u6587\u7ae0\u7c7b\u578b\u4e3a\u533a\u5757\u7f16\u8f91\u5668\u6dfb\u52a0\u6837\u5f0f\u3002

\u6b65\u2026&summary=&site=\u8428\u9f99\u7f51\u7edc"}>