如何免費將 HTML 網站轉換為 WordPress？ 指導

已發表: 2015-05-18

一開始，所有網站都是用文本和靜態 HTML 製作的。 沒有 WordPress，需要將 HTML 網站轉換為 WordPress或任何其他 CMS 系統。

許多企業仍然依賴簡單的 HTML 網站來進行在線業務。 這些 HTML 站點本質上通常是靜態的。 這意味著即使更改網站上的一個小細節也是通過編輯編碼文件來完成的。

現在 20 多年後，網絡是一個大不相同的地方。 WordPress 為超過 25% 的 Web 提供支持，正日益成為普通用戶的首選內容管理系統 (CMS)。

網站要復雜得多。 它們為網站創建者和訪問者提供了更豐富、更愉快的體驗。 遷移到 WordPress 是否意味著重新開始並失去投入當前網站的所有時間、精力和金錢？

目錄

HTML 網站

無論您的網站是如何編碼的，一旦訪問者在您的網站上加載了一個頁面，瀏覽器就會獲取所有的點點滴滴（服務器端包含、來自另一個目錄的圖像等）並將它們全部放在一個最終的靜態 HTML 中頁。

即使頁面上的某些元素仍然是動態的，代碼本身也集中在一個位置，可以將其移動到仍然可以工作的 WordPress 頁面中。 可能有一些例外，但對於大多數網站來說，這是真的。

即使您的站點由 somepage.php 組成，它調用名為 header.inc 的文件和名為 footer.php 的文件，當用戶在瀏覽器中查看 somepage.php 時，生成的源代碼都在一個地方，就好像它被手工編碼為靜態 HTML 頁面。

這是將網站轉換為 WordPress 所需的代碼類型。 任何擁有 WordPress 安裝和正確主題/插件的人都可以擁有一個具有先進設計和功能的現代網站。

從靜態 HTML 站點遷移到 WordPress 的預備步驟

如果您準備切換到 WordPress，請注意以下四個步驟：

1. 分析您現有的 HTML 站點

檢查您的網站是否有不相關或過時的內容，如果找到，請將其清理乾淨。 檢查當前的導航系統並思考如何改進它。 進行 HTML 站點分析將幫助您決定應將哪些內容、特性和功能遷移到 WordPress。

這將清楚地了解您需要安裝哪些插件才能在 WordPress 平台上獲得相同的功能。

2. 了解 WordPress

WordPress 安裝是一個非常簡單的過程。 大多數網絡主機提供一鍵安裝。 如果不熟悉，最好閱讀並告知您的網站將使用的新平台。

3. 備份你的 HTML 站點

強烈建議對靜態站點進行完整備份，以避免在遷移過程中出現任何數據丟失風險。

4. 將 HTML 網站轉換為 WordPress

假設您有足夠的編碼知識，並且您的站點很小，那麼您面前的最佳選擇是將您現有的 HTML 代碼分成四個部分（頁眉、頁腳、側邊欄和內容），然後將每個部分的內容複製到其各自的 PHP 文件。

如果您的網站很大，您可以利用 HTML 到 WordPress 插件，如 HTML Import 2 或聘請某人將 HTML 轉換為 WordPress。

如何將 HTML 網站轉換為 WordPress 教程

您選擇如何將靜態 HTML 站點轉換為 WordPress 站點無疑取決於您的個人偏好、所需的時間/金錢投資以及代碼技能水平。

方法一

使用這種將 HTML 網站轉換為 WordPress 的方法，您將保持網站的相同設計和外觀。

1.從您當前的主機下載 HTML 頁面。 使用 WinHTTrack 執行此操作。 這是一個很棒的免費工具，非常易於使用。 確保你也抓取了圖片文件夾（或者你在舊網站上有圖片的任何地方）。

