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

2024-08-15 18:24:10

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 仪表板，然后单击侧边栏中“页面”选项下的“新建页面” 。您将看到该模板显示在页面属性部分下。

为页面添加新标题并从下拉列表中选择该自定义页面模板并发布页面。

现在，在前端打开这个页面。您将看到空白页面，因为我们还没有为这个模板做任何事情。

让我们在模板文件中添加一些代码以显示在前端。将以下行添加到文件中。这些函数将显示默认的页眉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技巧请点击下面的相关文章

WordPress主题制作之模板文件的引入方法

get_template_part() 用来引用模板文件,类似于 get_header().get_sidebar() 和 get_footer(),只不过这个 get_template_part() 可以引入自定义名字的文件. 使用方法 get_template_part( $slug, $name ); 参数 $slug (字符串)(必须)要引入的模板的文件名,不包括后缀名 .php,也就是如果需要引入当前主题根目录的 loop.php 文件 $slug 填写 "loop" 即可.
深入解析WordPress中加载模板的get_template_part函数

最近研究官方主题 Twenty Eleven ,有一些东西网上现成的中文资料不好找,在博客里记载下来,算是分享,也算是备忘,wordpress 3.0 以后就开始便有了get_template_part() 这个函数 ,应该是为文章呈现形式提供更为多样化的选择而给出的新功能. Twenty Eleven 中实例如下: Twenty Eleven index.php 文件行:21 <?php if ( have_posts() ) : ?> <?php twentyeleven_co
详解WordPress中调用评论模板和循环输出评论的PHP函数

comments_template comments_template 函数是一个调用评论模板的函数,使用起来很简单,与get_header()等函数一样,是一个include文件类函数,今天来讲一下他的使用. 描述上面已经讲过了,就是调用评论模板的一个函数. 使用 <?php comments_template( $file, $separate_comments ); ?> 其中 $file 需要调用的文件名默认值: /comments.php $separate_comments 是
讲解WordPress中用于获取评论模板和搜索表单的PHP函数

comments_template()(获取评论模板) comments_template() 函数用来获取评论模板,一般只能用在文章或者页面上,如果不是文章或者页面将无法显示. 用法 comments_template( $file, $separate_comments ); 参数 $file (字符串)(可选)要评论模板文件. 默认值:/comments.php(当前主题根目录的 comments.php 文件). $separate_comments (布尔)(可选)是否根据评论的类型区
WordPress的主题编写中获取头部模板和底部模板

get_header()(获取头部) 引入主题的头部模板,默认会引入当前主题目录里的 header.php 文件.如果指定了一个名称,则引入当前主题目录的 header-{name}.php 文件,如果需要引入的文件不存在则引入 wp-includes/theme-compat/header.php 文件. 用法 get_header( $name ); 参数 $name (字符串)(可选)要引入的文件的名称,如果指定则引入 header-{$name}.php 文件. 例子 <?php get
通过自定义字段重新排序 WordPress 文章方法

您想更改网站博客页面上 WordPress 文章的顺序吗?那么您就在正确的地方学习此功能并更改文章的顺序.因此,在本文中,我将向您展示如何通过自定义字段更改文章的顺序. WordPress 中文章的默认顺序基于发布日期,并按时间倒序显示.这意味着它将在顶部显示最新的文章. 通过为 WordPress 添加自定义字段,您可以根据该自定义字段更改顺序. 我将在下面的分步指南中解释如何创建自定义字段并更改博客页面上文章的顺序. 按自定义字段排序 WordPress 文章让我们开始在帖子中创建一个自定
WordPress中获取所使用的模板的页面ID的简单方法

