简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  Twig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できます

Twig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できます

王林
王林オリジナル
2023-09-04 15:37:141087ブラウズ

ここまでで、モジュール式 WordPress テーマを構築しながら Timber で Twig を使用する基本的な概念を学習しました。また、DRY 原則に基づいた Twig を使用したブロックのネストと多重継承についても調査しました。今日は、Twig と Timber プラグインを使用して、テーマ内で添付画像、WordPress メニュー、およびユーザーを表示する方法を見ていきます。

木のイメージ

画像は WordPress テーマの重要な要素の 1 つです。通常の WordPress コーディングの実践では、画像は通常の HTML 画像タグ内で PHP と統合されます。ただし、Timber は、モジュール式でクリーンな img (画像) タグを処理するためのかなり包括的なアプローチを提供します。

投稿のサムネイル欄に画像が添付されます。これらは、{{ post.thumbnail }} を介して Twig ファイル経由で簡単に取得できます。それはとても簡単です！

＃＃＃使用法＃＃＃

実際的な例から始めましょう。

single.php

ファイルは次のようになります: リーリー ここでは、非常に明白な理由から、

TimberPost()

関数を使用しました。これは、WordPress から取得した投稿を表すために Timber 全体で使用され、Twig テンプレートで利用できるようになります。 アイキャッチ画像は投稿データに添付されているので、フロントエンドで取得する必要があります。したがって、その Twig ファイル

single.twig

は次のようになります: リーリー 9 行目のコード

{{ post.thumbnail.src }}

は、投稿の注目の (サムネイル) 画像を取得し、次のように表示します。

このコード構文を使用すると、任意の数のサムネイルを取得できます。 Twig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できます

Timber を使用する場合は、これらの画像をさらに実験することもできます。たとえば、次のようにしてサイズを変更することもできます。 リーリー

resize()

関数を使用すると、画像に新しい寸法を追加できます。最初のパラメータは

width

、2 番目のパラメータは height です。画像を比例的に拡大縮小したい場合は、height 属性を無視してください。構文は次のようになります: リーリー フロントエンドには、以下に示すものと同じ画像が表示されます。

さらに詳しく知りたい場合は、画像レシピを試してください。

Twig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できます使用

TimberImage()

開発者がイメージ ID によってイメージを取得したい、または URL などを通じて外部イメージを表示したいというシナリオを考えてみましょう。この拡張メソッドのために、Timber は WordPress から取得した画像を表すクラス TimberImage () を提供します。

＃＃＃使用法＃＃＃

single.php ファイルを例として見てみましょう。ファイルは次のようになります:

リーリー

今回は、イメージ ID

8

をパラメータとして受け取る TimberImage() クラスを使用します。エンコード ルーチンの残りの部分は同じです。 Twig ファイル

single.twig

を介してこの画像を取得しましょう。 リーリー $contextcustom_img 要素に格納されている値、つまり {{custom_img }} は、ID によって画像を取得し、次のようにフロントエンドに表示します。

外部 URL 置換を通じて画像を取得するには、次の構文に従うことができます。 リーリー 今回は、以下に示すように、フロントエンドはイメージ ID の代わりに外部イメージ URL を表示します。

Twig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できます

この機能の詳細については、ドキュメントをご覧ください。

ウッドメニュー

さて、Twig テンプレートを使用して WordPress メニューをレンダリングするにはどうすればよいでしょうか?これは難しいことです。でも、ちょっと待ってください！ Timber は、Twig ファイル内で WordPress メニューを完全なループとしてレンダリングするのに役立つ

TimberMenu()Twig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できます クラスを提供します。見てみましょう。

＃＃＃使用法＃＃＃

メニュー項目を取得するという概念全体は、

メニュー オブジェクト

を中心に展開します。コンテキストを定義するには 2 つの方法があります。 1 つ目は、

functions.php

ファイルで行ったのと同じように、グローバル get_context() 関数にメニュー オブジェクトを追加することで、メニュー オブジェクトをすべてのページで使用できるようにすることです。次に、特定の PHP テンプレートの ID によって特定のメニューを追加できます。 <p>无论采用哪种方法，一旦菜单可供 Timber <code class="inline">$context 数组使用，您就可以从中检索所有菜单项。但我更喜欢在全球范围内定义它。因此，转到 functions.php 文件并粘贴以下代码：

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

因此，我在这里定义了一个自定义函数调用 add_to_context。在这个函数内部有一些数据，我希望通过 get_context() 函数在每个 PHP 模板中都可以使用这些数据。在第 13 行，您可以找到 TimberMenu() 的实例，该实例针对 $data 数组中的元素菜单传递。

这将使 Twig 模板可以使用标准 WordPress 菜单作为我们可以循环访问的对象。 TimberMenu() 函数可以采用菜单项或 ID 等参数。

让我们创建一个名为 menu.twig 文件的 Twig 模板。

