
WordPress 定制
您想从头开始创建自定义 WordPress 主题吗?
想要从头开始创建自定义 WordPress 主题吗?
过去,您必须遵循 WordPress 代码并拥有良好的编码知识才能构建自定义 WordPress 主题。但得益于新的 WordPress 主题生成器,现在任何人都可以在一小时内创建完全自定义的 WordPress 主题(无需编码知识)。
过去,您必须遵循 WordPress Codex 并拥有良好的编码知识才能构建自定义 WordPress 主题。但得益于新的 WordPress 主题生成器,现在任何人都可以在一小时内创建完全自定义的 WordPress 主题(无需编码知识)。
在本文中,我们将向您展示如何轻松创建自定义 WordPress 主题,而无需编写任何代码。
在本文中,我们将向您展示如何轻松创建自定义 WordPress 主题,而无需编写任何代码。

为初学者创建自定义WordPress主题 (Creating a Custom WordPress Theme for Beginners)
与静态 HTML 网站不同,WordPress 主题是一组用 PHP、HTML、CSS 和 JavaScript 编写的模板文件。通常,您需要对所有这些网页设计语言有充分的了解,或者聘请网页开发人员来创建自定义 WordPress 主题。
与静态 HTML 网站不同,WordPress 主题是一组用 PHP、HTML、CSS 和 JavaScript 编写的模板文件。通常,您需要对所有这些网页设计语言有相当的了解,或者聘请网页开发人员来创建自定义 WordPress 主题。
If you hired a developer or agency, then the 定制 WordPress 主题的成本 can reach thousands of dollars.
如果您雇用了开发人员或代理,那么自定义 WordPress 主题的成本可能高达数千美元。
由于许多小企业主无法承担自定义 WordPress 主题的高成本,因此他们中的许多人只是选择了 WordPress 附带的默认主题。
由于许多小企业主无法承担定制 WordPress 主题的高昂成本,因此许多人只是选择 WordPress 附带的默认主题。
Those who didn’t want to settle and wanted customizations either used a 拖放 WordPress 页面构建器, or they used a 主题框架 to build a custom theme.
那些不想解决和想要自定义的人要么使用拖放式 WordPress 页面构建器 ,要么使用主题框架来构建自定义主题。
虽然 WordPress 主题框架使构建 WordPress 主题变得更加容易,但它们是开发人员的解决方案,而不是普通网站所有者的解决方案。
尽管 WordPress 主题框架使构建 WordPress 主题变得更加容易,但它们是开发人员的解决方案,而不是普通网站所有者的解决方案。
另一方面,WordPress 页面构建器插件使使用拖放界面创建自定义页面布局变得非常容易,但它们仅限于布局。您无法用它构建自定义主题。
另一方面,WordPress 页面构建器插件可以非常轻松地使用拖放界面创建自定义页面布局,但它们仅限于布局。您不能用它构建自定义主题。
Until 海狸建造者, one of the best WordPress page builder plugins decided to solve this problem with their add-on called 海狸主题.
在在海狸建造者之前 ,最好的WordPress页面构建器插件之一决定通过其名为海狸主题的加载项解决此问题。

