众所周知，一项调查证明，WordPress为互联网上 40% 以上的网站提供了动力。您可能会发现自己正在考虑从静态的 HTML 网站过渡到生动活泼的 WordPress 主题。
虽然HTML5仍然是网站的最佳选择，但WordPress提供了一个更加用户友好、功能丰富的解决方案。WordPress 网站的魅力在于其广泛的主题、插件和小工具集合，使网站所有者有能力加强WordPress 开发。
该平台提供多种设计选项，并简化了内容管理。
不过，在基于 HTML 的网站上，尤其是对于那些需要编码专业知识的人来说，这可能会很困难。
因此，今天我们将对将静态 HTML 转换为动态 WordPress 主题的复杂性进行初步探讨，并尝试让您轻松完成转换。
那么，让我们开始吧！
将 HTML 转换为 WordPress 主题前的注意事项
我们知道，您对将 HTML 转换为 WordPress 主题的过程感到非常兴奋。但请稍等一下，在开始转换之前，您需要注意一些事项。
以下是您需要考虑的问题：
选择合适的代码编辑器
在转换过程中，选择一个相关的代码编辑器至关重要。无论是记事本++、Atom、Sublime 还是其他工具，有了合适的编辑器，就能简化 HTML 代码的调整工作，以适应 WordPress 的要求。
托管服务选择
托管服务的选择至关重要！WordPress网站的托管服务非常重要，而且可能不同于 HTML。因此，请考虑选择一个好的托管服务，或者您也可以为网站选择本地托管服务，并在稍后阶段过渡到实时环境。
时间和预算评估
在开始任何新工作之前，您必须评估自己的时间和预算。考虑一下转换所需的时间和资金投入。如果您准备学习，我们的教程就是一个完美的指南。或者，您也可以聘请开发人员或使用WordPress 转换服务，他们可以提供专业知识和便利。
将 HTML 网站转换为 WordPress 主题
事不宜迟，现在就让我们进入程序，看看如何将 HTLM 转换为功能强大的 WordPress 主题：
步骤 1：建立先决条件
要启动将 HTML 网站转换为 WordPress 主题的过程，确保具备必要的先决条件至关重要。
此外，确保在电脑上安装 WordPress，以便从静态 HTML 到动态 WordPress 主题的顺利过渡。一旦 WordPress 在本地启动并运行，我们就开始下一步。
步骤 2：创建主题文件夹
第二步是创建专用主题文件夹。具体方法如下
- 导航至本地服务器上的 XAMPP 文件夹。
- 在 XAMPP 文件夹中，找到 "htdocs "目录。
- 在 "htdocs "中找到 WordPress 安装文件夹
- 然后，导航至 "wp-content"，接着转到 "主题 "文件夹。
在 "主题 "目录中，你会看到所有已安装的WordPress 主题。在 "主题 "目录下生成一个新文件夹，并为你的主题提供一个唯一的名称。
第 3 步：为主题开发 PHP 文件
主题文件夹准备就绪后，下一步就是为其设置必要的PHP 文件 ，以便将其结构化为 WordPress 主题。下面是如何使用你选择的代码编辑器（如 VS Code）进行设置的方法：
- 打开代码编辑器 启动你喜欢的代码编辑器（如 VS Code）。
- 访问 WordPress 主题文件夹： 在代码编辑器中打开整个 WordPress 主题文件夹
- 创建重要的 WordPress 文件： 在主题文件夹中，使用代码编辑器创建以下重要 PHP 文件：
- style.css：包含主题详细信息和CSS文件。
- index.php：作为主要内容文件，不包含其他可选文件。
- header.php：包含主题的标题元素。
- footer.php：放置主题的页脚元素。
- functions.php：包含 WordPress 主题的基本功能。
第 4 步：传输 CSS、图像和 JavaScript (JS) 文件夹
将 HTLM 转换为 WordPress 主题的下一步是将 CSS、JavaScript(JS) 和图片等重要资产从现有的 HTML 主题中转移出来。请按照以下步骤顺利转移：
- 打开之前下载并希望转换的 HTML 主题文件夹。
- 识别 HTML 主题中包含 CSS、JS 和图片的 "assets "文件夹。
- 从 HTML 主题中复制整个 "assets "文件夹。
- 导航至新建的 WordPress 主题文件夹。
- 将 "assets "文件夹粘贴到 WordPress 主题目录的根目录中。
第 5 步：激活全新 WordPress 主题
当您成功地为 WordPress 主题添加了基本文件夹后，就可以在 WordPress 网站上激活您的作品了。
- 登录并访问 WordPress 仪表板
- 导航至 "外观">"主题 "并选择新主题
- 现在，您新创建的主题应该可以在本部分列出的主题中看到。
- 最初，主题可能是空的。要添加信息和横幅，请执行下一步骤。
- 自定义 Style.css；在代码编辑器中打开 "style.css "文件（之前已创建）。
- 粘贴所提供的信息和横幅设置代码并保存文件（Ctrl+S）。
- 在主题文件夹中添加一个名为 "屏幕截图"（PNG 格式）的横幅图片文件。确保大小为 800 x 600 像素。
- 刷新 WordPress 管理仪表板。图像横幅现在就会出现。
- 点击 "激活"，让您的主题在 WordPress 网站上运行。
另请阅读：Figma 到 WordPress - 2024 年的终极转换方法
第 6 步：将 HTML 代码转换为页眉、索引和页脚
现在，重点转移到无缝集成页眉、页脚和其他主体元素，以实现自定义网页设计。 请按照以下步骤操作，确保代码轻松过渡：
标记 HTML 部分
在 HTML 代码中识别标有 HTML 注释的页眉、页脚和主体部分。这些注释是提取和转换代码的锚点。
将标题代码复制到 header.php
Copy the header code from the ‘index.html’ of your downloaded theme. Paste the copied code into your WordPress theme folder’s ‘header.php’ file. Select the code from <!DOCTYPE html> to </header> and save the file.
将页脚代码转移到 footer.php
Copy the footer code from ‘index.html’ of your theme. Paste the footer code into your WordPress theme folder’s ‘footer.php’ file. Select the code from <footer> to </html> and save the file.
将主体代码复制到 index.php
Copy the main body elements from ‘index.html’ into your WordPress theme’s ‘index.php’ file. Paste the code after the </header> tag and before the <footer> tag. Save the ‘index.php’ file.
整合 WordPress 功能
在 "index.php "文件顶部添加 WordPress 函数 get_header()。在 "index.php "文件末尾添加函数 get_footer()。保存 "index.php "文件。
第 7 步：为 WordPress 主题配置 CSS
当您的 WordPress 主题开始成形时，是时候解决未应用 CSS 文件造成的外观差异了。
请按照以下详细步骤无缝配置 CSS，为您的 WordPress 主题实现连贯的网站设计：
查找 header.php 中的 CSS 文件
- 打开 WordPress 主题文件夹中的 "header.php "文件。
- 使用 CTRL+F 搜索 "rel="stylesheet""，查找 CSS 样式表引用。
删除不必要的 Google 字体样式表
- 如果有 Google 字体样式表，请将其删除，因为它们对于 WordPress 主题来说是不必要的。
在 functions.php 中注册 CSS 样式表
- 打开 WordPress 主题文件夹中的 "functions.php"文件。
添加注册码
- 使用 wp_register_style 函数注册 CSS 样式表。
- 使用 get_template_directory_uri() ./href'来指定 CSS 文件的位置。
- 定义 CSS 文件的路径，例如 get_template_directory_uri()。'/assets/css/style-starter.css'。
替换 header.php 中的样式表链接
- 从 "header.php "中移除 CSS 样式表链接。
- 将其替换为在 "functions.php "中注册的代码。
- 保存 "header.php "文件。
了解 wp_head()
- Ensure that the wp_head() function is included in the <head> section of ‘header.php.’
- 该功能是 WordPress 的一个重要钩子，有助于正确呈现样式表。
第 8 步：为 WordPress 主题配置 JavaScript
要确保 WordPress 主题中JavaScript的无缝功能，请遵循以下综合步骤。这不仅能注册和调用 JavaScript 文件，还能提高动态主题的整体性能：
- Identify JavaScript Files in footer.php: Open the ‘footer.php’ file in your WordPress theme folder. Search for “<script src=” using CTRL+F to locate JS file references.
- 在 functions.php 中注册和 Enqueue JS 文件： 打开 WordPress 主题文件夹中的 "functions.php "文件。
- 粘贴注册代码： 使用 wp_register_script 函数注册每个 JS 文件。在同一函数中对每个 JS 文件进行排队。
- 删除 footer.php 中的 JS 脚本链接： 删除 "footer.php "文件中的所有 JS 脚本链接。用 "functions.php "中注册的代码替换它们。
- Insert Enqueued Code: Place the code at the end of ‘footer.php,’ just above the </body> tag. Save the ‘footer.php’ file.
另请阅读 什么是 JavaScript 屏蔽？
最终结果将是一个充满活力、功能齐全的网站。准备好处理任何缺失的图片并结束转换过程了吗？让我们进入完善 WordPress 主题的下一个步骤。
第 9 步：为 WordPress 主题配置图片
在将 HTML 网站转换为 WordPress 主题的最后阶段，配置图片对于实现视觉一致性至关重要。
- Identify Image Files in index.php: Open the ‘index.php’ file in your WordPress theme folder. Search for “<img src=” using CTRL+F to locate image file references.
- 定义图片路径： 在 "index.php "文件中，确定并定义所使用的每张图片的路径。确保图片路径与 WordPress 主题的结构一致。
学习： 如何优化图片并提高网站速度？
通过上述步骤，您可以确保 WordPress 主题无缝地获取和显示图像文件。加入 WordPress 功能（如更改网站标题和加入导航菜单）将为您的动态主题锦上添花。
第 10 步在 WordPress 中启用自定义标题
要让 WordPress 主题在管理面板中动态反映对网站标题所做的更改，请按照以下步骤集成必要的 WordPress 功能。
这可确保您的主题适应通过WP-admin 面板中的 "设置"->"常规"->"网站标题"所做的修改：
修改 header.php 中的标题
- 打开 WordPress 主题文件夹中的 "header.php "文件。
- Between the <title> tags, use the WordPress built-in function blog info (‘name’) to fetch and display the site title dynamically.
- 保存 "header.php "文件。
调整 header.php 中的标题
- In the ‘header.php’ file, locate the <h1> tags.
- Insert the same WordPress function bloginfo(‘name’) between the <h1> tags to ensure consistency.
- 保存 "header.php "文件。
阅读： 标题标签：它们是什么？如何使用？
第 11 步：在 WordPress 主题中添加 WordPress 导航菜单
要通过添加导航菜单来增强 WordPress 主题的功能，请按照以下步骤操作。
在 functions.php 中启用菜单
- 打开 WordPress 主题文件夹中的 "functions.php "文件。
- 添加以下一行代码，在主题中启用菜单功能："add_theme_support（'menus'）"。
在 header.php 中确定导航菜单：
- 在 WordPress 主题的 "header.php "文件中找到导航菜单代码。
用 WordPress 功能替换
- 用 WordPress 内置函数 wp_nav_menu()替换现有的导航菜单代码。
- 根据菜单结构和要求配置功能。
在 WP 控制面板中配置菜单
- 访问 WordPress 管理面板并导航至外观 > 菜单。
- 根据需要配置和管理菜单。
结论
在完成将 HTML 转换为 WordPress 的指南后，您就掌握了将静态网页内容无缝转换为动态、用户友好体验的工具。按照十一个简单明了的步骤，我们完成了基本配置，让你的 WordPress 主题大放异彩。
从 CSS 和 JavaScript 集成到自定义标题和导航菜单，每个步骤都能帮助你顺利完成转换。无论您是正在磨练技能的开发人员，还是寻求充满活力的在线形象的企业主，本教程都能帮助您将静态 HTML 转换为动态 WordPress 主题。
祝您编码愉快，WordPress 成功在望！
常见问题
为什么要将 HTML 网站转换为 WordPress 主题？
将 HTML 转换为 WordPress 可增强网站的动态功能，实现轻松的内容管理、搜索引擎优化，并可使用各种插件来增加功能。
将 HTML 转换为 WordPress 主题是否需要编码技能？
编码技能固然有益，但也有用户友好型工具和教程可供使用。基本的 HTML 和 PHP 知识会有所帮助，但即使是初学者也能在逐步指导下成功地将 HTML 转换为 WordPress。
将 HTML 转换为 WordPress 对搜索引擎优化有何影响？
WordPress 本身就具有有利于搜索引擎优化的功能。通过将 HTML 转换为 WordPress，您可以利用这些内置功能，如简洁的 URL 结构、可定制的元标签和移动响应性，来提高网站在搜索引擎中的可见度。
WordPress 可以使用任何 HTML 模板吗？
虽然许多 HTML 模板都可以转换，但必须选择符合 WordPress 编码标准的模板。干净整洁、结构合理的HTML模板可确保转换过程更顺利，并与WordPress功能更好地兼容。
转换为 WordPress 主题对性能有什么好处？
是的，转换为 WordPress 主题通常可以提高性能。通过优化编码、高效缓存和使用插件，您的网站可以获得更快的加载时间，从而带来更好的用户体验，并有可能提高搜索引擎排名。
