在WordPress中创建自定义页面模板方法详解

 更新时间:2021年09月22日 09:24:14   投稿:WDC  
在本文中,我们将学习如何在 WordPress 中创建自定义页面模板,以及我们如何将自定义模板分配给 WordPress 中的特定页面或页面组,感兴趣的朋友跟随小编一起看看吧

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技巧请点击下面的相关文章

相关文章

  • 日常收集整理的Git常用命令

    日常收集整理的Git常用命令

    Git 是一个很强大的分布式版本控制系统。它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势。下面脚本之家小编给大家带来了Git 常用命令,感兴趣的朋友一起看看吧
    2017-10-10
  • 各类常见语言清除网页缓存方法汇总

    各类常见语言清除网页缓存方法汇总

    这篇文章主要介绍了各类常见语言清除网页缓存方法汇总,包括了常见的html、asp、php与java,非常具有实用价值,需要的朋友可以参考下
    2014-10-10
  • 三招两式 解决图片盗链无法查看问题

    三招两式 解决图片盗链无法查看问题

    有些粗心大意的人转贴时,简单地把图片复制了过来。可如果该网站的图片设置为防止外部链接,我们遇到转载的好帖,又找不到原出处,难道只有哀叹的份么?
    2011-06-06
  • Web端扫码登录的原理和实现讲解

    Web端扫码登录的原理和实现讲解

    这篇文章主要介绍了Web端扫码登录的原理和实现,扫码登录相比较传统的密码登录更加快捷和安全,今天我们就来讲讲原理与实现,主要分为几种不同的解决方案,需要的朋友可以参考下
    2023-03-03
  • IDEA 2020 设置项目集成git 及svn和git之间的切换问题

    IDEA 2020 设置项目集成git 及svn和git之间的切换问题

    这篇文章主要介绍了IDEA 2020 设置项目集成git 及svn和git之间的切换问题,本文通关图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • 风中叶老师讲述的学习方法(学习编程的朋友需要看)

    风中叶老师讲述的学习方法(学习编程的朋友需要看)

    风中叶老师讲述的学习方法(学习编程的朋友需要看),希望大家能按照说明的那样,自己多动手动脑
    2008-10-10
  • 使用Git工具实现上传本地项目到GitHub的方法

    使用Git工具实现上传本地项目到GitHub的方法

    这篇文章主要介绍了使用Git工具实现上传本地项目到GitHub的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • VScode修改默认生成的HTML模板的方法

    VScode修改默认生成的HTML模板的方法

    这篇文章主要介绍了VScode修改默认生成的HTML模板的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 解决Fiddler在win7系统下的安全证书问题

    解决Fiddler在win7系统下的安全证书问题

    今天小编就为大家分享一篇关于解决Fiddler在win7系统下的安全证书问题,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • Vscode一些常用操作图文教程

    Vscode一些常用操作图文教程

    这篇文章主要给大家介绍了关于Vscode的一些常用操作的相关资料,VSCode是一款非常流行的代码编辑器,广泛应用于前端开发,文中给出了详细图文教程,需要的朋友可以参考下
    2023-08-08

最新评论