Створюємо свої кнопки для редактора записів wordpress

Перш ніж почати

Не забудьте вказати конкретний шлях в коді:

Потім треба підготувати код для 2 кнопок:

Тут треба звичайну букву "обернути" в код з наперед заданим HTML-класом span для стилізації накреслення літер. CSS-код наведено нижче, застосуєте його для свого файлу в темі оформлення під назвою style.css:

Тут ми зробимо шорт-код для додавання списку недавніх постів; просто відкрийте файл wptuts.php і додайте в нього наступний код:

Реєструємо новий плагін дня TinyMCE

Налаштовуємо плагін для TinyMCE

Не забудьте додати цей код в файл wptuts-plugin.js. Наведений вище код виконує 2 основні завдання:

  1. По-перше, визначити новий плагін для TinyMCE можна за рахунок методу create. Поведінка плагіна визначається за рахунок функцій init і createControl. Інформація про плагін "оголошена" в функції getInfo. У плагіна буде назва Wptuts і значення ID wptuts.
  2. І нарешті додаємо новий плагін в менеджер плагінів під TinyMCE.

створюємо кнопки

У функції init ми створюємо нові наші кнопки. Ось код для цього завдання:

Додаємо команди для кнопок

Визначивши імена команд для кнопок, які будуть їх виконувати, ми ще не визначили, що саме ці команди запускають, і як саме ці кнопки працюють. На цьому етапі ми налаштуємо дії для кнопок. У функції init додайте наступний код:

Метод ed.addCommand допоможе нам додати нову команду. Вам треба передати значення команди, її ID і функцію зворотного виклику, яка буде виконуватися за рахунок виклику методу ed.execCommand. Врахуйте, що ed представляє об'єкт tinyMCE.activeEditor. Давайте подивимося на ехо-функції:

Реєструємо CSS-код для кнопок (за бажанням)

Що стосується шорт-кодів, то у них може і не бути HTML-елементів. Як же тоді ми їх стилізуємо і оформимо? У цій ситуації результату домогтися складніше, але нічого неможливого тут теж немає (за замовчуванням у нас є кнопка для WordPress під назвою "Add media"). Складнощі тут можуть виникнути при "загвинчування" шорт-коду в структуру елемента HTML з подальшою стилізацією під щось візуально зрозуміле і приємне. На цих складних процедурах в цьому пості ми зупинятися не будемо.

результати

І ось нарешті результати будуть відображатися приблизно в наступному вигляді:

Створюємо свої кнопки для редактора записів wordpress

Створюємо свої кнопки для редактора записів wordpress

Створюємо свої кнопки для редактора записів wordpress

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

новий плагін дня.

У файл functions.php

У исходниках цей код лежить в wptuts.php і нехай там і залишається. Принаймні у мене так все працює ВП 4.3.1ю

ну ти бл * і лом. хоч би написав що в якийсь файл розпихати. ладно я знаю, але тебе читають і люди які можливо бачать ВП перший раз в житті і їм знадобилося модифікувати адмінку. просто враховуй це наступного разу.

Люди які бачать WP вперше, навіть не знаю що так можна, а інші сиськи дізнаються про це з таких ось постів.

А якщо спробувати після виділення тексту затиснути Alt + Shift + A?

Чи не виходить, 0 реакції. Відключав плагіни, все також. Пробував з різних ноутбуків, а також браузерів - мозила, хром, сафарі. Нічого не відбувається, навіть теми перемикав на початкові.

Постараюся задати питання на форумі вордпресс. Кнопки не хочуть працювати.

Це тільки "на місці" дебажіть! Швидше за все якась js помилка. Установи FireBug під FF - мені він добре допомагає.

Створюємо свої кнопки для редактора записів wordpress

Створюємо свої кнопки для редактора записів wordpress

Створюємо свої кнопки для редактора записів wordpress

Створюємо свої кнопки для редактора записів wordpress

Схожі статті