如何将任何 HTML5 模板转换为出色的 WordPress 主题

fabiha01

您是否遇到过喜欢的 HTML5 模板，但却找不到 WordPress 的对应模板？以下是如何将该模板转换为 WordPress 主题的方法。
自定义 WordPress
当你找不到完美的 WordPress 主题时，你会怎么做？你很可能会求助于主题框架。然而，偶尔你可能会想到：“我应该编写一个 HTML5 模板，然后将其转换成 WordPress 主题。”

但这只是个白日梦，对吧？我们还是现实点吧。

事实上，只要你具备一些基本的 WordPress 编程技能，将 HTML5 模板转换为 WordPress 主题并非难事——前提是你愿意付出努力。在这篇文章中，我将向你展示如何操作。

继续阅读，或通过以下链接跳转：

为什么要将 HTML 模板转换为 WordPress 主题？
设置您的开发环境
步骤 1：查找模板或创建自己的模板
第 2 步：将 HTML5 模板转换为 WordPress 主题
步骤 3：正确排队脚本和样式
步骤 4：创建模板部分
步骤 4：添加循环
步骤5：用WordPress函数替换模板文件内容
后续步骤
为什么要将 HTML 模板转换为 WordPress 主题？
您可能想承担这个项目有几个很好的理由。

使用 HTML5 模板意味着您可以完全掌控网站外观的每一个细节。不喜欢模板的某些部分？那就修改它吧。调整简单的 HTML 模板比调整复杂的 WordPress 主题要容易得多。
使用 HTML5 模板意味着您最终不会在您的网站上加载一堆您不打算使用的功能。
如果您想要一个未被数千个其他网站使用的 WordPress 主题，转换 HTML5 模板是获得完全自定义的 WordPress 主题的一种方法。
如果您之前从未构建过 WordPress 主题，那么转换模板将真正地扩展您的 WordPress 开发能力 — — 以一种非常好的方式。
在本文中，我将从一个简单的 HTML5 模板开始，并将其转变为一个功能齐全的 WordPress 主题。跟着我一起学习，你也能做到。

设置您的开发环境
为了将 HTML5 模板转换为 WordPress 主题，您需要做的第一件事就是设置开发环境。

以下是您开始工作之前需要准备的工具：

本地服务器来运行 WordPress：有很多选择。我们已经详细介绍了如何使用XAMPP、MAMP、WAMP、VVV和Vagrant。选择其中一种，让它运行起来。
本地 WordPress 安装：最好在激活尽可能少的插件的情况下构建 WordPress 主题，爱尔兰商业传真列表 因此请在停用尽可能多的插件后创建新安装或使用现有安装。
一个 Git 仓库来跟踪你的变更：虽然这在技术上并非必需，但这是一个好主意。我使用GitHub来跟踪我的变更并托管最终版本，并使用 Sourcetree 为 Git 提供易于使用的 GUI。
在深入研究这个项目之前，您还需要熟悉 WordPress 主题的工作原理，并具备基本的 PHP 编码技能。如果您不熟悉“模板层次结构”、“代码库”和“循环”这些术语，那么在开始学习本教程之前，您需要做一些准备工作。您可以通过参加一两门课程，或者阅读我们的WordPress 开发入门和中级系列文章来学习所需的知识。

如果您在任何时候遇到困难并想要将我使用的模板文件与完成的 WordPress 主题进行比较，您可以从 Start Bootstrap 获取模板文件的副本并在 GitHub 上查看我的 WordPress 主题的源代码。

步骤 1：查找模板或创建自己的模板
您可以将任何 HTML 模板转换为 WordPress 主题。但是，如果您选择的模板布局与 WordPress 内置的核心功能（帖子、页面、侧边栏、页眉和页脚）紧密贴合，您的任务将会轻松得多。在查看模板或编写自己的代码时，请思考如何将模板的各个部分转换为 WordPress 主题。

这并不意味着您不能将任何模板转换为 WordPress 主题。您可以。但是，您选择的模板越非传统，将其转换为功能齐全的 WordPress 主题所需的工作量就越大。

在网页设计方面，我是一个极简主义者，并且是“移动优先”设计的拥护者。因此，一个基于 Bootstrap 的简单博客模板正是我想要的。

对于本教程，我选择了Start Bootstrap 中的博客文章和博客主页模板。

由 Start Bootstrap 制作的博客主页模板的屏幕截图
这些模板免费，简洁，可以轻松迁移到 WordPress，而且是用 Bootstrap 构建的。完美。

一旦您确定了完美的主题，或者编写了自己的代码，您就可以进入下一步：将模板转变为 WordPress 主题。

第 2 步：将 HTML5 模板转换为 WordPress 主题
此时，您应该已经准备好一个 HTML5 模板。它应该由一个包含index.html文件的目录以及用于存放 CSS 和 JavaScript 资源的子目录组成。将整个主题目录复制到您的 WordPress 开发网站的wp-content/themes/目录中。