如何將 HTML 網站轉換為 WordPress 商業主題

已發表: 2021-03-29
html到wordpress
關注@Cloudways

許多企業仍然依賴簡單的 HTML 網站來進行在線展示。 這些 HTML 網站通常是靜態的，這意味著您需要編輯代碼以更改網站上的即使是很小的細節。 不過，為了避免這種情況，您可以將 HTML 網站轉換為 WordPress。

在本教程中，我將教您如何將 HTML 轉換為 WordPress 商業主題。 這使所有 HTML 元素保持完整，並為您提供 WordPress 的靈活性，可以輕鬆自定義任何元素。

如果您熟悉 HTML 和 WordPress，那麼本教程非常適合您。 如果您是新手，請嘗試使用本地主機上的虛擬網站（如 XAMPP）執行此操作。

  • 將 HTML 網站轉換為 WordPress
  • 您需要哪些 WordPress 文件
  • 配置 CSS、JavaScript 和圖像
  • 添加WordPress功能以添加功能

將 HTML 站點轉換為 WordPress 主題

  • 第 1 步：先決條件
  • 第 2 步：創建您的主題文件夾
  • 第 3 步：創建 PHP 文件
  • 第 4 步：複製 CSS、圖像和 JavaScript (JS) 文件夾
  • 第 5 步：激活新的 WordPress 主題
  • 第 6 步：將 HTML 代碼轉換為頁眉、索引和頁腳
  • 步驟 7：配置 CSS
  • 第 8 步：配置 JavaScript
  • 步驟 9：配置圖像
  • 第 10 步：在 WordPress 中啟用自定義標題
  • 第 11 步：在 WordPress 中添加 WordPress 導航菜單

將 HTML 站點轉換為 WordPress 主題

對於本教程，我從這裡選擇了一個免費的 HTML 商業主題。 在轉換任何業務主題時，這些技術將保持不變。 如果您對您的業務主題有任何疑問，只需發表評論或發送電子郵件，我將很樂意回复。

讓我們繼續。 首先，查看您的 HTML 主題並標記頁眉、主體和頁腳元素。

標題：標題將包括頂部部分。

標題

主體：這是一個長頁面，所以我縮小了截圖，但整個中心部分都包含在主體中。

主體

頁腳：頁腳部分將包括底部。

頁腳

第 1 步：先決條件

我希望您已經像 XAMPP（即您的計算機）一樣在本地主機上安裝了 WordPress。 如果沒有，我們已經介紹了一份詳細指南，可幫助您在本地安裝和設置 WordPress。

第 2 步：創建您的主題文件夾

在本教程中，我使用的是 XAMPP，我的 WordPress 站點安裝在 htdocs 文件夾下。 要創建 WordPress 主題，您需要訪問您的主題文件夾並創建一個新文件夾。
現在，打開XAMPP文件夾 > htdocs > WordPress文件夾（在我的例子中是測試）> wp-content > themes 。

在 Themes 文件夾中，您將看到所有已安裝的 WordPress 主題。 創建一個新文件夾並命名您的主題。

創建主題文件夾

第 3 步：創建 PHP 文件

新創建的主題文件夾是空的，需要創建一些文件才能使用。 為此，您需要啟動代碼編輯器 (VS Code) 並打開整個 WordPress 主題文件夾（在我的例子中是 farhan-wordpress-theme）。

現在創建以下基本的 WordPress 文件以更好地組織您的主題。

  1. style.css（包含主題詳細信息和 CSS 文件）
  2. index.php（如果沒有聲明其他可選文件，則提供主要內容）
  3. header.php（包含主題的header元素）
  4. footer.php（包含主題的頁腳元素）
  5. functions.php（包含 WordPress 主題中的函數）

wordpress 文件

第 4 步：複製 CSS、圖像和 JavaScript (JS) 文件夾

從您的 HTML 主題（在上面下載）中，將資產文件夾（CSS、JS 和圖像文件夾）複製到新的 WordPress 主題文件夾。

