l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在 WordPress 区块编辑器（Gutenberg）中创建可重用区块

如何在 WordPress 区块编辑器（Gutenberg）中创建可重用区块

写 Bug工程师：

在 WordPress 的 Gutenberg 编辑器中创建可重用区块是一项非常实用的技能，它允许你在多个页面和文章中重复使用特定的内容布局或元素。这不仅提高了网站的设计效率，还增强了用户体验。下面我将详细介绍如何在 Gutenberg 中创建可重用区块以及一些实际操作步骤。

步骤 1: 首先确认你的环境

确保你已经安装并启用了 Gutenberg 模式。如果还没有，请访问 WordPress 管理面板，找到“外观”->“编辑器”，然后选择“启用 Gutenberg”。

步骤 2: 创建新区块

  1. 登录到您的 WordPress 网站。
  2. 在左侧菜单栏点击“编辑”按钮进入编辑模式。
  3. 在编辑器顶部，你可以看到“区块工具”图标。点击它打开区块编辑器。
  4. 在区块编辑器中，你会看到一个空白区域用于添加新的区块。点击这个空白区域来创建一个新的区块。

步骤 3: 设计你的区块

  • 设置区块属性：在区块编辑器底部，你可以调整区块的标题、标签等信息。
  • 插入内容：点击“内容”选项卡，然后开始输入或上传你需要显示的文字、图片或其他媒体文件。
  • 样式与格式：在这个部分，你可以应用颜色、字体大小、边距等样式来美化你的区块。

步骤 4: 导入自定义样式

如果你希望区块具有更丰富的样式，可以导入自定义样式。点击“样式”选项卡，在这里你可以选择从本地文件夹导入CSS文件或者直接输入CSS代码。

步骤 5: 调整区块行为

  • 拖放功能：通过拖拽区块的位置，你可以轻松地改变它们之间的排列顺序。
  • 区块组合：有些区块可能支持与其他区块组合使用，例如，如果你有一个带有文本和图片的区块，你可以尝试将其放在其他区块之间以创建不同的布局。

步骤 6: 测试与优化

完成区块设计后，记得回到编辑器的顶部，点击“保存更改”。之后，您可以在其他页面和文章中使用这些区块了。为了确保其可用性，可以考虑使用区块库中的模板或插件来帮助管理区块的创建和维护。

示例代码

以下是一个简单的例子，展示了一个基本的区块结构：

<div class="custom-block">
    <h2>This is a custom block title</h2>
    <p>This is the content of my custom block.</p>
    <img src="https://example.com/image.jpg" alt="Example Image">
</div>

使用步骤

  1. 将上述代码粘贴到您的网页编辑器中。
  2. 设置区块属性，如标题和描述。
  3. 插入图像并调整位置。
  4. 完成所有设置后，保存更改。

效果

当你保存并发布这段代码时，它会在您的网站上生成一个带有自定义标题和内容的区块，同时包括一张来自外部链接的图片。这种区块可以在多个页面和文章中重复使用，极大地提升了网站的整体视觉一致性。

通过以上步骤，你已经在 WordPress 的 Gutenberg 编辑器中成功创建了一个可重用区块。这种方法不仅可以提高网站的专业性和美观度，还能节省大量的时间，让你专注于内容本身。

黑板IDE教书匠：

在 WordPress 中，创建和使用可重用的区块是非常重要的，因为它们可以帮助您提高工作效率并节省时间。以下是如何在 Gutenberg 编辑器中创建可重用区块的一些建议：

1. 创建一个新区块

首先，您需要创建一个新的区块。点击 Add New Block 按钮来启动这个过程。

<div class="editor">
    <div class="editor__block editor__block--new"></div>
</div>

2. 添加自定义属性

一旦创建了区块，您可以添加自定义属性以使其更具个性化。这可以通过拖放或直接输入来完成。

使用拖放

  • 在空白处右键点击，然后选择 “Insert Custom HTML”。
  • 点击您的自定义HTML文本区域，将鼠标悬停在它上面，直到出现“编辑”图标，然后点击它。

直接输入

  • 在空白处右键点击，然后选择 “Insert Custom HTML”.
  • 在弹出的窗口中，粘贴您的自定义HTML代码。

3. 创建自定义标签

如果您希望您的区块能够多次复用，请考虑创建自定义标签。在 Gutenberg 编辑器中，右键点击您的区块，然后选择 “Create a new block type”.

示例代码

自定义标签

假设我们有一个名为 my_block_type 的新区块类型，并且我们想要为它创建一个自定义标签。

  1. 打开 wp-content/themes/your_theme/ 文件夹下的 functions.php 文件。

  2. 将以下代码添加到文件末尾：

    add_action( 'init', 'register_my_custom_tag' );
function register_my_custom_tag() {
   $labels = array(
       'name'               => _x( 'My Custom Tag', 'Block Type Name', 'your-theme' ),
       'singular_name'      => _x( 'My Custom Tag', 'Block Type Singular Name', 'your-theme' ),
       'menu_name'          => __( 'My Custom Tags', 'your-theme' ),
       'all_items'          => __( 'All My Custom Tags', 'your-theme' ),
       'parent_item_colon'  => __( 'Parent My Custom Tag:', 'your-theme' ),
       'search_items'       => __( 'Search My Custom Tags', 'your-theme' ),
       'popular_items'      => __( 'Popular My Custom Tags', 'your-theme' ),
       'items_list_navigation' => __( 'Items List Navigation', 'your-theme' ),
       'items_list_page'     => __( 'Items List Page', 'your-theme' ),
       'new_item_name'      => __( 'New My Custom Tag Name', 'your-theme' ),
       'add_new_item'       => __( 'Add New My Custom Tag', 'your-theme' ),
       'edit_item'          => __( 'Edit My Custom Tag', 'your-theme' ),
       'update_item'        => __( 'Update My Custom Tag', 'your-theme' ),
       'view_item'          => __( 'View My Custom Tag', 'your-theme' ),
       'scraped_item_title' => __( 'Scrapped My Custom Tag Title', 'your-theme' ),
       'insert_into_item'   => __( 'Insert Into My Custom Tag', 'your-theme' ),
       'uploaded_to_this_item' => __( 'Uploaded To This My Custom Tag', 'your-theme' ),
       'filter_items_list'  => __( 'Filter Items List', 'your-theme' ),
   );

   $args = array(
       'label'              => __( 'My Custom Tags', 'your-theme' ),
       'description'        => __( 'My custom tags for your theme.', 'your-theme' ),
       'public'             => true,
       'show_ui'            => true,
       'show_in_menu'       => true,
       'menu_position'      => 5,
       'has_archive'        => false,
       'exclude_from_search' => false,
       'publicly_queryable'  => true,
       'capability_type'     => 'post',
       'hierarchical'       => false,
       'menu_icon'          => 'dashicons-tag',
       'supports'           => array('title','editor','author'),
   );

   register_post_type( 'mycustomtags', $args );
}

现在，当您创建新的 my_block_type 块时，它会自动包含自定义标签 mycustomtags。您可以像创建任何其他块一样操作它。

通过以上步骤，您可以有效地管理和复用 WordPress 中的区块。这些技巧不仅使您的网站更加专业和美观，而且也提高了工作效率。

, ,

最新更新