在 WordPress 主題中創建自定義頁面模板

WordPress 最重要的賣點之一是主題理念。 單一主題為網站的設計和功能增加了巨大的價值。 但是，有些網站在不同的頁面上有不同的設計。

不幸的是，幾個 WordPress 主題限制用戶更改層次結構中不同頁面的佈局和功能。 WordPress 自定義頁面模板允許用戶集成自定義要求，例如特定頁面上的右側/左側邊欄、附加的號召性用語功能或特定登錄頁面的唯一標題。 讓我們進一步深入了解 WordPress 自定義頁面模板如何顯示不同類型的內容。

自定義 WordPress 頁面模板可用於多種用途。 一些想法包括：

• 顯示每個類別的最近帖子
• 嵌入谷歌地圖或任何腳本
• 所有作者的名單。
• 最近上傳的圖片
• 投資組合的自定義設計頁面
• 聯繫頁面

在 WordPress 網站上創建的所有頁面和帖子的外觀由名為page.php的模板文件處理。 在 WordPress 中創建或編輯自定義頁面模板需要 HTML、CSS 和 PHP 的基本知識。

只需打開任何文本編輯器並將以下代碼粘貼到其中即可。

 <?php /* 模板名稱：PageWithoutSidebar */ ?>

上面這行代碼告訴 WordPress 這是一個名為PageWithoutSidebar的模板文件。 您可以使用任何您想要的名稱。 現在將此文件保存為PageWithoutSidebar.php 。 同樣，您可以為該文件使用任何其他名稱。 但不要忘記將擴展名保留為.php

現在，我們將測試我們新創建的模板文件。

登錄到您的主機面板。 在這個例子中，我使用的是 Cloudways——一個最快的託管 WordPress 主機。 Cloudways 通過 AWS、DigitalOcean、GCP、Linode 和 Vultr 的提供商選項支持 WordPress 應用程序。 導航到/wp-content/themes文件夾。 打開您當前的主題文件夾並在那裡上傳PageWithoutSidebar.php文件。

轉到WordPress管理面板 > 頁面 > 添加新的。 您可以在右側看到新的自定義頁面模板。

創建一個新頁面並將其模板設置為PageWithoutSidebar。 完成後，發布它。

打開新創建的頁面。 由於模板中還沒有設計元素，因此會顯示如下圖所示的空白頁面。

這表明WordPress中的自定義頁面模板已成功實現，因此您可以創建自定義響應式WordPress主題

現在是添加幾行代碼來顯示頁面內容的時候了。

在這個演示中，我將討論如何自定義默認的 26 頁面模板。

頁面的默認外觀由位於/wp-contents/themes/YOUR THEME/文件夾中的page.php文件生成。 打開page.php並複制此代碼。

 <?php get_header(); ?>

<div class="content-area">
                <main class="site-main" role="main">
                                <?php
                                // 開始循環。
                                while ( have_posts() ) : the_post();

                                                // 包含頁面內容模板。
                                                get_template_part('模板部分/內容', '頁面');

                                                // 如果評論已打開或我們至少有一條評論，請加載評論模板。
                                                if ( comments_open() || get_comments_number() ) {
                                                                評論模板（）；
                                                }

                                                // 循環結束。
                                終了；
                                ?>

                </main><!-- .site-main -->

                <?php get_sidebar('content-bottom'); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

將此代碼粘貼到這行代碼下方的PageWithoutSidebar.php中。

 <?php /* 模板名稱：PageWithoutSidebar */ ?>

保存！

您完整的PageWithoutSidebar.php文件將如下所示。

 <?php /* 模板名稱：PageWithoutSidebar */ ?>

<?php get_header(); ?>

<div class="content-area">

                <main class="site-main" role="main">

                                <?php

                                // 開始循環。
                                while ( have_posts() ) : the_post();

                                                // 包含頁面內容模板。
                                                get_template_part('模板部分/內容', '頁面');

                                                // 如果評論已打開或我們至少有一條評論，請加載評論模板。
                                                if ( comments_open() || get_comments_number() ) {

                                                                評論模板（）；

                                                }

                                                // 循環結束。
                                終了；

                                ?>

                </main><!-- .site-main -->

                <?php get_sidebar('content-bottom'); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

返回您的頁面並刷新它。 您會觀察到一切都在按照默認的 WordPress 26 歲主題的方式工作。

現在讓我們自定義它。 如您所見，右側有一個側邊欄。 我只會從這個頁面中刪除它。 所有其他頁面將具有二十六主題的默認外觀。

打開文件PageWithoutSidebar.php文件。 向下滾動到文件末尾並刪除：

 <?php get_sidebar(); ?>

這是獲取頁面側邊欄的代碼行。 刪除該行後，保存它。 打開頁面的 URL，側邊欄就沒有了！

如您所見，側邊欄已成功從此頁面中刪除。 但是，文本對齊並不好。 右側有一個空白區域。 解決方法是調整和擴展文本以填充屏幕。

返回PageWithoutSidebar.php並找到：

 <div class="content-area">

只需將“ content-area ”更改為“ site-content-fullwidth ”即可完成。 刷新頁面，內容全寬。

仍然好奇為什麼我可以輕鬆編輯page.php文件時創建自定義頁面模板？ 很明顯，如果編輯page.php文件，整個網站的所有頁面都會顯示更改。 為了在特定頁面上應用自定義外觀，WordPress 中的自定義頁面模板派上用場。 您還可以在 WordPress 中定義自定義用戶角色，以便為用戶分配不同的權限。

如果您有任何疑問，請隨時通過在下面的評論部分發帖來提問。