快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

現(xiàn)在我們要將這個(gè)文件上傳到我的主機(jī)中，我們?cè)谀抢锿泄芪覀兊?WordPress 網(wǎng)站。然后我們將測(cè)試這個(gè)文件是否工作。

上傳文件有兩種方式：

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

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

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

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

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

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

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

現(xiàn)在，在前端打開這個(gè)頁(yè)面。您將看到空白頁(yè)面，因?yàn)槲覀冞€沒有為這個(gè)模板做任何事情。

讓我們?cè)谀０逦募刑砑右恍┐a以顯示在前端。將以下行添加到文件中。這些函數(shù)將顯示默認(rèn)的頁(yè)眉Header、頁(yè)腳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ù)來(lái)顯示文章標(biāo)題和the_content()函數(shù)來(lái)顯示文章內(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(); ?>

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

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