如何在 WordPress 上建立全寬頁面(初學者指南)

WPressize Me

09/22/2022

如何在 WordPress 上建立全寬頁面(初學者指南)

最後更新於 2024 年 1 月 16 日,編輯團隊 | 審閱者:Syed Balkhi

你想在 WordPress 上建立一個全寬頁面,讓你的內容橫跨整個螢幕嗎?大多數 WordPress 主題已內建全寬頁面模板,但如果你的主題沒有,也可以輕鬆添加。在這篇文章中,我們將展示如何輕鬆地在 WordPress 中建立全寬頁面,甚至不用寫代碼就能創建完全自定義的頁面佈局。

以下是本指南中的方法概覽:

  • 方法 1. 使用主題的全寬模板
  • 方法 2. 使用插件創建全寬頁面模板
  • 方法 3. 使用頁面構建插件設計全寬頁面
  • 方法 4. 使用 SeedProd 創建完全自定義的全寬頁面
  • 方法 5. 手動創建全寬 WordPress 頁面模板

方法 1. 使用主題的全寬模板

如果你的主題已內建全寬頁面模板,那麼最好直接使用它。大多數優質的 WordPress 主題都包含這個模板,甚至許多免費主題也是如此。

首先,你需要在 WordPress 儀表板中編輯一個頁面或創建一個新的頁面,依次點擊「頁面」»「添加新頁面」。

在右側「文件」窗格中,點擊「頁面屬性」部分旁邊的向下箭頭以展開。你應該能看到一個「模板」下拉選單,如果你的主題有全寬模板,它會在這裡列出,如「全寬模板」。

如果你的主題沒有全寬頁面模板,請放心,你可以使用以下方法輕鬆添加。

方法 2. 使用插件創建全寬頁面模板

這是最簡單的方法,適用於所有 WordPress 主題和頁面構建插件。

首先,你需要安裝並啟用 Fullwidth Templates 插件。查看我們的初學者指南,學習如何安裝 WordPress 插件。

這個插件會添加三個新的頁面模板選項:

  • FW No Sidebar: 移除側邊欄,但保留其他內容。
  • FW Fullwidth: 移除側邊欄、標題和評論,並將佈局拓展至全寬。
  • FW Fullwidth No Header Footer: 除了移除 FW Fullwidth 的所有元素外,還會移除頁首和頁尾。

如果你只打算使用內建的 WordPress 編輯器,「FW No Sidebar」可能是最佳選擇,但這個插件提供的自定義選項有限。

如果你想在不寫代碼的情況下自定義你的全寬模板,則需要使用頁面構建插件。

方法 3. 使用頁面構建插件設計全寬頁面

如果你的主題沒有全寬模板,那麼這是最簡單的方法,可以用於創建和自定義全寬模板。

這允許你輕鬆編輯全寬頁面,並通過拖放界面為你網站創建不同的頁面佈局。

在這篇教程中,我們將使用 Thrive Architect 這款拖放頁面構建插件,它可以幫助你輕鬆創建頁面佈局,無需編寫代碼。

首先,安裝並啟用 Thrive Architect 插件。更多詳情,請參見我們的逐步指南。

啟用後,編輯現有頁面或創建一個新頁面,然後點擊「啟動 Thrive Architect」按鈕。

接著,你會被要求選擇頁面類型,可以選擇創建普通頁面或預建登錄頁面。點擊「預建登錄頁面」選項。

這將帶你進入 Thrive Architect 的登錄頁面庫,從這裡可以選擇一個預製模板作為全寬頁面的基礎。

選擇一個喜歡的模板,點擊應用模板按鈕,頁面構建器將自動加載它。

方法 4. 使用 SeedProd 創建完全自定義的全寬頁面

雖然 Thrive Architect 是一個不錯的選擇,但你可能會尋找更強大的自定義選項。 SeedProd 就是這樣一個強大的插件。

SeedProd 是最好的 WordPress 登錄頁面插件,提供了易於使用的拖放頁面構建界面。

首先安裝並啟用 SeedProd 插件。啟用後,前往 SeedProd » 頁面,添加新的登錄頁面。你可以從300多個預建模板中選擇,包括許多全寬選項,或從頭創建自定義全寬頁面。

方法 5. 手動創建全寬 WordPress 頁面模板

如果上述方法均不適合你,可以手動編輯 WordPress 主題文件,需要基礎的 PHP、CSS 和 HTML 知識。如果你從未做過這類操作,請查看我們的代碼複制/粘貼指南。

首先,用純文本編輯器如 Notepad 打開一個空白文件,粘貼以下代碼:

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

將該文件保存為 full-width.php 在電腦上。

這段代碼定義了模板文件的名稱並告訴 WordPress 獲取頁首模板。

接著,使用 FTP 客戶端(或 WordPress 主機文件管理器)連接網站,導航至 /wp-content/themes/你的主題文件夾/。找到 page.php 文件,複製除了 get_header() 行外的所有代碼,粘貼到 full-width.php 文件中。

在 full-width.php 文件中,找到並刪除 get_sidebar() 行,這行代碼會從主題中顯示側邊欄,刪除它後,全寬模板不會顯示側邊欄。

接下來,上傳 full-width.php 文件到你的主題文件夾,然後在 WordPress 儀表板中編輯或創建一個新的頁面。在「文件」窗格中,選擇「頁面屬性」→「模板」下拉選單,選擇新創建的「全寬模板」。

發布或更新頁面後,你會看到側邊欄消失,頁面呈現為單列佈局,然後你可以使用 CSS 進一步調整佈局。

希望這篇文章能幫助你學習如何在 WordPress 中輕鬆創建全寬頁面。你可能也想了解如何增加 WordPress 插件來擴展網站功能,以及最佳的 WordPress LMS 插件比較。



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"}
>