如何将HTML转换为WordPress模板

wordpress 等用户友好型系统彻底改变了我们创建在线内容的方式。现在，无需编写任何代码即可构建一个高性能、专业设计的网站。然而，情况并非总是如此！

在诸如 WordPress 之类的系统之前，使用html创建网站是非常标准的，其中包含一些javascript和css。如果您拥有一个 HTML 网站，那么您可能正在考虑切换到 WordPress。

好消息是您不必从头开始。可以将您过时的 HTML 代码转换为现代 WordPress 网站。在这篇文章中，我们将介绍两种不同的方法。

我们将涵盖的内容

首先，我将向您展示如何创建一个空白主题，然后将每段 HTML 粘贴到相应的 WordPress 主题文件中。虽然这不是必需的，但一些基本的 CSS 和 HTML 知识可以使这个过程更容易。

然后，我将分享一种技术含量较低的方法，即找到一个与您的 HTML 网站非常相似的父主题。然后，您可以创建一个子主题，并使用它来重新创建您的 HTML 站点的外观。

无论您选择哪种方法，在本文结束时，您都将完成从耗时的编码到用户友好的内容管理系统 (CMS) 的飞跃。

第 1 步：创建本地主题文件夹

首先，您需要创建一个本地文件夹，用于存储所有主题文件。在本教程中，我们将在此目录中工作，因此将其放在容易触及的地方是有意义的，例如放在您的桌面上。最终，我们会将此文件夹上传到您的网站，因此请为其指定一个描述性名称。

在此目录中，创建以下文件：

样式.css。在该文件中，您将创建定义新 WordPress 网站设计和布局的所有规则。
指数。.php _ 这个文件是一个备用文件，只有在没有更合适的寺庙可用时，WordPress 才会使用它。一些主题开发人员使用index.php作为提供通用模板的一种方式，该模板适用于显示任何内容。
头文件.php。这定义了将作为站点标题的一部分显示的内容，例如其标题和描述。
页脚.php。这定义了您网站页脚的内容，该页脚显示在主要内容区域下方。
边栏.php。这是将显示在您网站侧边栏中的内容，这是在许多 WordPress 网站中突出显示的垂直列。

目前，您可以将所有这些文件留空。我们将在接下来的几个步骤中填充它们。

第 2 步：将现有 CSS 复制到 WordPress 样式表中

假设您想保留原始网页设计，您需要将当前的 CSS 复制到 WordPress。您可以将此代码添加到您在上一步中创建的style.css文件中。

首先，打开style.css文件并添加以下内容，确保将值替换为您自己的信息：

/*Theme Name: Your theme’s name.
Theme URI: Your theme’s URI. 
Description: Describe your theme. 
Version: 1.0
Author: Your name.
Author URI: Your website’s address.*/

您现在可以将 HTML 站点的 CSS 粘贴到该文件的底部。然后，保存更改并关闭style.css文件。

第 3 步：分离您的 HTML

我们在本教程中创建的每个文件都旨在告诉 WordPress 要显示的内容和位置。为此，您需要划分站点的现有 HTML 并将其粘贴到我们之前创建的各种文件中。

首先，打开您的 HTML 站点的index.html文件。我们需要复制index.html的特定部分，并将它们粘贴到您的本地主题文件中：

复制index.php文件顶部的所有内容，一直到开始div class="main"标记。
在本地计算机上打开header.php文件，并将复制的文本粘贴到此文件中。保存您的更改，然后关闭header.php文件。
现在，切换回您网站的index.html文件。这一次，复制aside class="sidebar"元素。
在本地计算机上，打开sidebar.php文件。
将复制的文本粘贴到sidebar.php文件中。保存您的更改，然后关闭sidebar.php。
在您的index.php 文件中，复制侧边栏后的所有内容。
打开本地的footer.php文件，并将复制的文本粘贴到该文件中。保存您的更改，然后关闭footer.php。
在您的index.html文件中，复制主要内容部分。基本上，这就是剩下的一切！
将所有这些文本粘贴到本地index.php文件中。
最后，我们需要确保index.php可以与构成新 WordPress 网站的所有其他文件进行交互。在本地index.php文件的最顶部，添加以下 PHP：

<?php get_header(); ?>

11. 在index.php文件的最底部，添加以下内容：

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

您现在可以保存更改，但暂时不要关闭index.html文件！我们还有一段代码要添加。

第 4 步：创建循环

Loop 是 WordPress 用来向访问者显示您的内容的主要 PHP 代码。

WordPress 在 WordPress 循环中显示日期和时间 Rachel McCollin

在您的本地index.php文件中，在内容部分添加以下代码：

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
       <?php the_content(); ?>
       <?php edit_post_link(); ?>
       <?php wp_link_pages(); ?> </div>
    <!--end entry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--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_posts_link( 'Older Entries' ); ?></div>
       <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>

现在，您可以安全地保存并关闭index.php文件。您的主题现已完成，您可以将其上传到您的 WordPress 网站。

第 5 步：上传您的主题

首先，使用文件传输协议 (FTP) 客户端连接到您的 WordPress 网站。我正在使用FileZilla，尽管对于大多数 FTP 客户端来说，步骤应该大致相同。

