从头开始创建自定义 WordPress 主题吗?过去,必须遵循复杂的 WordPress 教程并具备不错的编码知识才能构建自定义 WordPress 主题。但是多亏了新的 WordPress 主题构建器,现在无需学习任何编程技能即可轻松制作一个。
在本文中,我们将展示如何在不编写任何代码的情况下轻松创建自定义 WordPress 主题。
![Making a custom WordPress theme without any coding skills 无需任何编码技能即可制作自定义 WordPress 主题](https://img.itaoda.cn/wp-content/uploads/2024/03/create-custom-wordpress-theme-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 网站使用主题进行网站布局和设计。这些主题由用 PHP、HTML、CSS 和 JavaScript 编写的模板文件组成。
由于许多小企业主负担不起自定义 WordPress 主题的高昂成本,因此他们中的许多人只是满足于默认主题。那些不想安定下来的人要么使用 WordPress 页面构建器,要么使用主题框架来构建自定义主题。
虽然 WordPress 主题框架使构建 WordPress 主题变得更加容易,但它们是开发人员的解决方案,而不是普通网站所有者。
另一方面,WordPress页面构建器插件使使用拖放界面创建自定义页面布局变得非常容易,但它们仅限于单个页面布局。您无法使用它们构建自定义主题。
这就是 SeedProd 的用武之地。
它是最好的 WordPress 主题构建器插件,可让您轻松创建自定义 WordPress 主题,而无需编写任何代码。
![SeedProd drag and drop WordPress theme builder SeedProd 拖放 WordPress 主题构建器](https://img.itaoda.cn/wp-content/uploads/2024/03/seedprod-website-builder-image.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 主题构建器最好的一点是它与主题无关。这意味着它不依赖于您现有的 WordPress 主题的风格或功能,让您完全自由和控制您的网站设计。
如果您正在寻找替代方案,您还可以使用 Thrive Theme Builder 插件轻松创建自定义 WordPress 主题。
话虽如此,让我们来看看如何在不使用 SeedProd 编写任何代码的情况下创建自定义 WordPress 主题。
使用 SeedProd Theme Builder 创建自定义主题
设置 SeedProd 主题构建器非常简单,因为它适用于使用任何主题的任何 WordPress 网站。
首先,您需要安装并激活 SeedProd 插件。有关更多详细信息,请参阅我们关于如何安装 WordPress 插件的分步指南。
注意: 您至少需要 Pro 或 Elite 计划才能解锁主题构建器。
激活后,转到 SeedProd » 设置页面以输入您的插件许可证密钥。您可以在 SeedProd 网站上的帐户下找到此信息。
![Enter your SeedProd license key 输入您的 SeedProd 许可证密钥](https://img.itaoda.cn/wp-content/uploads/2024/03/seedprod-license-key.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 制作自己的自定义 WordPress 主题非常简单。
首先,您需要前往 SeedProd » Theme Builder 页面。在这里,您将看到当前 SeedProd 自定义主题的模板列表。由于我们还没有开始,我们只有一个全局 CSS 模板。在本教程的后面部分,我们将向您展示如何使用它。
![Create your custom theme 创建自定义主题](https://img.itaoda.cn/wp-content/uploads/2024/03/create-theme.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 主题之一作为起点
- 从头开始手动创建主题模板
让我们来看看这些选项是如何工作的。
1.从现成的主题开始(推荐)
我们建议从现有主题开始。这允许 SeedProd 自动生成所有模板文件。这些是完整的专业设计主题,可让您在根据自己的要求编辑模板方面抢占先机。
只需单击“主题”按钮,然后选择一个可用的主题。不同类型的网站有不同的主题,因此您可以选择最符合您需求的主题。
![Choose a theme to get started 选择主题以开始使用](https://img.itaoda.cn/wp-content/uploads/2024/03/choose-theme.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 将生成所有主题模板。
![Theme templates 主题模板](https://img.itaoda.cn/wp-content/uploads/2024/03/theme-templates.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 主题的草稿版本。
在本教程的后面部分,我们将向您展示如何编辑这些主题文件以设计您的主题,然后发布您的主题以将其应用于您的网站。
2.从头开始手动创建主题模板
或者,您可以通过单击“添加新主题模板”按钮从头开始您的主题。您必须为模板命名,然后选择其中一种模板类型才能开始使用。
![Create a theme template 创建主题模板](https://img.itaoda.cn/wp-content/uploads/2024/03/create-template.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 Theme Builder 编辑主题
生成主题模板后,您可以使用 SeedProd 主题生成器对其进行编辑。
只需单击模板文件下方的“编辑设计”链接即可对其进行编辑。
![Editing a template 编辑模板](https://img.itaoda.cn/wp-content/uploads/2024/03/editing-template.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 主题生成器中启动模板文件。
您将在右栏中看到模板的实时预览,并在左栏中看到编辑面板。
![Theme builder interface 主题生成器界面](https://img.itaoda.cn/wp-content/uploads/2024/03/theme-builder-interface.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)
要更改模板文件中的项目,只需指向并单击即可对其进行编辑。
![Editing items in Theme builder 在主题生成器中编辑项目](https://img.itaoda.cn/wp-content/uploads/2024/03/editing-items.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 块。它带有一堆块类型,您可以将它们添加到模板中。
![Add blocks to your theme layout 将块添加到主题布局](https://img.itaoda.cn/wp-content/uploads/2024/03/addblocks.gif?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)
1. 模板标签块
模板标签块是动态块,允许您从 WordPress 数据库动态生成主题元素。
![Template tag blocks 模板标记块](https://img.itaoda.cn/wp-content/uploads/2024/03/template-tags-blocks.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)
例如,您可以使用“帖子”块列出您最近的帖子,或使用“帖子内容”块来显示当前显示的帖子或页面的内容。
2. 标准块
接下来,您有标准块将常见的网页设计元素添加到主题的模板中。
![Standard blocks 标准块](https://img.itaoda.cn/wp-content/uploads/2024/03/standard-blocks.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)
您可以使用它们来添加文本、媒体、按钮、列、分隔线等。
3. 其他区块
其他高级块允许您添加联系表格、社交资料、共享按钮、WordPress 简码、Google 地图、定价表、倒数计时器等。
![Advanced blocks 高级块](https://img.itaoda.cn/wp-content/uploads/2024/03/advanced-blocks.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 还带有完整的 WooCommerce 集成。
如果您经营在线商店,那么您可以在主题中使用 WooCommerce 块。
![WooCommerce blocks WooCommerce 块](https://img.itaoda.cn/wp-content/uploads/2024/03/woocommerce-blocks.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)
您可以使用自定义购物车页面创建完全自定义的 WooCommerce 模板并查看体验。
使用分区进行快速主题布局
除了块,您还可以将完整的部分添加到您的主题模板中。
只需切换到“设计”面板下的“部分”选项卡即可。
![Adding sections to your layout 向布局添加分区](https://img.itaoda.cn/wp-content/uploads/2024/03/sections.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)
分区是网站设计不同领域的一组块。例如,您会发现页眉、页脚、号召性用语、功能等的现成部分。
只需单击一个部分即可将其添加到您的主题模板中,然后根据自己的要求对其进行编辑。
![FAQs section 常见问题部分](https://img.itaoda.cn/wp-content/uploads/2024/03/faqs-section.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)
使用 AI 助手即时生成内容
SeedProd 还提供了一个强大的 AI 助手,可以自动为您的主题模板制作书面内容。您可以立即生成引人入胜的标题、描述、号召性用语、正文等。
只需单击 SeedProd 构建器中的任何标题或文本块,即可打开左侧的设置面板。
然后,单击“生成 AI 文本”按钮。
![Click the Generate AI Text button in SeedProd 单击 SeedProd 中的 Generate AI Text 按钮](https://img.itaoda.cn/wp-content/uploads/2024/03/click-generate-ai-text-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)
接下来,在文本字段中输入提示,这基本上是您希望 AI 助手为您编写的内容的描述。或者,您可以从列表中选择建议的提示。
之后,单击“生成文本”按钮。
![Enter a text prompt for SeedProd AI Assistant 输入 SeedProd AI Assistant 的文本提示](https://img.itaoda.cn/wp-content/uploads/2024/03/write-a-prompt.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 就会自动为您创建内容。从那里,您可以优化文本、更改语气,甚至将文本翻译成 50+ 种语言。
当您对内容感到满意时,请单击“插入”按钮将其添加到您的主题模板中。
![Insert copy created with SeedProd AI Assistant 插入使用 SeedProd AI Assistant 创建的副本](https://img.itaoda.cn/wp-content/uploads/2024/03/ai-result-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)
保存和发布模板
对设计感到满意后,只需单击“保存”按钮并选择“发布”即可保存模板。
![Save and publish your template 保存并发布模板](https://img.itaoda.cn/wp-content/uploads/2024/03/save-publish-template.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 主题中,您必须通过编辑复杂的 CSS 文件来手动完成。此过程需要使用浏览器的 Inspect 工具、查找 CSS 类、学习代码等。
SeedProd 也使这变得超级简单。
您无需编写 CSS 代码,只需编辑全局 CSS 模板即可。
全局 CSS 模板允许您预览常见的网站元素,然后您只需指向并单击它们即可编辑其属性。
![Global CSS 全局 CSS](https://img.itaoda.cn/wp-content/uploads/2024/03/globalcss.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 允许您通过简单的开关应用自定义 WordPress 主题。
只需转到 SeedProd » Theme Builder 页面,然后将“启用 SeedProd 主题”选项旁边的开关切换为“是”。
![Enable SeedProd theme 启用 SeedProd 主题](https://img.itaoda.cn/wp-content/uploads/2024/03/enable-seedprod-theme.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 主题替换现有的 WordPress 主题。
您现在可以访问您的网站以查看您的自定义 WordPress 主题的实际效果。
![Website preview 网站预览](https://img.itaoda.cn/wp-content/uploads/2024/03/website-preview.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 主题,您可以选择扩展其功能并根据您的主题创建更多设计和布局。
SeedProd 让这一切变得非常简单。
您仍然可以调整您的自定义 WordPress 主题并为您网站的不同部分创建多个模板。
例如,您可能希望将新的标题模板添加到主题中,该模板仅显示在特定类别上。
![Additional templates 其他模板](https://img.itaoda.cn/wp-content/uploads/2024/03/additional-templates.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)
同样,您可能希望为特定页面或帖子创建模板。
您也可以将其添加到您的主题中。
![Add custom page template 添加自定义页面模板](https://img.itaoda.cn/wp-content/uploads/2024/03/custom-page-template.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 也为您提供了保障。
您只需转到 SeedProd » 登录页面,然后单击“添加新登录页面”按钮即可创建一个。
![Custom landing page 自定义登录页面](https://img.itaoda.cn/wp-content/uploads/2024/03/custom-landing-pages.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 适合初学者的拖放主题构建器,您可以轻松创建所需的任何类型的自定义布局。
我们希望本文能帮助您学习如何在不学习编码的情况下创建自定义 WordPress 主题。您可能还想查看我们关于如何加快 WordPress 网站速度以获得更好的 SEO 和用户体验的指南。
原文链接:https://www.itaoda.cn/blog/14320.html,转载请注明出处。
评论0