2.在您的新網絡主機上安裝 WordPress 。

  • 將您的永久鏈接結構設置為“帖子名稱”（/%postname%/）
  • 選中“不鼓勵搜索引擎將此站點編入索引”框（直到一切都完成）
  • 安裝一些維護模式插件（如果你願意），這樣除了你之外沒有人可以訪問你的新 WordPress。
  • 安裝免費的 WordPress 插件 HTML Import 2。使用它來“上傳”舊站點到您的新站點。 導入整個 HTML 頁面目錄的用戶指南。

3.將您剛剛從步驟 1 下載的內容上傳到您的新 Web 主機文件結構中。 將它們放在一個名為“html-files-to-import”的文件夾中。 將所有舊圖像上傳到新網站上 WordPress 中的媒體庫。

4. 運行導入

5. 準備你的 DOS 命令提示符和 Excel

  • 在 DOS 提示符下，導航到您放置 HTML 文件的位置（最簡單的方法是將它們放在名為“yourwebsite”的文件夾中，然後將該文件夾放在 C:\ 驅動器中）。 然後，啟動此命令： i. 目錄 > 文件.txt
  • 在 Excel 中打開 files.txt 文件。
  • 現在到 Excel。 本質上，您將使用幾個 Excel 函數，包括“連接”來呈現您將放入 HTML 文件中的“規範”代碼。
  • 在每個 HTML 文件中放置相應的規范代碼。 您可以這樣做，將其租給外包商，或聘請某人編寫可自動執行此操作的 PHP 代碼。

6. 將 HTML 文件上傳到您的網絡主機。 將它們放在新網站的 ROOT（即最上層）文件夾中。 不要忘記將圖像文件夾也上傳到 ROOT。

7. 確保一切在新站點上仍然有效。

8. 取消選中第 2 步中的複選框– “禁止搜索引擎將此站點編入索引”並禁用 HTML 導入 2 插件。

9.在您的註冊商處更改 DNS 。

10. 確保您站點的 URL解析為正確的 IP（您的新 IP 而不是舊 IP）並且所有頁面都正確加載。 您可能需要等待幾個小時才能更新名稱服務器。

11. 您可以稍後刪除舊的 HTML頁面，但沒有任何必要。 您不會受到“重複內容”懲罰的影響，因為規範引用會解決這個問題。

您需要在 .htaccess 文件中添加重定向，將舊的“.html 頁面”指向新的 WordPress 頁面。

方法二

如果您的目標不僅是將靜態 HTML 站點的內容導入 WordPress，還要復制當前的設計，這意味著您需要創建自定義主題。

它只涉及創建幾個文件夾和文件，進行一些複製和粘貼，然後上傳結果。 您將需要一個代碼編輯器，例如 Sublime 或 Notepad++，並且可以訪問您的 HTML 站點目錄和新的 WordPress 安裝目錄。

1.創建一個新的主題文件夾和必要的文件。 在您的桌面上，創建一個新文件夾來保存您的主題文件。 將它命名為您希望識別主題的任何名稱。

接下來，在您的代碼編輯器中創建一些文件（它們都在您的新主題文件夾中）：

  • 樣式文件
  • 索引.php
  • 頭文件
  • 側邊欄.php
  • 頁腳.php

2. 將現有的 CSS 複製到新的樣式表 如果您想複製一個設計，這可能意味著您至少有一些要保存的 CSS。 因此，您要編輯的第一個文件是 Style.css 文件。

首先，將以下內容添加到文件頂部。

 /*
 主題名稱：替換為您的主題名稱。
 主題 URI：您的主題的 URI
 說明：簡要說明。
 版本：1.0
 作者：你
 作者 URI：您的網站地址。
 */

在本節之後，只在下面粘貼您現有的 CSS。 保存並關閉文件。

3. 分離你當前的 HTML

這是將現有代碼的一部分剪切和粘貼到您創建的不同文件中的過程。

  • 首先，打開您當前站點的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(); ?> ( have_posts() ) : the_post(); ?>
