用Twig启动WordPress开发：入门

最新推荐文章于 2020-06-11 20:44:10 发布

cunjie3951

最新推荐文章于 2020-06-11 20:44:10 发布

阅读量264

点赞数

文章标签： python java vue php js ViewUI

现在我们知道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

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Twig启动WordPress开发：入门

现在我们知道Twig以及WordPress插件Timber可以帮助开发人员在开发WordPress主题时编写模块化代码。使用这种模块化方法，您可以分别处理Web应用程序的逻辑层和视图层。让我们跳到一些技术性更强的东西：创建Twig模板，将HTML转换为Twig文件，以及如何使用Twig模板呈现逻辑或数据。安装木材首先，我将安装Timber，这是一个WordPress插件，可帮助将T...
复制链接

扫一扫