如何在 WordPress 中建立自訂首頁(3 種方法)

WPressize Me

04/10/2024

想在 WordPress 中建立一個能夠真正展示您網站風貌的自訂首頁嗎?首次印象很重要,我們在 WPressize Me 幫助了無數用戶創建吸引人眼球的首頁來吸引訪客。

默認的 WordPress 首頁雖然功能完整,但未必是迎接觀眾的最佳方式。您需要一個能夠展示最佳內容、產品或服務的首頁。這個設計應該能夠吸引並留住訪客。

什麼是首頁?

首頁是訪客輸入您的域名後首先看到的頁面。對許多人來說,這個首頁是他們對您業務、博客或網站的第一印象。

一個好的首頁會讓訪客想要了解更多關於您網站的資訊,同時也會提供方便訪客找到有趣內容的連結、搜索欄和目錄。

默認的 WordPress 首頁顯示的是您的最新博客文章,這對個人博客或興趣博客可能是個不錯的選擇。然而,如果您是使用 WordPress 網站運營業務的話,則可能希望創建一個自訂的首頁來突出顯示您的產品和服務。好消息是,WordPress 讓您可以輕鬆顯示自訂頁面作為首頁,而不是默認的最新文章列表。

如何將自訂頁面設置為 WordPress 首頁?

在本指南中,我們將展示幾種不同的方法來創建自訂首頁。然而,無論您使用哪種方法,在創建靜態首頁後,您都需要更改 WordPress 設置。

要進行此更改,只需前往 WordPress 儀表板中的 設置»閱讀

在這裡,滾動到「您的首頁顯示」並選擇「靜態頁面」。然後,打開「首頁」下拉菜單並選擇您想用作新首頁的頁面。最後,滾動到屏幕底部並點擊「保存更改」。現在,您可以訪問您的網站查看新的自訂首頁了。如果您有博客,請務必創建一個單獨的博客頁面來顯示您的文章,否則訪客會很難找到您最新的博客文章。

現在,我們來看看如何在 WordPress 中設計自訂首頁。您可以使用快速連結直接跳到您想使用的方法:

  • 方法 1:使用 Block Editor 創建自訂首頁模板(無需插件)
  • 方法 2:使用 Page Builder 在 WordPress 中創建自訂首頁(推薦)
  • 方法 3:手動創建 WordPress 自訂首頁(需要編碼)

方法 1:使用 Block Editor 創建自訂首頁模板(無需插件)

如果您使用的是 Block 主題,可以使用完全站點編輯器設計自訂首頁模板。此方法不適用於所有主題,因此如果您沒使用基於 Block 的 WordPress 主題,則需要使用本指南中介紹的其他方法之一。要了解更多關於完全站點編輯的信息,請參考我們的 WordPress 初學者指南。

首先,創建新頁面或打開您想用作首頁的現有頁面。在右側菜單中,點擊「頁面」標籤,然後選擇在「模板」旁出現的連結。彈出窗口中會顯示當前模板。點擊「新建模板」圖標。在彈出窗口中,給您的模板命名。名稱僅供引用,因此您可以使用任何您想要的名稱。然後,點擊「創建」以進入完全站點編輯器。模板編輯器的工作方式類似於標準的 WordPress Block 編輯器。

要添加 Block 到您的自訂首頁,只需點擊藍色的「+」按鈕。您可以通過拖放將任何 Block 添加到您的佈局中。由於我們在創建自訂首頁,您通常會想要首先添加一個大圖,例如您網站的標誌或橫幅。找到左側菜單中的圖像 Block,然後使用拖放將其添加到佈局中。現在,您可以從 WordPress 媒體庫中選擇圖像或從計算機上傳新文件。為了獲得更多互動,您可能想通過添加“最新評論” Block 在首頁顯示最近的評論。

更多信息請參考我們的指南,了解如何在 WordPress 主題的首頁顯示評論。一個好的首頁有助於訪客找到有趣的內容。因此,建議您在自訂首頁上添加導航 Block。更多信息,請參考我們的逐步指南,了解如何在 WordPress 主題中添加自訂導航菜單。

添加 Block 後,確保在佈局中點擊選中它。然後,可以使用右側菜單中的設置和迷你工具欄中的按鈕配置該 Block。要構建自訂首頁,只需繼續添加更多 Block,然後使用完全站點編輯器設置進行配置。例如,您可能想要添加“最新文章”、“搜索”、“社交圖標”、“標籤雲”等 Block。