Beaver Themer 是一个网站构建器附加组件,允许您使用拖放界面创建自定义主题布局,而无需学习编码。
Beaver Themer 是一个网站构建器附加组件,允许您使用拖放界面创建自定义主题布局,而无需学习编码。
让我们看看如何使用 Beaver Themer 轻松创建 WordPress 主题。
让我们看看如何使用 Beaver Themer 轻松创建 WordPress 主题。
影片教学 (Video Tutorial)
如果您不喜欢该视频或需要更多说明,请继续阅读。
如果您不喜欢该视频或需要更多说明,请继续阅读。
设置Beaver Themer以构建自定义主题 (Setting up Beaver Themer to Build a Custom Theme)
海狸主题 is an add-on plugin for 海狸建造者, so you will need both plugins for this article.
First, you need to install and activate the 海狸建造者 and 海狸主题 plugins. For more details, see our step by step guide on 如何安装 WordPress 插件.
首先,您需要安装并激活海狸建造者和海狸主题插件。 有关更多详细信息,请参阅有关如何安装 WordPress 插件步指南。
Beaver Themer 允许您创建自定义主题,但您仍然需要一个主题来开始。我们建议使用包含全角页面模板的轻量级主题作为您的入门主题。
Beaver Themer 允许您创建自定义主题,但您仍然需要一个主题来开始。我们建议使用包含全角页面模板的轻量级主题作为起始主题。
您可以在 WordPress.org 主题目录中找到许多此类主题。大多数现代 WordPress 主题都包含全角模板。我们的首选是:
您可以在 WordPress.org 主题目录中找到许多此类主题。大多数现代 WordPress 主题都包含全角模板。我们的首选是:
- 阿斯特拉 – A free light-weight all-purpose WordPress theme that comes with built-in support for Beaver Builder. 阿斯特拉 –一种免费的轻量级通用WordPress主题,内置对Beaver Builder的支持。
- 海洋湿地 – Another popular free multi-purpose WordPress theme that comes with full page builder support.海洋湿地 –另一个流行的免费多功能WordPress主题,带有完整页面构建器支持。
- StudioPress 主题 – All of their themes are compatible with Beaver Builder and would work great with Beaver Themer.工作室新闻主题 –它们的所有主题都与Beaver Builder兼容,并且与Beaver Themer一起使用效果很好。
For the sake of this tutorial, we will be using 阿斯特拉, which is light-weight and easy to customize WordPress theme.
在本教程中,我们将使用阿斯特拉 ,它轻巧且易于自定义WordPress主题。
为Beaver Themer设置主题 (Setting up Your Theme for Beaver Themer)
使用 Beaver Themer 构建自定义 WordPress 主题时,确保 Beaver Themer 能够访问页面的整个主体(从边缘到边缘)非常重要。
使用 Beaver Themer 构建自定义 WordPress 主题时,确保 Beaver Themer 能够访问页面的整个主体(从边缘到边缘)非常重要。
这是默认的 Astra 布局。正如您所看到的,此布局包括一个侧边栏,在使用 Beaver Themer 时可能很难使用。
这是默认的 Astra 布局。正如您所看到的,此布局包括一个侧边栏,在使用 Beaver Themer 时可能很难使用。

You can change that by visiting the admin panel of your website and then navigate to 外观 » 定制 page. From here, you need to switch to the 布局 » 侧边栏 tab.
您可以通过访问网站的管理面板来更改此设置,然后导航至“ 外观»定制页面。 从这里,您需要切换到布局 » 侧面栏选项卡。

到达那里后,只需在默认布局选项下选择“无侧边栏”,然后单击“发布”按钮即可保存更改。
到达那里后,只需在默认布局选项下选择“无侧边栏”,然后单击“发布”按钮即可保存更改。
您的主题现在将开始使用没有侧边栏的布局。这是与 Beaver Themer 一起使用的最佳布局。
您的主题现在将开始使用没有侧边栏的布局。这是与 Beaver Themer 一起使用的最佳布局。

这种全页面布局使 Beaver Themer 能够利用屏幕的每一英寸,因此您可以创建精美的端到端视觉体验。
这种全页面布局使 Beaver Themer 能够利用屏幕的每一英寸,因此您可以创建精美的端到端视觉体验。
大多数 WordPress 主题都包含全角页面的模板文件。如果您使用其他主题,那么您可能会在主题设置中找到删除侧边栏的选项。
大多数 WordPress 主题都包含全角页面的模板文件。如果您使用其他主题,可以在主题设置中找到删除侧边栏的选项。
如果您找不到它,请联系您的主题开发人员,他们也许可以帮助您。
如果您找不到它,请联系主题开发人员,他们也许可以帮助您。
将主题设置为全角布局后,您就可以使用 Beaver Themer 创建自定义 WordPress 主题。
将主题设置为全角布局后,您可以使用 Beaver Themer 创建自定义 WordPress 主题。
快速海狸基础知识 (Quick Beaver Themer Fundamentals)
Beaver Themer 在 Beaver Builder 之上工作。作为页面构建器插件,Beaver Builder 允许您将项目拖放到页面以创建自定义布局。
Beaver Themer 在 Beaver Builder 之上工作。作为页面构建器插件,Beaver Builder 允许您将项目拖放到页面上以创建自定义布局。
它具有以下可在布局中使用的项目:
它具有以下可在布局中使用的项目:
- Template: A collection of columns rows, and modules that make up an entire page layout. 模板:列行和组成整个页面布局的模块的集合。
- Columns: Vertical layout modules that help align content horizontally. 列:垂直布局模块,可帮助水平对齐内容。
- Rows: Horizontal collection of multiple modules 行:多个模块的水平集合
- Module: An item that outputs specific information such as title, text block, table, gallery, etc. 模块:输出特定信息的项目,例如标题,文本块,表格,画廊等。
只需在 Beaver Builder 中编辑页面,然后单击右上角的添加按钮即可。然后,您可以将列、行、模块拖放到页面上并立即开始编辑它们。
只需在 Beaver Builder 中编辑页面并单击右上角的“添加”按钮即可。然后,您可以将列、行、模块拖放到页面上并立即开始编辑它们。

