[WordPress] 外掛分享： ACF WYSIWYG Styling

WordPress 外掛 ACF WYSIWYG Styling 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「ACF WYSIWYG Styling」是 2015-08-26 上架。
  • 目前有 80 個安裝啟用數。
  • 上一次更新是 2015-08-27，距離現在已有 3537 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
  • 外掛最低要求 WordPress 3.5.0 以上版本才可以安裝。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

delwinv |

外掛標籤

acf | style | styles | styling | wysiwyg |

內容簡介

這是一個非常小的外掛，它會在 WYSIWYG 編輯器的 body 標籤中加入 ACF 欄位鍵值、欄位名稱、彈性內容欄位名稱和彈性內容佈局名稱，讓您可以針對這些類別（以及 WordPress 預設新增的 post-type-* 類別）在您的 editor-style.css 中進行樣式設定，讓管理員/編輯員有更好的體驗。

這個外掛程式可適用於 ACF 和 ACF Pro 的版本 5。

使用方法

透過 Install Plugins 介面安裝外掛程式，或將 acf-plugin-wysiwyg-styling 資料夾上傳至您的 /wp-content/plugins/ 目錄。
在管理選單中啟用 ACF WYSIWYG 樣式外掛程式。
在您的主題目錄中建立或編輯您的 editor-style.css，使用新加入的類別來設定您的 WYSIWYG 編輯器的樣式。

例如：

可以使用以下 CSS 針對鍵值為 field_9999ffff11112222 的 ACF WYSIWYG 欄位進行選擇：

body.acf-field-key-field_9999ffff11112222 {
background-color: red;
}

可以使用以下 CSS 針對鍵值為 field_9999ffff11112222 的 ACF WYSIWYG 欄位在「room」文章類型中進行選擇：

body.post-type-room.acf-field-key-field_9999ffff11112222 {
background-color: blue;
}

可以使用以下 CSS 針對名稱為「my_wysiwyg」的所有 ACF WYSIWYG 欄位進行選擇：

body.acf-field-name-my_wysiwyg {
background-color: yellow;
}

可以使用以下 CSS 針對彈性內容欄位名稱為「page_content」的所有 ACF WYSIWYG 欄位進行選擇：

body.acf-flex-name-page_content {
color: green;
}

可以使用以下 CSS 針對彈性內容佈局名稱為「test_layout」的所有 ACF WYSIWYG 欄位進行選擇：

body.acf-layout-test_layout {
font-family: "Computer Modern Serif";
}

可以使用以下 CSS 針對彈性內容佈局名稱為「test_layout」中名稱為「my_wysiwyg」的 ACF WYSIWYG 欄位進行選擇：

body.acf-layout-test_layout.acf-field-name-my_wysiwyg {
border: 4px solid red;
height: 100%;
margin: 0 auto;
max-width: 100px;
}

N.B. 我使用 body 標籤來進行選擇，這樣使用者就不會無意中針對編輯欄位的管理者 CSS 進行選擇（無論這麼做多麼不可能）。

原文外掛簡介

A very tiny plugin that adds the ACF field key, field name, Flexible Content field name and Flexible Content layout name to the WYSIWYG
editor body tag, allowing you to target these classes, along with the existing post-type-* classes added by default by WordPress, in
your editor-style.css for a better admin/editor experience.
This works for both ACF and ACF Pro, version 5.
Usage

Install the plugin through the Install Plugins interface or by uploading the acf-plugin-wysiwyg-styling folder to your /wp-content/plugins/ directory.
Activate the ACF WYSIWYG Styling plugin from the Admin > Plugins menu.
Create or edit your editor-style.css in your theme directory and use the newly added classes to style your WYSIWYG editors.

For example:

The ACF WYSIWYG field with key field_9999ffff11112222 can be targeted with the following CSS:
body.acf-field-key-field_9999ffff11112222 {
background-color: red;
}

The ACF WYSIWYG field with key field_9999ffff11112222 in the “room” post type can be targeted with the following CSS:
body.post-type-room.acf-field-key-field_9999ffff11112222 {
background-color: blue;
}

All ACF WYSIWYG fields named “my_wysiwyg” can be targetted with the following CSS:
body.acf-field-name-my_wysiwyg {
background-color: yellow;
}

All ACF WYSIWYG fields in the Flexible Content field named “page_content” can be targetted with the following CSS:
body.acf-flex-name-page_content {
color: green;
}

All ACF WYSIWYG fields in the Flexible Content layout field named “test_layout” can be targetted with the following CSS:
body.acf-layout-test_layout {
font-family: “Computer Modern Serif”;
}

The ACF WYSIWYG field named “my_wysiwyg” in the Flexible Content layout field named “test_layout” can be targetted with the following CSS:
body.acf-layout-test_layout.acf-field-name-my_wysiwyg {
border: 4px solid red;
height: 100%;
margin: 0 auto;
max-width: 100px;
}

N.B. I target using the body tag so that a user cannot accidentally target the admin CSS in their edit of the field (regardless of how unlikely
that would be).

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「ACF WYSIWYG Styling」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0 | trunk |

延伸相關外掛（你可能也想知道）

  • CiviCRM Admin Utilities 》CiviCRM 管理工具可修改單站點和多站點安裝的 CiviCRM 行為。它可以做出一些有用的事情：, , 提供與 WordPress 更相符的 CiviCRM 管理畫面主題 (請參閱以下內...。
  • CTA Button Styles 》CTA Button Styler 是一個 WordPress 外掛，允許您輕鬆樣式化 WordPress 中現有的按鈕。標有 cta101 類別的按鈕可以輕鬆地變成有效的呼籲動作按鈕，鼓勵訪客...。
  • Smart CSS Auto Loader 》Smart CSS Auto Loader 外掛（原名為 CSS AutoLoader）允許您載入額外的 CSS 檔案，而不需要更改主題, 使用方法, 要載入額外的 CSS 樣式表，只需把它們放入名...。
  • Easy Custom Code (LESS/CSS/JS) – Live Editing 》透過 WP Customizer 的核心功能，輕鬆快速地添加您自己的客製化 LESS/CSS/JAVASCRIPT 代碼和外部資源（樣式表和腳本）至您的網站中。如果您使用這個外掛，甚...。
  • GOAT Contact Form 7 Style for Elementor 》此外掛可讓您在 Elementor 中輕鬆自訂 Contact Form 7 表單的外觀。透過多種設計選項和預先設計的範本，您只需點擊幾下即可創建出專業外觀的表單。, 功能：, ...。
  • Intro Wrapper 》這個外掛會自動幫你把 WordPress 文章中 之前的簡介文字（也稱為「摘要內容」）用一個 div 元素包住，該元素的 class 屬性是「i...。
  • Lesser 》Lesser 可以使用 LESS 幫助您管理網站的自訂 CSS。Lesser 與所有的 WordPress 快取兼容，因為 Lesser 使用 WordPress 內建的腳本管理功能輸出最終的 CSS。, ...。
  • DiyStyle – Elementor addon for Vita Theme 》Diystyle 是 Vita WordPress 佈景主題的自訂外掛程式, , 此外掛程式需搭配 Vita 主題使用, 。

文章
Filter
Apply Filters
Close
Mastodon