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

wordpress中的页面模板是为您的网站添加结构变体或高度自定义功能的重要方法.他们很容易创造,所以新人可以开始,但他们提供足够的潜力,以保持甚至经验丰富的专业人士忙碌.

您可以通过像默认的Wordpress主题从流行主题复制页面模板开始,如二十十七和调整,但您也可以轻松添加您自己的样式和JavaScript.

在本文中,我们会查看页面模板以及如何使用它们来使您的网站更好.我还将包含使用代码创建页面模板的详细信息,以及使用客户的Cathspress插件更简单的方式.

  • 什么是页面模板?
  • 创建页面模板
  • 制作有用的页面模板
  • 添加选项
  • 使用CustorPress创建页面模板

    • 入门
    • 页面模板设置
    • 添加自定义字段
    • 嵌入您的自定义字段
    • 使用css
    • 自定义字段



什么是页面模板?

在介绍中提到的,页面模板除了添加新功能外,页面模板还可以偏离您的现有结构.二十四有两个很棒的例子:贡献者页面和全天页.

二十四个有贡献者的页面模板.

贡献者页面介绍了新功能:列出为您的网站提供的作者列出的能力.全宽模板通过卸下侧栏来改变页面的结构,专注于内容.

二十一点还提供了两个页面模板:展示模板和侧边栏模板.侧边栏模板在页面上为您提供了良好的旧侧栏,展示页面首先显示粘滞帖子,然后显示最近的帖子列表.

优惠主题,特别是添加众多页面模板,以创建像素完美的联系表单,可自定义的帖子列表,高度自定义作者列表等.

创建页面模板

创建页面模板非常容易.在主题中创建任何新文件,并使用以下注释块启动文件:

加载GIST E14FB0E510759E2222ED1E6EAE6A79CA45

如果您正在修改第三方主题,您真的应该使用子主题.如果您不知道如何创建一个,请阅读Raelene Wilson的大棒如何创建WordPress子主题文章.

页面模板文件可能驻留在子目录中-这是我有利的方法.我通常创建一个模板目录并将它们存储在那里.

一旦创建,您的页面模板将显示在页面属性模块中,如果您在编辑页面屏幕的后端屏幕的右侧坐在屏幕上的右侧坐在屏幕上.如果选择它并更新帖子,则模板文件中的代码将用于显示页面.给出以下模板代码A GO:

加载GIST 66BD1AD0CB88FF855BB9928D4399F601.
Our custom template shown in the admin 我们的自定义模板在admin

注意"你好"是可见的一切;使用页面模板您自己是您自己的.如果需要,您必须调用标题,页脚和其他页面元素.

让我们创建一个基本页面模板,它将融合二十四个:

加载GIST 253BA5012285E74C162EB61CBD0EBB0C.

我确定Wordpress代码新人正在跳跃在两个先前的例子之间的复杂性.我的小秘密是作弊.我只是在二十四个主题中进入了一个模板文件,并复制了它.我删除了我们不需要的循环.

如果您的主题没有模板文件,则可以尝试复制 index.php 文件并将循环删除为起点.

制作有用的页面模板

有一个页面模板一切都很好,但我们真的应该为它添加一些有用的东西.从这一点来看,它完全取决于你,只要你可以用php/html代码你可以使用它.

这里有几个想法来帮助你开始:

  • 自定义联系人页面与谷歌地图和联系表单
  • 一个页面列出每个类别的最新帖子
  • 一个存档页面列出五个新的帖子和类别帖子,其中三个类别
  • 一个网站地图页面列出所有内容(帖子和页面)
  • 一个页面列出您最近上传的图像
  • 评论命令订购的帖子列表
  • 一个帖子列表,显示由上次更新时间订购的帖子
  • 作者名单及其前三名
  • 为您的投资组合
  • 的自定义设计页面

这里您如何在二十四分之一的页面模板上按字母顺序列出帖子:

加载GIST 4E5C966C469665FB0F1B3AE3C6713598

再次,作弊!我在二十四个中进入了index.php文件并复制了整个循环.我需要创建一个新的查询对象,因此我创建了$custom_posts变量并在整个循环中使用它.

添加选项

邮寄模板在向它们添加选项时会变得非常有趣.您可以通过注册元框来完成此操作,但这会为文章添加相当大的无关代码,为什么不再作弊?

我最喜欢的插件之一,高级自定义字段可以为我们进行繁重的举重.

让我们创建一个特殊的页面模板,用户可以选择页面上的帖子是如何订购的.