如果您不想从头开始,请从预制模板列表中进行选择。
如果您不想从头开始,请从预制模板列表中进行选择。

Beaver Builder 还允许您保存布局,然后将它们用作模板。
Beaver Builder 还允许您保存布局,然后将它们用作模板。
To learn more see our article on how to create a 使用 Beaver Builder 自定义页面布局.
要了解更多信息,请参阅有关如何使用海狸生成器创建自定义页面布局文章。
然而,我们不仅仅是想创建页面布局。我们想要创建一个完整的自定义主题。
然而,我们不仅仅创建页面布局。我们想要创建一个完全自定义的主题。
这就是 Beaver Themer 登场的时候。
这就是 Beaver Themer 登场的时候。
它向 Beaver Builder 添加了另一个名为“Themer Layout”的项目。
它向 Beaver Builder 添加了另一个名为“Themer Layout”的项目。

主题布局允许您为页眉、页脚、内容区域、404 页面和其他模板部分创建自定义布局。
以前的布局允许您为页眉、页脚、内容区域、404 页面和其他模板部分创建自定义布局。
这些是所有 WordPress 主题的构建块,通过使用它们,您将能够创建适合您需求的自定义主题。
这些是所有 WordPress 主题的构建块,通过使用它们,您将能够创建适合您需求的自定义主题。
使用Beaver Themer模板创建自定义WordPress主题 (Using Beaver Themer Templates to Create a Custom WordPress Theme)
在以下说明中,我们将引导您完成构建最流行的自定义主题元素所需的步骤。完成后,您将完全将基本主题转变为完全自定义的 WordPress 子主题。
在以下说明中,我们将引导您完成构建最流行的自定义主题元素所需的步骤。完成后,您将已将基本主题完全转换为完全自定义的 WordPress 子主题。
为主题构建自定义标题 (Building a Custom Header for Your Theme)
Let’s start with your website’s header area. A 自定义标头 is an essential component of a theme and building one can be tricky using traditional methods.
让我们从您网站的标题区域开始。 自定义标题是主题的基本组成部分,使用传统方法构建标题可能很棘手。
幸运的是,Beaver Themer 具有内置的标题功能。您可以使用预先创建的模板,也可以使用具有两列布局的菜单和图像模块。
幸运的是,Beaver Themer 具有内置的标头功能。您可以使用预先创建的模板或使用带有菜单和图像模块的两列布局。
In order to get to this header area, first, we’ll need to set up a header layout in Beaver Themer. Visit 海狸生成器 » 添加新内容 page and provide a title for your header.
为了到达此标头区域,首先,我们需要在Beaver Themer中设置标头布局。 访问海狸生成器 » 添加新内容页面,并为标题提供标题。

之后,选择“主题布局”作为类型,选择“标题”作为布局选项。完成后,单击“添加主题布局”按钮继续。
之后,选择“主题布局”作为类型,选择“标题”作为布局选项。完成后,单击“添加主题布局”按钮继续。
这将带您进入布局设置页面。从这里,您需要选择“整个站点”作为标题模板的显示位置。
这将带您进入布局设置页面。在这里,您需要选择“整个站点”作为标题模板的显示位置。

