Bermula dengan Twig: Lompat Mulakan Pembangunan WordPress Anda

Sekarang kita tahu bahawa Twig, bersama-sama dengan pemalam WordPress Timber, boleh membantu pembangun menulis kod modular semasa membangunkan tema WordPress. Pendekatan modular ini membolehkan anda mengendalikan logik dan melihat lapisan aplikasi web anda secara berasingan. Mari beralih kepada sesuatu yang lebih teknikal: mencipta templat Twig, menukar HTML kepada fail Twig dan cara menggunakan templat Twig untuk menghasilkan logik atau data.

Memasang kayu

Mula-mula, saya akan memasang Timber, pemalam WordPress yang membantu menyepadukan enjin templat Twig dengan WP. Jadi, mari kita mulakan.

• Log masuk ke papan pemuka WordPress anda.
• Pergi ke Pemalam > Tambah Pemalam Baharu.
• Cari pemalam Timber.
• Pasang dan aktifkan pemalam.

Dengan Timber dipasang, anda kini boleh mula membahagikan fail templat anda kepada fail data dan lihat.

Buat templat cawangan

Sebelum kita mula mencipta templat Twig, saya akan menganggap bahawa anda sudah mempunyai beberapa jenis persediaan WordPress tempatan. Untuk tutorial khusus ini, persediaan saya ialah:

• Pemasangan WP Localhost (saya menggunakan DesktopServer daripada ServerPress).
• Timber plugin dipasang dan diaktifkan.
• Pilihan: Mana-mana tema asas/pemula (saya menggunakan tema saya sendiri, Kemas).

UpStatement juga membina tema Timber Starter.

Jom mulakan. Saya ingin memaparkan mesej alu-aluan di bahagian atas halaman utama. Apa yang akan saya lakukan tanpa Twig? Mungkin, saya akan memasukkan kod HTML dalam fail PHP dan menggemakan mesej alu-aluan, seperti yang saya lakukan dalam contoh kod di bawah. Fail index.php saya kelihatan seperti ini. index.php 文件看起来像这样。

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

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

<?php get_footer(); ?>

现在，我本地 WordPress 安装的主页在顶部显示一条欢迎消息。这是屏幕截图。

问题

这种方法的问题在于我们将数据/逻辑与视图混合在一起。该文件越复杂，维护就越困难，更不用说理解了，例如，如果您在此代码后面添加带有一些参数的 WordPress 循环，然后再进行过滤和分页。除此之外，当您最终得到一些逻辑时，HTML 中的 PHP 看起来并不好。

模块化方法

为了使其更加模块化，我们可以将主页上的内容视为块或组件的形式。默认情况下可以有两个完整的，即来自 The_Loop 的帖子和分页。现在我们想在顶部添加另一个组件，即欢迎消息，让我们为该组件创建一个 Twig 文件。

在编辑器中打开一个新的空白文件，然后复制粘贴以下代码行。

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

在主题的根目录中创建一个名为 views 的新文件夹，并使用 .twig 扩展名保存此文件。例如，我将文件保存为 welcome.twig。

渲染树枝模板

Timber 为我们提供了一些有用的函数，其中之一就是渲染函数。你可以这样称呼它：

Timber::render();

该函数最多可以接受四个参数。由于这超出了本文的范围，您可以在 Timber 文档中阅读相关内容。我们可以将主题的 views 文件夹中存在的任何 Twig 文件的名称传递给此函数。

让我们在 index.php 文件中渲染欢迎消息。

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

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

get_footer();

Timber 渲染 welcome.twig 文件，加载 HTML 并在前端显示新修改的视图层，如下所示：

render() 函数将 welcome.twig 作为它的参数，但只要树枝模板位于名为 views 的文件夹内，它就会自动读取该文件。

如果您想对文件夹使用自定义名称/路径，则必须提供该文件夹的路径。例如，我在主题的根目录中创建了一个 twig 文件夹，并将其添加到渲染函数的参数中。

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

官方加载顺序

Timber 将首先查看子主题，然后回退到父主题（与 WordPress 逻辑相同）。官方的加载顺序是：

1. 用户定义的位置
2. 调用PHP脚本的目录（但不是主题）
3. 子主题
4. 父主题
5. 调用PHP脚本的目录（包括主题）