html文件夾

移動到新的 WordPress 主題文件夾後，它將如下所示：

wordpress 文件夾和文件

第 5 步：激活新的 WordPress 主題

現在，您已經添加了任何 wp 主題所需的重要文件夾。 接下來，在瀏覽器上打開您的 WordPress 網站並登錄到您的儀表板。 導航到外觀 > 主題，您將看到您的新主題已添加到此部分。

激活 wordpress 主題

這個主題看起來很空。 要為新創建的主題添加信息和橫幅，請打開 style.css 文件（之前創建的）並粘貼以下代碼並保存（ ctrl+s ）。

 /*

主題名稱：Farhan WordPress 主題

添加一名作者

描述：將 HTML 轉換為 WordPress 主題。

版本：1.0

*/

對於橫幅，您需要將圖像文件添加到新的主題文件夾中。 圖像大小應為 800 x 600，圖像名稱應為Screenshot （png 格式）。

添加scrrenshot png文件

一旦你添加了 screenshot.png 文件，刷新你的 wp-admin 儀表板，圖像橫幅就會出現。

wordpress 主題圖片

現在，您可以在單擊橫幅時查看主題信息。

主題詳情

接下來，只需單擊Activate 。

第 6 步：將 HTML 代碼轉換為頁眉、索引和頁腳

頁眉、頁腳和正文都標有 HTML 註釋，以便輕鬆將其添加到您的 WordPress PHP 文件中並轉換代碼。

現在將下載主題的index.html中的標題代碼複製到您在 WordPress 主題文件夾中創建的header.php文件中。 您需要從<!DOCTYPE html>複製到</header>並保存它。

頭文件php文件

同樣，將 index.html 中的頁腳和主體元素分別複製到 footer.php 和 index.php 中。

對於頁腳，從<footer>複製（在我的例子中，在頁腳標記中定義了一個類名，所以不要混淆）直到</html>複製到footer.php文件中並保存它。

頁腳php文件

接下來，將</header>標記之後和<footer>之前的所有代碼複製到index.php 並保存。

索引php文件

在 index.php 文件的頂部添加 WordPress 函數get_header()和get_footer() 。

get_header()是調用header.php的內置函數，類似地， get_footer()是調用footer.php的函數。

在 index.php 文件的頂部添加以下代碼並保存。

 <?php get_header(); ?>

在索引文件的頂部添加聽到

要調用頁腳，請在 index.php 代碼的末尾插入以下代碼並保存。

 <?php get_footer(); ?>

在索引文件底部添加頁腳

現在，訪問您的站點，您將看到類似的內容。

沒有 css 和 js 的站點

步驟 7：配置 CSS

您的主題看起來很奇怪的事實是因為 CSS 文件未應用於主題。

您已經將 CSS 文件夾從 HTML 主題複製到您的 WordPress 主題文件夾。 現在，您需要調用這些 CSS 文件來完成主題的外觀。

請記住，您的 CSS 文件的名稱可能不同——因此在執行此過程之前請仔細檢查。

您將在 header.php 文件中找到您的 CSS 樣式表，因此您需要通過CTRL+f搜索“ rel=”stylesheet” ”。

頭文件中的css樣式表

之後，刪除 Google 字體樣式表，因為我們不需要它們。 現在，我只需要註冊實際的 CSS 樣式表，即<link rel=”stylesheet” href=”assets/css/style-starter.css”> 。

WordPress 不理解常規的 CSS 樣式表結構； 這就是為什麼我需要排隊並註冊 CSS 樣式表。 轉到functions.php 文件並添加以下代碼。

 <?php

函數 add_css()

{

   wp_register_style('first', get_template_directory_uri() .'/assets/css/style-starter.css', false,'1.1','all');

   wp_enqueue_style('第一個');

}

add_action('wp_enqueue_scripts', 'add_css');

註冊css文件

wp_register_style將幫助您註冊您的 CSS 樣式表。