當您對模板的外觀感到滿意時,點擊「發布」按鈕。先前創建的頁面現在將使用新首頁模板。按照上面的過程讓 WordPress 使用此頁面作為您的首頁。

方法 2:使用 Page Builder 在 WordPress 中創建自訂首頁(推薦)

WordPress 的 Block 基於編輯器允許您使用已熟悉的工具創建自訂首頁。然而,它並非適用於所有主題,並且在靈活性和功能上有限。此外,WordPress 主題自定義工具對於非 Block 主題用戶來說並不是最用戶友好的選項,因為它不具備拖放功能。如果您想創建一個完全自訂的首頁,適用於任何 WordPress 主題,那麼您需要一個 Page Builder 插件。

在此方法中,我們將使用 SeedProd。它是市場上最好的 Page Builder 插件,允許您使用簡單的拖放編輯器創建自訂首頁。它還擁有超過 300 個專業設計的模板和現成的 Block,您可以在首頁中使用。

注意:WordPress.org 上有免費版 SeedProd,但我們將使用專業版,因為它具有更多模板、Block 和功能。

首先,您需要安裝並啟用 SeedProd 插件。更多細節,請參考我們的逐步指南,了解如何安裝 WordPress 插件。激活後,您需要輸入許可證密鑰。您可以在 SeedProd 網站的賬戶中找到這些信息。輸入許可證密鑰後,點擊「驗證鍵」按鈕。

使用 SeedProd 創建新的首頁

此時,您需要訪問 SeedProd » Pages 並點擊「添加新登陸頁」。

之後,選擇一個適合您網站需要的專業設計模板。將滑鼠懸停在模板上,點擊「選中」圖標。我們在所有圖片中使用「Juicy Sales Page」模板,但您可以使用任何設計。接下來,輸入自訂首頁的名稱。SeedProd 將自動根據頁面標題創建 URL,但您可以將此 URL 更改為任何您想要的地址。當您對所輸入的信息感到滿意時,點擊「保存並開始編輯頁面」按鈕。

接下來,您將進入 SeedProd 的拖放頁面構建器,可以自訂您的模板。SeedProd 編輯器在右側顯示設計的實時預覽,左側顯示一些 Block 設置。左側菜單還有一些可以拖入佈局的 Block。例如,您可以拖放簡單的 Block 如按鈕和圖像,還可以使用高級 Block,如倒計時計時器、聯繫表單、社交分享按鈕等。

要自訂任何 Block,只需點擊佈局中的 Block。左側菜單將顯示所有自訂選項來配置該 Block。您還可以更改頁面的背景顏色、添加背景圖像,或更改配色方案和字體以更好地匹配您的品牌。您甚至可以使用 CSS 動畫來吸引訪客的注意力。

首先,您可能希望用自己的照片或自訂標誌替換任何佔位符圖像。要做到這一點,只需點選任何 Image Block。然後在左側菜單中點擊「選擇圖像」按鈕。您可以從 WordPress 媒體庫中選擇圖像或從計算機上傳新文件。

SeedProd 配有“區塊”,這些區塊是經常一起使用的 Block 集。例如,SeedProd 有頭部、主圖、行動呼籲、證言、聯繫表單、常見問題解答、功能和頁腳區塊,這些可以幫助您快速創建自訂首頁。

要查看不同的區塊,只需點擊「區塊」標籤。要預覽任何區塊,將滑鼠懸停在其上,然後點擊放大鏡圖標。要將區塊添加到設計中,點擊「選擇此區塊」將區塊添加到首頁的底部。您可以使用拖放功能移動區塊和 Block 到佈局中的不同位置。當您對首頁外觀滿意時,別忘了點擊「保存」按鈕以保存您的更改。

將您的首頁與電子郵件行銷服務連接

如果您計劃運行電子郵件行銷活動,首頁是顯示註冊表單的最佳位置之一。SeedProd 讓您輕鬆地將首頁連接到流行的電子郵件行銷服務,如 Constant Contact。

要做到這一點,只需點擊「連接」標籤,然後選擇您的電子郵件服務提供商。SeedProd 將顯示如何將首頁與您的電子郵件行銷服務連接。

如果您的提供商不在列表中,不用擔心。SeedProd 支援 Zapier,Zapier 可以作為 SeedProd 與 3000 多個應用之間的橋樑。只需滾動到“其他”部分,將滑鼠懸停在“Zapier”上。當“連接”按鈕出現時,單擊它,然後按照屏幕上的指示將 SeedProd 與 Zapier 連接。

發佈您的 SeedProd 首頁

