為什麼要將 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 將您的想法變為現實！