{# Menu Template: `menu.twig` #}

<nav>
    <ul class="main-nav">
        {% for item in menu.get_items %}
                <li class="nav-main-item {{ item.classes | join(' ') }}">
                    <a class="nav-main-link" href="{{ item.get_link }}">{{ item.title }}</a>
                </li>
        {% endfor %}
    </ul>
</nav>

上面的代码在此 Twig 模板内运行一个循环。第 5 行为每个菜单项运行 for 循环，并在无序列表中显示每个菜单 item 的标题。循环运行，直到 menu 对象的所有键值对都被迭代并列出在前端。

我继续将 menu.twig 模板包含在第 11 行的 base.twig 模板中。

{# Base Template: `base.twig` #}

{% block html_head_container %}

    {% include 'header.twig' %}

{% endblock %}

	<body class="{{body_class}}">

		{% include "menu.twig" %}

		<div class="wrapper">

			{% block content %}

			    <!-- Add your main content here. -->
			    <p>SORRY! No content found!</p>

			{% endblock %}

		</div>
		<!-- /.wrapper -->

	{% include "footer.twig" %}

	</body>

</html>

让我们预览一下我的演示网站的后端（外观 > 菜单），其中菜单包含两个父项和一个子项。

Twig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できます

所以，让我们看一下帖子页面 - 因为我们的 single.twig 扩展了 base.twig，我们的菜单将自动出现在该页面上。

Twig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できます

您可以看到，在我们单个帖子的顶部有一个菜单，其中包含两个父项。

子菜单项怎么样？让我们更新 menu.twig 文件以也包含子项目。

{# Menu Template: `menu.twig` #}

<nav>
    <ul class="main-nav">
        {% for item in menu.get_items %}
                <li class="nav-main-item {{ item.classes | join(' ') }}">
                    <a class="nav-main-link" href="{{ item.get_link }}">{{ item.title }}</a>

						{% if item.get_children %}

							<ul class="nav-drop">

								{% for child in item.get_children %}

								<li class="nav-drop-item">
									<a href="{{ child.get_link }}">{{ child.title }}</a>
								</li>

								{% endfor %}

							</ul>

						{% endif %}

                </li>
        {% endfor %}
    </ul>
</nav>

第 9 行到第 23 行打印子菜单项（如果有）。这次，前端显示我们第一个父项的子项。

Twig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できます

有关 TimberMenu() 的更多详细信息，请查看文档。

Timber 中的用户

可以使用 TimberUser() 类从 WordPress 数据库检索用户。该类采用用户 ID 或 slug 作为参数来检索用户。

由于用户或博客作者与 WP 帖子相关联，我将使用 single.php 的代码，现在如下所示：

<?php
/**
 * Single Template
 *
 * The Template for displaying all single posts.
 *
 * @since 1.0.0
 */

// Context array
$context         = Timber::get_context();
$post            = new TimberPost();
$context['post'] = $post;

// Using the TimberImage() function
// to retrieve the image via its ID i.e 8
$context['custom_img'] = new TimberImage( 8 );

// Get the user object.
$context['user'] = new TimberUser();

// Timber ender().
Timber::render( 'single.twig', $context );

第 20 行初始化 TimberUser() 类并分配给上下文对象元素，即 user。让我们通过 Twig 模板显示作者姓名。

我的 single.twig 模板在第 #21 行末尾有一行新代码。

{# Sinlge Template: `single.twig` #}

{% extends "base.twig" %}

{% block content %}

    <div class="single_content">

        <img  src="{{ post.thumbnail.src }}" / alt="Twig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できます" >

    	{# <img  src="{{ post.thumbnail.src | resize ( 900, 500 ) }}" / alt="Twig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できます" > #}

    	{# <img  src="{{ post.thumbnail.src | resize ( 900 ) }}" / alt="Twig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できます" > #}

    	{# <img  src="{{ custom_img }}" / alt="Twig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できます" > #}

        <h1>{{ post.title }}</h1>

        <p>{{ post.get_content }}</p>

        <p>Author: {{ user }} </p>
    </div>

{% endblock %}

代码获取当前帖子的作者姓名并将其显示在前端。您可以使用 {{ 用户 | print_r }} 查看 TimberUser 对象中还有什么可用的。

Twig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できます

要了解有关此类的更多信息，请参阅文档。您可以在 ImagesMenusUsers 分支的 GitHub 存储库中找到本教程的代码。

结论

本文总结了整个系列。在这四篇文章中，我探索了如何使用 Timber 将 Twig 模板语言集成到 WordPress 主题中。

本系列的最终存储库可以在 GitHub 上找到，其中包含特定于教程的分支：

  • 教程 #2：入门
  • 教程 #3：WordPress 备忘单
  • 教程 #4：TimberImages、TimberMenu 和 TimberUser

您可以查阅 Timber 的在线文档了解更多信息。

完成整个系列并实现所有解释的示例，我打赌您会喜欢 Twig。在下面的评论框中发表您的疑问。您也可以通过 Twitter 联系我。

以上がTwig と Timber の画像、メニュー、ユーザーを使用して WordPress 開発をすぐに開始できますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：スマートウォッチ アプリ開発のために Tizen を探索する: 概要次の記事：スマートウォッチ アプリ開発のために Tizen を探索する: 概要

関連記事

続きを見る