get_template_directory_uri() 。 '/href'用於獲取當前模板目錄路徑。 它將當前路徑與相應的文件連接起來。 所以在這裡，你需要定義你的 CSS 文件（href）的位置。 您可以看到我如何定義該 CSS 文件的路徑： get_template_directory_uri() 。 ' /assets/css/style-starter.css '。

現在，我們可以從header.php文件中刪除 CSS 樣式錶鍊接，並將其替換為以下代碼並保存文件。

 <?php wp_head(); ?>

wp_head() 是一個必不可少的 WordPress 鉤子，它定義在 header.php 的<head> </head>部分下。

wordpress 標題鉤子

當您訪問您的 WordPress 站點時，您會注意到 CSS 文件實際上已排入您的新 WordPress 主題的隊列中，但仍然沒有按順序設計。 那是因為你還沒有配置JS腳本。

添加css文件後

在header.php 中，我有一個CSS 樣式表，我只在functions.php 中註冊了它。 但是如果你有多個樣式表怎麼辦？ 在這種情況下，您需要為每個樣式表定義 wp_register_style()。 別擔心！ 您可以從下一步中舉個例子，其中我有多個 JS 腳本。 該過程是相同的，因此它將清除您的疑問並幫助您了解您將如何完成這項工作。

第 8 步：配置 JavaScript

您正在使用的 HTML 主題使用 JavaScript，並且在 footer.php 文件中，JavaScript 文件已經以 HTML 格式調用。 要運行這些 JS 文件，您需要做的就是按照您在上一步中執行的相同操作。

打開您的 footer.php 文件並通過“ CTRL+f ”搜索“ <script src= ”。 這將幫助您找到您擁有的所有 JS 文件。 就我而言，我有五個，在這裡我需要註冊並排隊所有這些。

搜索js文件

接下來，您需要打開您的functions.php 文件並粘貼以下代碼：

 函數 add_script()

{

   wp_register_script('js-script', get_template_directory_uri() .'/assets/js/jquery-3.3.1.min.js', array ('jquery'), 1.1, true);

   wp_enqueue_script('js-script');

   wp_register_script('change', get_template_directory_uri() .'/assets/js/theme-change.js', array ('jquery'), 1.1, true);

   wp_enqueue_script('改變');

   wp_register_script('popup', get_template_directory_uri() .'/assets/js/jquery.magnific-popup.min.js', array ('jquery'), 1.1, true);

   wp_enqueue_script('彈出');

   wp_register_script('carousel', get_template_directory_uri() .'/assets/js/owl.carousel.js', array ('jquery'), 1.1, true);

   wp_enqueue_script('輪播');

   wp_register_script('bootstrap', get_template_directory_uri() .'/assets/js/bootstrap.min.js', array ('jquery'), 1.1, true);

   wp_enqueue_script('引導程序');

}

add_action('wp_enqueue_scripts', 'add_script');

您可以看到代碼結構與您之前在 CSS 配置部分中所做的相同。 但是在這裡，您將使用 wp_register_script 而不是樣式。 您在同一個函數中註冊和排隊每個 JS 文件。

排隊js腳本

現在，您可以從footer.php文件中刪除所有 JS 腳本鏈接（我有五個），然後將以下代碼行粘貼到代碼末尾（</body> 標記上方）並保存文件。

 <?php wp_footer(); ?>

wordpress頁腳鉤

現在，在瀏覽器上打開您的網站，您會注意到新的 WordPress 主題運行良好，但仍然缺少一些圖像。

js 和 css 之後的主題

步驟 9：配置圖像

這個過程很簡單，在這裡，您需要定義圖像的路徑。

首先，打開你的 index.php 文件並通過“ CTRL+f ”搜索“< img src= ”。 這將幫助您找到您擁有的所有圖像文件。 就我而言，我有八個，在這裡我需要所有這些的路徑。

搜索圖像文件

