In my previous article, I covered integrating the Twig template engine with WordPress via Timber and how developers can send data from PHP files to Twig files. Let’s discuss how to create a basic template using Twig, the advantages of this DRY technique, and the Timber-Twig WordPress Cheatsheet.
Creating a basic template in Twig
Twig follows the DRY (Don’t Repeat Yourself) principle. One of the most important features of Twig is basic templates with nesting and multiple inheritance. While most people use PHP includes in a linear fashion, you can create unlimited levels of nested blocks to specifically control your page templates.
Think of your base template as a parent template with multiple blocks within it. A child template can extend the parent template and modify any block or blocks within it without rewriting the code, which is similar in both templates.
Let's look at an example parent or base template, the base.twig file. You can place it in the views folder along with other Twig templates. You can call this file in any Twig template and use it as the parent template for that specific Twig file. Type the following lines of code to create the views folder. This basic template will provide the basic structure for your WordPress theme. This is the code for a simple base.twig file.
{# Base Template: base.twig #}
{% block html_head_container %}
{% include 'header.twig' %}
{% endblock %}
<body class="{{body_class}}">
<div class="wrapper">
{% block content %}
<!-- Add your main content here. -->
<p>SORRY! No content found!</p>
{% endblock %}
</div>
<!-- /.wrapper -->
{% include "footer.twig" %}
</body>
</html>
Comments in Twig: {# Base template: base.twig #}
You can write comments in Twig using the {# comment here #} syntax. To comment out some lines in a template, use the comment syntax {# ... #}. This is useful for debugging or adding information to other template designers or yourself. You can find the comment on line 1.
Block: {% block html_head_container %} {% endblock %}
The whole idea of Twig and Timber revolves around the modular coding approach in WordPress. I've been writing back and forth about the idea of handling data in Twig in the form of components or blocks.
blocks are used for inheritance and act as both placeholders and replacements. They are documented in detail in the documentation for extension tags.
{% block add_block_name_here %} Block content here { % endblock % }
In the code written above, you can find a block named html_head_container, which spans lines 3 to 7. Any template that extends this base.twig base template can inherit the same block of content or modify it to add additional content. There is another block called content {% block content %} that spans lines 13 to 18.
Similarly, the concept of creating blocks has been further extended and you can also create unlimited levels of nested blocks. This is the true DRY principle.
Include statements: {% include "header.twig" %}
Twig templates can contain other Twig templates, just like we do in PHP. This base.twig file will be a universal wrapper that is incomplete without its Header and Footer files. Therefore, the syntax {% include "file.twig" %} will help us include two different Twig templates:
- Header template
{ % include "header.twig" %}Line 5. - Footer template (
{% include "footer.twig" %}Line 23.
Extended basic template
We created a base.twig file as the parent template and left the content block empty. This block can be used in any custom Twig file that modifies it, and the rest of the base template will be inherited as-is. For example, let's create a single.twig file that will extend the base.twig template and modify the content block.
{# Single Template: `single.twig` #}
{% extends "base.twig" %}
{% block content %}
<div class="single_content">
<h1 id="post-title">{{ post.title }}</h1>
<p>{{ post.get_content }}</p>
</div>
{% endblock %}
This code displays a custom single.twig file. On line 3, the template expands to base.twig as its parent or base template. The extends tag can be used to extend a template from another template.
Here, all details related to header and footer are inherited from the base.twig file, which is the parent template, and The content block will be replaced with the post title and content. How fun is this?
Wood’s WordPress Cheat Sheet
The developers of Timber have ensured that it complements WordPress in every possible way, from core to end-user. Although the conversion syntax for WordPress functions in Timber is somewhat different, it is well documented. At the end of this article, I will share a list of some transformations of WordPress functions and their Timber equivalents. Let's review.
简要回顾！
在我的上一篇文章中，我创建了一条欢迎消息，该消息仅通过演示网站主页上的 PHP 字符串填充。其代码可以在 GitHub 上的分支中找到。让我们再次重复此过程，但使用不同且更具技术性的方法。
现在，我将显示相同的欢迎消息，但这次是通过创建一个填充在主页上的新页面。
检索 Twig 中的 WordPress 函数
创建一个标题为“欢迎来到我的博客！”的新页面。并在点击发布按钮之前在其中添加一些内容。
现在让我们在主页上显示这个欢迎页面的内容。为此，请再次转到 index.php 文件并添加以下代码行。
<?php /** * Homepage */ // Context array. $context = array(); // Add the page ID which is 4 in my case. $context[ 'welcome_page' ] = Timber::get_post( 4 ); // Timber render(). Timber::render( 'welcome.twig', $context );
在这里，我添加了一个 $context 数组，在其中添加了一个元素 welcome_page 然后使用 get_post() 函数来获取我刚刚创建的页面。为此，我提交了页面 ID，在本例中为 4。
在 welcome.twig 文件中，让我们查看 print_r 元素 welcome_page 并看看我们得到了什么数据。我的welcome.twig 文件目前看起来像这样。
{# Message Template: `welcome.twig` #}
<section class="message">
<pre class="brush:php;toolbar:false">
<code>{{ welcome_page | print_r }}</code>
我可以确认 $context 数组中的这个元素现在有一个 ID 为 4 的特定页面的 TimberPost 对象。
从这里我们可以获得所有可以在前端显示的属性。例如，我只想显示页面标题和内容。所以现在我的 welcome.twig 文件如下所示：
{# Message Template: `welcome.twig` #}
<section class="message">
<h2 id="welcome-page-title">{{ welcome_page.title }}</h2>
<p>{{ welcome_page.content }}</p>
</section>
主页上有我们需要的信息。
WordPress 备忘单
正如我之前所说，Timber 为您提供了一些 WordPress 函数的便捷转换。这些功能可以帮助您获取与以下内容相关的信息：
- 博客
- 身体课程
- 页眉/页脚
get_context() 函数
有一个 Timber::get_context() 函数，用于检索开发人员希望在整个网站的前端显示的网站信息负载。文档是这样解释的：
这将返回一个对象，其中包含我们在整个站点中需要的许多常见内容。像你的 nav、wp_head 和 wp_footer 这样的东西你每次都会想要开始（即使你稍后覆盖它们）。您可以执行$context = Timber::get_context(); print_r( $context );查看内部内容或打开 timber.php 自行检查。
<?php $context = Timber::get_context(); ?>
不仅如此，您还可以通过方便的过滤器将您自己的自定义数据添加到此函数中。
<?php
/**
* Custom Context
*
* Context data for Timber::get_context() function.
*
* @since 1.0.0
*/
function add_to_context( $data ) {
$data['foo'] = 'bar';
$data['stuff'] = 'I am a value set in your functions.php file';
$data['notes'] = 'These values are available everytime you call Timber::get_context();';
$data['menu'] = new TimberMenu();
return $data;
}
add_filter( 'timber_context', 'add_to_context' );
您可以在下面找到更多与此类似的转换，这些转换可以与 Timber 一起使用。
博客信息
-
blog_info('charset')=>{{ site.charset }} -
blog_info('描述')=>{{ site.description }} -
blog_info('站点名称')=>{{ site.name }} -
blog_info('url')=>{{ site.url }}
身体等级
-
implode(' ', get_body_class())=>
主题
-
get_template_directory_uri()=>{{ theme.link }}（用于父主题） -
get_template_directory_uri()=>{{ theme.parent.link }}（用于子主题） -
get_stylesheet_directory_uri()=>{{ theme.link }} -
get_template_directory()=>{{ theme.parent.path }} -
get_stylesheet_directory()=>{{ theme.path }}
wp_函数
-
wp_head()=>{{ wp_head }} -
wp_footer()=>{{ wp_footer }}
让我们从博客信息开始尝试一些功能。将 foo 写入 {{ site.name }}。
前端将显示这样的站点标题：
Timber 还具有一些函数转换，可以通过 TimberPost( )。在解释这个函数的用法之前，我们先列出与其相关的函数转换。
发布
-
the_content()=>{{ post.content }} -
the_permalink()=>{{ post.permalink }} -
the_title()=>{{ post.title }} -
get_the_tags()=>{{ post.tags }}
用法
在 single.php 文件中使用此代码。
<?php $context = Timber::get_context(); $context[ 'post' ] = new TimberPost(); Timber::render( 'welcome.twig', $context ); ?>
现在让我们测试 Twig 文件中的 {{ post.title }} 函数。
<section class="single_post">
<h2 id="post-title">{{ post.title }}</h2>
</section>
保存，前端会显示这样的帖子标题：
轮到你了！
今天，您在构建 WordPress 主题时见证了 Timber 和 Twig 的 DRY 原则的实际实施。阅读本教程并尝试实现它，如果您有任何问题，请告诉我。您可以在此 GitHub 存储库的 WP Cheatsheet 分支中找到完整的代码。
在下一篇也是上一篇文章中，我将讨论如何在基于 Twig 的 WordPress 模板中处理图像和菜单。在此之前，请在 Twitter 上与我联系以获取您问题的答案，或在此处发布问题。
The above is the detailed content of Jump-start WordPress development with Twig: Blocks and Nesting. For more information, please follow other related articles on the PHP Chinese website!
Go语言中的泛型函数是否可以相互嵌套？Apr 16, 2024 pm 12:09 PM嵌套泛型函数Go1.18中的泛型函数允许创建适用于多种类型的函数，而嵌套泛型函数可以创建可重用的代码层级结构：泛型函数可以相互嵌套，创建一个嵌套的代码重用结构。通过将过滤器和映射函数组成管道，可以创建可重复使用的类型安全管道。嵌套泛型函数提供了创建可重用、类型安全的代码的强大工具，从而提高代码效率和维护性。
如何在CakePHP中使用Twig？Jun 05, 2023 pm 07:51 PM在CakePHP中使用Twig是一种将模板和视图分离的方法，能够使代码更加模块化和可维护，本文将介绍如何在CakePHP中使用Twig。一、安装Twig首先在项目中安装Twig库，可以使用Composer来完成这个任务。在控制台中运行以下命令：composerrequire"twig/twig:^2.0"这个命令会在项目的vendor
如何在PHP中使用Twig模板引擎进行Web开发Jun 25, 2023 pm 04:03 PM随着Web开发技术的不断发展，越来越多的开发者开始寻找更加灵活、高效的模板引擎来进行Web应用的开发。其中，Twig是一款十分优秀、流行的PHP模板引擎，它基于Symfony框架开发并支持无限扩展，非常适合用于构建复杂的Web应用程序。本篇文章将介绍如何在PHP中使用Twig模板引擎进行Web开发。一、Twig模板引擎简介Twig是由FabienPoten
如何使用Vue表单处理实现表单的递归嵌套Aug 11, 2023 pm 04:57 PM如何使用Vue表单处理实现表单的递归嵌套引言:随着前端数据处理和表单处理的复杂性不断增加，我们需要通过一种灵活的方式来处理复杂的表单。Vue作为一种流行的JavaScript框架，为我们提供了许多强大的工具和特性来处理表单的递归嵌套。本文将向大家介绍如何使用Vue来处理这种复杂的表单，并附上代码示例。一、表单的递归嵌套在某些场景下，我们可能需要处理递归嵌套的
PHP8.0中的模板库：TwigMay 14, 2023 am 08:40 AMPHP8.0中的模板库：TwigTwig是一款目前广泛用于PHPWeb应用程序中的模板库，具有可读性高、易于使用和可扩展性强等特点。Twig使用简单易懂的语法，可以帮助Web开发人员以清晰、有序的方式组织和输出HTML,XML,JSON等文本格式。本篇文章将为您介绍Twig的基本语法和特点以及它在PHP8.0中的使用。Twig的基本语法Twig采用类似于P
使用Twig和Timber图像、菜单和用户，快速启动WordPress开发Sep 04, 2023 pm 03:37 PM到目前为止，您已经了解了通过Timber使用Twig的基本概念，同时构建了模块化WordPress主题。我们还基于DRY原则，使用Twig研究了块嵌套和多重继承。今天，我们将探讨如何通过Timber插件使用Twig在主题中显示附件图像、WordPress菜单和用户。木材中的图像图像是任何WordPress主题的重要元素之一。在常规的WordPress编码实践中，图像与PHP集成在正常的HTML图像标签内。但是，Timber提供了一种相当全面的方法来处理img（图像）标签，该方法是模块化且干净的。
如何在C++中实现嵌套异常处理？Jun 05, 2024 pm 09:15 PM嵌套异常处理在C++中通过嵌套的try-catch块实现，允许在异常处理程序中引发新异常。嵌套的try-catch步骤如下：1.外部try-catch块处理所有异常，包括内部异常处理程序抛出的异常。2.内部try-catch块处理特定类型的异常，如果发生超出范围的异常，则将控制权交给外部异常处理程序。
PHP中的高级皮肤：如何使用TwigJun 19, 2023 pm 04:03 PM在Web开发中，页面的呈现是至关重要的。对于PHP开发人员，他们在开发一个动态网站时，容易深陷在大量的HTML标记和PHP代码中。而一旦需要修改样式或布局，就必须一遍遍地修改代码，这样的维护成本极高。为了解决这个问题，现代的PHP框架通常提供了一个模板引擎。其中，Twig是其中一个较为流行的模板引擎。在本文中，我们将介绍如何以及为什么使用Twig来进行PHP
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
SublimeText3 English version
Recommended: Win version, supports code prompts!
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SublimeText3 Chinese version
Chinese version, very easy to use
