前言介紹
- 這款 WordPress 外掛「NP Twig: Front End for Custom Field & ACF」是 2021-04-07 上架。
- 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
- 上一次更新是 2021-06-04，距離現在已有 1429 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 5.0 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
acf | Timber | display | Fron End | custom fields |
內容簡介
我使用 Twig 模板來顯示您的文章或自定義文章或 Advanced Custom Fields
Twig 和 ACF 是第三方外掛，我們使用它們來渲染模板
本文的阿拉伯語版本
https://www.miniindustry.com/d/ar-np-twig
模板要求
確保安裝 Timber 外掛: https://wordpress.org/plugins/timber-library/
然後創建一個私人文章或頁面或任何文章類型
對於自訂文章類型模板，請確保您的模板名稱看起來像： tpl-{{post_type}}
或者在文章中添加自定義字段，命名為 twig，並在其中存儲模板名稱
自定義字段和 ACF
WordPress 支持自定義字段，您可以直接將它們添加到您的文章中，
ACF 插件為自定義字段提供更多功能
使用 Advanced Custom Fields 插件完全控制您的 WordPress 編輯屏幕和自定義字段數據。
閱讀更多ACF相關内容：https://wordpress.org/plugins/advanced-custom-fields/
模板語法：WordPress 前端自定義字段的速成指南
注意：首選使用WordPress 經典編輯器來編輯模板
註釋
使用{# comments #}進行註釋，註釋不會呈現給用戶，
變量輸出
模板中的變量包括文章標題、文章對象和自定義字段。要輸出文章標題，可以使用{{ title }}。如果您的文章具有名為價格的自定義字段。我們使用{{ price }}來輸出價格。使用點(.)來訪問變量的屬性（對象的方法或屬性，或者數組的項目：{{ foo.bar }}
條件輸出
Twig 中的if語句檢查變量是否有值或表達式是否求值為true。我們可以添加條件來顯示任何文本。假設我們有一個名為 "agent" 的自定義字段，並希望在該字段包含文本時顯示文本。我們可以寫成
{% if agent %}
We have an agent in your area
Our agent: {{ agent }}
{% endif %}
另一個例子;假設我們有一個名為價格的字段。如果價格為零，我們想顯示一條文本
{% if price == 0 %}
This product is free
{% endif %}
請注意，我們使用運算符 == 來檢查相等性。您還可以測試數組是否不為空：
{% if meanings %}
The array or repeater field **meaning** contains some values
{% endif %}
關閉條件塊
總是使用{% endif %}來關閉先前的 if 條件。詳細了解twig中的if關鍵詞
重複項字段和數組
如果我們的字段或變量是數組或重複項字段，我們可以使用 for 關鍵詞循環遍歷序列中的每個項目
for語句的代碼示例
{% for m in meanings %}
Mea
原文外掛簡介
I use Twig template to display your post or custom post or Advanced Custom Fields
Twig and ACF are a third-party plugin, we used them to render templates
Arabic Version of this Article
https://www.miniindustry.com/d/ar-np-twig
Template requirements
Ensure installs of Timber plugin: https://wordpress.org/plugins/timber-library/
Then create a private post or page or of any post type
For custom post type template ensures that your template name looks like: tpl-{{post_type}}
or add a custom field to your post name it twig and store the template name inside it
Custom Fields and ACF
WordPress supports custom fields, and you could add them directly to your post,
and ACF plugin gives more power to the custom fields
Use the Advanced Custom Fields plugin to take full control of your WordPress edit screens & custom field data.
Read more about ACF on https://wordpress.org/plugins/advanced-custom-fields/
Template Syntax: a quick guide for WordPress Front End for Custom Field
Note: WordPress Classic Editor is preferred to edit templates
Comments
Use {# comments #} for comments, and comments will not render to the user,
Variables output
Variables in templets are post title, post object, and custom fields. To output post title you can use {{ title }}. If your post has a custom field called price. We use {{ price }} to output the price. Use a dot (.) to access attributes of a variable (methods or properties of an object, or items of an array: {{ foo.bar }}
Conditional output
The if statement in Twig check if a variable has a value or an expression evaluates to true We can add conditions to display any text. Let’s say that we have a custom field named “agent” and want to display a text when the field agent contains a text. We can write
{% if agent %}
We have an agent in your area
Our agent: {{ agent }}
{% endif %}
another example; let’s say that we have a field named price. We want to display a text if the price is zero
{% if price == 0 %}
This product is free
{% endif %}
Please note that we use the operator == to check the equality You can also test if an array is not empty:
{% if meanings %}
The array or repeater field **meaning** contains some values
{% endif %}
Closing condition block
Always use {% endif %} to close the previous if condition, Read more about if keyword in twig
Repeater field and arrays
If our field or variable is an array or a repeater field we can loop over each item in a sequence using for keyword
The for statement code example
{% for m in meanings %}
Meaning: {{ m.meaning }}
{% endfor %}
The for statement format
We use {% for m in meanings %} to loop over an array or repeater field called meanings using m to mention for each row
Inside the loop starts the subfields or array items with the variable name **m.**
Always close the loop use {% endfor %}
Read more about the for keyword in twig
Important notes for templates code
In WordPress classic editor show source and ensure there are no tags inside the template code; ex {% endfor %}
For more details, see: https://twig.symfony.com/doc/2.x/
Power templating with only 4 keyword
Using if, endif, for and endfor allows to generate a powerful template; however, twig contains many other useful keywords to see other keyword and how to use them visit twig documentation
Short template example
Meaning of {{ title }}
{# This is a comment and will not render #}
{% for m in meanings %}
{% if m.meaning %}
Meaning: {{ row.meaning }}
{% endif %}
{% if m.example %}
Example: {{ m.example }}
{% endif %}
{% endfor %}
Output post data
We can access the post using the post keyword. to access any property of the post we put a dot (.) and then we put the property name for example use post.content to access post content
{{ post.title }}
{{ post.content }}
read more about accessing post content on timber documents
Why templating engine and not a raw PHP programming language
More Simple; so templating is more readable, and very easy that allows users to learn quickly,
and Limit the allowed function to prevent bad mistakes,
and easy to edit using WordPress classic editor
About Twig templating engine
The twig template engine process templates data, and output a webpage.
and it is a flexible, fast, and secure template engine for PHP.
We use Twig a template language, and we allow users to modify the template design.
It is fast because Twig compiles templates into optimized PHP code.
Get flexible, so it allows the developer to define its own custom tags and filters.
Read more about Twig
Timber and Twig
Timber helps to include Twig in WordPress,
with Timber, you write your HTML using the Twig Template Engine separate from your PHP files,
and this cleans up your template code so, for example, and your Twig template can focus on the HTML and display.
License and use
This plugin is distributed in the hope that it will be useful, but without any warranty. See the GNU General Public License for more details. http://www.gnu.org/licenses/.
For Developers
Add custom data to fields
Edit the file user-functions.php
Create a function and name it get_fields_{{post_type}}
If your custom post type contains ‘-‘ replace it with ‘_’
I include a sample function in user-functions.php
Backup your functions, and keep in mind that the file user-function may be replaced on upgrade
Add custom data for each singular page
Edit the file user-functions.php
then create a function and name it np_content_singular
I include a sample function in user-functions.php
Backup your functions, and keep in mind that the file user-function may be replaced on upgrade
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「NP Twig: Front End for Custom Field & ACF」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0 | 1.0.1 | 1.0.2 | 1.0.3 | 1.0.4 | 1.0.5 | trunk |
延伸相關外掛（你可能也想知道）
Timber Debug Bar 》安裝完成後，Timber Debug Bar 提供了當前模板的名稱、在伺服器上的絕對位置，以及發送到模板的上下文（陣列）的完整內容。。
Clear cache for Timber 》這是一個小型的 WordPress 外掛程式，可以清除 Timber（一個在 WordPress 上使用 Twig 模板引擎的外掛程式）的快取。
ACF Timber Integration 》這個外掛程式是針對使用 Advanced Custom Fields 和 Timber 開發佈景主題的開發人員所設計。, 啟用這個外掛程式後，使用者定義的進階自訂欄位將會在 Timber c...。
Query monitor Twig profile 》查找緩慢的網頁，並發現原因！立即在您的 Query Monitor 工具欄中查看 twig 的分析信息。, Query Monitor 的 Twig profile 擴展可幫助您注意到頁面使用的模板...。
Editor for Timber 》功能特色, , 為可配置的文章類型添加元框，以建立並編輯 Twig 模板, 為 WP 主題和外掛程式編輯器添加 Twig 支援, , 甚至可以自訂 CodeMirror 主題, , , , 外...。
Timber with Jetpack Photon 》讓 Timber 外掛與 Jetpack 的 Photon 服務相容。安裝後，所有的 TimberImages 使用 PhotonCDN 和圖片裁切功能（例如：resize）。, Photon 是一個針對 Jetpack...。
Hatch 》Hatch 是一個協助開發人員建立網站的輔助程式庫，可以讓使用 Timber、Advanced Custom Fields Pro 及其他常用外掛更加愉悅。, 這是什麼東西？, Hatch 是一個...。