许多企业仍然依赖简单的 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. /*
  2. 主题名称:Farhan WordPress 主题
  3. 作者:法尔汉
  4. 描述:将 HTML 转换为 WordPress 主题。
  5. 版本:1.0
  6. */

对于横幅,您需要将图像文件添加到新主题文件夹中。图片大小应为 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
  2. 函数add_css ( )
  3. {
  4. wp_register_style ( 'first' , get_template_directory_uri ( ) . '/assets/css/style-starter.css' , false, '1.1' , 'all' ) ;
  5. wp_enqueue_style ( '第一' ) ;
  6. }
  7. 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 ( )
  2. {
  3. wp_register_script 'js-script' get_template_directory_uri '/assets/js/jquery-3.3.1.min.js' 数组'jquery' 1.1 ,真
  4. wp_enqueue_script ( 'js-script' ) ;
  5. wp_register_script 'change' get_template_directory_uri '/assets/js/theme-change.js' 数组'jquery' 1.1 ,true
  6. wp_enqueue_script ( '改变' ) ;
  7. wp_register_script 'popup' get_template_directory_uri '/assets/js/jquery.magnific-popup.min.js' 数组'jquery' 1.1 ,true
  8. wp_enqueue_script ( 'popup' ) ;
  9. wp_register_script 'carousel' get_template_directory_uri '/assets/js/owl.carousel.js' 数组'jquery' 1.1 ,真
  10. wp_enqueue_script “轮播”
  11. wp_register_script 'bootstrap' get_template_directory_uri ' /assets/js/bootstrap.min.js' 数组'jquery' 1.1 ,真
  12. wp_enqueue_script ( 'bootstrap' ) ;
  13. }
  14. 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" />
  2. <img src= "<?php echo get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt= "" class= "img-fluid radius-image" />
  3. <img src= "<?php echo get_template_directory_uri().'/assets/images/p3.jpg'; ?>" alt= "" class= "img-fluid radius-image" />
  4. <img src= "<?php echo get_template_directory_uri().'/assets/images/p4.jpg'; ?>" alt= "" class= "img-fluid radius-image" />
  5. <img src= "<?php echo get_template_directory_uri().'/assets/images/p5.jpg'; ?>" alt= "" class= "img-fluid radius-image" />
  6. <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" >
  2. <li class= "nav-item active" >
  3. <a class="nav-link" href="index.html" >首页 <span class= "sr-only" > ( current ) </span></a>
  4. </li>
  5. <li class= "nav-item @@about__active" >
  6. <a class="nav-link" href="about.html" >关于</a>
  7. </li>
  8. <li class= "nav-item @@contact__active" >
  9. <a class="nav-link" href="contact.html" >联系方式</a>
  10. </li>
  11. </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 来呈现和格式化各种页面和帖子上的信息。



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

作者 微慕

微慕官方WP管理员

发表回复