0

0

Twig 入门:快速启动您的 WordPress 开发

WBOY

WBOY

发布时间:2023-09-02 08:29:01

|

889人浏览过

|

来源于php中文网

原创

现在我们了解到,twig 与 wordpress 插件 timber 一起可以帮助开发人员在开发 wordpress 主题时编写模块化代码。通过这种模块化方法,您可以分别处理 web 应用程序的逻辑层和视图层。让我们跳到稍微更技术性的内容:创建 twig 模板、将 html 转换为 twig 文件,以及如何使用 twig 模板呈现逻辑或数据。

安装木材

首先,我要安装 Timber,这是一个 WordPress 插件,有助于将 Twig 模板引擎与 WP 集成。那么,让我们开始吧。

  • 登录您的 WordPress 信息中心。
  • 转至插件 > 添加新插件
  • 搜索 Timber 插件。
  • 安装并激活插件。

安装 Timber 后,您现在可以开始将模板文件拆分为数据视图文件。

创建树枝模板

在我们开始创建 Twig 模板之前,我假设您已经进行了某种本地 WordPress 设置。对于这个特定的教程,我的设置是:

  • 本地主机 WP 安装(我使用的是 ServerPress 的 DesktopServer)。
  • 已安装并激活 Timber 插件。
  • 可选:任何基础/入门主题(我使用自己的主题,即 Neat)。

UpStatement 还构建了一个 Timber Starter 主题。

让我们开始吧。我想在主页顶部显示欢迎消息。如果没有 Twig,我该怎么办?也许,我会在 PHP 文件中包含 HTML 代码并回显欢迎消息,就像我在下面的代码示例中所做的那样。我的 index.php 文件看起来像这样。



    

现在,我本地 WordPress 安装的主页在顶部显示一条欢迎消息。这是屏幕截图。

Twig 入门:快速启动您的 WordPress 开发

问题

这种方法的问题在于我们将数据/逻辑与视图混合在一起。该文件越复杂,维护就越困难,更不用说理解了,例如,如果您在此代码后面添加带有一些参数的 WordPress 循环,然后再进行过滤和分页。除此之外,当您最终得到一些逻辑时,HTML 中的 PHP 看起来并不好。

模块化方法

为了使其更加模块化,我们可以将主页上的内容视为块或组件的形式。默认情况下可以有两个完整的,即来自 The_Loop 的帖子和分页。现在我们想在顶部添加另一个组件,即欢迎消息,让我们为该组件创建一个 Twig 文件。

在编辑器中打开一个新的空白文件,然后复制粘贴以下代码行。


Welcome to my website!

在主题的根目录中创建一个名为 views 的新文件夹,并使用 .twig 扩展名保存此文件。例如,我将文件保存为 welcome.twig

渲染树枝模板

Timber 为我们提供了一些有用的函数,其中之一就是渲染函数。你可以这样称呼它:

Timber::render();

该函数最多可以接受四个参数。由于这超出了本文的范围,您可以在 Timber 文档中阅读相关内容。我们可以将主题的 views 文件夹中存在的任何 Twig 文件的名称传递给此函数。

让我们在 index.php 文件中渲染欢迎消息。


Timber 渲染 welcome.twig 文件,加载 HTML 并在前端显示新修改的视图层,如下所示:

Twig 入门:快速启动您的 WordPress 开发

render() 函数将 welcome.twig 作为它的参数,但只要树枝模板位于名为 views 的文件夹内,它就会自动读取该文件。

如果您想对文件夹使用自定义名称/路径,则必须提供该文件夹的路径。例如,我在主题的根目录中创建了一个 twig 文件夹,并将其添加到渲染函数的参数中。

DM运动健身减肥健身馆网站模板1.7
DM运动健身减肥健身馆网站模板1.7

