为什么要将 HTML 网站转换为 WordPress 主题

已发表: 2021-08-24

还在使用过时的 HTML 网站吗？ 是时候将您的 HTML 网站转换为 WordPress 网站并从这个流行的内容管理系统提供的众多功能中受益了。 我们将专注于为什么您应该切换到 WordPress 以及如何实现这一目标。

介绍

长期以来，纯原生 HTML 一直是网站开发的黄金标准。 然而，过去的网站都是骨架，没有精心设计的花里胡哨，在那时为这些网站使用 HTML 是有意义的。

根据当前的市场趋势和需求，您现在可以将 HTML 转换为 WordPress，并利用内容管理系统来运行您的网站，而无需编写代码。 阅读更多内容以更广泛地了解 WordPress 开发。

将 html 网站转换为 wordpress 的原因

将 HTML 网站上传或转换为 WordPress 的原因

以下是从静态 HTML 网站迁移到 WordPress 网站是理想步骤的一些主要原因：

  1. WordPress 是一款出色的工具，可用于创建和管理独一无二的用户界面，而使用静态 HTML 模板来进行网站设计是无法轻松实现的。
  2. WordPress 拥有强大的开发人员社区，他们可以帮助您开发您的网站并指导新手过去遇到的挑战。
  3. 如果您希望快速自定义布局，则使用纯 HTML 布局无法实现相同的效果。 WordPress 的页面构建工具允许用户在旅途中自定义网站的布局和外观。
  4. 如果您不想使用现有的 HTML 文件，您可以从数以千计的可用主题中进行选择。 您很有可能会找到与您的 HTML 外观和感觉非常相似的主题。 这样，您可以节省将现有 HTML 布局转换为 WordPress 并利用现成模板的成本和精力
  5. WordPress 在此期间不断发展，在发展过程中 WordPress 社区确保它对 SEO 友好。 它有一些惊人的 SEO 提升插件，其中一个插件是 YOAST SEO，它是 WordPress 中 SEO 管理的黄金标准。 它有助于实现更高的搜索引擎排名，这是构建商业网站的最终目标。
将 html 网站转换为 wordpress 的方法

将 HTML 网站转换为 WordPress 的不同方法

在讨论了为什么建议将 HTML 转换为 WordPress 之后，我们将深入了解如何实现这一点。

有三个选项可用

  • 手动方法，这需要从头开始构建它。
  • 子主题方法包括使用基本的 WordPress 主题并根据您的规范对其进行自定义。
  • 插件技术。

您选择的方法取决于您的编码知识、您打算投入此项目的时间以及您的偏好。

步骤到转换 html 网站到 wordpress 使用手册方法

将 HTML 网站手动转换为 WordPress

您当前站点的 HTML 代码可以作为手动转换的参考点。 专家建议您在尝试此翻译过程之前有足够的编码知识。 您应该特别熟悉 HTML、CSS 和 PHP。

以下是手动将 HTML 转换为 WordPress 的方法：

步骤 1：创建一个新的主题文件夹

在您的 PC 上创建一个新文件来存储您的主题文件。 您可以随意命名此类别（它将作为属性的名称）。 制作适当的文件并在您首选的编码编辑器中保持打开状态：

  1. 样式.css
  2. 索引.php
  3. 头文件.php
  4. 边栏.php

第 2 步：将 CSS 代码复制到新样式表

创建文件后，您可以重新复制 CSS 代码。 那些想要复制他们的网站并将其移动到 WordPress 的人需要从他们以前的位置找到并提取 CSS 代码。 style.css 文件负责网站的外观。 因此添加以下行：

 /* Theme Name: Replace with your Theme's name Theme URI: Your Theme's URI Description: A brief description Version : 1.0 Author: You Author URI: Your website address */

第 3 步：分离当前的 HTML 代码

首先，打开 index.html 文件。

从生成的 WordPress 文件中复制代码并将其粘贴到以下区域：

  1. Header.php — 该文件包含从 HTML 代码介绍到主要内容区域的所有内容。 您需要在 </head> 部分之前复制并粘贴<?php wp_head();?> 。
  2. Sidebar.php — 您将在此处插入 <aside> 部分的所有代码。
  3. Footer.php - 这部分从侧边栏的底部运行到文件的顶部。 在以 </body> 结束括号之前添加对 <?php wp_footer();?> 的调用。

第 4 步：为 WordPress 更改 Header.php 和 Index.php

