WordPress divi主题

将 HTML 网站转换为 WordPress 网站

| 5月 18, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

在(网络)开始时,所有网站都是用文本和静态 HTML 制作的。 然而,20 多年后的今天,网络已经大不相同了。 网站要复杂得多。 它们为网站创建者和访问者提供了更丰富、更愉快的体验。

google广告开户

这在很大程度上要归功于 WordPress 等开源项目。 在过去十年左右的时间里,它成功实现了在线出版民主化的核心使命(以及在这个过程中的更多),因此任何安装了 WordPress 和正确主题/插件的人都可以拥有一个具有先进设计的现代网站和功能。 不需要编码——甚至不需要 HTML!

这就是为什么像我这样狂热的 WordPress 用户,几乎很难相信在 2018 年有人可能仍在运行静态 HTML 网站,而不是带有主题和插件的 WordPress 网站。 但事实是仍然有大量活动的纯 HTML 网站。 (或带有一点 CSS 的 HTML。)

当然,这些网站所有者可能有充分的理由不升级或转换。 也许他们的网站内容永远不会改变,并且已经存在的简单格式和设计是可用的? 或者也许这比担心更新 WordPress 网站更容易? 两者都是正当理由(除其他外)。 “不要修复没有损坏的东西”的主要例子。

然而,我有一种感觉,这些可能不是一些(也许很多)没有实现飞跃的主要原因。 最明显的一点是他们根本不知道如何将他们的 HTML 网站转换为 WordPress 网站。 特别是不会丢失内容或需要逐页进行过多的格式化。

值得庆幸的是,就像 WordPress 经常出现的情况一样,有很多方法可以解决这个问题。 我在下面编译了一些选项。

订阅我们的 Youtube 频道

将静态 HTML 网站转换为 WordPress 网站的选项

您如何选择将静态 HTML 网站转换为 WordPress 网站无疑将取决于您的个人偏好、所需的时间/金钱投资以及代码技能水平。 您必须自己决定哪一个最适合您,但是通过下面的摘要,您应该能够快速做出决定,并针对您的具体情况直接跳到这篇文章中最相关的信息。

WordPress divi主题

有三个主要选项:

1. 根据您当前的静态 HTML 站点手动创建 WordPress 主题。

这将要求您进入您的代码。 您必须通过 FTP 访问您当前的站点目录,并使用您现有的代码作为起点。 从那里您将需要为 WordPress 主题创建必要的文件,并从 WordPress 法典中复制一些代码。 如果您对 HTML、CSS 和一点 PHP 有一定的经验,这将相当简单直接。

2. 安装预制主题并简单地迁移您的内容。

这可能是简单性和价值相结合的最佳选择。 假设您已经为您当前的网站提供了托管服务,那么如果您选择购买高级主题,您只需要花钱。 我们将用于导入内容的插件在官方 WordPress 插件库中免费提供。

3. 付费让 HTML 到 WordPress 转换服务重新创建您的网站。

这是最简单的解决方案,因为它不需要您做任何事情。 但是,它不会让您熟悉 WordPress,而且成本会因您选择雇用的人而异。 我不会在下面的部分中介绍这个选项,因为如果这是您感兴趣的路线,您可以简单地快速搜索服务提供商,其余的会交给他们。

准备 HTML 到 WordPress 的转换

无论您决定在下面选择哪条路线,在潜入之前您都需要做一些事情。

首先是选择托管计划。 您需要查看现有的选项并决定最适合您需求的包。 或者,也许您想创建一个本地 WordPress 安装? 您以后可以随时将其迁移到托管服务。

选择后,您需要安装 WordPress 并登录 WP Admin。 这是我们两条可能的路径分开的点。

fiverr建站WordPress程序员

手动将您的静态 HTML 网站转换为 WordPress

如果您的目标不仅是要将静态 HTML 站点中的内容导入 WordPress,还要复制您当前的设计,这意味着您需要创建自己的自定义主题。 值得庆幸的是,这并不像一开始听起来那么可怕。 它只涉及创建一些文件夹和文件,进行一些复制和粘贴,然后上传结果。

您将需要一个代码编辑器,例如 Sublime 或 Notepad++,并可以访问您的 HTML 站点目录和新的 WordPress 安装目录。

第 1 步:创建一个新的主题文件夹和必要的文件

在您的桌面上,创建一个新文件夹来保存您的主题文件。 将其命名为您希望为主题命名的任何名称。

接下来,在您的代码编辑器中创建一些文件(它们都在您的新主题文件夹中)。 暂时不要对他们做任何事情。 只需将它们打开以进行进一步编辑。

  • 样式.css
  • 索引.php
  • 头文件.php
  • 边栏.php
  • 页脚.php

第 2 步:将现有 CSS 复制到新样式表中

如果您要复制设计,这可能意味着您至少有一些要保存的 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.
*/

在本节之后,只需在下面粘贴您现有的 CSS。 保存并关闭文件。

