如何将 HTML 网站转换为 WordPress 商业主题

已发表: 2021-03-29
html到wordpress
关注@Cloudways

许多企业仍然依赖简单的 HTML 网站来进行在线展示。 这些 HTML 网站通常是静态的，这意味着您需要编辑代码以更改网站上的即使是很小的细节。 不过，为了避免这种情况，您可以将 HTML 网站转换为 WordPress。

在本教程中，我将教您如何将 HTML 转换为 WordPress 商业主题。 这使所有 HTML 元素保持完整，并为您提供 WordPress 的灵活性，可以轻松自定义任何元素。

如果您熟悉 HTML 和 WordPress，那么本教程非常适合您。 如果您是新手，请尝试使用本地主机上的虚拟网站（如 XAMPP）执行此操作。

  • 将 HTML 网站转换为 WordPress
  • 您需要哪些 WordPress 文件
  • 配置 CSS、JavaScript 和图像
  • 添加WordPress功能以添加功能

将 HTML 站点转换为 WordPress 主题

  • 第 1 步：先决条件
  • 第 2 步：创建您的主题文件夹
  • 第 3 步：创建 PHP 文件
  • 第 4 步：复制 CSS、图像和 JavaScript (JS) 文件夹
  • 第 5 步：激活新的 WordPress 主题
  • 第 6 步：将 HTML 代码转换为页眉、索引和页脚
  • 步骤 7：配置 CSS
  • 第 8 步：配置 JavaScript
  • 步骤 9：配置图像
  • 第 10 步：在 WordPress 中启用自定义标题
  • 第 11 步：在 WordPress 中添加 WordPress 导航菜单

将 HTML 站点转换为 WordPress 主题

对于本教程，我从这里选择了一个免费的 HTML 商业主题。 在转换任何业务主题时，这些技术将保持不变。 如果您对您的业务主题有任何疑问，只需发表评论或发送电子邮件，我将很乐意回复。

让我们继续。 首先，查看您的 HTML 主题并标记页眉、主体和页脚元素。

标题：标题将包括顶部部分。

标题

主体：这是一个长页面，所以我缩小了截图，但整个中心部分都包含在主体中。

主体

页脚：页脚部分将包括底部。

页脚

第 1 步：先决条件

我希望您已经像 XAMPP（即您的计算机）一样在本地主机上安装了 WordPress。 如果没有，我们已经介绍了一份详细指南，可帮助您在本地安装和设置 WordPress。

第 2 步：创建您的主题文件夹

在本教程中，我使用的是 XAMPP，我的 WordPress 站点安装在 htdocs 文件夹下。 要创建 WordPress 主题，您需要访问您的主题文件夹并创建一个新文件夹。
现在，打开XAMPP文件夹 > htdocs > WordPress文件夹（在我的例子中是测试）> wp-content > themes 。

在 Themes 文件夹中，您将看到所有已安装的 WordPress 主题。 创建一个新文件夹并命名您的主题。

创建主题文件夹

第 3 步：创建 PHP 文件

新创建的主题文件夹是空的，需要创建一些文件才能使用。 为此，您需要启动代码编辑器 (VS Code) 并打开整个 WordPress 主题文件夹（在我的例子中是 farhan-wordpress-theme）。

现在创建以下基本的 WordPress 文件以更好地组织您的主题。

  1. style.css（包含主题详细信息和 CSS 文件）
  2. index.php（如果没有声明其他可选文件，则提供主要内容）
  3. header.php（包含主题的header元素）
  4. footer.php（包含主题的页脚元素）
  5. functions.php（包含 WordPress 主题中的函数）

wordpress 文件

第 4 步：复制 CSS、图像和 JavaScript (JS) 文件夹

从您的 HTML 主题（在上面下载）中，将资产文件夹（CSS、JS 和图像文件夹）复制到新的 WordPress 主题文件夹。

html文件夹

移动到新的 WordPress 主题文件夹后，它将如下所示：

wordpress 文件夹和文件

第 5 步：激活新的 WordPress 主题

现在，您已经添加了任何 wp 主题所需的重要文件夹。 接下来，在浏览器上打开您的 WordPress 网站并登录到您的仪表板。 导航到外观 > 主题，您将看到您的新主题已添加到此部分。

激活 wordpress 主题

这个主题看起来很空。 要为新创建的主题添加信息和横幅，请打开 style.css 文件（之前创建）并粘贴以下代码并保存（ ctrl+s ）。

 /*

主题名称：Farhan WordPress 主题

添加一名作者

描述：将 HTML 转换为 WordPress 主题。

版本：1.0

*/

对于横幅，您需要将图像文件添加到新的主题文件夹中。 图像大小应为 800 x 600，图像名称应为Screenshot （png 格式）。

添加scrrenshot png文件

一旦你添加了 screenshot.png 文件，刷新你的 wp-admin 仪表板，图像横幅就会出现。

wordpress 主题图片

现在，您可以在单击横幅时查看主题信息。

主题详情

接下来，只需单击Activate 。