然后，您将修改 header.php 和 index.php 以符合 WordPress 的格式。

 <?php if (have_posts()) : ?> <?php while have_posts()) : the_post(); ?> <div <?php post_class(); ?>> <div class="post-header"> <div class="date"X?php the_time( 'My'); ?X/div> <h2><a href="<?php the permalink(); ?>" rel="bookmark" title="Permanent link to <?php the_title_attribute(); ?>"X?php the_title(); ?X/ax/h2> <div class="author"X?php the_author(); ?></div> </divx!--end post header--> <div class="entry clear"> <?php if ( Eunction_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?X/div> <!--end entry--> <div class="post-Footer"> <div class="comments"X?php comments_popup_link( 'Leave a Comment', '1 Comment', '? Comments! ); ?X/div> </divX!--end post footer--> </div><!--end post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ? > <div class="navigation index"> <div class="alignleft"><?php next_post_link( 'Older Entries'); ? X/div> <div class="alignright"X?php previous_posts_link( 'Newer Entries' ); ?></div> </divx<!--end navigation--> <?php else : ?> <?php endif; ?>

为此，请在 <head> 部分中查找如下所示的链接：

 <link rel=”stylesheet” href=”style.css”>.

用这个替换之前的 URL：

 <link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />

现在保存并退出 header.php 文件。

在您的网络浏览器中打开 index.php 文件。 应该是空的

请按如下方式准确填空：

 <?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>

第 5 步：下载您的新主题

当您的主题文件夹完成后，将其上传到您的网站并完成 HTML 到 WordPress 的转换。 为此，请转到您下载 WordPress 的位置并将新创建的文件夹添加到 /wp-content/theme。

检查 WP-Admin 页面、主题和主题中的属性列表，以查看属性名称是否存在。 如果是这种情况，则您正确执行了所有操作，现在可以激活它。

步骤到转换 HTML 网站到 wordpress 使用子主题方法

通过 WordPress 子主题转换 HTML 网站

第 1 步：选择主题

首先，选择一个合适的 HTML 设计主题。 寻找与您当前网站相似的子主题。 如果你找到它包含的模式，你就不会那么想编码了。

您应该提供起始功能，因为它建立在基本的代码行之上。

第 2 步：构建一个新的主题文件夹

以同样的方式，您在最后一种方法中进行了操作，您将在桌面上创建一个新文件夹。

该文件夹应与父样式具有相同的标题，但在末尾添加“-child”。 请注意，名称中不应有空格。

第 3 步：创建新的工作表样式

然后，在该文件夹中，创建一个 style.css 文件并添加额外的代码行：

请记住，这只是一个示例。 您必须从您的详细信息重新开始。 该过程完成后，保存文件。

 Theme Name: Twenty Nineteen Child Theme URI: http://example.com/twenty-nineteen-child/ Description: Twenty Nineteen Child Theme Author: John Doe Author URI: http://example.com Template: twentynineteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gp1-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-nineteen-child */

第 4 步：创建 Functions.php

然后，对于子主题，您将编写一个 functions.php 文件并复制父样式。

创建一个名为 functions.php 的新文件来完成此操作。 首先确保 <?php. 标签。

现在在框中输入以下代码：

 function child_theme_enqueue_styles() { $parent_style = 'parent-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

此代码告诉 WordPress 转到父主题并使用那里指定的子主题的样式。

步骤 5：激活孩子的主题

最后，您必须配置主题。 在将文件夹提交到 WordPress 之前，使用“外观”菜单、“主题”和“添加新的”将其解压缩。 从那里，您可以检索 zip 文件。 查看 wp-content / theme 文件夹作为另一个选项。

步骤到转换-html-网站到 wordpress-using-plugin-technique

使用插件将 HTML 网站中的内容导入 WordPress

第 1 步：设置新站点

在您的新网站上下载您喜欢的 WordPress 主题。 确保它是您想要的模板并且可以快速更改。 为了适合您的身份，您需要更新外观。

第 2 步：安装插件

第一步是下载并安装 HTML Import 2 插件。 （WordPress 插件可以安全使用吗？继续阅读以了解更多信息）。 最简单的方法是转到插件 > 添加新插件，然后在 WordPress 管理面板中输入插件的名称。 当您在屏幕上找到它时单击立即安装（它可能靠近底部）。 完成后，启动它。

第 3 步：上传页面

安装插件后，将您的页面发布到与 WordPress 安装相同的服务器。

您必须填写的信息：

  • 导入目录
  • 旧网站网址
  • 默认文件
  • 要包含的文件扩展名
  • 要排除的目录
  • 保留文件名

之后，导航到内容选项卡并配置承载站点内容的 HTML 元素。

第二步是设置从旧 URL 到新 URL 的重定向。 通过这种方式，您不会失去任何现有的 SEO 价值。

保存您的选项，然后在完成每个选项卡后单击导入文件。

结论

在当今瞬息万变的竞争市场中，拥有一个灵活的 WordPress 网站可能是您公司发展的最有效方式。

借助提高 WordPress 网站速度的便捷技巧以及扩展 WordPress 网站以实现高流量的方法，WordPress 可以随着您的业务而发展，无论其规模大小。

尽管 HTML 到 WordPress 转换器插件似乎是一个可行的解决方案，但它们无法与通过人工编码获得的结果进行比较，尤其是在将 HTML 网站转换为 WordPress 主题时。

从静态 HTML 站点转移到具有已建立功能的更有效的内容管理系统（例如 WordPress 平台）是一个不错的选择，如果您有的话，尤其是与其他类似平台（如 Wix）相比时。 当您将 HTML 转换为 WordPress 时，由于 WordPress 主题和用户友好的 WordPress 功能，它使您的网站更易于管理和管理。 联系我们以获取众多其他服务中的自定义 WordPress 解决方案，并通过 Creole Studios 将您的想法变为现实！