使用Twig和Timber图像菜单和用户，快速启动WordPress开发双恒网络|食谱网站源码_食谱

到目前为止，您已经了解了通过Timber使用Twig的基本概念，同时构建了模块化WordPress主题。我们还基于DRY原则，使用Twig研究了块嵌套和多重继承。今天，我们将探讨如何通过Timber插件使用Twig在主题中显示附件图像、WordPress菜单和用户。

图像是任何WordPress主题的重要元素之一。在常规的WordPress编码实践中，图像与PHP集成在正常的HTML图像标签内。但是，Timber提供了一种相当全面的方法来处理img（图像）标签，该方法是模块化且干净的。

帖子的缩略图字段中附加了图片。这些可以通过{{post.thumbnail}}通过Twig文件轻松检索。就是这么简单！

让我们从一个实际的例子开始。我们的single.php文件如下所示：

由于特色图像附加到帖子数据中，我们现在需要在前端检索它。因此，它的Twig文件single.twig将如下所示：

{#SinlgeTemplate:`single.twig`#}{%extends"base.twig"%}{%blockcontent%}

{%endblock%}在第9行，代码{{post.thumbnail.src}}检索帖子的特色（缩略图）图像并按如下方式显示：

您可以使用此代码语法检索任意数量的缩略图。

使用Timber时，您还可以对这些图像进行更多实验。例如，您还可以通过以下方式调整它们的大小：

通过使用resize()函数，您可以向图像添加新尺寸，其中第一个参数是width，第二个参数是高度。如果您想按比例缩放图像，请忽略height属性。现在语法变成：

前端显示相同的图像，如下所示：

如果您想探索更多内容，请尝试图像食谱。

考虑这样一个场景：开发者想要通过图像ID获取图像，或者想要通过URL显示外部图像等。对于这种扩展方法，Timber提供了一个类，TimberImage()，表示从WordPress检索到的图像。

让我们以single.php文件为例，现在看起来像这样：

存储在$contextcustom_img元素中的值，即{{custom_img}}，将通过其ID检索图像以显示在前端，如下所示：

要通过外部URL替换检索图像，您可以遵循以下语法。

要探索此功能的更多功能，您可以查看文档。

现在，您将如何使用Twig模板渲染WordPress菜单？这是一件很棘手的事情。但是，坚持住！Timber为您提供了TimberMenu()类，它可以帮助您将Twig文件内的WordPress菜单呈现为完整的循环。我们来看一下。

检索菜单项的整个概念都围绕菜单对象。有两种定义其上下文的方法。第一个是将菜单对象添加到全局get_context()函数中，使菜单对象在每个页面上可用，就像我在functions.php文件中所做的那样。其次，您可以通过ID为特定PHP模板添加特定菜单。

无论采用哪种方法，一旦菜单可供Timber$context数组使用，您就可以从中检索所有菜单项。但我更喜欢在全球范围内定义它。因此，转到functions.php文件并粘贴以下代码：

这将使Twig模板可以使用标准WordPress菜单作为我们可以循环访问的对象。TimberMenu()函数可以采用菜单项或ID等参数。

让我们创建一个名为menu.twig文件的Twig模板。

我继续将menu.twig模板包含在第11行的base.twig模板中。

{#BaseTemplate:`base.twig`#}{%blockhtml_head_container%}{%include'header.twig'%}{%endblock%}{%include"menu.twig"%}{%blockcontent%}

SORRY!Nocontentfound!

{%endblock%}

所以，让我们看一下帖子页面-因为我们的single.twig扩展了base.twig，我们的菜单将自动出现在该页面上。

您可以看到，在我们单个帖子的顶部有一个菜单，其中包含两个父项。

可以使用TimberUser()类从WordPress数据库检索用户。该类采用用户ID或slug作为参数来检索用户。

{#SinlgeTemplate:`single.twig`#}{%extends"base.twig"%}{%blockcontent%}{##}{##}{##}

使用Twig和Timber图像菜单和用户，快速启动WordPress开发双恒网络