Как улучшить визуальный редактор с помощью пользовательских форматов

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

Визуальный редактор WordPress — классная штука. Наиболее важные форматирования могут быть удалены одним щелчком мыши. Вы можете обогащать и структурировать свои статьи элементами. Однако было бы хорошо, если бы редактор имел еще несколько функций.

Конечно, на рынке есть много плагинов, которые расширяют возможности редактора с помощью шорткодов. Но действительно ли они вам нужны? Или достаточно нескольких элементов, например, красивых кнопок? Это не замедлит ваш сайт без необходимости.

Конечно, вы уже можете в любой момент переключиться в текстовый режим, чтобы добавить свое форматирование. Но удобство для пользователя выглядит иначе.

WordPress: добавление собственных стилей в визуальный редактор без плагина

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

1 — Создаем свой пункт меню в редакторе

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

https://gist.github.com/anonymous/eb6b3acf39bfee4ffadf2f2e4a7cd7be

2 — Создание опций, которые можно выбрать

Теперь нам нужно настроить параметры, которые мы хотим добавить в раскрывающееся меню, которое мы только что создали. После этого вы сможете использовать эти форматы. Для этого урока мы выберем три кнопки, которые впоследствии будем использовать.

https://gist.github.com/anonymous/459d62df1ac1cf3b2565756177c68d63

3 — Создание необходимого CSS для кнопок

Кнопки уже можно использовать. Вы можете попробовать это, настроив новую статью, а затем используя новую функцию. Однако кнопки пока не выглядят как кнопки; для этого нужно немного CSS.

Скопируйте CSS в файл style.css вашей темы или создайте для него собственную таблицу стилей.

https://gist.github.com/anonymous/79229eef4aa434143d0d570d640646d5

4 — Нам все еще нужен CSS для редактора

Чтобы мы могли видеть правильно отформатированные кнопки в визуальном редакторе, нам нужен editor-style.css.

В большинстве случаев вы найдете файл в корневом индексе вашей темы или в папке с именем CSS. Если его еще нет, я рекомендую вам установить его сейчас. Это не так сложно. Просто создайте пустой файл CSS с именем editor-style.css с помощью HTML-редактора.

Теперь скопируйте CSS из третьего пункта в новую таблицу стилей и сохраните. Переместите его в основной файл index. Теперь все, что вам нужно, это небольшая функция PHP, которая вызывает новую таблицу стилей для вашего редактора.

Noupe: 9 лучших бесплатных HTML-редакторов для веб-разработчиков (версия для Windows)

https://gist.github.com/anonymous/e93ec4ed512b595c5271bcd865a19707

Окончательный результат: наши новые кнопки

Новые кнопки очень просты в использовании, и для написания новой статьи достаточно одного щелчка мыши.

В редакторе Tiny MCE отформатированные кнопки теперь будут выглядеть красиво:

То же самое можно увидеть и при использовании их внутри статьи.

Как использовать новые кнопки

Поскольку мы настроили кнопки довольно простыми способами, вы не сможете пользоваться удобным генератором. Тем не менее, новые кнопки управления довольно просты. Просто напишите текст кнопки в редакторе, отметьте текст, а затем нажмите на новый пункт меню «Форматы». Выберите нужную кнопку.

Итак, вы создали цветную кнопку. Для ссылки снова отметьте текст кнопки и внедрите ссылку.

Добавление других элементов — просто

Вы можете добавить другие элементы, когда захотите. Может быть, вы так же, как я, и вы используете тег кода более одного раза? Или вы хотите создать цветное поле для выделенного текста? Нет проблем, на скриншоте показано, что нужно изменить в PHP-коде пункта два.

Все, что вам нужно сделать, это убедиться, что вы скопировали весь массив и поместили его ниже существующего. На скриншоте я отметил начало и конец массива. Зеленые скобки отмечают область.

Использование плагина для этой работы

Конечно, вы также можете использовать плагин, когда много работаете со своими стилями. Мы уже представили один из самых интересных плагинов для собственных стилей и шорткодов. Это расширение также понравится разработчикам, так как практически нет ничего, что вы не могли бы создать и использовать.

Noupe: Post Snippets для WordPress — вам нужен этот плагин!

Заключение

Мы нашли отличный способ удобного использования пользовательских форматов в редакторе WordPress с помощью простых средств и без замедления работы нашего WordPress с помощью раздутого плагина. Я хотел бы услышать, что вы смогли реализовать с помощью этого метода, так что не стесняйтесь комментировать.