第 6 步：将 HTML 代码转换为页眉、索引和页脚

页眉、页脚和正文都标有 HTML 注释，以便轻松将其添加到您的 WordPress PHP 文件中并转换代码。

现在将下载主题的index.html中的标题代码复制到您在 WordPress 主题文件夹中创建的header.php文件中。 您需要从<!DOCTYPE html>复制到</header>并保存它。

头文件php文件

同样，将 index.html 中的页脚和主体元素分别复制到 footer.php 和 index.php 中。

对于页脚，从<footer>复制（在我的例子中，在页脚标记中定义了一个类名，所以不要混淆）直到</html>复制到footer.php文件中并保存它。

页脚php文件

接下来，将</header>标记之后和<footer>之前的所有代码复制到index.php 并保存。

索引php文件

在 index.php 文件的顶部添加 WordPress 函数get_header()和get_footer() 。

get_header()是调用header.php的内置函数，类似地， get_footer()是调用footer.php的函数。

在 index.php 文件的顶部添加以下代码并保存。

 <?php get_header(); ?>

在索引文件的顶部添加听到

要调用页脚，请在 index.php 代码的末尾插入以下代码并保存。

 <?php get_footer(); ?>

在索引文件底部添加页脚

现在，访问您的站点，您将看到类似的内容。

没有 css 和 js 的站点

步骤 7：配置 CSS

您的主题看起来很奇怪的事实是因为 CSS 文件未应用于主题。

您已经将 CSS 文件夹从 HTML 主题复制到您的 WordPress 主题文件夹。 现在，您需要调用这些 CSS 文件来完成主题的外观。

请记住，您的 CSS 文件的名称可能不同——因此在执行此过程之前请仔细检查。

您将在 header.php 文件中找到您的 CSS 样式表，因此您需要通过CTRL+f搜索“ rel=”stylesheet” ”。

头文件中的css样式表

之后，删除 Google 字体样式表，因为我们不需要它们。 现在，我只需要注册实际的 CSS 样式表，即<link rel=”stylesheet” href=”assets/css/style-starter.css”> 。

WordPress 不理解常规的 CSS 样式表结构； 这就是为什么我需要排队并注册 CSS 样式表。 转到functions.php 文件并添加以下代码。

 <?php

函数 add_css()

{

   wp_register_style('first', get_template_directory_uri() .'/assets/css/style-starter.css', false,'1.1','all');

   wp_enqueue_style('第一个');

}

add_action('wp_enqueue_scripts', 'add_css');

注册css文件

wp_register_style将帮助您注册您的 CSS 样式表。

get_template_directory_uri() 。 '/href'用于获取当前模板目录路径。 它将当前路径与相应的文件连接起来。 所以在这里，你需要定义你的 CSS 文件（href）的位置。 您可以看到我如何定义该 CSS 文件的路径： get_template_directory_uri() 。 ' /assets/css/style-starter.css '。

现在，我们可以从header.php文件中删除 CSS 样式表链接，并将其替换为以下代码并保存文件。

 <?php wp_head(); ?>

wp_head() 是一个必不可少的 WordPress 钩子，它定义在 header.php 的<head> </head>部分下。

wordpress 标题钩子

当您访问您的 WordPress 站点时，您会注意到 CSS 文件实际上已排入您的新 WordPress 主题的队列中，但仍然没有按顺序设计。 那是因为你还没有配置JS脚本。

添加css文件后

在header.php 中，我有一个CSS 样式表，我只在functions.php 中注册了它。 但是如果你有多个样式表怎么办？ 在这种情况下，您需要为每个样式表定义 wp_register_style()。 别担心！ 您可以从下一步中举个例子，其中我有多个 JS 脚本。 该过程是相同的，因此它将清除您的疑问并帮助您了解您将如何完成这项工作。

第 8 步：配置 JavaScript

您正在使用的 HTML 主题使用 JavaScript，并且在 footer.php 文件中，JavaScript 文件已经以 HTML 格式调用。 要运行这些 JS 文件，您需要做的就是按照您在上一步中执行的相同操作。

打开您的 footer.php 文件并通过“ CTRL+f ”搜索“ <script src= ”。 这将帮助您找到您拥有的所有 JS 文件。 就我而言，我有五个，在这里我需要注册并排队所有这些。

搜索js文件

接下来，您需要打开您的functions.php 文件并粘贴以下代码：

 函数 add_script()

{

   wp_register_script('js-script', get_template_directory_uri() .'/assets/js/jquery-3.3.1.min.js', array ('jquery'), 1.1, true);

   wp_enqueue_script('js-script');

   wp_register_script('change', get_template_directory_uri() .'/assets/js/theme-change.js', array ('jquery'), 1.1, true);

   wp_enqueue_script('改变');

   wp_register_script('popup', get_template_directory_uri() .'/assets/js/jquery.magnific-popup.min.js', array ('jquery'), 1.1, true);

   wp_enqueue_script('弹出');

   wp_register_script('carousel', get_template_directory_uri() .'/assets/js/owl.carousel.js', array ('jquery'), 1.1, true);

   wp_enqueue_script('轮播');

   wp_register_script('bootstrap', get_template_directory_uri() .'/assets/js/bootstrap.min.js', array ('jquery'), 1.1, true);

   wp_enqueue_script('引导程序');

}

