Twig: 블록 및 중첩으로 WordPress 개발 시작

이전 기사에서는 Timber를 통해 WordPress와 Twig 템플릿 엔진을 통합하는 방법과 개발자가 PHP 파일에서 Twig 파일로 데이터를 보내는 방법을 다루었습니다. Twig를 사용하여 기본 템플릿을 만드는 방법과 이 DRY 기술의 장점, Timber-Twig WordPress Cheatsheet에 대해 논의해 보겠습니다.

Twig에서 기본 템플릿 만들기

Twig는 DRY(Don't Repeat Yourself) 원칙을 따릅니다. Twig의 가장 중요한 기능 중 하나는 중첩 및 다중 상속이 가능한 기본 템플릿입니다. 대부분의 사람들은 선형 방식으로 PHP 포함을 사용하지만, 페이지 템플릿을 구체적으로 제어하기 위해 무제한 수준의 중첩 블록을 만들 수 있습니다.

기본 템플릿을 여러 블록이 포함된 상위 템플릿으로 생각하세요. 하위 템플릿은 상위 템플릿을 확장하고 코드를 다시 작성하지 않고도 그 안의 블록을 수정할 수 있습니다. 이는 두 템플릿 모두 유사합니다.

부모 또는 기본 템플릿 예인 base.twig 文件。您可以将其与其他 Twig 模板一起放置在视图文件夹中。您可以在任何 Twig 模板中调用此文件，并将其用作该特定 Twig 文件的父模板。键入以下代码行以创建 views 文件夹。此基本模板将为您的 WordPress 主题提供基本结构。这是一个简单的 base.twig 파일의 코드를 살펴보겠습니다.

Twig의 댓글: {# 基本模板：base.twig #}

{# comment here #} 구문을 사용하여 Twig에서 댓글을 작성할 수 있습니다. 템플릿의 일부 줄을 주석 처리하려면 주석 구문 {# ... #}을 사용하세요. 이는 다른 템플릿 디자이너나 자신에게 정보를 디버깅하거나 추가하는 데 유용합니다. 1행에서 주석을 찾을 수 있습니다.

차단: {% block html_head_container %} {% endblock %}

Twig and Timber의 전체 아이디어는 WordPress의 모듈식 코딩 접근 방식을 중심으로 전개됩니다. Twig에서 데이터를 컴포넌트나 블록의 형태로 처리한다는 아이디어에 대해 계속해서 글을 써왔습니다.

블록은 상속에 사용되며 자리표시자와 대체 역할을 모두 수행합니다. 확장 태그에 대한 문서에 자세히 설명되어 있습니다.

{% block add_block_name_here %} 阻止此处的内容 { % endblock % }

위에 작성된 코드에서 13번째 줄부터 18번째 줄까지 이어지는 html_head_container 的块，它跨越第 3 行到第 7 行。扩展此 base.twig 基本模板的任何模板都可以继承同一块的内容或修改它以添加其他内容。还有另一个名为 content {% block content %}라는 블록을 찾을 수 있습니다.

마찬가지로 블록 생성 개념이 더욱 확장되었으며 중첩 블록을 무제한으로 생성할 수도 있습니다. 이것이 진정한 DRY 원리입니다.

다음 문장이 포함되어 있습니다: {% include "header.twig" %}

Twig 템플릿에는 PHP에서와 마찬가지로 다른 Twig 템플릿이 포함될 수 있습니다. 이 base.twig 파일은 base.twig 文件将是一个通用包装器，如果没有它的页眉和页脚文件，它是不完整的。因此，语法 {% include "file.twig" %}header

footer
• 파일이 없으면 불완전한 범용 래퍼입니다. 따라서 {% include "file.twig" %} 구문은 두 가지 다른 Twig 템플릿을 포함하는 데 도움이 됩니다. { % include "header.twig" %}
• 헤더 템플릿 {% include "footer.twig" %} 5행.

23행.

확장 기본 템플릿

base.twig 文件作为父模板，并将内容块留空。该块可以在任何会修改它的自定义 Twig 文件中使用，并且基本模板的其余部分将按原样继承。例如，让我们创建一个 single.twig 文件，该文件将扩展 base.twig 模板并修改 content

우리는 single.twig 文件。在第 3 行，该模板扩展为 base.twig 作为其父模板或基本模板。 extends블록을 만들었습니다.

이 코드는 사용자 정의 header 和 footer 相关的所有详细信息均继承自 base.twig 文件，该文件是父模板，而 content 태그를 사용하여 다른 템플릿에서 템플릿을 확장할 수 있음을 보여줍니다.

여기서

简要回顾！

在我的上一篇文章中，我创建了一条欢迎消息，该消息仅通过演示网站主页上的 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>{{ 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()) => <body class="{{ 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>{{ post.title }}</h2>        
</section>

保存，前端会显示这样的帖子标题：

轮到你了！

今天，您在构建 WordPress 主题时见证了 Timber 和 Twig 的 DRY 原则的实际实施。阅读本教程并尝试实现它，如果您有任何问题，请告诉我。您可以在此 GitHub 存储库的 WP Cheatsheet 分支中找到完整的代码。

在下一篇也是上一篇文章中，我将讨论如何在基于 Twig 的 WordPress 模板中处理图像和菜单。在此之前，请在 Twitter 上与我联系以获取您问题的答案，或在此处发布问题。

위 내용은 Twig: 블록 및 중첩으로 WordPress 개발 시작의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!