DM企业建站系统运动健身减肥健身馆网站模板, DM企业建站系统。是由php+mysql开发的一套专门用于中小企业网站建设的开源cms。DM系统的理念就是组装,把模板和区块组装起来,产生不同的网站效果。可以用来快速建设一个响应式的企业网站( PC,手机,微信都可以访问)。后台操作简单,维护方便。DM企业建站系统安装步骤:第一步,先用phpmyadmin导入sql文件。 第二步:把文件放到你的本地服务

下载

官方加载顺序

Timber 将首先查看子主题,然后回退到父主题(与 WordPress 逻辑相同)。官方的加载顺序是:

  1. 用户定义的位置
  2. 调用PHP脚本的目录(但不是主题)
  3. 子主题
  4. 父主题
  5. 调用PHP脚本的目录(包括主题)

第 2 项插入到其他项之上,这样如果您在插件中使用 Timber,它将使用插件目录中的 twig 文件。

所以,现在index.php文件里面没有HTML,它正在渲染一个Twig模板。

现在让我们将一些动态数据从 index.php 发送到 welcome.twig 文件并使用 Timber 进行渲染。

通过 Timber 将数据发送到 Twig 文件

要将数据从 PHP 文件发送到 Twig 文件,您需要定义一个上下文数组。渲染函数采用一组数据来为 Twig 模板提供某种上下文。我们将该数组称为 $context,它是一个关联数组,即它占用键值对。

让我们添加一个键值对,作为动态欢迎消息,我们的 PHP 文件会将其发送到 Twig 文件。

数据文件

我的 index.php 文件现在看起来像这样。


因此,在 index.php 文件中,我在第 8 行定义了一个空的 $context 数组。然后,在第 11 行,我创建了一个变量 $var,其值为 'Dynamic Message'在第 14 行,我创建了一个键 the_message ,它等于 $var

在第 17 行,我使用 welcome.twig 文件调用了渲染函数,但这一次,它需要一个额外的参数,即 $context 数组。这个新参数实际上包含 Timber 将从 PHP 文件发送到 Twig 文件的数据。

因此,我们定义了上下文数组并添加了动态消息(您可以通过向其添加某种逻辑来向不同的用户显示不同的消息,例如显示当前用户的名字)。

模板文件

现在我们需要在 Twig 文件中使用此数据,即 the_message。我们可以通过在 Twig 模板中放置双括号来回显变量。例如,要在 twig 文件中回显 $var,我们可以编写 {{ var }}。这正是我所做的。


{{ the_message }}

the_message 的值将打印在 h2 标签内。我知道,就是这么简单,而且代码看起来也很干净。

就是这样!保存代码,在前端查看动态欢迎信息。这是最终的屏幕截图。

Twig 入门:快速启动您的 WordPress 开发

结论

总而言之,现在您可以使用 PHP 文件来编码逻辑并向 Twig 模板提供数据,该模板包含 HTML 并在双括号内呈现 Twig 变量或函数。

这种模块化方法可以为 WordPress 主题中的每个组件生成单独的模板文件。考虑拥有一个 message.twig 组件,您可以在主题中的任何位置使用它来显示您想要的任何消息,任意次数。

这是 Twig 与 Timber 的基本实现。不过,在接下来的两篇文章中,我将介绍 Timber WordPress Cheatsheet、使用 Timber 管理图像以及在不使用疯狂步行器功能的情况下创建菜单。

如果您有任何疑问,请在下面的评论中发表或在 Twitter 上联系。您还可以在此 GitHub 存储库中查看我的主题代码。

WPS零基础入门到精通全套教程!
WPS零基础入门到精通全套教程!

全网最新最细最实用WPS零基础入门到精通全套教程!带你真正掌握WPS办公! 内含Excel基础操作、函数设计、数据透视表等

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
云朵浏览器入口合集
云朵浏览器入口合集

本专题整合了云朵浏览器入口合集,阅读专题下面的文章了解更多详细地址。

0

2026.01.20

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

20

2026.01.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

62

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

87

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

39

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

10

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

13

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

19

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

160

2026.01.18

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号