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

作者： /

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

html到wordpress

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

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

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

 

 

将 HTML 网站转换为 WordPress 主题

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

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

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

标题

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

主体

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

页脚

第 1 步：先决条件

我希望您已经在本地主机上安装了 WordPress，例如 XAMPP（即您的计算机）。如果没有，我们已经提供了帮助您在本地安装和设置 WordPress的详细指南。

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

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

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

创建主题文件夹

第 3 步：创建 PHP 文件

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

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

  1. style.css（包含主题细节和 CSS 文件）
  2. index.php（如果未声明其他可选文件，则提供主要内容）
  3. header.php（包含主题的标题元素）
  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）。

  1. /*
  3. 主题名称：Farhan WordPress 主题
  5. 作者：法尔汉
  7. 描述：将 HTML 转换为 WordPress 主题。
  9. 版本：1.0
  11. */

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

添加 scrrenshot png 文件

添加 screenshot.png 文件后，刷新 wp-admin 仪表板，图像横幅将出现。

wordpress 主题图片

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

主题细节

接下来，只需单击激活。

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

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

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

头文件

同样，将页脚和主体元素从 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 文件的顶部添加以下代码并保存。

  1. <?php get_header ( ) ; ?>

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

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


在索引文件底部添加页脚

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

没有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 文件并添加以下代码。

  1. <?php
  3. 函数add_css ( )
  5. {
  7. wp_register_style ( 'first' , get_template_directory_uri ( ) . '/assets/css/style-starter.css' , false, '1.1' , 'all' ) ;
  9. wp_enqueue_style ( '第一' ) ;
  11. }
  13. 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 样式表链接并将其替换为以下代码并保存文件。

  1. <?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 文件并粘贴以下代码：

  1. 函数add_script ( )
  3. {
  5. wp_register_script （'js-script' ，get_template_directory_uri （）。'/assets/js/jquery-3.3.1.min.js' ，数组（'jquery' ），1.1 ，真）；
  7. wp_enqueue_script ( 'js-script' ) ;
  9. wp_register_script （'change' ，get_template_directory_uri （）。'/assets/js/theme-change.js' ，数组（'jquery' ），1.1 ，true ）；
  11. wp_enqueue_script ( '改变' ) ;
  13. wp_register_script （'popup' ，get_template_directory_uri （）。'/assets/js/jquery.magnific-popup.min.js' ，数组（'jquery' ），1.1 ，true ）；
  15. wp_enqueue_script ( 'popup' ) ;
  17. wp_register_script （'carousel' ，get_template_directory_uri （）。'/assets/js/owl.carousel.js' ，数组（'jquery' ），1.1 ，真）；
  19. wp_enqueue_script （“轮播” ）；
  21. wp_register_script （'bootstrap' ，get_template_directory_uri （）。' /assets/js/bootstrap.min.js' ，数组（'jquery' ），1.1 ，真）；
  23. wp_enqueue_script ( 'bootstrap' ) ;
  25. }
  27. add_action （'wp_enqueue_scripts' ，'add_script' ）；

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

排队 js 脚本

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

  1. <?php wp_footer ( ) ; ?>

wordpress 页脚钩子

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

js和css之后的主题

步骤 9：配置图像

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

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

搜索图像文件

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

  1. <img src= "<?php echo get_template_directory_uri().'/assets/images/p1.jpg'; ?>" alt= "" class= "img-fluid radius-image" />
  3. <img src= "<?php echo get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt= "" class= "img-fluid radius-image" />
  5. <img src= "<?php echo get_template_directory_uri().'/assets/images/p3.jpg'; ?>" alt= "" class= "img-fluid radius-image" />
  7. <img src= "<?php echo get_template_directory_uri().'/assets/images/p4.jpg'; ?>" alt= "" class= "img-fluid radius-image" />
  9. <img src= "<?php echo get_template_directory_uri().'/assets/images/p5.jpg'; ?>" alt= "" class= "img-fluid radius-image" />
  11. <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 ”并保存文件。

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

wordpress 标题

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

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

h2 标题

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

wordpress 网站标题

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

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

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

  1. add_theme_support （'菜单' ）；

添加主题菜单

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

wordpress 菜单部分

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

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

找到以下代码行：

  1. <ul class= "navbar-nav mx-lg-auto" >
  3. <li class= "nav-item active" >
  5. <a class="nav-link" href="index.html" >首页 <span class= "sr-only" > ( current ) </span></a>
  7. </li>
  9. <li class= "nav-item @@about__active" >
  11. <a class="nav-link" href="about.html" >关于</a>
  13. </li>
  15. <li class= "nav-item @@contact__active" >
  17. <a class="nav-link" href="contact.html" >联系方式</a>
  19. </li>
  21. </ul>

wp菜单代码

将上面的行替换为：

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

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

包起来！

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

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

经常问的问题

问：HTML 到 WordPress 的转换？

将 HTML 转换为 WordPress 的过程涉及以下步骤：

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

问：如何将 HTML 添加到 WordPress？

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

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

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

问：WordPress 是否使用 HTML？

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



微信扫描下方的二维码阅读更多精彩内容

发表评论

滚动至顶部