用Twig启动WordPress开发:入门
现在我们知道Twig以及WordPress插件Timber可以帮助开发人员在开发WordPress主题时编写模块化代码。 使用这种模块化方法,您可以分别处理Web应用程序的逻辑层和视图层。 让我们跳到一些技术性更强的东西:创建Twig模板,将HTML转换为Twig文件,以及如何使用Twig模板呈现逻辑或数据。
安装木材
首先,我将安装Timber,这是一个WordPress插件,可帮助将Twig模板引擎与WP集成。 所以,让我们开始吧。
- 登录到WordPress仪表板。
- 转到插件>添加新内容 。
- 搜索Timber插件 。
- 安装并激活插件。
安装Timber后,您现在可以开始将模板文件拆分为数据和查看文件。
创建树枝模板
在我们开始创建Twig模板之前,我假设您具有某种本地WordPress设置。 对于此特定教程,我的设置是:
- 本地WP安装(我正在使用ServerPress的DesktopServer)。
- 安装并激活了木材插件。
- 可选:任何基础/入门主题(我使用自己的主题,即Neat )。
UpStatement还构建了Timber Starter主题 。
让我们开始。 我想在首页顶部显示欢迎消息。 如果没有Twig,我将如何处理? 可能像我在下面的代码示例中所做的那样,我将在HTML文件中包含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 docs中对其进行阅读。 我们可以将主题的views文件夹中存在的任何Twig文件的名称传递给此函数。
让我们在index.php
文件中呈现欢迎消息。
<?php
/*** Homepage*/
get_header();// Timber Render.Timber::render( 'welcome.twig' );get_footer();
Timber渲染welcome.twig
文件,加载HTML并在前端显示新的修改后的视图层,如下所示:
render()
函数将welcome.twig
作为其参数,但是只要twig模板位于名为views的文件夹中,它就会自动读取此文件。
如果要为文件夹使用自定义名称/路径,则必须提供该文件夹的路径。 例如,我在主题的根目录中创建了一个twig文件夹,并将其添加到render函数的参数中。
<?php Timber::render('twig/welcome.twig'); ?>
官方装货单
Timber将首先查看子主题,然后回退到父主题(与WordPress逻辑相同)。 官方加载顺序为:
- 用户定义的位置
- 调用PHP脚本的目录(但不是主题)
- 儿童主题
- 父主题
- 调用PHP脚本的目录(包括主题)
将项目2插入其他项目的上方,因此,如果您在插件中使用Timber,它将使用插件目录中的树枝文件。
因此,现在index.php文件中没有HTML,并且它正在呈现Twig模板。
现在,让我们将一些动态数据从index.php
发送到welcome.twig
文件,并使用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'
的变量$var
。 在第14行,我创建了一个等于$var
的键the_message
。
在第17行,我用welcome.twig
文件调用了render函数,但是这一次,它需要一个附加参数,即$context
数组。 这个新参数实际上具有Timber将要从PHP文件发送到Twig文件的数据。
因此,我们定义了上下文数组并添加了一条动态消息(您可以通过向其添加某种逻辑来向不同的用户显示不同的消息,例如显示当前用户的名字)。
模板文件
现在我们需要在Twig文件中使用该数据,即the_message
。 我们可以在Twig模板中通过在其周围放置双括号来回显变量。 例如,要在树枝文件中回显$ var,我们可以编写{{ var }}
。 那正是我所做的。
<!-- Message Template -->
<section class="message"><h2>{{ the_message }}</h2>
</section>
the_message
的值将被打印在h2标签内。 我知道,就这么简单,并且代码看起来很干净。
而已! 保存代码并在前端查看动态欢迎消息。 这是最终的屏幕截图。
结论
总而言之,现在您可以使用PHP文件对逻辑进行编码并向包含HTML的Twig模板提供数据,并在双括号内呈现Twig变量或函数。
这种模块化方法可以为WordPress主题中的每个组件生成单独的模板文件。 考虑拥有一个message.twig组件,您可以在主题中的任何位置使用该组件显示任意次数的任意消息。
这是Twig with Timber的基本实现。 但是,在接下来的两篇文章中,我将撰写有关Timber WordPress备忘单,使用Timber管理图像以及在不使用疯狂的Walker函数的情况下创建菜单的信息。
如有任何疑问,请将其发布在下面的评论中,或在Twitter上进行推广。 您也可以在此GitHub存储库中查看我的主题代码。
翻译自: https://code.tutsplus.com/articles/kick-start-wordpress-development-with-twig-getting-started--cms-25690
用Twig启动WordPress开发:入门相关推荐
- WordPress开发入门08:自定义函数和WordPress钩子
当我们创建自定义主题或插件时,通常必须编写自己的PHP代码.这些代码通常存储在自定义函数中.我们知道函数是可复用的代码块,只要你需要就可以重复调用. 现在来看看几个WordPress常见的使用自定义函 ...
- 【鸿蒙OS开发入门】13 - 启动流程代码分析之第一个用户态进程:init 进程 之 init 任务详解
[鸿蒙OS开发入门]13 - 启动流程代码分析之第一个用户态进程:init 进程 之 init 任务详解 一. /etc/init.cfg 系统默认cfg:启动lo回环网卡 1.1 init.Hi35 ...
- 【鸿蒙OS开发入门】06 - 启动流程代码分析之KernelOS:之启动Linux-4.19 Kernel内核 启动init进程
[鸿蒙OS开发入门]06 - 启动流程代码分析之KernelOS:之启动Linux-4.19 Kernel内核 一.head.S 启动start_kernel() 1.1 start_kernel() ...
- PHPWeb开发入门体验学习笔记
PHPWeb开发入门体验学习笔记 4 一.PHP web应用开发须知 1.入门要点 程序员三个阶段:码农(速成技能)->工程师(长期知识)->专家(研究论文) 编程三要素:声明变量(系统. ...
- 使用VVV进行WordPress开发
Japh 在上一篇文章中已经解释了基本原理,并最终说服了我们使用Vagrant将我们的开发环境设置为与远程Web服务器接近. 这篇文章已有两年多的历史了,但是今天这个想法仍然有用. 更重要的是,Vag ...
- 如何在万神殿上自动化和优化WordPress开发和测试
在上一教程中 ,我指导您完成了使用Pantheon上的" Dev-Test-Live"三环境设置创建和维护可安全生产的WordPress网站的步骤. 在这样的配置中,您总是在开发环 ...
- 《Android应用开发入门经典(第3版)》——第6.1节创建演示应用
本节书摘来自异步社区<Android应用开发入门经典(第3版)>一书中的第6章,第6.1节创建演示应用,作者 [美]Carmen Delessio , Lauren Darcey , Sh ...
- 报表引擎API开发入门— EJB程序数据源
2019独角兽企业重金招聘Python工程师标准>>> 我们前面讲了几个数据源,今天我们来讲一下EJB数据源,这篇讲完我们数据源这部分就讲完了.数据连接不需要直接访问数据库,而是使用 ...
- Arduino可穿戴开发入门教程(大学霸内部资料)
Arduino可穿戴开发入门教程(大学霸内部资料) 试读下载地址:链接:http://pan.baidu.com/s/1mg9To28 密码:z5v8 介绍:Arduino可穿戴开发入门教程(大学霸内 ...
最新文章
- php中qq授权登录,ThinkPHP利用QQ互联实现网站第三方登录(QQ登录)
- 使用DIV之后 table何去何从
- android3.2以上切屏禁止onCreate()
- 【实体对齐·HGCN】Jointly Learning Entity and Relation Representations for Entity Alignment
- linux下keytool生成证书_生成证书命令keytool
- 记一次艰辛的vsftpd搭建,排错过程
- cad快速看图能合并图纸吗_【CAD快速看图电脑版】合并图纸、2张图之间复制
- 丰厚资本杨守彬:创业就是从地狱到天堂,路过人间而已
- MC9S中断函数编写
- 公开密匙(public key)和专用密匙(private key)
- 【Codeforces】2015-2016 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2015) A Adjoin the Netwo
- MMDetection学习教程(一)
- 使用电信光猫加路由器实现内网穿透,外网访问内网
- ZJU PTA ds 6-1 Percolate Up and Down
- 实验二 面向对象(一)
- C++中抽象类的简单使用
- 江西省2021年工业互联网安全技术技能大赛
- 2005年图灵奖--彼得·诺尔简介
- 进程间通信的方式(附代码分析)
- R语言epiDisplay包的kap函数计算配对列联表的计算一致性的比例以及Kappa统计量的值(总一致性、期望一致性)、使用xtabs函数生成二维列联表、使用wttable参数设置权重表参数为w2