www.wpcitation.com/

Tag: WordPress 教程

  • 深入掌握 Gutenberg 编辑器：实用技巧与高级功能详解（03）

    深入掌握 Gutenberg 编辑器：实用技巧与高级功能详解（03）

    在本篇文章中，我们将继续深入探讨 WordPress 的 Gutenberg 编辑器，重点介绍一些高级功能和实用技巧，帮助你进一步提升内容创建的效率。从为 Block 添加锚点和自定义样式，到使用不同类型的重要 Block，我们将一步步解析这些功能如何帮助你实现更加灵活和专业的网页布局。无论你是想要打造更具吸引力的博客文章，还是优化页面的用户体验和 SEO，这篇指南都将为你提供宝贵的参考。

     10，为Block添加锚点

    什么是锚点？锚点是超链接的一种，比如在某篇博客中法国新星里萨谢成老鹰队史首位状元秀这个副标题标题，添加了2QKI3OHK锚点，当然锚点的名称，你安装自己的自定义来，不用和我一样，那么你打开https://xxx.com/博客主标题/#2QKI3OHK，不是文章内容的副标题，而是文章的主标题哦

    步骤：选中需要添加锚点的Block，在 区块>高级设置>HTML锚点 中输入锚点名称，保存即可。（如下图）

    图片[1]-361Sale WordPress Care

    11，自定义Block的CSS样式

    由于 Block 中的预设样式可能无法完全满足我们的需求，喜欢 DIY 的用户可能需要通过 CSS 代码自定义样式。只需在“区块 > 高级设置 > 额外的 CSS 类”中添加 CSS 变量名即可实现自定义样式。（如下图）

    图片[2]-361Sale WordPress Care

    12，几个重要的Block（几个不同类型的）这个是重点，记得区分

    栏目（columns）

    栏目中的框通常称为“列”，你可以将其他 Block 添加到这些列中，从而增加布局的多样性。栏目 Block 提供了几种默认的列数和列宽布局选项。例如，下图中的内容区域由两列组成，每列各占 50% 的宽度，再加上图片 Block、文字 Block 和按钮 Block 组合而成，实现了灵活的页面布局。（如下图）

    图片[3]-361Sale WordPress Care

    当然，在选择了列数后，我们还可以手动添加新的列。只需将鼠标移到两个列之间，点击出现的黑色“+”号，就可以新增一列。建议通过左侧的结构列表选中相应的列，这样更容易准确定位和编辑目标 Block。然后，在右侧的设置栏中，你可以自由设置列的宽度。建议将单位调整为百分比（%），例如输入 30，就表示该列的宽度占浏览器窗口宽度的 30%，这样设置会更加直观。

    图片[4]-361Sale WordPress Care
    图片[5]-361Sale WordPress Care

    然后添加你想要的Block到列里面即可。非常的直观

    行（row）

    插入“行”后，新增的 Block 会默认归入该行的分组中。行 Block 会根据内容自动调整布局，比如自动对齐不同段落的文字高度。

    如果你选中行 Block，还可以在右侧面板中将方向改为纵向，这样布局就会恢复到像默认状态一样的堆叠排列。（如下图）

    图片[6]-361Sale WordPress Care

    简码（shortcode)

    有些插件可能不支持 Gutenberg Block，但它们提供短代码。你可以将短代码（格式为：[XXXX]）粘贴到编辑器中，这样插件的内容样式就会在前端展示，尽管在编辑页面中无法直接看到效果。但保持后，返回前端或者重新打开新页面查看，就能看到效果是否是你需要的

    图片[7]-361Sale WordPress Care

    具体的简码查看你需要插件的页面，或者插件文档有提供

    目录（table of content）

    对于篇幅较长的文章来说，目录是一个重要的元素，有助于提升用户体验，同时也有利于 SEO。然而，WordPress 并没有内置目录 Block。不过在 Block 面板中，可以通过搜索 “table of content” 来找到推荐的相关插件，这是一个非常方便的功能。这些插件完全支持 Gutenberg Block，因此你可以挑选满意的目录插件，并像添加其他 Block 一样，将目录拖动到页面的相应位置即可。

    图片[8]-361Sale WordPress Care

    文章设置

    此部分均在右侧文章选项卡下完成操作。

    图片[9]-361Sale WordPress Care

    可见性与发布时间设置
    可以将文章设置为公开、私密和受密码保护这三种。

    图片[10]-361Sale WordPress Care

    当文章更新过后，我们也应该修改发布时间，有利于SEO。

    图片[11]-361Sale WordPress Care

    设置url（当前文章的链接）

    在保存或发布文章/页面后，“固定链接”栏会出现一个“URL 别名”字段。你可以在其中输入你想要显示的 URL，然后重新保存或发布即可。

    请注意，只有在文章/页面已经保存或发布后，才能自定义 URL。新建的文章/页面在未保存或发布前无法设置自定义 URL。

    图片[12]-361Sale WordPress Care

    如上图我选择的是文章id也就是文章名字，故链接（url）是固定的，如果你要修改请在第一次保持前，修改文章的id（标题）

    图片[13]-361Sale WordPress Care

    分类和标签

    按照你实际需要设置好文章分类和标签，以便筛选，同时对SEO也更好，如下图，根据文章来

    图片[14]-361Sale WordPress Care

    特色图片

    图片[15]-361Sale WordPress Care

    选择尺寸，图片清晰合适的图片，要符合文章的主题，突出特点，因为这是展示在首页的第一印象

    摘要

    图片[16]-361Sale WordPress Care

    在博客列表页中显示的文章内容概要，尽量简洁、引人入胜。如上图所示。

    总结

    通过这篇深入的 Gutenberg 教程，相信你已经掌握了这些高级功能和实用技巧，现在可以更加灵活地编辑和优化你的页面和博客文章。Gutenberg 编辑器的强大之处在于其灵活性和可扩展性，能够帮助你轻松实现多样化的布局和设计需求。作为 WordPress 中最常用的写作和设计工具，熟练掌握这些技巧将大大提升你的内容创建效率。下一步，我们将正式开始探讨如何结合默认主题与 Gutenberg 实现更出色的页面排版，敬请期待！

  • 如何使用 WordPress 默认主题和 Gutenberg 编辑器编写博客文章（02）

    如何使用 WordPress 默认主题和 Gutenberg 编辑器编写博客文章（02）

    在这篇文章中，我们将深入探讨如何使用 WordPress 的默认主题和古腾堡编辑器（Gutenberg Editor）来编写博客文章。古腾堡编辑器作为 WordPress 的内置编辑器，通过使用区块（Block）系统，为用户提供了一个灵活、直观的内容创建体验。无论你是 WordPress 的新手还是经验丰富的用户，这篇指南都将帮助你充分利用古腾堡编辑器的强大功能，轻松创建和管理博客内容。

    1，块（Block）的使用方法

    在 WordPress 的古腾堡编辑器中，Block（区块）是预制的元素模块或小部件，允许用户在页面和文章中轻松添加和配置内容。Block 将各种功能整合在一起，使内容创建过程更加直观和灵活。

    举个简单的例子，标题Block 就是一个典型的区块。使用标题Block，用户不仅可以插入标题文本，还可以直接在编辑器中设置标题的标签级别（如H1、H2、H3等），调整对齐方式、字体大小、文本颜色、背景颜色等。这些功能都被开发者整合到标题Block中，用户无需编写代码或使用额外的插件就能实现这些自定义设置。

    此外，古腾堡编辑器中的Block不仅限于简单的文本和标题。还有许多更复杂的Block，如图像Block、表格Block、按钮Block、视频Block等。这些复杂的Block通常整合了更多功能，使用户能够轻松实现各种内容布局和设计需求。

    通过这种模块化的方式，古腾堡编辑器赋予了用户更大的灵活性和控制力，让他们能够轻松构建符合自己需求的页面和文章内容，而无需深入了解代码或使用其他复杂的工具。这种方法极大地简化了网站内容的创建和编辑过程，同时也使网站的设计更加丰富和多样化。（如下图）

    图片[1]-361Sale WordPress Care

    2，添加Block

    在古腾堡编辑器中，点击下图中的任意一个箭头位置，都可以调出Block面板。这个面板内置了几十个不同的Block，初次使用时可能不太熟悉，但可以逐个添加并查看它们的样式。不过，WordPress自带的Block样式比较有限，设置参数也较为简单，有时无法满足我们的所有需求。因此，我们可以通过下载一些专门的插件来扩展Block的数量，比如 Kadence Block、Spectra、Getwid 等。（如下图）

    图片[2]-361Sale WordPress Care

    3，设置Block样式

    选中一个Block后，上方会显示一个包含样式和功能选项的工具条，鼠标悬停在上面时会出现文字提示。右侧的区块编辑区则提供了颜色、字体等样式设置参数。你可以根据需要自由修改这些设置，以实现所想要的设计样式。（如下图）

    图片[3]-361Sale WordPress Care

    4，转换Block

    在古腾堡编辑器中，一些Block可以互相转换，这样可以避免重复删除旧Block再添加新Block的步骤。尤其是段落Block，支持直接转换为多种类型的块，这极大地提升了写作体验。

    转换按钮位于拖动Block按钮的左侧。如果某些Block不支持转换，则只会显示该Block支持的样式选项。（如下图）

    图片[4]-361Sale WordPress Care

    5，移动Block

    有时我们需要更换已添加Block的位置，可以通过以下两种方式实现：

    方式一：在左侧的结构视图中选中Block，然后拖动到目标位置——推荐使用此方法。

    方式二：按住Block上方工具条中的“拖动”按钮，将Block移动到相应位置。

    这两种方式在拖动时都支持区域互换：你可以将结构目录区的Block拖动到内容编辑区进行位置调整，内容编辑区的Block也可以以此方式进行互换。（如下图）

    图片[5]-361Sale WordPress Care

    6，组合Block

    为了便于管理，我们可以将相关的多个 Block 组合在一起。
    方法：在左侧结构面板中，选中所有需要归类的 Block，点击工具栏中的省略号，然后选择“组合”即可。（如下图）

    图片[6]-361Sale WordPress Care

    7，制作可重复利用的Block

    制作区块样板

    当设计好一个模块的样式后，其他页面可能也需要使用相同的样式。此时，可以将这个模块转换为可重复使用的 Block（类似于模板）。例如，想在其他页面复用图中的“照片+按钮”模块，只需更改图片和文字即可，这将大大减少工作量。

    方法：在列表视图中，选中需要重复使用的模块，点击工具栏最右边的省略号，选择“创建区块样板”（旧名：添加至可重用区块），并为其设置一个易于识别的名称。我们可以创建两种类型的可复用 Block：

    1. 全站同步更改的可复用 Block（开启已同步）：在一个页面上更改了它的样式或内容，所有其他使用了这个 Block 的页面也会自动同步更新。
    2. 非同步更改的可复用 Block（关闭已同步）：在新页面上对这个 Block 进行任何更改都不会影响其他页面。

    根据需求选择合适的模式（通常选择非同步更改的可复用 Block，因为大部分情况下，我们只需要保持相同的样式布局，而非内容）。（如下图）

    图片[7]-361Sale WordPress Care
    图片[8]-361Sale WordPress Care

    假如保存的是全站同步的可复用块，那么这个区块的颜色便会自动变为紫色，方便我们识别。

    自6.3版本起，WordPress为古腾堡编辑器添加了模板功能，在左侧添加block的选项卡中能够找到，菜单名为样板。

    我们自己制作的可重复使用的block就会出现在这里面的我的区块样式中。下次使用时就到这里面找就行了。（如下图）

    图片[9]-361Sale WordPress Care

    你也可以在页面编辑区域选中这个可重用 Block，点击“管理模式”进入可重用 Block 的集中管理页面。之后，便可以统一对所有可重用 Block 进行修改。这里名称设置的是（测试3）

    图片[10]-361Sale WordPress Care

    进入管理界面后，在“我的区块样板”页面，你可以看到自己创建的所有可复用 Block。标有“已同步”标签的表示全站同步修改的块，而标有“未同步”标签的则表示非全站同步修改的块。（如下图）

    图片[11]-361Sale WordPress Care

    在新页面使用可复用区块时，最佳方案是：全站相同的内容使用全站同步的可复用 Block，而仅样式相同的内容使用非全站同步的可复用 Block。

    不过，这并不意味着全站可复用 Block 只能用于全站相同的内容。实际上，你可以在页面中调用它，并对其进行“分离”操作，这样你就可以在该页面中单独编辑组合中的每个 Block，而不会影响其他页面的样式和内容。

    步骤：在工具栏的“更多设置”中选择“分离区块样板”即可。（如下图）

    图片[12]-361Sale WordPress Care

    8，复制、剪切Block

    古腾堡的 Block 支持复制和剪切操作，直接使用 Ctrl + C/X/V 即可。此外，还支持跨域复制和剪切。（如下图）

    图片[13]-361Sale WordPress Care

    9，删除Block

    在结构面板或工具栏最右侧的省略号中，点击最后一项即可使用“删除”功能。另外，你也可以直接按键盘上的 Delete 键快速删除（不适用于段落、标题等文字类型的 Block）。（如下图）

    图片[14]-361Sale WordPress Care

    总结

    在本篇文章中，我们详细介绍了如何利用 WordPress 的古腾堡编辑器和默认主题高效编写博客文章。从基本的区块使用方法到高级的可重复利用区块，我们涵盖了各种实用技巧。希望通过这篇指南，你能够更加熟练地运用这些工具，提升网站内容的创建效率和设计水平。下一期，我们将继续深入探讨更多 WordPress 和古腾堡编辑器的高级功能，敬请期待！