Skip to content

[WordPress] 在 WordPress 上放入自己撰寫的 HTML 頁面

最近找了很久如何將自己寫的 HTML 頁面展示在 WordPress 的部落格當中，並實際測試了幾個方法，目前將比較簡易的方法記錄下來，好讓自己之後同樣可以使用這套法。

這套方法其實一點都不複雜，基本上只要將自己撰寫的 HTML 程式碼，複製進 WordPress 主要路徑底下。只要是 HTML 格式的檔案，應當就可以正常地打開了。

以下就來實際紀錄一次我個人的流程吧！也許跟其他人的不太一樣，不過大體上還是一樣的思路。

準備好自己的 HTML 檔

比如說我有個檔案名叫 “test.html”：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>ClayAtlas-HTML</title>
</head>
<body>
     <input id="text">
     <input type="button" value="Enter" onclick="showButtonEvent()">
     <p id="changeText">NULL</p>
</body>
<script>
     function showButtonEvent()
     {
         var content = document.getElementById("text");
         document.getElementById("changeText").textContent=content.value;
     }
</script>
</html>



Output:

ClayAtlas-HTML

NULL

其功能為輸入框內的文字在按下 Enter 按鈕時，會被自動顯示在 NULL 文字元件上。

進入 WordPress 後台

比如說我的主機是 Bluehost 的，那麼我的進入方式就是：


進入 Bluehost。


找到 Manage My Sites 的 Manage 按鈕。


找到 Advanced 按鈕。


進入 File Manager。


在當前目錄底下 (也就是 public_html 目錄底下) 建立一個測試的資料夾，名為 “test_html”。

上傳剛剛準備好的 test.html 檔案即可。

實際測試

然後接下來我們就要來試試看是否能夠過這種方式連接到網域底下資料夾內的 HTML 檔案了。

以我的網域為例，便要輸入：https://clay-atlas.com/test_html/test.html

可以看到我們寫好的 HTML 檔正常運作了！

Tags:

3 thoughts on “[WordPress] 在 WordPress 上放入自己撰寫的 HTML 頁面”

  1. sarahsoldout
    Reply

    您好，看了幾回您的這篇文章，也試了將html上傳到bluehost的後台資料夾裏了，但仍是不明白要怎麼把這一頁當成一篇頁面顯示出來…..不知道可以再請教您的所謂正常顯示是指？在這一篇有其他內容的頁面（或文章？）裏＂顯示＂其他html內容？而不是直接把這html頁面當成一個頁面嗎？

    1. Clay
      Reply

      我裝了一下 SpeedProd 外掛，發現它主要解決的是維護頁面跟 404，感覺滿侷限的。

      不過該網站底下的小主題 “Creating a Custom Page Template Manually” 中就說明了該如何完整自定義發表的頁面。
      或許值得參考。

  3. Clay
    Reply

    您好。
    我的這篇文章記錄的當下，是嘗試著製作工具型線上網頁，於是是直接寫好 HTML 頁面，並放在自己的網站上。
    比方說我將 test.html 放在後臺根目錄底下，那麼我的網站只要使用 https://clay-atlas.com/test.html 就能顯示我的 HTML 頁面。
    但是，這個方法並不會被 WordPress 後台的頁面系統收錄。

    如果您是要發布一篇頁面，並進行頁面的客製化，那麼可以在後台編輯器編輯頁面時，將『視覺化編輯器』調整為『程式碼編輯器』，更進一步地去調整。

    但如果您是想要發表一篇特殊的頁面，跟常規網站的樣式完全不同，其實可以參考：https://www.wpbeginner.com/wp-themes/how-to-create-a-custom-page-in-wordpress/ 這篇文章。

    我覺得這篇文章中提到的 SeedProd 外掛很有些意思，看起來可以達成上述所需的功能，不過我自己本身沒有試過。

Leave a Reply