您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

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

2024/3/2 6:06:26发布14次查看
现在我们了解到,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 文件看起来像这样。
<?php/** * homepage */get_header(); ?> <div> <?php echo welcome to my blog!; ?> </div><?php get_footer(); ?>
现在,我本地 wordpress 安装的主页在顶部显示一条欢迎消息。这是屏幕截图。
问题这种方法的问题在于我们将数据/逻辑与视图混合在一起。该文件越复杂,维护就越困难,更不用说理解了,例如,如果您在此代码后面添加带有一些参数的 wordpress 循环,然后再进行过滤和分页。除此之外,当您最终得到一些逻辑时,html 中的 php 看起来并不好。
模块化方法为了使其更加模块化,我们可以将主页上的内容视为块或组件的形式。默认情况下可以有两个完整的,即来自 the_loop 的帖子和分页。现在我们想在顶部添加另一个组件,即欢迎消息,让我们为该组件创建一个 twig 文件。
在编辑器中打开一个新的空白文件,然后复制粘贴以下代码行。
<!-- welcome template --><section class=welcome_message> <h2>welcome to my website!</h2></section>
在主题的根目录中创建一个名为 views 的新文件夹,并使用 .twig 扩展名保存此文件。例如,我将文件保存为 welcome.twig。
渲染树枝模板
timber 为我们提供了一些有用的函数,其中之一就是渲染函数。你可以这样称呼它:
timber::render();
该函数最多可以接受四个参数。由于这超出了本文的范围,您可以在 timber 文档中阅读相关内容。我们可以将主题的 views 文件夹中存在的任何 twig 文件的名称传递给此函数。
让我们在 index.php 文件中渲染欢迎消息。
<?php/** * homepage */get_header(); // timber render. timber::render( 'welcome.twig' );get_footer();
timber 渲染 welcome.twig 文件,加载 html 并在前端显示新修改的视图层,如下所示:
render() 函数将 welcome.twig 作为它的参数,但只要树枝模板位于名为 views 的文件夹内,它就会自动读取该文件。
如果您想对文件夹使用自定义名称/路径,则必须提供该文件夹的路径。例如,我在主题的根目录中创建了一个 twig 文件夹,并将其添加到渲染函数的参数中。
<?php timber::render('twig/welcome.twig'); ?>
官方加载顺序
timber 将首先查看子主题,然后回退到父主题(与 wordpress 逻辑相同)。官方的加载顺序是:
用户定义的位置调用php脚本的目录(但不是主题)子主题父主题调用php脚本的目录(包括主题)第 2 项插入到其他项之上,这样如果您在插件中使用 timber,它将使用插件目录中的 twig 文件。
所以,现在index.php文件里面没有html,它正在渲染一个twig模板。
现在让我们将一些动态数据从 index.php 发送到 welcome.twig 文件并使用 timber 进行渲染。
通过 timber 将数据发送到 twig 文件要将数据从 php 文件发送到 twig 文件,您需要定义一个上下文数组。渲染函数采用一组数据来为 twig 模板提供某种上下文。我们将该数组称为 $context,它是一个关联数组,即它占用键值对。
让我们添加一个键值对,作为动态欢迎消息,我们的 php 文件会将其发送到 twig 文件。
数据文件我的 index.php 文件现在看起来像这样。
<?php/** * homepage */get_header(); // context array. $context = array(); // dynamic message. $var = 'dynamic message'; // dynamic data. $context['the_message'] = $var; // render twig file with the give $context array. timber::render( 'welcome.twig', $context );get_footer();
因此,在 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 }}。这正是我所做的。
<!-- message template --><section class=message> <h2>{{ the_message }}</h2></section>
the_message 的值将打印在 h2 标签内。我知道,就是这么简单,而且代码看起来也很干净。
就是这样!保存代码,在前端查看动态欢迎信息。这是最终的屏幕截图。
结论总而言之,现在您可以使用 php 文件来编码逻辑并向 twig 模板提供数据,该模板包含 html 并在双括号内呈现 twig 变量或函数。
这种模块化方法可以为 wordpress 主题中的每个组件生成单独的模板文件。考虑拥有一个 message.twig 组件,您可以在主题中的任何位置使用它来显示您想要的任何消息,任意次数。
这是 twig 与 timber 的基本实现。不过,在接下来的两篇文章中,我将介绍 timber wordpress cheatsheet、使用 timber 管理图像以及在不使用疯狂步行器功能的情况下创建菜单。
如果您有任何疑问,请在下面的评论中发表或在 twitter 上联系。您还可以在此 github 存储库中查看我的主题代码。
以上就是twig 入门:快速启动您的 wordpress 开发的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product