Twig 시작하기: WordPress 개발 시작하기

이제 우리는 WordPress 플러그인 Timber와 함께 Twig가 WordPress 테마를 개발할 때 개발자가 모듈식 코드를 작성하는 데 도움이 될 수 있다는 것을 알고 있습니다. 이 모듈식 접근 방식을 사용하면 웹 애플리케이션의 논리와 뷰 계층을 별도로 처리할 수 있습니다. 좀 더 기술적인 내용인 Twig 템플릿 생성, HTML을 Twig 파일로 변환, Twig 템플릿을 사용하여 논리 또는 데이터를 렌더링하는 방법으로 넘어가겠습니다.

나무 설치

먼저 Twig 템플릿 엔진을 WP와 통합하는 데 도움이 되는 WordPress 플러그인인 Timber를 설치하겠습니다. 이제 시작하겠습니다.

• WordPress 대시보드에 로그인하세요.
• 플러그인 > 새 플러그인 추가로 이동하세요.
• Timber 플러그인을 검색하세요.
• 플러그인을 설치하고 활성화하세요.

Timber가 설치되면 이제 템플릿 파일을 data 및 view 파일로 분할할 수 있습니다.

브랜치 템플릿 만들기

Twig 템플릿 생성을 시작하기 전에 이미 일종의 로컬 WordPress 설정이 있다고 가정하겠습니다. 이 특정 튜토리얼의 설정은 다음과 같습니다.

• Localhost WP 설치(저는 ServerPress의 DesktopServer를 사용하고 있습니다).
• Timber 플러그인이 설치 및 활성화되었습니다.
• 선택 사항: 모든 기본/스타터 테마(저는 자체 테마인 Neat를 사용합니다).

UpStatement는 Timber Starter 테마도 구축했습니다.

시작해 보세요. 홈페이지 상단에 환영 메시지를 표시하고 싶습니다. Twig 없이는 무엇을 할 수 있을까요? 아마도 아래 코드 샘플에서 했던 것처럼 PHP 파일에 HTML 코드를 포함하고 환영 메시지를 표시할 것입니다. 내 index.php 파일은 다음과 같습니다.

으아아아

이제 로컬 WordPress 설치 홈페이지 상단에 환영 메시지가 표시됩니다. 여기 스크린샷이 있습니다.

질문

이 접근 방식의 문제점은 데이터/논리를 뷰와 혼합한다는 것입니다. 파일이 복잡할수록 유지 관리도 더 어려워집니다. 예를 들어 일부 매개 변수를 사용하여 이 코드 뒤에 WordPress 루프를 추가한 다음 필터링 및 페이지 매김을 수행하는 경우를 이해하는 것은 말할 것도 없습니다. 게다가 HTML의 PHP는 최종적으로 로직을 얻을 때 보기에 좋지 않습니다.

모듈식 접근 방식

더 모듈화하려면 홈페이지의 콘텐츠를 블록이나 구성 요소로 생각할 수 있습니다. 기본적으로 The_Loop의 게시물과 페이지 매김이라는 두 가지 완전한 항목이 있을 수 있습니다. 이제 맨 위에 또 다른 구성 요소인 환영 메시지를 추가하고 싶습니다. 이 구성 요소에 대한 Twig 파일을 만들어 보겠습니다.

편집기에서 새 빈 파일을 열고 다음 코드 줄을 복사하여 붙여넣습니다.

으아아아

테마의 루트 디렉터리에 views라는 새 폴더를 만들고 .twig 扩展名保存此文件。例如，我将文件保存为 welcome.twig를 사용하세요.

렌더링 트리 분기 템플릿

Timber는 몇 가지 유용한 기능을 제공하며 그 중 하나가 렌더링 기능입니다. 다음과 같이 호출할 수 있습니다:

으아아아

이 함수는 최대 4개의 매개변수를 사용할 수 있습니다. 이는 이 기사의 범위를 벗어나므로 Timber 문서에서 해당 내용을 읽을 수 있습니다. 테마의 views 폴더에 있는 모든 Twig 파일의 이름을 이 함수에 전달할 수 있습니다.

환영 메시지를 index.php 파일로 렌더링해 보겠습니다.

으아아아

Timber는 welcome.twig 파일을 렌더링하고 HTML을 로드한 후 다음과 같이 프런트엔드에 새로 수정된 뷰 레이어를 표시합니다.

render() 함수는 render() 函数将 welcome.twig를 매개변수로 사용하지만 나뭇가지 템플릿이 views라는 폴더 안에 있는 한 자동으로 읽혀집니다. 문서.

폴더에 사용자 정의 이름/경로를 사용하려면 폴더 경로를 제공해야 합니다. 예를 들어 테마 루트에 twig 폴더를 생성하고 렌더링 함수의 매개변수에 추가했습니다.

으아아아

공식 로딩 순서

Timber는 먼저 하위 테마를 살펴본 다음 상위 테마로 돌아갑니다(WordPress와 동일한 논리). 공식 로딩 순서는 다음과 같습니다:

1. 사용자 정의 위치
2. PHP 스크립트를 호출하는 디렉토리(테마는 아님)
3. 하위 테마
4. 상위 주제
5. PHP 스크립트를 호출하는 디렉토리(테마 포함)

항목 2는 플러그인에서 Timber를 사용하는 경우 플러그인 디렉토리에 있는 twig 파일을 사용하도록 다른 항목 위에 삽입됩니다.

이제 index.php 파일에는 HTML이 없으며 Twig 템플릿을 렌더링하고 있습니다.

이제 index.php 发送到 welcome.twig의 일부 동적 데이터를

파일로 보내고 Timber를 사용하여 렌더링해 보겠습니다.

🎜

通过 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'。 在第 14 行，我创建了一个键 the_message ，它等于 $var。

在第 17 行，我使用 welcome.twig 文件调用了渲染函数，但这一次，它需要一个额外的参数，即 $context 数组。这个新参数实际上包含 Timber 将从 PHP 文件发送到 Twig 文件的数据。

因此，我们定义了上下文数组并添加了动态消息（您可以通过向其添加某种逻辑来向不同的用户显示不同的消息，例如显示当前用户的名字）。

模板文件

现在我们需要在 Twig 文件中使用此数据，即 the_message。我们可以通过在 Twig 模板中放置双括号来回显变量。例如，要在 twig 文件中回显 $var，我们可以编写 {{ var }}。这正是我所做的。

<!-- Message Template -->
<section class="message">
        <h2>{{ the_message }}</h2>
</section>

the_message 的值将打印在 h2 标签内。我知道，就是这么简单，而且代码看起来也很干净。

就是这样！保存代码，在前端查看动态欢迎信息。这是最终的屏幕截图。

结论

总而言之，现在您可以使用 PHP 文件来编码逻辑并向 Twig 模板提供数据，该模板包含 HTML 并在双括号内呈现 Twig 变量或函数。

这种模块化方法可以为 WordPress 主题中的每个组件生成单独的模板文件。考虑拥有一个 message.twig 组件，您可以在主题中的任何位置使用它来显示您想要的任何消息，任意次数。

这是 Twig 与 Timber 的基本实现。不过，在接下来的两篇文章中，我将介绍 Timber WordPress Cheatsheet、使用 Timber 管理图像以及在不使用疯狂步行器功能的情况下创建菜单。

如果您有任何疑问，请在下面的评论中发表或在 Twitter 上联系。您还可以在此 GitHub 存储库中查看我的主题代码。

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