在客户端中，导航到您网站的/wp-content/themes文件夹。

如何将HTML转换为WordPress模板第2张接下来，将本地主题文件夹拖放到/wp-content/themes目录中。FileZilla 现在会将这个主题上传到您的 WordPress 网站。

如何将HTML转换为WordPress模板第3张您的最后一项任务是激活您的自定义主题。在 WordPress 仪表板中，导航到外观 > 主题。

如何将HTML转换为WordPress模板第4张您现在可以激活您的主题。恭喜——您刚刚将静态 HTML 网站转换为动态 WordPress 网站。您现在可以开始使用旧网站的内容填充新的 WordPress 网站。

创建子主题

或者，您可以通过创建子主题将您的 HTML 站点转换为 WordPress。这种方法使您可以更自由地自定义新网站的设计，以与您的旧 HTML 网站紧密匹配。它也不需要像以前的方法那样多的技术知识。

首先，您需要选择一个主题作为您的父主题。您的子主题将从父主题继承其核心功能和样式。为了让您的生活更轻松，选择一个与您要创建的 WordPress 网站非常相似的父级会有所帮助。

安装并激活您选择的父主题后，使用 FileZilla 等 FTP 客户端连接到您的站点。然后，导航到您网站的wp-content/themes目录。

您现在可以右键单击该目录内的任意位置，然后选择Create directory。

如何将HTML转换为WordPress模板第5张出现提示时，将此文件夹命名为与您的父主题相同的名称，但在末尾添加-child。例如，如果您使用 twentyone 作为父主题，那么您将把这个目录命名为 twentyone-child。

如何将HTML转换为WordPress模板第6张接下来，打开这个目录并创建一个style.css文件。此子主题需要从父主题中提取其所有功能和样式。要建立这种关系，请将以下内容添加到您的style.css文件中：

/*
 Theme Name:   TwentyTwenty One Child
 Theme URI:    https://example.com/twentytwentyone-child/
 Description:  TwentyTwenty One Child Theme
 Author:    Jessica Thornsby
 Author URI:   http://example.com
 Template:  twentytwentyone
 Version:   1.0.0
 License:   GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:      light, dark, responsive-layout, accessibility-ready
 Text domain:  twentytwentyonechild
*/

确保使用您自己的信息更新上述代码。特别是，确保模板引用了父主题目录的确切名称。这就是 WordPress 识别您的父主题的方式，因此这些名称之间没有差异至关重要。

如果您不确定，那么您可以通过导航到FTP 客户端中的wp-content/themes来仔细检查父目录的名称。

添加所有这些代码后，保存更改，然后关闭style.css文件。

下一步是告诉 WordPress 您的子主题依赖于父主题的 CSS。在您的 FTP 客户端中，打开您的子主题目录并创建一个functions.php文件。在此文件中，您将使用wp_enqueue_style()PHP 调用定义主题的依赖关系和层次结构。

理想情况下，父主题将同时加载父样式表和子样式表。不幸的是，并非所有主题的编码都考虑到了多任务处理。要确切了解您的特定主题发生了什么，请在您的 FTP 客户端中打开父主题的文件夹。然后，打开functions.php文件并找到wp_enqueue_style()调用。

如何将HTML转换为WordPress模板第7张如果主题使用以开头的函数加载其样式get_stylesheet，那么您的子主题将需要加载父样式表和子样式表。例如，在上面的 TwentyTwentyOne 片段中，我们可以看到主题正在 using get_stylesheet_directory()，因此我们需要加载这两个样式表。

在编写这段代码时，使用与父主题相同的句柄至关重要。这个句柄是调用的第一个参数wp_enqueue_style()。在我们的 TwentyTwentyOne 示例中，我们可以看到这是twenty-twenty-one style.

如何将HTML转换为WordPress模板第8张现在您已经掌握了所有这些信息，请切换回您的子主题的functions.php文件。然后，您可以添加以下内容，并确保替换twenty-twenty-one-style为您选择的父主题的参数。

<?php
...
....
...
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 
        'child-style', 
        get_stylesheet_uri(),
        array( 'twenty-twenty-one-style' ),
        wp_get_theme()->get( 'Version' ) 
    );
}
 
  
}

正如我之前提到的，并非所有父主题都以相同的方式加载样式表。如果您的父主题使用以开头的函数加载其样式get_template，那么您只需要加载子样式。这意味着将以下内容添加到您的子主题的functions.php文件中：

<?php
...
....
...
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parenthandle' ),
        wp_get_theme()->get('Version') 
    );
}

和以前一样，确保替换parenthandle为父主题的参数。

这就是创建基本子主题所需的全部内容！您现在可以继续处理此主题，以确保它与您之前的 HTML 网站的设计非常匹配。

当您对结果感到满意时，保存您的更改并关闭所有子主题的文件。然后，您可以切换到 WordPress 仪表板并导航到外观 > 主题。您的子主题应该在等着您，您可以像任何其他 WordPress 主题一样激活它。

完成此步骤后，您现在可以开始将 HTML 复制到新的 WordPress 网站的任务了。