內容簡介
這是一個非常小的外掛，它會在 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).
