將 HTML 站點轉換為 WordPress 站點

已發表: 2018-10-05

在（網絡的）開始時，所有網站都是用文本和靜態 HTML 製作的。然而，20 多年後的現在，網絡已經大不相同了。網站要復雜得多。它們為網站創建者和訪問者提供了更豐富、更愉快的體驗。

這在很大程度上要歸功於 WordPress 等開源項目。在過去十年左右的時間裡，它成功地實現了在線發布民主化的核心使命（以及在此過程中的更多內容），因此任何安裝了 WordPress 和正確主題/插件的人都可以擁有一個設計先進的現代網站和功能。不需要編碼——甚至不需要 HTML！

這就是為什麼像我這樣狂熱的 WordPress 用戶，幾乎很難相信在 2018 年有人可能仍在運營靜態 HTML 網站，而不是帶有主題和插件的 WordPress 網站。但事實是仍然有大量活動的純 HTML 站點。（或帶有一些 CSS 的 HTML。）

當然，這些網站所有者可能有充分的理由不升級或轉換。也許他們的網站內容永遠不會改變，並且已經存在的簡單格式和設計是有用的？或者，也許這比擔心保持 WordPress 網站更新更麻煩？兩者都是正當理由（除其他外）。 “不要修復沒有損壞的東西”的主要例子。

但是，我有一種感覺，這些可能不是某些（也許很多）沒有實現飛躍的主要原因。最明顯的一個是他們根本不知道如何將他們的 HTML 站點轉換為 WordPress 站點。特別是不會丟失內容或需要逐頁進行過度格式化。

值得慶幸的是，與 WordPress 的情況一樣，有很多方法可以解決這個問題。我在下面編譯了一些選項。

訂閱我們的 YouTube 頻道

將靜態 HTML 站點轉換為 WordPress 站點的選項

您選擇如何將靜態 HTML 站點轉換為 WordPress 站點無疑取決於您的個人喜好、所需的時間/金錢投資以及代碼技能水平。您必須自己決定哪種方式最適合您，但通過下面的總結，您應該能夠快速做出決定並直接跳至本文中針對您的具體情況的最相關信息。

有三個主要選項：

1. 根據您當前的靜態 HTML 站點手動創建 WordPress 主題。

這將要求您進入您的代碼。您必須通過 FTP 訪問您當前的站點目錄，並使用您現有的代碼作為起點。從那裡，您需要為 WordPress 主題創建必要的文件，並從 WordPress 代碼中復制一些代碼。如果您對 HTML、CSS 和一些 PHP 有一定的經驗，這將是相當簡單和直接的。

2. 安裝一個預先製作的主題並簡單地遷移您的內容。

這可能是簡單性和價值交叉點的最佳選擇。假設您已經擁有當前網站的主機，如果您選擇購買高級主題，則只需要花錢。我們將用於導入內容的插件在官方 WordPress 插件庫中免費提供。

3. 付費使用 HTML 到 WordPress 轉換服務重新創建您的網站。

這是最簡單的解決方案，因為它不需要您做任何事情。但是，它不會讓您熟悉 WordPress，而且費用會因您選擇僱用的人而異。我不會在下面的部分中介紹這個選項，因為如果這是您感興趣的路線，您只需快速搜索服務提供商，他們就會處理剩下的事情。

準備 HTML 到 WordPress 的轉換

無論您決定選擇下面的哪條路線，在潛入之前您都需要做一些事情。

首先是選擇託管計劃。您需要查看現有的選項並決定最適合您需求的軟件包。或者您可能想要創建本地 WordPress 安裝？您以後可以隨時將其遷移到託管服務。

選擇後，您將需要安裝 WordPress 並登錄 WP Admin。這是我們的兩條可能的路徑分開的點。

手動將您的靜態 HTML 站點轉換為 WordPress

如果您的目標不僅是將靜態 HTML 站點中的內容導入 WordPress，還要復制您當前的設計，這意味著您需要創建自己的自定義主題。值得慶幸的是，這並不像一開始聽起來那麼可怕。它只涉及創建幾個文件夾和文件，進行一些複製和粘貼，然後上傳結果。

您將需要一個代碼編輯器，例如 Sublime 或 Notepad++，並且可以訪問您的 HTML 站點目錄和新的 WordPress 安裝目錄。

