在WordPress中創建自定義頁面模板方法詳解

Posted on by

WordPress 頁面模板是特定的模板文件，用於特定頁面或頁面組，這些用於單頁數據的模板顯示在前端。我們還可以在 WordPress 中創建自定義頁面模板。

在本文中，我們將學習如何在 WordPress 中創建自定義頁面模板，以及我們如何將自定義模板分配給 WordPress 中的特定頁面或頁面組。

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

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

默認情況下，WordPress 允許使用默認模板文件page.php創建頁面和文章來處理前端的外觀。

我們還可以對默認模板文件 ( page.php )進行更改，但這些更改會影響您已經創建的所有其他頁面。

所以，這就是為什麼我們需要在 WordPress 中創建一個自定義頁面模板來根據要求處理特定的頁面佈局設計。

讓我們從創建自定義頁面模板開始。

要開始創建自定義模板，您隻需具備基本的HTML、CSS和PHP 知識。當然，還需要有一款喜歡的文件編輯器，我常用的是Sublime Text 。

因此，打開文件編輯器並將以下代碼粘貼到其中。

<?php
/*Template Name: My Custom Page Template*/
?>

使用“ my-custom-page-template.php ”名稱保存此文件。您可以根據需要更改文件名。但不要忘記將擴展名另存為.php。

上面帶有註釋的文件告訴 WordPress 這是一個模板文件，模板名稱是您提供的。當我們創建新頁面時，它將顯示在模板下拉菜單下的頁面屬性部分。我們將在下面看到它。

現在我們要將這個文件上傳到我的主機中，我們在那裡托管我們的 WordPress 網站。然後我們將測試這個文件是否工作。

上傳文件有兩種方式：

使用 cPanel 和文件管理器 使用 FTP（文件傳輸協議）帳戶

在這裡，我將使用 FTP 應用程序FileZilla向您展示。讓我們打開 FileZilla 並使用我的 FTP 帳戶詳細信息登錄。

導航到此路徑“ /wp-content/themes/ACTIVETHEME ”文件夾。ACTIVETHEME是當前活動主題的占位符。我會建議您選擇父主題的子主題。如果您沒有子主題，請查看這篇文章如何在 WordPress 中制作子主題？.

所以，我們是在當前活躍的主題上。現在將該文件上傳到此文件夾。檢查下圖以瞭解。

將此圖像與您所做的進行比較。所以我們可以通過創建一個新頁面來繼續測試這個文件。

因此，現在轉到您的 WordPress 儀表板，然後單擊側邊欄中“頁面”選項下的“新建頁面” 。您將看到該模板顯示在頁面屬性部分下。

WordPress 中的自定義頁面模板

為頁面添加新標題並從下拉列表中選擇該自定義頁面模板並發佈頁面。

現在，在前端打開這個頁面。您將看到空白頁面，因為我們還沒有為這個模板做任何事情。

讓我們在模板文件中添加一些代碼以顯示在前端。將以下行添加到文件中。這些函數將顯示默認的頁眉Header、頁腳Footer、側邊欄Sidebar。

<?php /*Template Name: My Custom Page Template*/ ?>
 
<?php get_header(); ?>
    
     <div id="primary" class="content-area">
        /*your custom code here*/
     </div>
<?php get_sidebar();

     get_footer();
?>

以下代碼將循環post_type => post並顯示所有文章的文章標題和文章內容。我使用the_title()函數來顯示文章標題和the_content()函數來顯示文章內容。

還有更多函數，例如：

  • the_title()
  • the_content()
  • the_post_thumbnail()
  • the_permalink()
  • the_excerpt()
  • the_time()
  • the_author()
  • the_category()
<?php /*Template Name: My Custom Page Template*/ ?>
 
<?php get_header(); ?>
 
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php $args = array(
                       'post_type' => 'post'
                     );

             $post_query = new WP_Query($args);

             if($post_query->have_posts() ) {
                while($post_query->have_posts() ) {
                  $post_query->the_post();
                ?>
                  <h2><?php the_title(); ?></h2>
                  <p><?php the_content(); ?></p>
                <?php }
             }
        ?>
    </main><!-- .site-main -->
 
</div><!-- .content-area -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

將此代碼保存在您的模板文件中，它將在前端顯示該頁面上的所有文章，您可以根據您的設計佈局進行設計，使其外觀和感覺更好。

您還可以根據您的要求添加自己的自定義代碼，並可以執行以下操作：

  • 創建不同的頁眉和頁腳
  • 根據您的 PSD/線框模板自定義佈局
  • 自定義側邊欄位置或可以刪除
  • 顯示特定條件的特定文章類型

您可以在此自定義頁面模板上執行更多操作。隻需思考並執行您的自定義代碼。

就是這樣瞭。您已完成 WordPress 中的自定義頁面模板。

好瞭，關於在WordPress中創建自定義頁面模板方法基本就是這樣，更多關於WordPress技巧請點擊下面的相關文章

推薦閱讀：