add_action('wp_enqueue_scripts', 'add_script');

您可以看到代码结构与您之前在 CSS 配置部分中所做的相同。 但是在这里，您将使用 wp_register_script 而不是样式。 您在同一个函数中注册和排队每个 JS 文件。

排队js脚本

现在，您可以从footer.php文件中删除所有 JS 脚本链接（我有五个），然后将以下代码行粘贴到代码末尾（</body> 标记上方）并保存文件。

 <?php wp_footer(); ?>

wordpress页脚钩

现在，在浏览器上打开您的网站，您会注意到新的 WordPress 主题运行良好，但仍然缺少一些图像。

js 和 css 之后的主题

步骤 9：配置图像

这个过程很简单，在这里，您需要定义图像的路径。

首先，打开你的 index.php 文件并通过“ CTRL+f ”搜索“< img src= ”。 这将帮助您找到您拥有的所有图像文件。 就我而言，我有八个，在这里我需要所有这些的路径。

搜索图像文件

为图像提供路径； 在src标签中添加以下 PHP 代码并保存文件。

 <img src="<?php echo get_template_directory_uri().'/assets/images/p1.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p3.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p4.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p5.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p6.jpg'; ?>" alt="" class="img-fluid radius-image" />

在 wordpress 中调用图像

现在，您的主题将类似于 HTML 主题并获取所有图像。

wordpress 图像文件

但是，它将缺少 WordPress 功能，例如更改站点标题和 WordPress 导航菜单。

第 10 步：在 WordPress 中启用自定义标题

如果您进入 WordPress 管理面板并更改网站的标题，则不会影响网站的标题。 要启用此功能，您可以使用 WordPress 内置函数bloginfo()在header.php文件中的标题标签之间使用参数“ name ”并保存文件。

 <?php bloginfo('name'); ?>

wordpress 标题

同样，您需要使用 WordPress 内置函数bloginfo()在header.php文件中的h1 标记之间带有参数“ name ”并保存文件。

 <?php bloginfo('name'); ?>

h2 标题

现在，您的主题将选择您在 WP-admin 面板内的Settings -> General-> Site Title中设置的标题。

wordpress 网站标题

第 11 步：在 WordPress 中添加 WordPress 导航菜单

当您访问站点的 WordPress 管理员并导航到外观时，您将看不到菜单选项。

您需要先通过在 functions.php 文件中添加以下代码行来启用 Menu。

 add_theme_support('菜单');

添加主题菜单

这将在您的主题中启用菜单功能，但它需要一些配置才能从您的 WP 仪表板管理菜单。

wordpress 菜单部分

首先，找到您的 HTML 主题导航菜单所在的位置，然后使用 WordPress 内置函数wp_nav_menu()替换它； 您可以在此处阅读有关此功能的更多信息。

在这个主题中， header.php包含导航菜单。

找到以下代码行：

 <ul class="navbar-nav mx-lg-auto">

<li class="nav-item active">

<a class="nav-link" href="index.html">首页<span class="sr-only">（当前）</span></a>

</li>

<li class="nav-item @@about__active">

<a class="nav-link" href="about.html">关于</a>

</li>

<li class="nav-item @@contact__active">

<a class="nav-link" href="contact.html">联系方式</a>

</li>

</ul>

wp 菜单代码

将以上几行替换为：

 <?php wp_nav_menu( array( 'menu_class' => 'navbar-nav mx-lg-auto', 'container' => 'ul', )); ?>

您的 WordPress 菜单现在将显示在您的主题上，并为您的 WordPress 商业主题增加灵活性。

包起来！

我希望本文能帮助您了解如何将 HTML 模板或站点转换为 WordPress 主题。 这是一个详细的教程，其中我涵盖了 11 个步骤来演示该过程。

如果您有任何问题和疑问，请随时在下面的评论部分提问。

经常问的问题

问：我可以将 HTML 转换为 WordPress 吗？

将 HTML 转换为 WordPress 的过程包括以下步骤：

1）为主题创建一个新文件夹
2）复制styles.css文件中的CSS代码
3) 将HTML代码分成header.php、sidebar.php和footer.php文件
4) 将 header.php 和 footer.php 文件转换为所需的 WordPress 格式
5）生成截图（这将用作主题预览）
6）压缩文件夹并将其上传到WordPress网站

问：如何将 HTML 添加到 WordPress？

要将 HTML 添加到 WordPress 页面或帖子，请转到页面/帖子并将 HTML 代码添加到文本选项卡。

问：如何在 WordPress 中打开 HTML 文件？

您可以通过将压缩的 HTML 文件上传到服务器来打开 HTML 文件，然后在服务器的文件管理器中打开它。

问：WordPress 使用 HTML 吗？

WordPress 广泛使用 HTML 来呈现和格式化各种页面和帖子上的信息。