為圖像提供路徑； 在src標籤中添加以下 PHP 代碼並保存文件。

 <img src="<?php echo get_template_directory_uri().'/assets/images/p1.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p3.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p4.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p5.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p6.jpg'; ?>" alt="" class="img-fluid radius-image" />

在 wordpress 中調用圖像

現在，您的主題將類似於 HTML 主題並獲取所有圖像。

wordpress 圖像文件

但是，它將缺少 WordPress 功能，例如更改站點標題和 WordPress 導航菜單。

第 10 步：在 WordPress 中啟用自定義標題

如果您進入 WordPress 管理面板並更改網站的標題，則不會影響網站的標題。 要啟用此功能，您可以使用 WordPress 內置函數bloginfo()在header.php文件中的標題標籤之間帶有參數“ name ”並保存文件。

 <?php bloginfo('name'); ?>

wordpress 標題

同樣，您需要使用 WordPress 內置函數bloginfo()在header.php文件中的h1 標記之間帶有參數“ name ”並保存文件。

 <?php bloginfo('name'); ?>

h2 標題

現在，您的主題將選擇您在 WP-admin 面板內的Settings -> General-> Site Title中設置的標題。

wordpress 網站標題

第 11 步：在 WordPress 中添加 WordPress 導航菜單

當您訪問站點的 WordPress 管理員並導航到外觀時，您將看不到菜單選項。

您需要先通過在 functions.php 文件中添加以下代碼行來啟用 Menu。

 add_theme_support('菜單');

添加主題菜單

這將在您的主題中啟用菜單功能，但它需要一些配置才能從您的 WP 儀表板管理菜單。

wordpress 菜單部分

首先，找到您的 HTML 主題導航菜單所在的位置，然後使用 WordPress 內置函數wp_nav_menu()替換它； 您可以在此處閱讀有關此功能的更多信息。

在這個主題中， header.php包含導航菜單。

找到以下代碼行：

 <ul class="navbar-nav mx-lg-auto">

<li class="nav-item active">

<a class="nav-link" href="index.html">首頁<span class="sr-only">（當前）</span></a>

</li>

<li class="nav-item @@about__active">

<a class="nav-link" href="about.html">關於</a>

</li>

<li class="nav-item @@contact__active">

<a class="nav-link" href="contact.html">聯繫方式</a>

</li>

</ul>

wp 菜單代碼

將以上幾行替換為：

 <?php wp_nav_menu( array( 'menu_class' => 'navbar-nav mx-lg-auto', 'container' => 'ul', )); ?>

您的 WordPress 菜單現在將顯示在您的主題上，並為您的 WordPress 商業主題增加靈活性。

包起來！

我希望本文能幫助您了解如何將 HTML 模板或站點轉換為 WordPress 主題。 這是一個詳細的教程，其中我涵蓋了 11 個步驟來演示該過程。

如果您有任何問題和疑問，請隨時在下面的評論部分提問。

經常問的問題

問：我可以將 HTML 轉換為 WordPress 嗎？

將 HTML 轉換為 WordPress 的過程包括以下步驟：

1）為主題創建一個新文件夾
2）複製styles.css文件中的CSS代碼
3) 將HTML代碼分成header.php、sidebar.php和footer.php文件
4) 將 header.php 和 footer.php 文件轉換為所需的 WordPress 格式
5）生成截圖（這將用作主題預覽）
6）壓縮文件夾並將其上傳到WordPress網站

問：如何將 HTML 添加到 WordPress？

要將 HTML 添加到 WordPress 頁面或帖子，請轉到頁面/帖子並將 HTML 代碼添加到文本選項卡。

問：如何在 WordPress 中打開 HTML 文件？

您可以通過將壓縮的 HTML 文件上傳到服務器來打開 HTML 文件，然後在服務器的文件管理器中打開它。

問：WordPress 使用 HTML 嗎？

WordPress 廣泛使用 HTML 來呈現和格式化各種頁面和帖子上的信息。