[WordPress] 外掛分享: Pilo’Press

首頁外掛目錄 › Pilo'Press
WordPress 外掛 Pilo'Press 的封面圖片
100+
安裝啟用
★★★★★
5/5 分(4 則評價)
1079 天前
最後更新
問題解決
WordPress 4.9+ PHP 5.6+ v0.4.3.2 上架:2020-05-24

內容簡介

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 页面上有列表和描述

外掛標籤

開發者團隊

⬇ 下載最新版 (v0.4.3.2) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Pilo'Press」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

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

延伸相關外掛

文章
Filter
Mastodon