Тренировка работы с редактором TinyMCE – урок 32

Мне очень нравятся возможности CMS WordPress по работе с визуальным редактором TinyMCE, данные возможности были представлены для тех кто пользуется версией WP выше 3,9. Не обещаю дать вам полную информацию по API TinyMCE, но дам примеры кода который вы сможете использовать в своей работе.

Начнем наш длинный и интересный урок!

Добавляем поле выбора семейства шрифтов и размера шрифта

Для добавления элементов для работы со шрифтами и их размеров используйте код ниже.

Вот что у нас получилось:

wordpress TinyMCE - добавляем размер текста и семейство шрифтов

wordpress TinyMCE - добавляем размер текста и семейство шрифтов

Мы можем менять mce_buttons_2 на mce_buttons_3 или mce_buttons_1, это даст возможность перемещать новые элементы межу первой, второй и третей панелью.

add_filter mce_buttons_3 перемещение элементов между панелями TinyMCE

Добавление пользовательских размеров шрифта

Настроенные по умолчанию размеры шрифта не всегда подходят для оформления текста на сайте. Еще одна проблема шрифтов по умолчанию, это то что они настраиваются в пунктах, а не пикселях, как мы к этому привыкли. Я предпочитаю использовать пиксельные значения (10px, 12px, 13px, 14px..). Ниже я даю пример функции которая изменит размеры шрифта и единицы указанные в WordPress по умолчанию.

WordPress размер шрифта по умолчанию в пунктах ptWordPress TinyMCE размер шрифта по умолчанию в пикселях px

Добавление пользовательских шрифтов

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

Новый шрифт в TinyMCE

Так как некоторых шрифтов может не оказаться на компьютере пользователя, нам нужно не только предоставить выбор этих шрифтов, но и подключить их в WordPress? чтобы они корректно отображались в админке. Например можно подключить шрифт Lato который я использую выше.

Новое и более удобное многоуровневое меню форматы

Если вы еще не пользовались данной функцией, то советую попробовать ее в действии, а результатом данной функции будет меню показанное на картинке ниже.

меню форматы в редакторе pwВключаем меню форматы в wp

 

Добавляем новые пункты в выпадающем меню

Добавить новые пункты в меню очень просто и первое что необходимо знать это надстройку которую мы будем использовать в коде который будет ниже $settings[‘style_formats_merge’] = true; эта надстройка поможет не создавать отдельное меню, но дополнить уже существующее меню форматы.

Добавление нового подменю в wordpress

Под номером (2) есть активный пункт который заключает выделенный текст в тег span с классом text-highlight.

Под номером (1) неактивный пункт, так как этот пункт будет работать только в том случаи если текст заключен в тег <a> и выделен. Я показал это на картинке ниже. Внимательно исследуйте код чтобы разобраться почему так происходит, здесь я даю вы сами разберетесь, а мы пойдем дальше.

wordpress работа с выпадающим меню MCE

Создание кнопки в редакторе TinyMCE

Создание кнопок особенно для нас полезно, так как создавая тему для wordpress мы часто создаем шорткоды, а пользователю необязательно знать все шорткоды наизусть. Создавая кнопку пользователю достаточно будет на нее нажать чтобы добавить шорткод или определенный текст. Создание кнопки будет разделено на две части.

  1. Код для объявления нового плагина в functions.php.
  2. Скрипт JS для добавления кнопки в редактор;

Первый скрипт будет тесно связан с файлом JS. Итак давайте я представлю вам 2 кода:

Добавляем скрипт в файл functions.php

Добавляем javascript по адресу /wp-content/themes/intrepidity/js/mce-button.js

Кнопка создана и вставляет текст.

Кнопка вставляет текст или шорткод

Единственный минус такой кнопочки в том что она занимает много места в редакторе, поэтому я предлагаю сделать кнопочку с иконкой.

Для настройки иконок можно использовать новые подключенные стили, для панели администратора, добавьте их в файл functions.php:

Если стили надо грузить из плагина, можно использовать следующий код:

Создайте папку images в папке темы, если ее там еще нет. В созданную папку добавьте иконку с названием check.png.

Далее добавляем стиль для будущей иконки в файл css/my-mce-style.css.

Переработайте ранее созданный скрипт в папке js/mce-button.js, закомментируйте надпись для кнопки text: ‘New Button’ и icon: false.

Добавьте новый параметр icon: ‘mce-i-my-mce-icon’, который добавит к новой кнопке созданный ранее класс в файле стилей панели администратора.

Если все сделано правильно, то у вас появится кнопка с иконкой, которая при нажатии будет добавлять надпись.

wordpress MCE добавление кнопки с иконкой

Добавление кнопку в редактор с подменю

Мы с вами создали кнопку с иконкой, но при необходимости создать сложный функционал шаблона и множество кнопок этот способ будет затруднительным. К тому же неудобно работать когда много кнопок на панели. Сейчас мы с вами постараемся разобраться в вопросе «как добавить больше свободного места на панели редактора?». Измените код кнопки в файле js/mce-button.js на тот который видите ниже.

Если вы внимательно всмотритесь в структуру кода, то поймете что в нем нет ничего сложного и переработать его не составит большого труда. Вот результат который мы получим:

tinymce editor dropdown menu wordpress

Если вы до этого сделали все правильно, то увидите что при выборе одного из подпунктов меню в поле для текста появится надпись «wp-admin.com.ua — уроки wordpress!».

Чаще всего вставка текста без изменения не очень полезна, так как при вставке шорткода необходимо указывать дополнительные опции, которые будут управлять работой шорткода. Для указания опций в шорткоде можно использовать всплывающее окно, давайте разберемся вместе как его создать.

Всплывающее окно tinymce WordPress

Для создания всплывающего окна необходимо изменить код в файле js/mce-button.js на указанный ниже. Уверен если до этого вы читали внимательно и все у вас получалось, то проблем разобраться в коде ниже у вас не возникнет.

Вот что получилось в результате проделанной работы со всплывающим окном.

всплывающее окно tinymce

Выводы урока

Что дальше? Дальше все в ваших руках, вы можете сами придумать каким образом будете использовать шорткоды и панель инструментов редактора tinymce. Урок получился непростой и немного путанный но мы и не на первом уроке, пора учиться разбираться в коде, если не получится но захотите разобраться как встраивать код в вашу тему могу выделить время и провести платное занятие.

Источник идей и вдохновения к уроку:

WordPress 3.9+ TinyMCE 4 Tweaks: Adding Styles, Buttons, Fonts, Drop-downs & Pop-Ups


Купить хостинг WordPress
/* Репетитор по wordpress
Услуги репетитора онлайн. Список курсов которые я веду
  • Базовый курс по веб-дизайну;
  • Верстка сайтов;
  • Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
  • Разработка сайтов на PHP.
Подробнее читайте на странице репетитор по WordPress
*/

Николаенко Максим

Директор веб-студии ProGrafika. Занимаюсь разработкой, дизайном и продвижением веб-сайтов. Всегда рад новым читателям блога и хорошим клиентам.


Вам может также понравиться...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Шаблоны для WordPress
Самый лучший хостинг в Украине
Стабильный хостинг для Drupal