Як додати свої стилі в wordpress редакторі tinymce

Зверніть увагу. Далі ми будемо створювати варіації деякого відкритого коду, який називається TinyMCE Kit зі сховищ плагінів WordPress.

Швидке рішення

Список, що випадає 'Styles' ( 'styleselect') додається в другий ряд кнопок (theme_advanced_buttons2_add) на початку ряду (_before). Цей список, що випадає потім наповнюється своїми стилями, які додаються через масив $ classes замість того, щоб написати їх там безпосередньо (в форматі, описаному в документації TinyMCE). В останній частині, своя таблиця стилів додається до самого сайту за допомогою функції wp_enqueue_scripts.

Альтернативне додавання стилів

Ми можемо позбутися від цих обмежень і зробити наш список, що випадає потужнішим, додаючи стилі в масиви з використанням синтаксису TinyMCE. Решта код плагіна залишається незмінним. У TinyMCE кожен формат встановлює набір параметрів, який ви можете визначити (TinyMCE - формати):

  • inline - назва вбудованого елемента, який створить, наприклад, "span". Обраний в даний момент текст буде укладено в цей вбудований елемент.
  • block - назва для блочного елемента, щоб створити, наприклад, "h1". Існуючі блокові елементи всередині вибраної частини будуть замінені на новий блоковий елемент.
  • selector - CSS3 селектор для знаходження елементів всередині обраного. Може використовуватися для застосування класів до певних елементів або в комплексі, наприклад, непарних рядках в таблиці.
  • classes - розділений пробілами список класів, які застосовуються для обраних елементів для нових вбудованих / блокових елементів.
  • styles - назва / значення об'єкта з елементами CSS, які повинні застосовуватися, наприклад, колір і т.д.
  • attributes - назва / значення об'єкта з атрибутами, які повинні застосовуватися до обраних елементів або до нового вбудованому / блочному елементу.
  • exact - відключає злиття схожих стилів. Це потрібно для деяких проблем з CSS, наприклад, оформлення тексту для підкреслення / закреслення.
  • wrapper - вказує, що поточний формат - формат контейнера для блокових елементів. Наприклад, wrapper або blockquote шару.

Якщо ви хочете використовувати ці додаткові стилі на своєму сайті, просто додайте код плагіна в файл functions.php вашої теми. Не забувайте замінювати plugin_dir_url (__ FILE__) на get_stylesheet_directory_uri () і зверніться до потрібної таблиці стилів з папки теми.

висновок

Джерело: WP.tutsplus.com

Дякую за плагін, реально допоміг!

Дякуємо! Цікавить ще як можна додати свою кнопку з [шорткодом] [/ шорткодом] в tinymce-advanced, можливо хтось шукав таке, потрібна детальна інструкція що і куди вставляти, для дуже далекого від цієї людини =)?

Там style додається тільки до елементу Red Uppercase Text, зазирни в исходник і зрозумієш як прибрати
'Title' => 'Red Uppercase Text',
'Inline' => 'span',
'Styles' => array (
'Color' => '# ff0000',
'FontWeight' => 'bold',
'TextTransform' => 'uppercase'
)
поміняй на
'Title' => 'Red Uppercase Text',
'Inline' => 'span',
'Classes' => 'my class'

Схожі статті