第 3 步:分离您当前的 HTML

在进入第三步之前,让我简要介绍一下 WordPress 的工作原理。 WordPress 使用 PHP 从其底层数据库调用和检索数据。 我们在这个小教程中使用的每个文件都旨在告诉 WordPress 您的网站内容的哪一部分要显示以及在哪里显示。

因此,当我说我们要“切碎”您现有的 HTML 时,我们实际上所做的只是将现有代码的一部分剪切并粘贴到我们刚刚创建的不同文件中,以便 WordPress 知道在哪里显示他们。

开始了。

高质量外链购买

首先,打开您当前网站的 索引.html 文件。 突出显示从文件顶部到开头的所有内容 div类=“主要” 标签。 将此部分复制并粘贴到您的 头文件.php 文件,保存并关闭。

第二,回到你的 索引.html 文件。 突出显示 除了类=“侧边栏” 元素和里面的一切。 将此部分复制并粘贴到您的 边栏.php 文件,保存并关闭。

第三,在你的 索引.html 选择侧边栏后的所有内容并将其复制并粘贴到您的 页脚.php 文件,保存并关闭。

最后,在您的 索引.html 文件,选择剩下的所有内容(这应该是主要内容部分)并将其粘贴到您的 索引.php 文件。 保存,但不要关闭。

能够 关闭你的 索引.html 但是现在提交文件并继续进行最后的步骤。 快完成了!

JasperAI 10000字免费额度试用

第 4 步:完成您的 Index.php 文件

为了完成你的新主题 索引.php 文件,您需要确保它可以调用您创建的其他文件中的其他部分(主要内容除外)。 或者换句话说,将我们刚刚“切碎”的元素重新组合在一起。

在你的最顶端 索引.php 文件,放置以下行 php.ini

<?php get_header(); ?>

然后,在你的最底部 索引.php 文件,放置这些行的 php.ini 文件。

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

最后,我们必须添加所谓的循环。 这是 WordPress 用于向访问者显示您的帖子内容的 php 的主要部分。 所以创建新主题的最后一步 索引.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; ?>

保存您的 索引.php 并关闭。 你的主题现在完成了! 剩下的就是将其上传到您的 WordPress 网站。

WordPress备份工具updrafplus

第 5 步:上传您的新主题

现在您已经创建了主题文件并将它们全部存储在新的主题文件夹中,您将需要访问新的 WordPress 安装目录。

将您的新主题文件夹放入其中 /wp-内容/主题/. 然后导航回 WP 管理员 > 外观 > 主题 并且您新创建的主题应该出现在那里。 来吧,激活它!

此时剩下要做的就是用旧网站的内容填充新的 WordPress 网站。 请按照下面的部分(跳过有关使用预制主题的部分)来了解这是如何完成的。

使用预制的 WordPress 主题并导入 HTML 内容

如果上述步骤对您来说过于密集或耗时,请放心,还有另一种方法。 无需将您现在正在使用的任何设计转换为 WordPress 主题,您可以利用更广泛的 WordPress 市场中可用的数千个主题中的任何一个。

有免费主题,也有高级主题。 在决定哪个最适合您之前,您可能需要阅读哪些主题旨在满足您的需求,并在优雅主题和其他地方按主题类别浏览。

一旦你选择了一个你喜欢的主题(并下载了它的压缩文件包),你就会想回到 WP Admin > 外观 > 主题 > 添加新 并安装/激活您的新 WordPress 主题。

完成此操作后,您将拥有一个新的 WordPress 网站和主题——但仅此而已。 当您预览您的网站时,它将是空的内容,并且可能看起来有点无聊。 没关系,因为接下来我们将导入您旧网站的内容。

在 WP Admin 中转到 插件 > 添加新的 并搜索 Stephanie Leary 的名为 HTML Import 2 的插件。 安装并激活此插件后,请按照其方便的用户指南导入您的整个 HTML 页面目录。 用图片完成!

在此之后,您将拥有所有在 WordPress 上的旧内容,并按照您的新主题进行格式化。 或者,如果你在上面创建了自己的主题,你的网站应该看起来和以前一样——只是在 WordPress 上运行。

综上所述

如果您使用这篇文章作为将您的网站迁移到 WordPress 的指南,那么您刚刚加入了世界上最大的开源社区之一。 欢迎! 这是一个有趣的地方,有很多开发人员、设计师、博客作者、DIY 爱好者等等——所有这些都使用 WordPress 和 WordPress 主题/插件进行构建、播放和创建。

如果您“发现了 WordPress 错误”,那么 WordPress.org 官方网站上就充满了有用的主题、插件和其他资源。 如果您想进一步调整您的主题文件,请探索 Codex 以获取看似无穷无尽的提示、技巧和变体。

当然,我们希望您能在下面的评论中留下来聊天,并在未来订阅更多博客文章。

文章缩略图来自 Max Griboedov / shutterstock.com

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题