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

阿新 • • 發佈：2021-09-22

WordPress 頁面模板是特定的模板檔案，用於特定頁面或頁面組，這些用於單頁資料的模板顯示在前端。我們還可以在 WordPress 中建立自定義頁面模板。

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

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

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

預設情況下，WordPress 允許使用預設模板檔案page.建立頁面和文章來處理前端的外觀。

我們還可以對預設模板檔案 ( page.php )進行更改，但這些更改會影響您已經建立的所有其他頁面。

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

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

要開始建立自定義模板，您只需具備基本的HTML、和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 儀表板，然後單擊側邊欄中“頁面”選項下的“新建頁面” 。您將看到該模板顯示在頁面屬性部分下。

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_pozdCGVfAst_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_www.cppcns.comquery->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 getzdCGVfA_footer(); ?>

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

您還可以根據您的要求新增自己的自定義程式碼，並可以執行以下操作：