当前位置:hao123网址大全 » 站长资讯 » 网站技术 » 文章详细 

如何在 WordPress 中创建自定义页面模板

发布:hao123网址大全  浏览:26次  时间:2021-12-02
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 中的自定义页面模板。
版权说明:hao123网址大全(www.hao123w.com)转载作品的目的在于传递更多信息,并不代表赞同其观点和对其真实性负责。如涉及作品内容、版权和其他问题(包括但不限于侵犯著作权、商业信誉等),烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至admin#hao123w.com(#换成@),我们将按国家相关法规即时移除。
推荐站点
  • LED照明网

    Led照明之家(LED照明网)-http://www.led123.com.cn 是一个汇聚了LED企业发布led显示屏,led灯,led灯泡,led吸顶灯,led灯具,led路灯,led照明,led电子显示屏,led节能灯,led投光灯等led供应信息的LED灯具灯饰照明市场!

    www.led123.com.cn
  • 114黄页信息网

    114黄页信息网(114wz.cn)是一个提供114查询,114企业名录大全,114黄页网站大全,企业黄页网等黄页信息服务网站!

    www.114wz.cn
  • hao123网址大全

    hao123网址大全(hao123w.com)又名好123网址之家,为您提供方便的上网导航服务,目前已经有很多用户设hao123为主页,请将首页设为hao123网址之家,方便您上网.

    www.hao123w.com
  • 4615 - 互联网创业新媒体

    4615 为互联网创业者提供动力,做创新的互联网创业新媒体

    www.4615.cn
  • hao525

    hao525.com 创立于2009年!

    www.hao525.com