完成所有前面的步驟後,您已準備好發佈您的自訂首頁。只需點擊「頁面設置」標籤。頁面設置標籤下還有更多選項可供查看。 例如,您可以更改 SEO 設置、編輯頁面標題,並連接自訂域名。

當您對頁面的設置感到滿意時,選擇「一般」標籤。然後點擊「頁面狀態」開關,將其從「草稿」更改為「發布」。現在,您只需前往 設置»閱讀,並將此頁面設置為新的自訂首頁。

方法 3:手動創建 WordPress 自訂首頁(需要編碼)

創建自訂首頁的另一種方法是使用代碼,這可以讓您完全控制網站外觀。然而,這種方法可能很複雜,編碼錯誤可能會導致各種常見的 WordPress 錯誤。因此,我們不建議初學者使用此方法。

您的 WordPress 主題由許多不同的文件組成,其中一些文件稱為模板,它們控制著網站不同區域的外觀。更多信息,請參考我們的 WordPress 模板層次結構速查表。

其中一個模板文件稱為 front-page.php。如果您的主題包含此模板,WordPress 將自動使用它來顯示首頁。這意味著您可以通過編輯此文件或用新文件替換它來創建自訂首頁。開始編輯前,您需要一個 FTP 客戶端,例如 FileZilla,或者您可以使用 WordPress 託管提供商提供的文件管理器。如果這是您第一次使用 FTP,請參考我們的完整指南,了解如何使用 FTP 連接到您的網站。

連接到服務器後,前往 /wp-content/themes/ 並打開當前的 WordPress 主題文件夾。如果此文件夾已經有 front-page.php 文件,您可以在文本編輯器(例如 Notepad)中打開該文件。然後可以通過編輯代碼進行任何更改。如果您的主題沒有 front-page.php 文件,可以創建一個新文件,命名為 front-page.php。 然後,將 front-page.php 文件上傳到您當前主題的文件夾中。

一旦上傳此文件,WordPress 將開始使用它來顯示首頁。然而,由於文件完全是空的,您會看到一個空白頁作為首頁。 要修正這個問題,只需在文本編輯器中打開該文件並開始添加 HTML 代碼。如果您從空文件開始,可以通過使用現有的 WordPress 主題中的代碼和模板來節省一些時間。例如,通常來說,包含主題的頭部和頁腳是有意義的。

在以下範例代碼中,我們移除了內容和側邊欄,同時從主題中提取了頭部和導航模板:


>
您自訂首頁的代碼在這裡
//Fetch the theme footer template

發現更多專家提示來自訂 WordPress 頁面和文章

  • 如何在 WordPress 中按瀏覽次數顯示熱門文章
  • 打造高轉換率登陸頁面的結構
  • 如何自訂 WooCommerce 產品頁面(無需代碼方法)
  • 如何在 WordPress 中創建自訂存檔頁面
  • 如何在 WordPress 中顯示最多評論的文章
  • 如何輕鬆重新排序 WordPress 文章(逐步指南)
  • 如何在 WordPress 中製作置頂文章
  • 如何在 WordPress 中顯示特定分類的最近文章
  • 如何在 WordPress 中隱藏首頁上的文章

我們希望這篇文章能幫助您在 WordPress 中創建自訂首頁。您還可能想查看我們的 WordPress 最佳熱門文章插件推薦和我們每個 WordPress 博客應該擁有的重要頁面列表。

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道 以獲取更多 WordPress 視頻教程。您也可以在 TwitterFacebook 上找到我們。



Related Posts

  • 2024-07-20
  • WordPress 主题

您是否想在 WordPress 中為不同頁面使用多個佈景主題?可以自訂網頁的外觀和布局,為文章、頁面和部分區域建立模板。但是如果您想為網站的某些部分或頁面使用完全不同的佈景主題呢?本文將指導您如何在 WordPress 中為頁面使用多個佈景主題。

閱讀更多
  • 2024-07-19
  • WordPress 主题

您是否想在 WordPress 網站上添加回頂效果?這種效果在頁面較長時非常有用,可以讓用戶輕鬆返回頁面頂部,提升網站的用戶體驗。本文將教您如何使用 jQuery 和插件在 WordPress 中添加平滑回頂效果。

閱讀更多
  • 2024-07-13
  • WordPress 主题

您是否想在 WordPress 中創建一個自定義頁面?自定義頁面允許您使用與網站其餘部分不同的佈局。許多 WordPress 網站使用自定義頁面佈局來建立銷售頁面、登陸頁面、網路研討會頁面等。在這篇文章中,我們將向您展示如何輕鬆地在 WordPress 中創建自定義頁面。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>