Erste Schritte mit Twig: Starten Sie Ihre WordPress-Entwicklung

Jetzt wissen wir, dass Twig zusammen mit dem WordPress-Plugin Timber Entwicklern dabei helfen kann, bei der Entwicklung von WordPress-Themes modularen Code zu schreiben. Dieser modulare Ansatz ermöglicht es Ihnen, die Logik- und Anzeigeebenen Ihrer Webanwendung separat zu verwalten. Kommen wir zu etwas Technischerem: dem Erstellen von Twig-Vorlagen, dem Konvertieren von HTML in Twig-Dateien und der Verwendung von Twig-Vorlagen zum Rendern von Logik oder Daten.

Holz einbauen

Zuerst werde ich Timber installieren, ein WordPress-Plugin, das dabei hilft, die Twig-Vorlagen-Engine in WP zu integrieren. Also, fangen wir an.

• Melden Sie sich bei Ihrem WordPress-Dashboard an.
• Gehen Sie zu Plugins > Neues Plugin hinzufügen.
• Suchen Sie nach dem Timber-Plugin.
• Installieren und aktivieren Sie das Plugin.

Sobald Timber installiert ist, können Sie jetzt mit der Aufteilung Ihrer Vorlagendateien in Daten und Ansichtsdateien beginnen.

Branchenvorlage erstellen

Bevor wir mit der Erstellung der Twig-Vorlage beginnen, gehe ich davon aus, dass Sie bereits über eine Art lokales WordPress-Setup verfügen. Für dieses spezielle Tutorial ist mein Setup:

Localhost WP-Installation (ich verwende DesktopServer von ServerPress).
Timber-Plugin installiert und aktiviert.
Optional: Jedes Basis-/Starterthema (ich verwende mein eigenes, Neat).

UpStatement hat auch ein Timber Starter-Theme erstellt.

Lass uns anfangen. Ich möchte oben auf der Startseite eine Willkommensnachricht anzeigen. Was würde ich ohne Twig tun? Vielleicht würde ich den HTML-Code in die PHP-Datei einfügen und die Willkommensnachricht wiederholen, wie ich es im Codebeispiel unten getan habe. Meine

-Datei sieht so aus. index.php

<?php
/**
 * Homepage
 */
get_header(); ?>

    <div> <?php echo "Welcome to my blog!"; ?> </div>

<?php get_footer(); ?>

Auf der Startseite meiner lokalen WordPress-Installation wird jetzt oben eine Willkommensnachricht angezeigt. Hier ist ein Screenshot.

Frage

Das Problem bei diesem Ansatz besteht darin, dass wir Daten/Logik mit Ansichten vermischen. Je komplexer die Datei ist, desto schwieriger wird es, sie zu pflegen, geschweige denn zu verstehen, wenn Sie beispielsweise hinter diesem Code eine WordPress-Schleife mit einigen Parametern und dann Filterung und Paginierung hinzufügen. Abgesehen davon sieht PHP in HTML nicht gut aus, wenn man endlich etwas Logik versteht.

Modularer Ansatz

Um es modularer zu gestalten, können wir uns die Inhalte auf der Homepage als Blöcke oder Komponenten vorstellen. Standardmäßig kann es zwei vollständige Einträge geben: Beiträge und Paginierung von The_Loop. Jetzt möchten wir eine weitere Komponente hinzufügen, die Willkommensnachricht. Erstellen wir eine Twig-Datei für diese Komponente.

Öffnen Sie eine neue leere Datei im Editor und kopieren Sie die folgenden Codezeilen und fügen Sie sie ein.

<!-- Welcome Template -->
<section class="welcome_message">
        <h2>Welcome to my website!</h2>
</section>

Erstellen Sie einen neuen Ordner mit dem Namen

views im Stammverzeichnis Ihres Themes und verwenden Sie . .twig 扩展名保存此文件。例如，我将文件保存为 welcome.twig

Baumast-Vorlage rendern

Timber bietet uns einige nützliche Funktionen, darunter die Rendering-Funktion. Man kann es so nennen:

Timber::render();

Diese Funktion kann bis zu vier Parameter akzeptieren. Da dies den Rahmen dieses Artikels sprengt, können Sie in der Timber-Dokumentation darüber nachlesen. Wir können den Namen jeder Twig-Datei, die im Ordner

views des Themes vorhanden ist, an diese Funktion übergeben.

Lassen Sie uns die Willkommensnachricht in einer

-Datei rendern. index.php

<?php
/**
 * Homepage
 */
get_header();

    // Timber Render.
	Timber::render( 'welcome.twig' );

get_footer();

Timber rendert die

-Datei, lädt den HTML-Code und zeigt die neu geänderte Ansichtsebene im Frontend wie folgt an: welcome.twig Die Funktion

render() verwendet

als Argument, wird jedoch automatisch gelesen, solange sich die Twig-Vorlage in einem Ordner mit dem Namen render() 函数将 welcome.twigviews the befindet Datei.

Wenn Sie einen benutzerdefinierten Namen/Pfad für einen Ordner verwenden möchten, müssen Sie den Pfad zum Ordner angeben. Ich habe zum Beispiel einen Twig-Ordner im Stammverzeichnis des Themes erstellt und ihn zu den Parametern der Renderfunktion hinzugefügt.

<?php Timber::render('twig/welcome.twig'); ?>

Offizieller Ladebefehl

Timber schaut sich zuerst das untergeordnete Theme an und greift dann auf das übergeordnete Theme zurück (gleiche Logik wie WordPress). Die offizielle Ladereihenfolge lautet:

Benutzerdefinierter Standort
Verzeichnis zum Aufrufen des PHP-Skripts (aber nicht des Themes)
Unterthema
Übergeordnetes Thema
Verzeichnis zum Aufrufen von PHP-Skripten (einschließlich Themes)

Element 2 wird über den anderen Elementen eingefügt, sodass bei Verwendung von Timber in einem Plugin die Twig-Datei im Plugin-Verzeichnis verwendet wird.

Jetzt gibt es also kein HTML in der Datei index.php, sie rendert eine Twig-Vorlage.

Jetzt senden wir einige dynamische Daten von

an die index.php 发送到 welcome.twig-Datei und rendern sie mit 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 存储库中查看我的主题代码。

Das obige ist der detaillierte Inhalt vonErste Schritte mit Twig: Starten Sie Ihre WordPress-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!