步驟 1：創建一個新的主題文件夾和必要的文件

在您的桌面上，創建一個新文件夾來保存您的主題文件。隨意命名您的主題。

接下來，在您的代碼編輯器中創建一些文件（它們都在您的新主題文件夾中）。暫時不要對他們做任何事情。只需將它們打開以進行進一步編輯。

樣式文件
索引.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 知道在哪裡顯示他們。

開始了。

首先，打開您當前站點的index.html文件。突出顯示從文件頂部到開頭div class="main"標記的所有內容。將此部分複制並粘貼到header.php文件中，保存並關閉。

其次，回到你的index.html文件。突出顯示side class="sidebar"元素和其中的所有內容。將此部分複制並粘貼到您的sidebar.php文件中，保存並關閉。

第三，在您的index.html 中選擇側邊欄之後的所有內容並將其複制並粘貼到您的footer.php文件中，保存並關閉。

最後，在您的index.html文件中，選擇剩下的所有內容（這應該是主要內容部分）並將其粘貼到您的index.php文件中。保存，但不要關閉。

但是，您現在可以關閉index.html文件並繼續執行最後的步驟。快完成了！

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

為了完成新主題的index.php文件，您需要確保它可以調用位於您創建的其他文件中的其他部分（除了主要內容）。或者換句話說，將我們剛剛“切碎”的元素重新組合在一起。

在index.php文件的最頂部，放置以下 php 行。

<?php get_header(); ?>

然後，在index.php文件的最底部，放置這些 php 行。

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

最後，我們必須添加所謂的循環。這是 WordPress 用來向訪問者顯示您的帖子內容的主要 php 位。因此，創建新主題的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 步：上傳您的新主題

現在您已經創建了主題文件並將它們全部存儲在新的主題文件夾中，您將需要訪問新的 WordPress 安裝目錄。

將您的新主題文件夾放在/wp-content/themes/ 中。然後導航回WP Admin > Appearance > Themes你新創建的主題應該出現在那裡。繼續並激活它！

此時剩下要做的就是用舊網站的內容填充新的 WordPress 網站。按照下面的部分（跳過有關使用預製主題的部分）來查看如何完成。

使用預製的 WordPress 主題並導入 HTML 內容

如果上述步驟對您來說過於密集或耗時，請放心，還有另一種方法。您可以利用更廣泛的 WordPress 市場中提供的數千個主題中的任何一個，而不是將您現在正在使用的任何設計轉換為 WordPress 主題。

有免費主題，也有高級主題。在決定哪個最適合您之前，您可能需要閱讀哪些主題旨在滿足您的需求，並在 Elegant Themes 和其他地方按主題類別瀏覽。

一旦您選擇了您喜歡的主題（並下載了其壓縮文件包），您將需要返回WP Admin > Appearance > Themes > Add New並安裝/激活您的新 WordPress 主題。

完成此操作後，您將擁有一個新的 WordPress 網站和主題——但除此之外別無他物。當您預覽您的網站時，它將是空的內容並且可能看起來有點無聊。沒關係，因為接下來我們將導入您舊網站的內容。

在 WP Admin 中，轉到Plugins > Add New並蒐索 Stephanie Leary 的名為 HTML Import 2 的插件。 安裝並激活此插件後，請按照其方便的用戶指南導入您的整個 HTML 頁面目錄。配圖完成！

在此之後，您的所有舊內容都將保留在 WordPress 上，並按新主題進行格式化。或者，如果您在上面創建了自己的主題，您的網站應該看起來和以前一樣——只是在 WordPress 上運行。

綜上所述

如果您使用這篇文章作為將網站遷移到 WordPress 的指南，那麼您剛剛加入了世界上最大的開源社區之一。歡迎！這是一個有趣的地方，有很多開發人員、設計師、博客作者、DIY 者等等——他們都在使用 WordPress 和 WordPress 主題/插件進行構建、播放和創建。

如果您“發現了 WordPress 錯誤”，WordPress.org 官方網站上充滿了有用的主題、插件和其他資源。如果您想進一步調整您的主題文件，請探索 Codex 中看似無窮無盡的提示、技巧和變化。

當然，我們希望您能留下來在下面的評論中聊天，並在未來訂閱更多的博客文章。

文章縮略圖來自 Max Griboedov / shutterstock.com