<div id= "post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php post_class(); ?>>
<div class = "post-header" >
<div class = "date" ><?php the_time( 'M j y' ); ?></div> ); ?></div>
<h2><a href= "<?php the_permalink(); ?>" rel= "bookmark" title= "Permanent Link to <?php the_title_attribute(); ?>" ><?php the_title(); ?></a></h2> ><?php the_title(); ?></a></h2>
<div class = "author" ><?php the_author(); ?></div> ><?php the_author(); ?></div>
</div><!-- end post header-->
<div class = "entry clear" >
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> ) ) 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' ><?php comments_popup_link( 'Leave a Comment' , '1 Comment' , '% Comments' ); ?></div> ); ?></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>
<div class = "alignright" ><?php previous_posts_link( 'Newer Entries' ); ?></div> ); ?></div>
</div><!-- end navigation-->
<?php else : ?>
<?php endif ; ?> ; ?>

保存您的index.php並關閉。 您的主題現已完成！ 剩下的就是將其上傳到您的 WordPress 網站。

5. 上傳您的新主題

現在，您將在新的主題文件夾中存儲創建的主題文件。 安裝 WordPress。

將您的新主題文件夾放在/wp-content/themes/ 中。 導航到WP Admin > Appearance > Themes ，您應該會在那裡看到新創建的主題。 激活它！ 此時剩下要做的就是用舊網站的內容填充新的 WordPress 網站。

6. 將內容從 HTML站點複製到 WordPress

在 WP Admin 中，轉到插件 > 添加新。 搜索 Stephanie Leary 的名為 HTML Import 2 的插件。 安裝並激活此插件後，請按照其用戶指南導入您的整個 HTML 頁面目錄。 在此之後，您的網站應該看起來像以前一樣，只是在 WordPress 上運行。

使用現有的 WordPress 主題轉換 HTML 站點（最簡單的方法）

如果上述步驟看起來過於密集或耗時，還有另一種方法。 這是最簡單的方法。

無需將現有的 HTML 設計轉換為在 WordPress 上看起來相同，您可以利用 WordPress 市場中提供的數千個主題中的任何一個。

有免費主題和高級主題。 一旦你選擇了你喜歡的主題（並下載了它的壓縮文件包），安裝/激活你的新 WordPress 主題。

完成此操作後，您將擁有一個新的 WordPress 網站和主題。 當您預覽您的網站時，它將是空的。 是時候導入內容並完成將 HTML 網站轉換為 WordPress 網站的過程了。

在 WP Admin 中，轉到Plugins > Add New並蒐索名為 HTML Import 2 的插件。按照用戶指南導入您的整個 HTML 頁面目錄。 在此之後，您將擁有所有舊內容，但外觀煥然一新。

4 使用主題匹配器將 HTML 轉換為 WordPress

您也可以使用主題匹配器。 它提供自動 HTML 到 WordPress 的轉換。 只需輸入您的站點並選擇適當的區域。 Theme Matcher 從您現有的網站獲取圖像、樣式和佈局。

Convert-HTML-Website-to-WordPress-site-with-theme-matcher

5 HTML 到 WordPress 轉換器服務

HTML to WordPress 將您的 HTML 設計轉換為 WordPress 主題，而無需您編寫一行 PHP 代碼。

您可以選擇服務計劃，他們會將您的靜態 HTML 網站轉換為 WordPress。 此選項可以增加價格。 您還可以選擇更便宜的轉換器選項。

HTML 到 WordPress 轉換器服務

轉換是完全自動化的，只需將“wp-”前綴轉換器類添加到 HTML 中即可擴展主題的功能。

轉換器為每個 HTML 文件創建模板並引用您的資產並填寫所有那些必要的 php 函數。 使用 Bootstrap、Webflow、Dreamweaver 或任何您已經熟悉的工具/框架來創建網站。 只要網站是使用 HTML 製作的，您就可以將其轉換為主題。

遷移後需要做什麼？