首先,安装高级自定义字段.接下来,使用上面的示例中的代码创建页面模板.确保模板名称是"自定义帖子列表",因此您可以使用下面的导入示例.

下一步是使用高级自定义字段创建我们的设置.您可以创建自己的,确保它们仅在新页面模板上显示,或者您可以使用工具>导入中的WordPress导入器在此存档中导入XML文件.

我通过设置创建了一个订单和订单.这将导入您的ACF设置.

一旦完成,您可以创建一个页面并选择"自定义帖子列表"模板.您应该看到在编辑器下弹出的元框中分组的两个选项.将这些设置为您想要的任何操作,让我们开始做出我们的主题使用这些设置.

Our new template-specific settings 我们的新模板特定设置

所有您需要知道的是顺序按设置为order_by,订单设置的键是order(没有惊喜).我们可以使用ACF提供的get_field()功能检索这些字段的值.我们需要做的就是从之前的WP_Query对象替换用户所选值:

加载GIST F1010A77F0D6D7B74FE53B537A1FE0A3

使用custompress

创建页面模板

如果您对制作自己的页面模板并不太熟悉,它肯定能够抵挡.如果你是专业人士,它仍然可以耗时和乏味.这就是为什么它不仅仅是使用插件来创建所需的页面模板.

您可以在简单的界面中选择所需的选项,在几分钟内,将完成您的模板,您可以立即使用它或根据需要使用CSS使用CSS.我们退休的 custompress 插件(现在可以免费获得GitHub),并在节省时间的同时夺走压倒性和繁琐.

入门

这是如何使用custompress来创建页面模板的方式.您可以在"使用"选项卡下查找CustomPress页面上的完整安装和配置详细信息.

我将创建一个产品展示页面,向您展示绳索.在开始之前计划页面模板很重要,以便您可以通过设置轻微.

我创建了一个虚构的插件业务,所以我的产品展示将是我可以为每个插件使用的完整销售页面模板.

除了知道你想创建页面模板或帖子类型,还有帮助还知道:

  • 是否需要自定义类别或标签
  • 您需要的自定义字段
  • 如果您希望页面模板是公共或私有的
  • 您要用于页面模板的名称
  • 是否需要某些帖子类型功能
  • 如果您有一个多路网络,您是否希望子位创建自己的页面模板?

一旦您有一个粗略的计划,您可以安装CustomPress.在我的产品展示中,我将有一个特色的图像,并希望显示某些规格,例如插件版本号.

首次安装CustomPress时,您可以在多站点或网站上启用它网络范围.如果选择网络激活CustomPress,只有超级管理员可以创建页面模板或自定义帖子类型,但子位可以使用它们.如果启用IT网站,则激活插件的每个站点都可以创建自己的帖子类型和模板来使用.

您可以获得CustomPress Page的"使用"选项卡上的所有详细信息.一旦完成,您可以创建页面模板.

页面模板设置

转到 custompress>内容类型,然后单击默认 post类型标签上的添加post类型按钮.

The Post Types tab. 单击添加post类型按钮开始.

在名为 post类型的第一个面板中,在后端代码中输入要使用的字段中的名称.您选择的名称应该最多20个字符,最少两个字母,字母也应该全部为小写.

您还可以选择包含下划线,但建议您的姓名不会以下划线开头.

Add Post Type settings. 输入要在代码中使用的页面模板的系统名称.

您可以遵循CustomPress使用说明,了解有关所有设置以及如何设置它们的详细信息,但是要覆盖有更多的设置,以便专门创建页面模板.

默认情况下,功能类型设置为 post ,这意味着您将创建自定义帖子模板.如果您想这样做,那就完全良好,但如果您宁愿创建页面模板,则需要更改.

功能类型部分下,检查编辑 box,然后在它上方输入page,替换post.

The Capability Type section. 编辑 capability type 页面为了添加新页面模板.

标签部分中,您可以输入要为您的页面模板及其链接提供的用户友好的标题.在 name 字段中,输入admin仪表板中的选项卡上的内容,以便您可以访问页面模板.

还可以自定义列表下列出的链接的名称,如新页面查看页面链接.

The Labels portion of the Post Type settings. 输入页面模板的用户友好名称及其链接.

完成后,单击在底部添加post类型以保存更改并创建新页面模板.您可以使用您在管理员仪表板中选择的名称来查看新选项卡,但为了为您的页面上显示的特定类型的特定内容添加任何选项,您需要创建自定义字段.

添加自定义字段

对于我的虚构插件业务和产品展示页面模板我为此创建,我需要能够为编辑器添加一些选项,如插件版本.