接下来,单击“启动 Beaver Builder”按钮以打开构建器界面。
接下来,单击“Launch Beaver Builder”按钮打开构建器界面。
Beaver Builder 将以基本的单列和两行标题布局作为起点启动。
Beaver Builder 将从基本的一列两行标题布局开始。

您可以使用相同的 Beaver Builder 拖放工具来更改背景、颜色、文本等。您还可以添加其他模块、加载预制模板以及通过单击右上角的添加按钮添加行/列角落。
您可以使用相同的 Beaver Builder 拖放工具来更改背景、颜色、文本等。您还可以通过单击右上角的添加按钮添加其他模块、加载预制模板以及添加行/列。喇叭。
对设计感到满意后,单击“完成”按钮保存或发布您的布局。
对设计感到满意后,单击“完成”按钮保存或发布布局。
您现在可以访问您的网站以查看正在运行的自定义主题标题。如您所见,我们已将标题布局应用于我们的自定义主题。
现在您可以访问您的网站来查看您的自定义主题标题。如您所见,我们已将标题布局应用于我们的自定义主题。

除了标题之外,它还不会显示任何内容,并且您可能会看到基本主题的页脚区域。
除了标题之外,它不会显示任何内容,并且您很可能会看到基本主题的页脚区域。
让我们改变这一点。
让我们改变这一点。
为主题构建自定义页脚 (Building a Custom Footer for Your Theme)
您可以使用 Beaver 主题为您的主题创建自定义页脚,就像创建自定义页眉一样。
您可以使用 Beaver Themer 为您的主题创建自定义页脚,就像创建自定义页眉一样。
Head over to 海狸生成器 » 添加新内容 page and provide a title for your footer layout. Next, select ‘Themer Layout’ as the type and ‘Footer’ as the layout option.
转到海狸生成器 » 添加新内容页面,并为您的页脚布局提供标题。 接下来,选择“ Themer Layout”作为类型,选择“ Footer”作为布局选项。

单击“添加主题布局”按钮继续。
单击“添加主题布局”按钮继续。
这将带您进入布局设置页面。从这里,您需要选择“整个站点”作为模板的显示位置。
这将带您进入布局设置页面。在这里,您需要选择“整个站点”作为模板出现的位置。

之后,单击“启动 Beaver Builder”按钮以打开构建器界面。
之后,单击“Launch Beaver Builder”按钮打开构建器界面。
Beaver Builder 将使用三列的页脚布局启动。您可以使用此布局作为起点并开始编辑。
Beaver Builder 将以三列页脚布局启动。您可以使用此布局作为起点并开始编辑。

您可以添加模块、文本块或任何您想要的东西。您可以随时更改颜色、字体、添加背景图像等等。
您可以添加模块、文本块或任何您想要的东西。您可以随时更改颜色、字体、添加背景图像等。
对设计感到满意后,单击“完成”按钮保存或发布您的布局。
对设计感到满意后,单击“完成”按钮保存或发布布局。
帖子和页面的建筑内容区域 (Building Content Area for Post and Pages)
现在我们已经为网站上的每个页面和帖子创建了页眉和页脚,是时候构建帖子或页面正文(内容区域)了。
现在我们已经为网站上的每个页面和帖子创建了页眉和页脚,是时候构建帖子或页面正文(内容区域)了。
我们将以与构建页眉和页脚大致相同的方式开始,通过在“添加新”页面中添加“单一”布局。
我们将以与创建页眉和页脚相同的方式开始,通过在“添加新页面”中添加“Exotic”布局。

接下来,您将选择在何处显示此布局。您可以选择单数以将其用于所有单个帖子和页面,也可以选择帖子或仅选择页面。
接下来,您将选择此布局的显示位置。您可以选择单数形式将其用于所有单独的帖子和页面,也可以选择帖子或仅页面。

之后,单击“启动 Beaver Builder”按钮以打开构建器界面。
之后,单击“Launch Beaver Builder”按钮打开构建器界面。

