
內容簡介
Pilo’Press 是專為 WordPress 所設計的框架外掛,基於 ACF 和 ACF Extended,可用於創建佈局和使用彈性內容欄位作為頁面建構器等功能。
Pilo’Press 使用 Tailwind CSS 進行樣式範本編排,該功能可以直接從後台進行設置和構建。
請注意,Tailwind CSS 不是必須的,您可以選擇使用或不使用。
所需條件
此外掛需要 Advanced Custom Fields PRO 和 Advanced Custom Fields: Extended 外掛方能正常運作。
入門
啟用 Advanced Custom Fields Pro 外掛
啟用 ACF Extended 外掛
啟用 Pilo’Press 外掛
在您的佈景主題中,創建一個 pilopress 文件夾
在 pilopress 文件夾中,創建 layouts 子文件夾
在 pilopress 文件夾中,創建 assets 子文件夾
在 index.php 文件中,添加以下代碼:
<?php
get_header();
the_pip_content();
get_footer();
Tailwind CSS
在管理界面中,轉到 Pilo’Press > Styles,點擊 “更新和編譯”,TailwindCSS 將使用 TailwindAPI 遠程編譯,然後在 /pilopress/assets/styles.min.css 和 /pilopress/assets/styles-admin.min.css 中創建縮小的 CSS 文件。
您可以手動將這些文件併入主題樣式的前端和後端,但我們建議使用上面的自動引用代碼。
如果您要本地構建 TailwindCSS,則可以手動獲取管理員的 Tailwind PostCSS 和 JS 欄位。為此,您可以使用以下代碼:
$tailwind_css = get_field( 'pip_tailwind_style', 'pip_styles_tailwind' );
$tailwind_config = get_field( 'pip_tailwind_config', 'pip_styles_tailwind' );
詳細信息,請參閱 Tailwind CSS 文件。
自定義樣式
要自定義默認的 Tailwind CSS 樣式,請轉到左側導航菜單或上方條形菜單中的 Pilo’Press > Styles。
有關自定義的更多詳細信息,請參閱 Github 页面。
添加新佈局
在管理菜單中 Pilo’Press > Layouts,添加新佈局
配置佈局字段
在您的主題佈局文件夾 /your-theme/pilopress/layouts/your-layout 中創建 PHP、CSS 和 JS 文件
您必須以後台設置方式的相同方式命名這些文件
注:只需要 PHP 模板文件。
範本
要顯示文章內容,您必須使用以下函數:
// Pilo’Press 內容(不需要 'echo')
the_pip_content();
// Pilo’Press 內容(需要 'echo')
echo get_pip_content();
組件
有關完整示例,請參閱 GitHub 页面。
挂鈎
可用的 Hooks 在GitHub 页面上有列表和描述
外掛標籤
開發者團隊
📦 歷史版本下載
原文外掛簡介
Pilo’Press is a framework plugin for WordPress. Based on ACF and ACF Extended, it allows you to create layouts among other things and use the Flexible Content field as a page builder.
Pilo’Press uses Tailwind CSS for style templating which can be setup and build directly from the back-office.
Please note that Tailwind CSS is not mandatory, you can choose to use it or not.
Requirements
This plugin requires Advanced Custom Fields PRO and Advanced Custom Fields: Extended plugins in order to work correctly.
Getting started
Activate Advanced Custom Fields Pro plugin
Activate ACF Extended plugin
Activate Pilo’Press plugin
In your theme, create a pilopress folder
Within the pilopress folder, create layouts subfolder
Within the pilopress folder, create assets subfolder
In the index.php file, add the following code:
Styles, when you click on “Update & Compile”, TailwindCSS will be compiled remotely using TailwindAPI. Minified CSS files are then created under /pilopress/assets/styles.min.css and /pilopress/assets/styles-admin.min.css.
You can manually enqueue those files in your theme for the front-end & the back-end, but we recommend to use automatic enqueue code above.
It is possible to manually retrieve the Tailwind PostCSS & JS fields of the administration if you want to build TailwindCSS locally. To do so, you can use the following code:
$tailwind_css = get_field( 'pip_tailwind_style', 'pip_styles_tailwind' );
$tailwind_config = get_field( 'pip_tailwind_config', 'pip_styles_tailwind' );
For more details, see Tailwind CSS Documentation.
Customizing style
To customize default Tailwind CSS styles, go to Pilo'Press > Styles from left navigation menu or top bar menu.
For more details about customization, see Github Page.
Add new layout
In the admin menu Pilo'Press > Layouts, add a new layout
Configure the layouts fields
Create PHP, CSS and JS files in your theme layout folder /your-theme/pilopress/layouts/your-layout
You have to name those files the same way you did in back-office settings
Note: only PHP template file is require.
Templating
To display the content of your post, you have to use the following function:
// Pilo'Press content (doesn't need 'echo')
the_pip_content();
// Pilo'Press content (needs 'echo')
echo get_pip_content();
Components
See GitHub Page for complete example.
Hooks
Available hooks are list and describe in GitHub Page