什么是模板呢?默认情况 WordPress是使用主题目录下page.php来作为模板显示页面的,但是有时候我们需要不同的模板来显示页面,比如登录.注册和投稿页面等,这些页面跟普通的页面是有所区别,这时候WordPress提供了页面模板让开发者可以自定义WordPress页面外观甚至功能. 页面模板php文件的匹配 WordPress中是通过自定义栏目来记录页面所使用的模板的,自定义栏目名称:_wp_page_template,值为模板的文件名: 如果是默认模板page.php,那么 _wp_pa
在WordPress中创建自定义页面模板方法详解

WordPress 页面模板是特定的模板文件,用于特定页面或页面组,这些用于单页数据的模板显示在前端.我们还可以在 WordPress 中创建自定义页面模板. 在本文中,我们将学习如何在 WordPress 中创建自定义页面模板,以及我们如何将自定义模板分配给 WordPress 中的特定页面或页面组. 在 WordPress 中创建自定义页面模板默认情况下,WordPress 允许使用默认模板文件page.php创建页面和文章来处理前端的外观. 我们还可以对默认模板文件 ( page.php
基于Laravel-admin 后台的自定义页面用法详解

Laravel-admin 这个后台很好用,几乎省去了html和js的困扰,让后台CURD变得优雅简洁. 这是一个自定义面的Demo 路由定义: $router->get('mails/send', 'MailController@send'); $router->post('mails/send', 'MailController@send'); 控制中写法: public function send(Content $content) { //添加请求 if (request()->
vue中如何自定义右键菜单详解

在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" > </li> 在页面编写右键菜单内容: <ul v-show=&q
Android AS创建自定义布局案例详解

先创建一个title.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" andr
使用c#在word文档中创建表格的方法详解

复制代码代码如下: public string CreateWordFile() { string message = ""; try { Object Nothing = System.Reflection.Missing.Value; string name = "xiehuan.doc";
详解angular 中的自定义指令之详解API

自定义属性的四种类别分为: 元素E,属性A,注释M,类C , 分别如下: <my-dir></my-dir> <span my-dir="exp"></span>  <span class="my-dir: exp;"></span> 简单创建一个指令 html结构: <div ng-controller="
Laravel5.5以下版本中如何自定义日志行为详解

前言在 Laravel 5.6 版本中日志行为可以很容易的进行自定义,而在5.5以下版本中日志行为自定义自由度并不是很高,但是项目有需求不能因为这个就强行将项目升级为5.6吧,况且作为一个稳定的项目升级框架大版本有可能会有很多坑,基于这些原因我尝试了对 Laravel 5.5 的日志进行改造以适应我的需求. Laravel 的日志行为大部分是在 Illuminate\Log\LogServiceProvider 中,我们可以看一下其中的代码片段: /** * Configure the Mon
Oracle中创建和管理表详解

SQL> /*SQL> 对于表的操作: 创建表,修改表(添加新的列,改变当前某些列,删除列),删除表SQL> 创建表: create table(需要create table的权限)SQL> 修改表: alter table tablename add/modify/dropSQL> 删除表:drop table tablenameSQL> */SQL> show user;USER 为 "SCOTT"SQL> --访问hr用户下的表SQ
在django中自定义字段Field详解

Django的Field类中方法有: to_python() # 把数据库数据转成python数据 from_db_value() # 把数据库数据转成python数据 get_pre_value() # 把python数据压缩准备存入数据库 get_db_pre_value() # 把压缩好的数据转成数据库查询集 get_prep_lookup() # 指定过滤的条件 value_to_string() # 数据序列化如果创建的Field比字符串,日期,整数等更复杂的数据结构,可能需要重写t
教你在react中创建自定义hooks

一.什么是自定义hooks 逻辑复用简单来说就是使用自定义hook可以将某些组件逻辑提取到可重用的函数中. 自定义hook是一个从use开始的调用其他hook的Javascript函数. 二.不使用自定义hook时例1:当我们整个页面需要获取用户鼠标移动的坐标时,不使用hook的代码,我们可以这样写 const [position, setPosition] = useState({ x: 0, y: 0 }) useEffect(() => { const move = (e) => {

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

相关推荐

随机推荐