Beaver Builder will load a sample singular layout with post/page title at the top, followed by content, 作者简介框, and comments area.
Beaver Builder将加载一个示例的单数布局,其顶部的文章/页面标题,其次是内容, 作者简介框和评论区域。
您可以通过指向并单击来编辑这些项目中的任何一项,或者根据需要添加新的模块、列和行。
您可以指向并单击以编辑其中任何一个,或根据需要添加新的模块、列和行。
对布局感到满意后,单击“完成”按钮保存并发布您的更改。
对布局感到满意后,单击“完成”按钮保存并发布您的更改。
您现在可以访问您的网站以查看其运行情况。
现在您可以访问您的网站以查看其运行情况。

为自定义主题创建存档布局 (Creating Archive Layouts for Your Custom Theme)
现在您的自定义主题已经开始成型,您可以继续为网站的其他部分创建布局。存档页面是 WordPress 显示您的类别、标签、作者和每月存档的地方。
现在您的自定义主题已开始成形,您可以继续为网站的其余部分创建布局。存档页面是 WordPress 显示您的类别、标签、作者和每月存档的地方。
让我们为您的自定义主题中的存档页面创建一个布局。
让我们在自定义主题中为存档页面创建一个布局。
You’ll start by visiting 海狸生成器 » 添加新内容 page and providing a title for your archive layout.
首先,请访问海狸生成器 » 添加新内容页面,并为存档布局提供标题。

之后,选择“Themer Layout”作为类型,选择“Archive”作为布局选项。单击“添加主题布局”按钮继续。
之后,选择“Themer Layout”作为类型,选择“Archive”作为布局选项。单击“添加主题布局”按钮继续。
这将带您进入布局设置页面。从这里您需要选择“所有存档”作为模板的显示位置。您还可以为每个单独的存档类型(例如日期、搜索结果、类别、标签等)创建单独的布局。
这将带您进入布局设置页面。在这里,您需要选择“所有档案”作为模板出现的位置。您还可以为每个单独的存档类型(例如日期、搜索结果、类别、标签等)创建单独的布局。

之后,单击“启动 Beaver Builder”按钮以打开构建器界面。
之后,单击“Launch Beaver Builder”按钮打开构建器界面。
Beaver Builder 将以基本的单列存档布局启动。它将在顶部显示存档标题,后面是帖子。
Beaver Builder 将从基本的单列存档布局开始。它将在顶部显示个人资料标题,然后是帖子。

您可以指向并单击任何项目来编辑其属性。您还可以根据需要添加新模块、行和列。
您可以指向并单击任何项目来编辑其属性。您还可以根据需要添加新的模块、行和列。
之后,单击“完成”按钮保存并发布您的更改。
之后,单击“完成”按钮保存并发布您的更改。
为自定义WordPress主题创建其他布局 (Creating Other Layouts for Your Custom WordPress Theme)
Beaver Themer also allows you to create layouts for other pages in template hierarchy, for example, 404页, template parts, search results page, and more.
Beaver Themer还允许您为模板层次结构中的其他页面(例如404页面 ,模板部分,搜索结果页面等)创建布局。
使用 Beaver Builder 的内置拖放功能,您可以轻松地从头开始创建自己的自定义 WordPress 主题,而无需编写代码。这确实是现有的对初学者最友好的 WordPress 主题开发方法。
使用 Beaver Builder 的内置拖放功能可以轻松地从头开始创建您自己的自定义 WordPress 主题,而无需编写代码。这确实是最适合初学者的 WordPress 主题开发方法。
We hope this article helped you learn how to create a custom WordPress theme without learning to code. You may also want to see our guide on how to 加快您的 WordPress 网站速度 for better SEO and user experience.
我们希望本文能帮助您学习如何创建自定义WordPress主题而无需学习编码。 您可能还希望查看我们的指南,以了解如何加快 WordPress 网站速度以获得更好的SEO和用户体验。
If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and Facebook.
如果您喜欢这篇文章,请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特和Facebook上找到我们。
翻译自: https://www.wpbeginner.com/wp-themes/how-to-easily-create-a-custom-wordpress-theme/
WordPress 定制