转到自定义字段选项卡,然后单击添加自定义字段按钮.输入用户友好的名称,该名称将在编辑器中显示,并且在使用模板创建第一个时也会在页面上.

The Add Custom Field settings page. 输入您的自定义字段的选项,如它的名称.

此外,请务必选择在 post类型部分中创建的页面模板的名称,因此如果启用了用户界面,则可以在编辑器中显示.在隐藏此帖子类型部分的输入中,输入您 not 的所有帖子类型或页面模板,希望此自定义字段显示在编辑器中.

对于我的虚构插件业务,我不希望我的自定义字段显示要在常规帖子和页面编辑器中显示的插件版本,但我确实希望它出现在我的页面模板中.除了我的自定义页面模板外,我将要多选择列表中的所有帖子和页面类型.

字段类型下,输入您希望用户输入此字段选项的信息的方式.在我的虚构的业务的情况下,我希望我的员工和我能够在文本框中输入版本号,因为它必须超过一些选项作为开发进展,所以我选择了一个文本框.

The Field Type settings. 选择要创建的字段类型.

您可以选择许多其他选项,这里是它们所有的完整列表:

  • 文本框
  • 多行文本框
  • 单选按钮
  • 复选框
  • 下拉盒
  • 多选择框
  • 日期选择器
  • 上传

选择字段类型时,您可以输入任何其他选项.例如,您可以在正则表达式中输入以验证文本框信息.如果该字段将用于输入电子邮件地址,则非常有用.您可以使用Regex验证电子邮件,并确保它有效.

如果选择不同的字段类型,例如复选框,则动态出现不同的选项,因此您可以添加相关的设置,例如您希望用户单击您的字段的选项.

您还可以输入您的字段的描述,因此用户更好地了解在字段中输入或选择的内容.

完成后,单击页面底部的添加自定义字段按钮.现在,当您转到"页面模板"选项卡并单击"链接"以创建新页面时,如果选择显示用户界面,则应查看编辑器下方的选项.

The editor for the new page template. 新的自定义字段显示在创建的页面模板的编辑器中.

你几乎已经完成了,但是有一个最后的步骤确保自定义字段实际上在前端的页面上显示.

嵌入您的自定义字段

即使您可以在编辑器中看到您的自定义字段,它不会在页面模板上显示,直到您将其添加到PHP代码或短码中.幸运的是,它都是为你生成的,所以你只需要插入它.

您可以通过转到 catefpress>内容类型>自定义字段选项卡并悬停在自定义字段标题中来找到所需的代码.单击嵌入代码链接.

The Custom Fields settings page. 您可以在设置中找到自定义字段的嵌入代码.

您的代码应在下面直接动态出现.您可以复制并粘贴所需的内容.

PHP代码可用于CustomPress创建的页面模板.您应该能够在/WP-Content/主题/您的主题/单个{post_name}.php 下找到此文件.而不是{post_name},您应该看到您为页面模板挑选的实际系统名称.在我的情况下,它是产品所以我的文件名将是单产品.php .

您可以编辑文件并输入要在前端显示自定义字段的代码,然后保存更改.

如果您宁愿使用短代码,则可以将其弹出到您希望自定义字段中显示的页面编辑器,如您将与任何其他短代码一起显示.

使用CSS

自定义字段

默认情况下,您的自定义字段在纯文本中写出,但您可以使用CSS自定义它以查看鸽友以及任何您想要的方式.

要使用CSS自定义字段,您需要使用生成的PHP嵌入代码.然后,将代码包装在Custom <div>标记中,为您的样式添加类名.从那里,您可以进入主题的 style.css 文件,并使用您的新创建的类名使用CSS自定义字段.

获取帮助

如果您沿途遇到任何麻烦,我们的专家支持团队已准备就绪并等待您的需要帮助您.您可以提交票证,查看我们的实时支持或搜索支持论坛,查看您的问题是否已被回答.

您还可以查看良好的支持票证手册页,了解有关您的支持票证中包含的内容,以便我们可以帮助您以顶级速度.

这一切都包含在您的会员资格中,因此如果您需要一只手,您甚至不必犹豫.如果您还不是会员,您仍然可以使用试用会员获得支持.

求和

应该相当明显,通过添加选项,您可以为网站管理员和用户创建一个全新的新体验.此功能,耦合与自定义CSS和JavaScript会导致一些令人惊讶和强大的工作.

要小心-强大的力量带来了巨大的责任!添加100个选项到页面模板只是因为您不能转发.

务必明智地使用这些知识并为您的客户和您自己构建真正有用的东西.

2
订阅评论
提醒
0 评论
内联反馈
查看所有评论