您是想学习如何编辑WordPress网站吗?我们已经帮助数百万初学者使用WordPress构建了他们的网站,WordPress是市场上最受欢迎的网站构建器。如果您在编辑网站方面需要帮助,那么您来对地方了。在本文中,我们将向您展示编辑 WordPress 网站的基础知识。
![How to Edit a WordPress Website (Ultimate Guide) 如何编辑 WordPress 网站(终极指南)](https://img.itaoda.cn/wp-content/uploads/2024/03/how-to-edit-a-wordpress-website-og.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
编辑 WordPress 网站的方法概述
作为一个开源内容管理系统,WordPress有很多功能来构建和编辑你的网站。
如果您最近安装了 WordPress,那么您可能遇到了 Gutenberg,它是 WordPress 的拖放块编辑器,可让您自定义页面或帖子。此功能非常简单且对初学者友好。
![The Gutenberg block editor interface Gutenberg 块编辑器界面](https://img.itaoda.cn/wp-content/uploads/2024/03/block-editor-example.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
您可能还看过完整站点编辑器。
这是 Gutenberg 的扩展,可让您使用块编辑器自定义基于块的 WordPress 主题。
![The WordPress Full Site Editor WordPress全站编辑器](https://img.itaoda.cn/wp-content/uploads/2024/03/fullsiteeditor.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
也就是说,如果您使用经典的、非块的 WordPress 主题,那么您将无法使用 FSE。相反,您将不得不使用 WordPress 主题定制器。
此功能不附带拖放功能,因此它不那么用户友好。您必须使用左侧面板中的一些菜单设置来编辑主题。
![Using the WordPress Theme Customizer to edit a transportation and logistics website 使用 WordPress 主题定制器编辑运输和物流网站](https://img.itaoda.cn/wp-content/uploads/2024/03/wordpress-theme-customizer-min.jpg?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
如果您需要更多 WordPress 内置功能中没有的自定义选项,那么您可以安装页面构建器插件,例如 SeedProd。
这是我们通常推荐给WordPress初学者的。与 Gutenberg 一样,SeedProd 具有拖放功能。但是,它提供了更多获得创意的方法,例如动画效果和更多内容块选项来构建您的页面。
![Editing the online coaching business theme in SeedProd 在 SeedProd 中编辑在线辅导业务主题](https://img.itaoda.cn/wp-content/uploads/2024/03/seedprod-page-builder-min-1.jpg?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
一些 WordPress 用户也使用经典编辑器。它是 WordPress 的旧页面和帖子编辑器,看起来有点像文档编辑器。
在最新的 WordPress 版本中,此功能不再默认启用。但是,有些人仍然使用它,因为他们更熟悉它并希望保留他们当前的网站设计。
![The Classic Editor Interface 经典编辑器界面](https://img.itaoda.cn/wp-content/uploads/2024/03/classiceditorinterface.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
在本文中,我们将向您展示如何使用我们提到的编辑器编辑 WordPress 网站的不同部分。
如何编辑 WordPress 主题
安装 WordPress 后您应该做的第一件事就是选择和自定义您的主题。我们将向您展示 3 种方法。
使用完整站点编辑器自定义块主题
全站编辑是在 WordPress 5.9 中引入的。它旨在使用块编辑器轻松编辑 WordPress 块主题。
您正在使用块 WordPress 主题的一个明显迹象是,您将在 WordPress 管理区域中看到外观 » 编辑器。如果您看到“外观”»“自定义”,则可以跳到使用“主题定制器”。
![Clicking Appearance Editor in the WordPress admin 单击 WordPress 后台中的外观编辑器](https://img.itaoda.cn/wp-content/uploads/2024/03/appearance-editor-min-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
要使用完整站点编辑器,您需要安装一个块主题。您可以在我们用于全站编辑的最佳块 WordPress 主题列表中找到很多。
如果您想找到一些免费选项,请转到外观 » 主题。然后,单击“添加新主题”。
![Adding a new WordPress theme in the admin area 在管理区域添加新的 WordPress 主题](https://img.itaoda.cn/wp-content/uploads/2024/03/themes-add-new-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
之后,只需切换到“阻止主题”选项卡即可。
然后,您将在屏幕上看到数十个块主题。有关安装说明,请查看我们关于如何安装 WordPress 主题的分步指南。
![Finding WordPress block themes in the admin area 在管理区域中查找 WordPress 块主题](https://img.itaoda.cn/wp-content/uploads/2024/03/block-themes-wordpress-admin-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
安装主题后,您必须转到外观 » 编辑器。
现在,您将看到主的全站编辑仪表板。然后,您可以编辑主题的导航菜单、样式、页面、模板和图案。
我们将在本教程的其余部分讨论这些主题,但我们将简要向您展示如何更改主题的样式。
为此,请单击“样式”菜单。
![Clicking Styles in the Full Site Editing interface 单击“全站编辑”界面中的“样式”](https://img.itaoda.cn/wp-content/uploads/2024/03/fse-interface-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
现在,您将看到主题提供的配色方案和排版配对列表。
每次您单击样式时,界面都会为您预览它。
![Choosing a theme style in the Full Site Editor 在全站编辑器中选择主题样式](https://img.itaoda.cn/wp-content/uploads/2024/03/fse-styles-min-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
一旦您对自己的选择感到满意,只需单击“保存”。或者,您可以创建自定义样式。
使用主题定制器自定义经典主题
如果您使用经典的 WordPress 主题,那么您将使用主题定制器对其进行编辑。只需从 WordPress 管理区域前往外观 » 自定义即可访问它。
![Opening the WordPress theme customizer 打开 WordPress 主题定制器](https://img.itaoda.cn/wp-content/uploads/2024/03/wordpress-appearance-customize.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
现在,您可以在此处自定义的内容因您使用的主题而异。
例如,如果您有 Astra 主题,则可以自定义整个网站的样式、页眉、页脚、侧边栏、页面、徽标等。
因此,我们建议您阅读主题的文档以获取更多说明。
![What the Theme Customizer looks like for Astra theme Astra 主题的主题定制器是什么样子的](https://img.itaoda.cn/wp-content/uploads/2024/03/theme-customizer-astra-min.jpg?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
我们的主题定制器指南可以为您提供更详细的指导。
进行更改后,您可以以不同的屏幕分辨率预览网站。然后,您可以点击顶部的“发布”按钮进行编辑。
![Publishing a classic WordPress theme in the Theme Customizer 在主题定制器中发布经典的 WordPress 主题](https://img.itaoda.cn/wp-content/uploads/2024/03/publish-theme-customizer-min-1.jpg?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
主题定制器的一个缺点是它的用户体验不如块编辑器灵活或简单。如果您有这种感觉,那么我们建议您改用下一种方法。
使用页面构建器插件自定义 WordPress 主题
许多对平台的内置设计功能不满意的 WordPress 用户使用页面构建器来编辑他们的网站。这是一个WordPress插件,可以取代默认编辑器来设计网站的不同部分。
大多数页面构建器都带有拖放功能,因此它们与块编辑器一样易于使用。更重要的是,它们带有更多的页面块和模板来个性化您的网站。
在我们尝试过的所有页面构建器中,我们发现 SeedProd 是最好的。它带有 300+ 模板,适用于各种行业类别,从电子商务和住宿到服务。
![SeedProd Website and Theme Builder SeedProd 网站和主题生成器](https://img.itaoda.cn/wp-content/uploads/2024/03/seedprod.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
要使用 SeedProd,您需要先安装 WordPress 插件。
接下来,切换到 SeedProd » Theme Builder。
只需单击“主题模板套件”即可查看您的主题选项。
![Accessing SeedProd's Theme Template Kits 访问 SeedProd 的主题模板套件](https://img.itaoda.cn/wp-content/uploads/2024/03/theme-template-kits-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
如您所见,有许多可用的主题模板套件,从在线商店到服务网站。随意使用过滤和排序设置来找到适合您需求的设置。
做出选择后,只需将鼠标悬停在主题模板上,然后单击橙色复选标记按钮即可使用它。
![Choosing a theme template in SeedProd 在 SeedProd 中选择主题模板套件](https://img.itaoda.cn/wp-content/uploads/2024/03/seedprod-select-theme-template-kit-min.jpg?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
现在,只需返回“主题生成器”页面,然后选择要编辑的主题模板即可。
出于演示目的,我们将向您展示如何编辑 SeedProd 主题模板的样式。为此,请找到“全局 CSS”主题模板,将鼠标悬停在它上面,然后单击“编辑设计”。
![Editing a theme template kit's Global CSS in SeedProd 在 SeedProd 中编辑主题模板工具包的全局 CSS](https://img.itaoda.cn/wp-content/uploads/2024/03/seedprod-global-css-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
您现在位于 SeedProd 页面构建器中,可以自定义主题模板的样式。在这里,您可以更改网站的颜色、字体、背景、按钮、表单和布局。
让我们看看如何更改主题的默认字体。为此,请打开“字体”菜单。然后,只需为标题和正文文本选择 SeedProd 的众多字体和颜色选项之一。
您所做的所有更改都将自动显示在右侧预览中。
![Changing a SeedProd theme template kit font in the Global CSS theme template 更改全局 CSS 主题模板中的 SeedProd 主题模板工具包字体](https://img.itaoda.cn/wp-content/uploads/2024/03/seedprod-global-css-settings-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
一旦您对样式感到满意,只需单击“保存”即可正式进行这些更改。
然后,您可以返回 SeedProd » 主题生成器并打开右上角的“启用 SeedProd 主题”切换。
![Enabling the SeedProd theme template kit in WordPress 在 WordPress 中启用 SeedProd 主题模板套件](https://img.itaoda.cn/wp-content/uploads/2024/03/enable-seedprod-theme-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
如何编辑 WordPress 页面或帖子
如果您已将 WordPress 更新到最新版本,那么您很可能会使用 Gutenberg 块编辑器来编辑页面或帖子。
您可以通过转到页面 » 添加新页面来创建新页面。这将自动创建一个完全空白的页面,并将您定向到块编辑器。
另一方面,如果要编辑现有页面,例如主页或博客页面,则可以转到“页面”»“所有页面”。将光标悬停在要编辑的页面上,然后单击“编辑”。
![Clicking the Edit button to edit an existing WordPress page 单击“编辑”按钮以编辑现有 WordPress 页面](https://img.itaoda.cn/wp-content/uploads/2024/03/edit-pages-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
另外,还有“快速编辑”功能。
这允许您修改页面的标题、URL 段和上次修改日期。
![Clicking the Quick Edit button in the WordPress Pages page 单击 WordPress 页面中的“快速编辑”按钮](https://img.itaoda.cn/wp-content/uploads/2024/03/quick-edit-pages-new-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
您可以使用“快速编辑”功能执行各种操作。
示例包括为页面设置密码、将其设为私有、将其指定为父页面、更改页面模板、允许/禁止评论以及更改页面状态。
![The Quick Edit feature for WordPress pages WordPress 页面的快速编辑功能](https://img.itaoda.cn/wp-content/uploads/2024/03/quick-edit-page-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
要创建新帖子,只需前往帖子 » 添加新帖子 制作新的空白帖子并使用块编辑器进行编辑。
像以前一样,您可以通过将光标悬停在所选帖子上并单击“编辑”来编辑现有的 WordPress 博客文章。
![The WordPress Posts interface in the WordPress admin area WordPress管理区域中的WordPress帖子界面](https://img.itaoda.cn/wp-content/uploads/2024/03/add-new-post-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
帖子的快速编辑功能类似,但有一些细微的差异。
在这里,您还可以添加标签、允许/禁止 ping 并使帖子具有粘性(在您的网站上有特色)。
![The Quick Edit feature for WordPress blog posts WordPress 博客文章的快速编辑功能](https://img.itaoda.cn/wp-content/uploads/2024/03/quick-edit-post-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
打开 WordPress 页面或帖子后,您可以在块编辑器中做很多事情。
通常,您将首先单击左上角的“+”添加块按钮。
在这里,您可以找到 WordPress 和您使用的插件的所有可用块。
![Opening the block inserter library in WordPress 在WordPress中打开块插入器库](https://img.itaoda.cn/wp-content/uploads/2024/03/block-inserter-library-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
然后,您可以将块拖放到主编辑区域。
之后,您可以使用块的工具栏和设置侧边栏来配置块的样式、尺寸、间距等。
![block-toolbar-settings-min WordPress中的区块设置侧边栏](https://img.itaoda.cn/wp-content/uploads/2024/03/block-toolbar-settings-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
如果您已经安装了 WordPress 插件,那么您可能还会在编辑界面下方看到一些设置。
例如,多合一 SEO 插件将向您显示一个部分,您可以在其中为搜索引擎优化页面或帖子的元标题和描述。
![The AIOSEO settings in the WordPress block editor WordPress 区块编辑器中的 AIOSEO 设置](https://img.itaoda.cn/wp-content/uploads/2024/03/block-editor-aioseo-settings-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
如何使用经典编辑器编辑 WordPress 页面或帖子
如果要使用经典编辑器,则需要启用它。您可以阅读我们关于如何禁用 Gutenberg 并激活经典编辑器的文章来执行此操作。
之后,只需转到“帖子”»“添加新帖子”或“页面”»“添加新页面”即可创建新帖子或页面,经典编辑器将显示在屏幕上。
![The WordPress classic editor WordPress经典编辑器](https://img.itaoda.cn/wp-content/uploads/2024/03/classic-editor-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
与块编辑器不同,您不会添加块来将内容插入到您的页面或帖子中。相反,您只能键入文本,使用编辑面板顶部的控件设置文本格式,并通过单击“添加媒体”按钮将媒体文件添加到您的内容中。
在编辑界面的底部和侧面,有发布页面/帖子、设置页面或帖子的类别/标签、上传特色图片等的设置。
您还可以在视觉和文本编辑模式之间切换。使用第二个编辑器,您可以修改帖子或页面的 HTML 代码。
![The text editing mode in the WordPress classic editor WordPress经典编辑器中的文本编辑模式](https://img.itaoda.cn/wp-content/uploads/2024/03/visual-text-classic-editor-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
如何使用页面构建器编辑 WordPress 页面
如果您已经使用像 SeedProd 这样的页面构建器来编辑您的主题,那么您也可以使用它来编辑页面。这样,您可以在所有页面中保持设计的一致性。
您需要创建一个新页面并打开块编辑器。如果 SeedProd 处于活动状态,那么您将在顶部看到一个按钮,上面写着“使用 SeedProd 编辑”。继续并单击它。
您也可以使用现有页面执行此操作。但是,请注意,内容不会被转移过来,您必须从头开始创建页面。
![Clicking the Edit with SeedProd button in the WordPress block editor 单击 WordPress 块编辑器中的 Edit with SeedProd 按钮](https://img.itaoda.cn/wp-content/uploads/2024/03/edit-with-seedprod.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
在页面构建器中,您将看到已添加 SeedProd 主题的页眉和页脚。您需要做的就是开始构建页面。
首先,从要在页面上使用的 8 种布局中选择一种。
![Choosing a layout for the section in a SeedProd theme template 在 SeedProd 主题模板中为部分选择布局](https://img.itaoda.cn/wp-content/uploads/2024/03/seedprod-choose-row-layout-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
在左侧,您将找到所有可以拖放到右侧的块和部分,即模板预览。
您可以使用它们将内容插入到页面中。
![SeedProd's block library SeedProd 的模块库](https://img.itaoda.cn/wp-content/uploads/2024/03/seedprod-add-blocks-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
每当您单击块或部分时,左侧都会显示用于自定义元素的可用设置。
在下面的屏幕截图中,您可以看到单击文本块将使块设置出现。您可以自定义文本、插入动态内容、编辑 HTML、更改对齐方式等。
![Customizing SeedProd's text block settings 自定义 SeedProd 的文本块设置](https://img.itaoda.cn/wp-content/uploads/2024/03/seedprod-click-block-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
完成页面编辑后,不要忘记单击“保存”以进行实时更改。
如果您想从头开始创建自定义登录页面,那么您也可以使用 SeedProd 来做到这一点。您需要做的就是转到 SeedProd » 登录页面。然后,单击“+ 添加新登录页面”按钮。
![Create a new landing page in SeedProd 在 SeedProd 中创建新的登录页面](https://img.itaoda.cn/wp-content/uploads/2024/03/newlandingpage.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
替代方案: elementor 是另一个很棒的页面构建器选项,用于设计有吸引力且以转换为中心的登录页面。
如何编辑 WordPress 页眉、页脚和其他模板部分
您可能还想编辑 WordPress 页眉、页脚、侧边栏和主题模板的其他部分。
这些是您网站上不属于主页或帖子内容的部分。但是,它们对于提供更多信息或有用的导航至关重要。
如何编辑这些部分取决于您使用的主题,因此让我们浏览一下每个选项。
如何编辑块主题的页眉、页脚和其他模板部分
如果您有块主题,则可以使用“全站编辑器”来编辑主题的页眉和页脚。
在“全站编辑器”中,页眉和页脚被视为模板部件。这些也称为 WordPress 模式(一组可重用的块),出现在您的网站中。
模板部件的其他示例包括评论部分和帖子元。
为了举例来说,我们将向您展示如何编辑您的 WordPress 标题,但您可以对其他模板部分重复这些步骤。
首先,转到外观 » 编辑器。 进入完整站点编辑器后,只需单击“模式”。
![Clicking the Patterns menu in the Full Site Editor 单击“全站编辑器”中的“模式”菜单](https://img.itaoda.cn/wp-content/uploads/2024/03/fse-patterns-min-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
您现在将看到 WordPress 主题提供的模式列表。
继续向下滚动到“模板部件”部分。然后,选择“标题”并单击标题模板部分。
![Opening the header template part in the WordPress Full Site Editor 在 WordPress 全站编辑器中打开标题模板部分](https://img.itaoda.cn/wp-content/uploads/2024/03/fse-patterns-header.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
现在,您需要单击旁边的铅笔按钮 标题文本.
这将打开块编辑器。
![Clicking the pencil button to edit the header using the Full Site Editor 单击铅笔按钮以使用“全站编辑器”编辑页眉](https://img.itaoda.cn/wp-content/uploads/2024/03/fse-edit-header.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
块编辑器处理模板部分的方式与处理页面和帖子的方式相同。您可以将各种块添加到标头,配置块,并在完成后更新更改。
标题通常包含网站徽标(或网站图标),因此也可以在此处添加。
![Adding the Site Logo block to the header in the Full Site Editor 将“站点徽标”块添加到“完整站点编辑器”中的页眉](https://img.itaoda.cn/wp-content/uploads/2024/03/site-logo-header.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
如果您想完全更改标题的外观,但不知道从哪里开始,请单击左上角的“+”添加块按钮。
然后,导航到“模式”选项卡,然后单击“标题”。您会在那里找到许多现成的标题布局。
![Finding WordPress header patterns in the Full Site Editor 在全站编辑器中查找 WordPress 标题模式](https://img.itaoda.cn/wp-content/uploads/2024/03/header-patterns-fse-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
有关更多信息,请参阅我们关于如何自定义 WordPress 标题的指南。
更改完标题后,单击“保存”。由于页眉是同步的模板部件,因此您在此处所做的所有更改都将应用于使用该页眉的所有页面。
现在,如果您想创建新的标题或任何其他模板部件,而不是编辑现有的标题,您可以返回“模式”页面。之后,单击“+ 创建图案”按钮,然后选择“创建模板部件”。
![Creating a new template part in the Full Site Editor 在“全站编辑器”中创建新的模板部件](https://img.itaoda.cn/wp-content/uploads/2024/03/create-pattern-fse-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
在弹出窗口中,为模板部件命名并选择模板部件的类型。
然后,点击“创建”。然后,您将被定向到块编辑器,您可以像往常一样编辑模板部分。
![The Create template part popup in the WordPress Full Site Editor WordPress 全站编辑器中的“创建模板部件”弹出窗口](https://img.itaoda.cn/wp-content/uploads/2024/03/create-template-part-popup-min-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
有关更多详细信息,您可以查看我们的 WordPress 全站编辑完整指南。
如何在经典主题中编辑 WordPress 页眉、页脚和其他小部件就绪区域
在经典主题中,WordPress 小部件基本上是一个块,您可以将其添加到小部件就绪区域,例如页眉、页脚、侧边栏等。
每个经典的 WordPress 主题都有不同的小部件就绪区域。有些可能包含侧边栏,有些可能不包括。因此,请务必查看主题的文档以获取更多信息。
要使用小部件,您必须转到外观 » 小部件。在这里,您可以在可用的小部件就绪区域中添加、配置和删除块。
![Adding the FlipBox widget to a sidebar or similar section 将 FlipBox 小部件添加到侧边栏或类似部分](https://img.itaoda.cn/wp-content/uploads/2024/03/appearance-widgets-wordpress.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
另外,请查看我们关于小部件和块之间区别的指南,以了解有关此功能的更多信息。
如何使用页面构建器编辑 WordPress 页眉、页脚和其他模板部分
使用页面构建器的好处之一是您将有更多选项来自定义主题的页眉、页脚、侧边栏和其他部分。
如果您使用 SeedProd,您可以转到 SeedProd » 主题生成器。我们假设您已经安装了之前的主题模板工具包。
该套件通常包括各种主题模板。这可能是一个内置的页面模板,如 404 或单个帖子,也可能是页面的一部分,如页眉、页脚、定价表等。
继续并将鼠标悬停在主题模板上。然后,单击“编辑设计”。
![Editing the header theme template in SeedProd 在 SeedProd 中编辑标题主题模板](https://img.itaoda.cn/wp-content/uploads/2024/03/header-edit-design-seedprod-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
现在,您可以像编辑页面一样编辑页眉。
假设您想在此处添加您的社交媒体链接。您可以做的是将鼠标悬停在标题上,直到出现蓝色边框,然后单击“+ 添加行”按钮。然后,继续选择行布局。
在我们的示例中,我们想再添加一列,以便标题可以适合图像、菜单和社交媒体链接。这意味着我们需要在一行中设置三列。
![Choosing a row layout in SeedProd 在 SeedProd 中选择行布局](https://img.itaoda.cn/wp-content/uploads/2024/03/choose-row-layout-seedprod.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
然后,您可以将块从顶行拖放到新行。
之后,只需删除最上面的一行,您的新行就会成为新的标题。
![Deleting a previous row in a SeedProd section 删除 SeedProd 节中的上一行](https://img.itaoda.cn/wp-content/uploads/2024/03/delete-row-seedprod-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
现在,只需在左侧面板中查找“社交配置文件”块即可。
将其拖到右列中,即可完成。
![Adding the Social Profiles block in the header in SeedProd 在 SeedProd 的标头中添加社交配置文件块](https://img.itaoda.cn/wp-content/uploads/2024/03/social-profile-seedprod.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
如何在 WordPress 中编辑导航菜单
导航菜单使访问者可以轻松浏览您的所有内容,而不会迷失在您的网站上。这就是为什么设计一个菜单来显示您的基本页面和其他相关信息的链接很重要的原因。
如果您使用块 WordPress 主题,则可以从“完整站点编辑器”页面中选择“导航”菜单。
![Selecting Navigation in WordPress Full Site Editing 在WordPress全站编辑中选择导航](https://img.itaoda.cn/wp-content/uploads/2024/03/fse-select-navigation-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
我们关于在 WordPress 中添加自定义导航菜单的文章可以引导您完成其余步骤。
如果您使用经典的 WordPress 主题,那么您可以转到外观 » 菜单。这是一个专用页面,供您添加、排列和删除页面/帖子以及菜单链接。
![How to add a WordPress navigation menu to your site or blog 如何将 WordPress 导航菜单添加到您的网站或博客](https://img.itaoda.cn/wp-content/uploads/2024/03/wordpress-appearance-menus.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
有关分步说明,您可以查看我们的初学者指南,了解如何在 WordPress 中添加导航菜单。
如果您使用像 SeedProd 这样的页面构建器,那么您的导航菜单(导航菜单块)可能已嵌入到您的标题主题模板中。
导航菜单块将包含您的所有页面,但您也可以添加新项目。
首先,从您的 WordPress 仪表板转到 SeedProd » Theme Builder。然后,找到“标题”主题模板,然后单击“编辑设计”。
![Editing the header theme template in SeedProd 在 SeedProd 中编辑标题主题模板](https://img.itaoda.cn/wp-content/uploads/2024/03/header-edit-design-seedprod-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
现在,将鼠标悬停在看起来像菜单的块上。这应该是“导航菜单”块。
之后,在左侧面板上向下滚动,然后单击“+ 添加新项目”。
然后,您可以自定义锚文本,输入 URL,在新窗口中打开它,并将其设置为 nofollow。
![Adding new menu items in SeedProd 在 SeedProd 中添加新菜单项](https://img.itaoda.cn/wp-content/uploads/2024/03/seedprod-new-menu-item-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
在底部,您可以更改链接的字体大小、间距、分隔线和对齐方式。
不要忘记单击“保存”以使更改生效。
![Configuring the Nav Menu block in SeedProd 在 SeedProd 中配置 Nav Menu 模块](https://img.itaoda.cn/wp-content/uploads/2024/03/nav-menu-font-size-spacing-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
如何使用代码编辑 WordPress 网站
如果您对代码感到满意,那么您还可以使用自定义代码片段来编辑您的 WordPress 网站。也就是说,我们只推荐这种方法,如果你有正确的技术知识来避免破坏你的网站。
使用代码编辑 WordPress 网站的一种方法是添加 CSS,这是一个可以更改 HTML 在前端的外观的样式表。
经典主题用户可以转到外观 » 自定义,然后在主题定制器中找到“其他 CSS”字段。
![additional-css-field-min](https://img.itaoda.cn/wp-content/uploads/2024/03/additional-css-field-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
在这里,您可以插入 CSS 代码来设置不同的 HTML 元素(如颜色和字体)的样式。
如果您的主题的内置选项不足以满足您的需求,这可能会很方便。
![additional-css-min 在 WordPress 中添加自定义 CSS](https://img.itaoda.cn/wp-content/uploads/2024/03/additional-css-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
对于块主题用户,您不能在全站编辑器中添加自定义 CSS。
相反,您必须转到下面的 URL 以打开主题定制器并找到“其他 CSS”字段。请确保将域名替换为您自己的域名。
https://example.com/wp-admin/customize.php
添加 CSS 的另一种方法是使用 CSS Hero。这个插件使向 WordPress 主题添加自定义 CSS 变得容易,即使对于初学者也是如此。
如何编辑 WordPress 主题文件
有时,某些教程可能需要您编辑 WordPress 主题文件,以进行超出内置主题功能允许的更改。在这种情况下,我们建议:
- 首先创建子主题。这就像您的 WordPress 主题的副本,您可以通过一些编码安全地自定义它。
- 备份您的网站。这是一个很好的措施,这样您就可以在出现错误时将您的网站恢复到以前的版本。
编辑 WordPress 主题文件需要从后端转到您的 WordPress 文件目录。为此,您需要打开托管服务提供商的文件管理器或使用 FTP 客户端连接到您的网站。
如果您使用 Bluehost,那么您可以转到仪表板并打开“网站”选项卡。之后,单击要打开主题文件的网站上的“设置”。
![Opening Bluehost's website settings 打开Bluehost的网站设置](https://img.itaoda.cn/wp-content/uploads/2024/03/bluehost-website-settings-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
现在,只需向下滚动到“快速链接”部分。
然后,单击“文件管理器”。如果您不确定根文件夹的位置,可以检查“文档根目录”功能以查看其路径。
![Opening Bluehost's file manager 打开Bluehost的文件管理器](https://img.itaoda.cn/wp-content/uploads/2024/03/bluehost-file-manager-button.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
进入文件管理器后,您可以转到网站的根文件夹(通常命名为 public_html)。
然后,前往并找到您当前的主题文件夹。/wp-content/themes
![An example of what the WordPress theme files look like in the Bluehost file manager WordPress 主题文件在 Bluehost 文件管理器中的外观示例](https://img.itaoda.cn/wp-content/uploads/2024/03/wordpress-theme-files-min.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
之后,您将找到所有 WordPress 主题文件,您可以使用文本编辑器对其进行编辑。
如何安全地将自定义代码插入 WordPress
如果要添加新的自定义代码,而不是编辑主题文件中已有的代码,则建议使用 WPCode。这是最好的 WordPress 代码片段插件,可轻松插入和管理自定义代码片段。
![WPCode - Best WordPress Code Snippets Plugin WPCode - 最佳 WordPress 代码片段插件](https://img.itaoda.cn/wp-content/uploads/2024/03/wpcode.jpg?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
有了这个插件,您不必担心意外破坏您的网站。如果代码中存在错误,WPCode 会通知您并停用它。此外,您可以创建 PHP 短代码以将自定义内容插入您的网站。
对于初学者来说,编辑 WordPress 网站的最佳方法是什么?
对于初学者,我们始终建议安装elementor 这样的页面构建器插件来编辑 WordPress 网站。原因是它与块编辑器一样易于使用,但可以让您更好地控制您的网站设计。
如果您不想使用插件,那么下一个最好的办法是带有全站编辑器的块主题。此功能尚未完全开发,因为 WordPress 一直在研究 Gutenberg 项目。但截至目前,它非常人性化。
主题定制器不如全站编辑器灵活,因为它缺乏拖放功能。这就是为什么我们建议经典主题用户安装 SeedProd 以改善他们的用户体验。
至于编码,我们只建议您在创建了子主题和网站备份以避免错误的情况下使用它。但是使用 WPCode 插件,添加自定义代码来编辑您的 WordPress 网站要安全得多,并且不会导致任何错误或破坏您的网站。
我们希望本文能帮助您学习如何编辑 WordPress 网站。您可能还想查看我们深入的 WooCommerce 教程以创建在线商店和 WordPress SEO 的终极指南。
原文链接:https://www.itaoda.cn/blog/14122.html,转载请注明出处。
评论0