使用Twig和Timber圖像、選單和用戶,快速啟動WordPress開發

王林
發布: 2023-09-04 15:37:14
原創
1092 人瀏覽過

到目前為止,您已經了解了透過 Timber 使用 Twig 的基本概念,同時建立了模組化 WordPress 主題。我們也基於 DRY 原則,使用 Twig 研究了區塊嵌套和多重繼承。今天,我們將探討如何透過 Timber 外掛程式使用 Twig 在主題中顯示附件圖像、WordPress 選單和使用者。

木材中的圖像

圖片是任何 WordPress 主題的重要元素之一。在常規的 WordPress 編碼實踐中,圖像與 PHP 整合在正常的 HTML 圖像標籤內。但是,Timber 提供了一種相當全面的方法來處理 img(圖像)標籤,該方法是模組化且乾淨的。

貼文的縮圖欄位中附加了圖片。這些可以透過 {{ post.thumbnail }} 透過 Twig 檔案輕鬆檢索。就是這麼簡單!

用法

讓我們從一個實際的例子開始。我們的 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;

// Timber ender().
Timber::render( 'single.twig', $context );
登入後複製

在這裡,出於非常明顯的原因,我使用了 TimberPost() 函數。它在整個 Timber 中用於表示從 WordPress 檢索的帖子,使它們可用於 Twig 模板。

由於特色圖像附加到帖子資料中,我們現在需要在前端檢索它。因此,它的 Twig 檔案 single.twig 將如下所示:

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

{% extends "base.twig" %}

{% block content %}

    <div class="single_content">

        <img  src="{{ post.thumbnail.src }}" / alt="使用Twig和Timber圖像、選單和用戶,快速啟動WordPress開發" >

    </div>

{% endblock %}
登入後複製

在第 9 行,程式碼 {{ post.thumbnail.src }} 擷取貼文的特色(縮圖)圖片並如下顯示:

使用Twig和Timber圖像、選單和用戶,快速啟動WordPress開發

您可以使用此程式碼語法檢索任意數量的縮圖。

使用 Timber 時,您也可以對這些影像進行更多實驗。例如,您也可以透過以下方式調整它們的大小:

<img  src="{{ post.thumbnail.src | resize ( 900, 500 ) }}"  / alt="使用Twig和Timber圖像、選單和用戶,快速啟動WordPress開發" >
    
登入後複製

透過使用resize() 函數,您可以為映像新增尺寸,其中第一個參數是width,第二個參數是高度 。如果您想按比例縮放圖像,請忽略 height 屬性。現在語法變成:

<img  src="{{ post.thumbnail.src | resize ( 900 ) }}" / alt="使用Twig和Timber圖像、選單和用戶,快速啟動WordPress開發" >
登入後複製

前端顯示相同的圖像,如下所示:

使用Twig和Timber圖像、選單和用戶,快速啟動WordPress開發

如果您想探索更多內容,請嘗試圖像食譜。

使用 TimberImage()

考慮這樣一個場景:開發者想要透過圖像 ID 取得圖像,或想要透過 URL 顯示外部圖像等。對於這個擴充方法,Timber 提供了一個類,TimberImage (),表示從 WordPress 檢索到的圖片。

用法

讓我們以 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 );

// Timber ender().
Timber::render( 'single.twig', $context );
登入後複製

這次,我使用 TimberImage() 類,該類將圖像 ID 8 作為其參數。編碼例程的其餘部分是相同的。讓我們透過 Twig 檔案 single.twig 檢索此圖片。

<img  src="{{ custom_img }}" / alt="使用Twig和Timber圖像、選單和用戶,快速啟動WordPress開發" >
登入後複製

儲存在 $context custom_img 元素中的值,即 {{ custom_img }},將透過其 ID 檢索圖像以顯示在前端,如下所示:

使用Twig和Timber圖像、選單和用戶,快速啟動WordPress開發

要透過外部 URL 取代檢索影像,您可以遵循下列語法。

<?php $context[ 'img' ] = new TimberImage( 'https://domain.com/link/image.jpg' ); ?>

登入後複製

這次,前端顯示的不是圖片 ID,而是外部圖像 URL,如下所示:

使用Twig和Timber圖像、選單和用戶,快速啟動WordPress開發

要探索此功能的更多功能,您可以查看文件。

木材選單

現在,您將如何使用 Twig 範本渲染 WordPress 選單?這是一件很棘手的事。但是,堅持住! Timber 為您提供了 TimberMenu() 類,它可以幫助您將 Twig 檔案內的 WordPress 選單呈現為完整的循環。我們來看一下。

用法

檢索選單項目的整個概念都圍繞著選單物件。有兩種定義其上下文的方法。第一個是將選單物件新增至全域 get_context() 函數中,使選單物件在每個頁面上可用,就像我在 functions.php 檔案中所做的那樣。其次,您可以透過 ID 為特定 PHP 範本新增特定選單。

无论采用哪种方法,一旦菜单可供 Timber $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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板