轉換完成後，您需要做一些事情來為您的 WordPress 網站提供最後的潤色。

  • 安裝必要的插件 –要使用與 HTML 站點相同的功能來增強您全新的 WordPress 站點，請安裝您覺得方便的插件。
  • 檢查並修復損壞的鏈接 -檢查您的網站是否有損壞的鏈接（404 錯誤），如果找到，請修復它們。
  • 設置自定義 404 錯誤頁面 –添加自定義 404 錯誤頁面以將訪問者帶到 WordPress 網站的相關部分，以防他們嘗試訪問任何不存在的 URL。
  • 重定向鏈接 –要通知搜索引擎您的網站內容已移至新網址，請設置 301 重定向。 為此，您可以使用簡單 301 重定向。
  • 啟用搜索引擎索引：轉到 WordPress 儀表板中的“設置 –> 閱讀”並選中“允許搜索引擎為此站點編制索引”以使您的站點被搜索引擎索引。
  • 生成並提交 XML 站點地圖：為確保您的站點盡快包含在搜索引擎結果中，請創建一個 XML 站點地圖並將其提交給 Google。

WordPress 與 HTML – 優缺點

啟動商業網站並不是一個簡單的過程。 最大的困境之一是選擇靜態 HTML 站點還是選擇 WordPress。

WordPress – WordPress 被認為是一個 CMS（內容管理系統）。 簡化的 HTML 版本，供非技術用戶添加和修改其網站上的內容。

CMS 站點通常是動態的，這意味著您更改內容的頻率沒有限制。 您可以更改從圖片到整個文本的所有內容。

界面非常簡單和用戶友好，沒有人需要任何特殊的培訓來學習它。 CMS 市場競爭激烈，但 WordPress 每次都擊敗競爭對手。

在開始之前要記住的另一件事是 WordPress.com 與 WordPress.org 之間存在顯著差異，因為後者是一個開源 CMS。 另一方面，WordPress.com 用作博客託管服務。

使用 WordPress 的優勢：

  • 它為您提供了數以千計的插件來為站點添加它所缺少的功能。
  • 隨時可以修改，沒有人限制你。
  • 與 HTML 設置相比，WordPress 的設置時間要少得多。

使用WordPress的缺點：

  • 你不能只是設置它，然後忘記它。 它需要全職關注並不斷更新軟件、插件和主題。
  • 黑客將攻擊保護不力且未更新的網站。 如果您不跟上更新，您可能會面臨網站根本無法運行的風險。
  • WordPress 很簡單，但對於初學者來說並不容易。 有許多在線教程和綜合材料可以幫助您克服學習曲線。

HTML 靜態網站——在沒有模板之類的東西之前，製作網站的唯一方法是聘請編程專業人士為您製作。

因此，所有網站都構建為靜態 HTML（超文本標記語言）。 重點是要有一個網站。 不要修改內容或其佈局，因為您將不得不重新僱用 HTML 開發人員。

在 HTML 網站上，內容存儲在靜態文件中，這使得修改它非常困難。

HTML網站優勢：

  • 網站上線後，您無需對其進行更新或備份。 大多數情況下，該網站上的任何內容都無需更改。
  • HTML 網站是基本且易於設置的網站。
  • 它們的大小以及它們使用的資源比動態站點少的事實使它們與動態站點相比具有顯著的速度優勢，從而使它們加載速度更快。

HTML網站的缺點：

您需要專業的標記語言。 否則，您將無法對您的網站進行任何重大更新。 一遍又一遍地僱用 Web 開發人員會產生成本，即使您的網站很小，或者只顯示微不足道的信息。

另一個重要的缺點是您無法添加插件，這意味著您面臨著嚴重缺乏功能的問題。

如何將 HTML 轉換為 WordPress 摘要

無論是需要從您的網站獲得更多內容還是使用模板構建新網站，轉換過程對於新手來說似乎都非常複雜。 耐心和知識會讓你做你需要做的事情，並取得一定程度的成功。

一旦您的網站上線，您就可以為自己學會瞭如何做一些新的事情並能夠將這些知識應用到您的網站而感到自豪。

希望以上至少一種方法可以幫助您將 HTML 網站轉換為 WordPress。 如果您有任何其他方法或教程，請告訴我。 您是否曾經將 HTML 轉換為 WordPress ，您對此有何經驗？