在WordPress中創(chuàng)建自定義頁面模板方法詳解

更新時間：2021年09月22日 09:24:14 投稿：WDC

在本文中，我們將學(xué)習(xí)如何在 WordPress 中創(chuàng)建自定義頁面模板，以及我們?nèi)绾螌⒆远x模板分配給 WordPress 中的特定頁面或頁面組，感興趣的朋友跟隨小編一起看看吧

WordPress 頁面模板是特定的模板文件，用于特定頁面或頁面組，這些用于單頁數(shù)據(jù)的模板顯示在前端。我們還可以在 WordPress 中創(chuàng)建自定義頁面模板。

下面看下如何在 WordPress 中創(chuàng)建自定義頁面模板，以及我們?nèi)绾螌⒆远x模板分配給 WordPress 中的特定頁面或頁面組，內(nèi)容如下所示。

在 WordPress 中創(chuàng)建自定義頁面模板

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

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

所以，這就是為什么我們需要在 WordPress 中創(chuàng)建一個自定義頁面模板來根據(jù)要求處理特定的頁面布局設(shè)計。

讓我們從創(chuàng)建自定義頁面模板開始。

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

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

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

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

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

現(xiàn)在我們要將這個文件上傳到我的主機(jī)中，我們在那里托管我們的 WordPress 網(wǎng)站。然后我們將測試這個文件是否工作。

上傳文件有兩種方式：

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

在這里，我將使用 FTP 應(yīng)用程序FileZilla向您展示。讓我們打開 FileZilla 并使用我的 FTP 帳戶詳細(xì)信息登錄。

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

所以，我們是在當(dāng)前活躍的主題上。現(xiàn)在將該文件上傳到此文件夾。檢查下圖以了解。

將此圖像與您所做的進(jìn)行比較。所以我們可以通過創(chuàng)建一個新頁面來繼續(xù)測試這個文件。

因此，現(xiàn)在轉(zhuǎn)到您的 WordPress 儀表板，然后單擊側(cè)邊欄中“頁面”選項下的“新建頁面” 。您將看到該模板顯示在頁面屬性部分下。

為頁面添加新標(biāo)題并從下拉列表中選擇該自定義頁面模板并發(fā)布頁面。

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

讓我們在模板文件中添加一些代碼以顯示在前端。將以下行添加到文件中。這些函數(shù)將顯示默認(rèn)的頁眉Header、頁腳Footer、側(cè)邊欄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();
?>

以下代碼將循環(huán)post_type => post并顯示所有文章的文章標(biāo)題和文章內(nèi)容。我使用the_title()函數(shù)來顯示文章標(biāo)題和the_content()函數(shù)來顯示文章內(nèi)容。

還有更多函數(shù)，例如：

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(); ?>

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

您還可以根據(jù)您的要求添加自己的自定義代碼，并可以執(zhí)行以下操作：