第 2 项插入到其他项之上，这样如果您在插件中使用 Timber，它将使用插件目录中的 twig 文件。

所以，现在index.php文件里面没有HTML，它正在渲染一个Twig模板。

现在让我们将一些动态数据从 index.php 发送到 welcome.twig

<?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();

Halaman utama pemasangan WordPress tempatan saya kini memaparkan mesej alu-aluan di bahagian atas. Berikut adalah tangkapan skrin.

🎜

Soalan

🎜Masalah dengan pendekatan ini ialah kami mencampurkan data/logik dengan pandangan. Lebih kompleks fail, lebih sukar untuk dikekalkan, apatah lagi memahami, sebagai contoh, jika anda menambah gelung WordPress di belakang kod ini dengan beberapa parameter dan kemudian menapis dan penomboran. Selain itu, PHP dalam HTML tidak kelihatan baik apabila anda akhirnya mendapat logik. 🎜

Pendekatan modular

🎜Untuk menjadikannya lebih modular, kita boleh menganggap kandungan pada halaman utama sebagai blok atau komponen. Secara lalai boleh ada dua yang lengkap, siaran dan penomboran daripada The_Loop. Sekarang kita ingin menambah komponen lain di atas, mesej alu-aluan, mari buat fail Twig untuk komponen ini. 🎜 🎜Buka fail kosong baharu dalam editor dan salin-tampal baris kod berikut. 🎜🎜🎜

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

🎜Buat folder baharu yang dipanggil 🎜🎜views🎜 dalam direktori akar tema anda dan simpan fail ini dengan sambungan .twig. Sebagai contoh, saya menyimpan fail sebagai welcome.twig. 🎜

Templat cawangan rendering🎜🎜

🎜Timber memberikan kita beberapa fungsi yang berguna, salah satunya ialah fungsi rendering. Anda boleh memanggilnya seperti ini: 🎜 rrreee 🎜Fungsi ini boleh menerima sehingga empat parameter. Memandangkan ini di luar skop artikel ini, anda boleh membaca tentangnya dalam dokumentasi Timber. Kami boleh menghantar nama mana-mana fail Twig yang wujud dalam folder 🎜🎜views🎜🎜 tema kepada fungsi ini. 🎜 🎜Mari berikan mesej alu-aluan dalam fail index.php. 🎜🎜🎜 rrreee 🎜Timber memaparkan fail welcome.twig, memuatkan HTML dan memaparkan lapisan paparan yang baru diubah suai pada bahagian hadapan, seperti ini: 🎜 🎜🎜🎜render() mengambil welcome.twig sebagai parameternya, tetapi hanya jika templat ranting terletak dalam folder bernama 🎜🎜views🎜 🎜 , ia akan membaca fail secara automatik. 🎜 🎜Jika anda ingin menggunakan nama/laluan tersuai untuk folder, anda mesti menyediakan laluan ke folder tersebut. Sebagai contoh, saya mencipta folder ranting dalam akar tema saya dan menambahkannya pada parameter fungsi render. 🎜 rrreee

Pesanan pemuatan rasmi🎜🎜

🎜Timber akan melihat tema kanak-kanak dahulu dan kemudian kembali kepada tema induk (logik yang sama seperti WordPress). Pesanan rasmi memuatkan ialah: 🎜

🎜Lokasi yang ditentukan pengguna🎜 🎜Direktori untuk memanggil skrip PHP (tetapi bukan tema)🎜 🎜Sub tema🎜 🎜Topik ibu bapa🎜 🎜Direktori untuk memanggil skrip PHP (termasuk tema)🎜

🎜Item 2 disisipkan di atas item lain supaya jika anda menggunakan Timber dalam pemalam, ia akan menggunakan fail ranting dalam direktori pemalam. 🎜 🎜Jadi, kini tiada HTML dalam fail index.php, ia sedang memaparkan templat Twig. 🎜 🎜Sekarang mari hantar beberapa data dinamik daripada index.php ke fail welcome.twig dan render menggunakan 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 存储库中查看我的主题代码。

Atas ialah kandungan terperinci Bermula dengan Twig: Lompat Mulakan Pembangunan WordPress Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!