为 WordPress 古腾堡块打造专属自定义样式教程

介绍

WordPress 古腾堡块是从 WordPress 5.0 版本引入的编辑器功能，使内容编辑变得模块化和高效。对于开发者而言，古腾堡块不仅方便使用，还支持通过自定义样式和脚本来调整块的外观和交互效果。本文将一步步指导你如何为古腾堡块创建个性化样式，提升网站的专业感和用户体验。

步骤

第一步：准备工作

开始之前，请确认你使用的是 WordPress 5.0 或以上版本，同时具备基本的 CSS 和 JavaScript 知识，这将有助于你更好地理解和应用自定义样式。

第二步：创建自定义样式

自定义样式的关键在于修改主题的 functions.php 文件，向编辑器加载新的 CSS 文件。打开 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。filemtime 函数确保每次样式文件更新时，浏览器自动加载最新版本，避免缓存问题。

接着，在主题的 css 文件夹中创建“my-block-style.css”，所有自定义样式均写入该文件。

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

准备好样式文件后，打开 WordPress 编辑器，新增或选择你想要定制的块。在“块”设置中找到“添加自定义样式”功能，输入对应块的 CSS 选择器。

例如，要修改段落块的文字颜色，可以写入：

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

“.wp-block-paragraph” 是段落块的默认 CSS 类名。若需为多个块设置样式，可在选择器框中同时输入多个选择器，样式将应用于所有对应块。

第四步：保存更改

完成样式输入后，点击“添加样式”按钮保存。刷新编辑器，即可见所选块已应用自定义样式，网站外观随之焕然一新。

总结

通过在主题文件中引入自定义 CSS 并针对具体块设置样式，WordPress 古腾堡块的定制变得灵活且强大。掌握以上技巧，你可以轻松打造独具风格的内容模块，提升网站的专业度和用户体验。希望本文对你设计古腾堡块的样式有所帮助。