为 WordPress 古腾堡块设计自定义样式：第 1 部分

介绍

WordPress 古腾堡块（Gutenberg Block）是 WordPress 5.0 版本新增的功能。古腾堡块使得在 WordPress 编辑器中创建不同的内容块更加容易和快捷。如果你是一个 WordPress 开发者，你会发现古腾堡块的设计非常棒，因为这允许您添加自己的自定义样式和 JavaScript 来改变块的外观和行为。本文将会逐步教你如何为 WordPress 古腾堡块设计自定义样式，让你的网站更加出众。

步骤

第一步：准备工作

在开始之前，确保你已经有一个运行 WordPress 5.0 或更新版本的网站。同时，你需要了解 CSS 和 JavaScript 的基础知识。

第二步：创建自定义样式

要创建自定义样式，我们需要修改主题文件的 functions.php。打开 functions.php 文件，并在文件末尾添加以下代码：

function my_custom_block_style() {
  wp_enqueue_style(
    'my-custom-block-style', // 这个样式的名字
    get_stylesheet_directory_uri() . '/css/my-block-style.css', // 你的样式文件所在的路径和名称
    array( 'wp-blocks' ),
    filemtime( get_stylesheet_directory() . '/css/my-block-style.css' )
  );
}
add_action( 'enqueue_block_editor_assets', 'my_custom_block_style' );

这段代码中，“my-custom-block-style” 是你的样式文件的名字，可以根据自己的需要来更改它。接下来的一个参数是样式文件所在的路径和名称。这里我们假设样式文件位于主题文件夹下的“css”文件夹中，并命名为 my-block-style.css。最后一个参数是样式文件的最好修改时间，这保证了每当你修改了样式文件，WordPress 会自动刷新缓存，而不是加载旧的样式文件。

现在你需要添加一个名为“my-block-style.css”的文件到你的主题文件夹中的“css”文件夹中。接下来，你所有的自定义样式代码都应该写在这个文件中。

第三步：选择块并添加样式

现在你已经准备好添加样式了。首先，你需要找到你想要更改的块。打开 WordPress 编辑器，并在内容区域中添加一个新的块。然后，点击该块，打开“块”设置菜单，选择“添加自定义样式”选项。

在“添加自定义样式”对话框中，你可以看到一个 CSS 选择器框。这里你需要在选择器框中输入你想要添加样式的 CSS 选择器。

例如，如果你想要更改段落块（Paragraph Block）的颜色，你需要使用以下代码：

.wp-block-paragraph {
  color: red;
}

这里，“.wp-block-paragraph” 是段落块的 CSS 选择器，它用于将样式添加到条目标题块上。如果你想要添加样式到多个块，请在选择器框中输入相应的 CSS 选择器。

第四步：保存更改

最后，你需要点击“添加样式”按钮来保存你的更改。此时，你就可以在编辑器中看到选择的块被应用了相应的自定义样式。

总结

自定义样式是为 WordPress 古腾堡块添加自定义样式的一种常见方式。通过在主题文件中添加自定义样式，然后为所选择的块添加相应的样式，你可以快速为你的网站添加独特的外观和行为。希望这篇文章能够帮助你进一步了解如何为 WordPress 古腾堡块设计自定义样式。