Настраиваемые кнопки в HTML-редакторе WordPress

Настраиваемые кнопки в HTML-редакторе WordPress

В штатном визуальном редакторе WordPress, панель WYSIWYG содержит достаточное количество функций для создания статей: форматирование текста, управление стилями, списками вставка текста без форматирования и текста из Mirosoft Word  и прочие менее востребованные кнопки.

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

Скажу откровенно, в свое время я отказался от использования этого плагина — во-первых, он потребляет довольно ощутимое количество памяти, а во-вторых — 90% функций данного плагина мне не нужны, поскольку я предпочитаю большую часть HTML-кода писать вручную. Кроме того, все отлично знают, как WordPress умело расправляется с кодом в теле страниц.

Но при таком подходе возникает неудобство в постоянном набирании одних и тех же блоков кода, что, согласитесь, достаточно утомительно. Кроме того, в некоторых случаях требуется добавление нестандартных кодовых вставок (например, для оформления PHP- и CSS-кода).

Разбираться с дописыванием штатного редактора мне, честно говоря, не хотелось, поэтому я решил зайти с другой стороны — если уж я большую часть редактирования провожу в режиме HTML-редактора, то логично найти возможность добавить функции вставки элементов кода именно к нему.

Результатом моих изысканий стал плагин AddQuicktag — очень простое в управлении,  не ресурсоемкое (по сравнению с  TinyMCE Advanced) решение, которое позволяет добавлять в HTML-редактор WordPress любые необходимые кодовые вставки.

Установка AddQuicktag

Установка не несет в себе ничего примечательного — поставить плагин можно либо через сам WordPress, используя раздел «Добавить новый» в меню «Плагины», либо же закачав файлы плагина на сервер с помощью FTP-клиента  и активировав его в панели плагинов. После этого находим в разделе «Параметры» строку AddQuicktag и попадаем на аскетичную страницу управления плагином.

Управление AddQuicktag

Давайте посмотрим на примере, как настроить вставку кнопок редактор с помощью AddQuicktag. Предположим, нам необходимо добавить кнопку, по которой в код статьи будет вставляться определенный стиль тега <p>, который мы используем для оформления цитат.

Для этого заполним поля следующим образом:

  • «Название кнопки» — вводим название кнопки, которое будет отображаться на панели.
  • «Атрибут заголовка» — вводим подсказку, которая будет отображаться при наведении на кнопку.
  • «Начало тега (-ов)» — указываем открывающий тег и его параметры.
  • «Конец тега (-ов)» — указываем закрывающий тег.

Интерфейс с подсказками — на скриншоте:

Настраиваемые кнопки в HTML-редакторе WordPress

По абсолютно аналогичной схеме можно вставить и любые другие теги с любыми атрибутами. К примеру, нам нужно сделать кнопку для вставки оформления PHP-кода с помощью плагина SyntaxHighlighter.

Настраиваемые кнопки в HTML-редакторе WordPress

Как видите, все крайне просто.

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

Экспорт\Импорт настроек плагина AddQuicktag

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

Настраиваемые кнопки в HTML-редакторе WordPress

Кстати, помимо использования плагина TinyMCE Advanced, дополнительные кнопки в визуальный редактор WordPress можно добавить и с помощью редактирования файла functions.php темы блога. Об этом читайте в статье «Как добавить полезные кнопки в визуальном редакторе WordPress».

Но обратите внимание, как и в случае с плагином TinyMCE Advanced, кнопки будут предустановленными из готового набора редактора, в то время как с помощью AddQuicktag можно создавать произвольный набор и компоновку функций и «вешать» их на кнопки.

А вы используете дополнительные опции редактора при администрировании сайта?

41 комментарий к “Настраиваемые кнопки в HTML-редакторе WordPress”

  1. Это совсем ни к чему если пишешь текст статьи во внешних редакторах типа Виндовз Лайв Врайтер или ему подобных. На крайняк можно писать статью прямо в ДримВивере, там вообще можно чуть ли не отдельный сайт соорудить. Не говоря уже про таблицы и вставки шаблонов кода. Кому сильно тяжело, те же функции (вставки кода) поддерживает Notepad++, к нему вообще вагон плагинов имеется, не удивлюсь если среди них окажется какой-нибудь для постинга в вордпресс.

    ОтветитьОтветить
  2. TinyMCE Advanced неплохой плагин. Но людям которые разбираются в коде, WordPress редактора достаточно. Думаю это если создаете сайт на WordPress и отдаете его компании или человеку, который заказал. Там да, ему будет удобнее именно с TinyMCE Advanced.

    Насчет AddQuicktag попробуем :)

    ОтветитьОтветить
  3. Вах! Это именно то, что мне недоставало, поскольку пишу только в html-редакторе — СПАСИБО!

    А вот этот 2leep.com, который я у Вас обнаружила и поставила себе, — штука хорошая, но ещё сыровата, кажется: во-первых, иногда очень подолгу грузит картинки; во-вторых, периодически берёт картинки откуда-то с потолка (у меня таких в посте нет); в-третьих, часто засовывает посты, которых у меня никогда не было ваще!

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

    Я в шоке :) Хотя идея отличная.

    ОтветитьОтветить
  4. @ Allpa:

    поскольку пишу только в html-редакторе

    Ну вот, в полку любителей такой формы написания — прибыло :)

    во-первых, иногда очень подолгу грузит картинки;

    Да, это есть, но замечал достаточно редко.

    во-вторых, периодически берёт картинки откуда-то с потолка (у меня таких в посте нет);

    Это автоматически подбираемые картинки из коллекции. Бывает, что почему-то он не находит картинку из записи (или ее там просто нет) и тогда берется другое изображение.

    Настроить свое изображение можно в самом сервисе, в соответствующем разделе.

    в-третьих, часто засовывает посты, которых у меня никогда не было ваще!

    Это могут быть просто не Ваши посты — система в принципе рассчитана на обмен постами :)

    Но насчет продолжения работы над сервисом — согласен, пока это явно бета-версия :)

    ОтветитьОтветить
  5. @ Тестовая Страница: я не использую ни один из них. Пробовал и Windows Live Writer и ScribeFire для Firefox, и еще несколько подобных — мне просто неудобно. В большинстве своем, это связано с использованием CSS.

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

    Честно говоря, я не могу себе представить, зачем нужно использовать Dreamweaver для написания статей в блог. Это все равно, что вскапывать газон — экскаватором :)

    Кому сильно тяжело, те же функции (вставки кода) поддерживает Notepad++

    Редакторы кода не имеют никакого отношения к вставке примеров кода в статью. Это абсолютно разные вещи.

    Плагина для WordPress под этот редактор, насколько я знаю, нет. Скорее всего по той простой причине, что в нем нет ни малейшего смысла. Вы просто не поняли, о чем говорится в статье. Для примера посмотрите «20+ правил .htaccess, которые должен знать каждый разработчик» и обратите внимание на то, как оформлены вставки кода .htaccess.

    ОтветитьОтветить
  6. Павел написал(а):

    Думаю это если создаете сайт на WordPress и отдаете его компании или человеку, который заказал. Там да, ему будет удобнее именно с TinyMCE Advanced.

    Да, Вы правы — для заказных сайтов на WordPress, я в большинстве случаев ставлю TinyMCE Advanced.

    А для части заказчиков использую именно AddQuicktag, поскольку некоторые моменты проще оформить вставками готового блока, а так TinyMCE Advanced — не настроишь.

    А бывает, что и оба эти плагина вместе — все зависит непосредственно от задачи :)

    ОтветитьОтветить
  7. Ха. Спасибо не знал.

    Действительно Тини, идет самый юзабельный плаг, даже в джумле стоит по умолчанию.

    ОтветитьОтветить
  8. Полезная вещь... потому как я в html-е не профи и иногда приходится искать нужный код. А с этим плагином очень удобно (как с закладками). Добавил кнопку и не паришься в поисках нужного кода.

    ОтветитьОтветить
  9. Скажите пожалуйста, а с установленным плагином FCKeditor можно ли сделать подобное?

    ОтветитьОтветить
  10. @ Cyber Freak: честно говоря — без понятия. Я использую FCKeditor только под Joomla, для WordPress же никогда его не ставил.

    ОтветитьОтветить
  11. КЛАСС!!! самое то, что надо! у самого недавно были мысли «вот бы самому кнопки вставлять», а тут на тебе! спасибо!

    ОтветитьОтветить
  12. Мда. Я, как заправский маньяк-параноик, предпочитаю обходиться без визивигов. Я — кха! — сначала проверяю текст будущего поста в Ворде на предмет ошибок, потом прогоняю его через автотипографику на предмет простановки неразрывных пробелов и правильных символов, а потом довожу до блеска в Дримвивере, форматируя текст и добавляя по необходимости ссылки, картинки и врезки кода. Может быть, через визивиг и проще, но ещё не придумали такого визивига, которому я могла бы со спокойной душой доверить мой текст.

    ОтветитьОтветить
  13. @ Павел:

    Ключевая фраза — людям, которые разбираются в коде.

    Допустим, я сотрудничаю с МЛМ-компанией. Подписала новичка, объяснила как и что писать в блоге. Что мне проще — долго долбить ему основы сайтостроения или поставить плагины, чтобы нажал на кнопку и вот он результат?

    ОтветитьОтветить
  14. Закинула Ваш (пока только Ваш, а там посмотрим) блог в рубрику (сайдбар) «Статьи коллег» с помощью вышеозначенного сервиса :)

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

    Давно хочу посвятить (в ближайшее время доберусь обязательно) Вашему блогу очередной обзор в рамках акции "Скажи мне, кто твой друг... " — скока я из него всего понаковыряла себе, этого я даже не помню :) Много. И продолжаю ковырять.

    Спасибо!

    ОтветитьОтветить
  15. @ Allpa: спасибо большое! :) Картинки, вроде бы ок — я их правил вручную.

    Надеюсь, что и дальше буду радовать Вас интересными статьями :) Подумаю со своей стороны — как отблагодарить :)

    ОтветитьОтветить
  16. @ Княгиня: по-моему, это очень уж сложная схема получается :) Я проверяю орфографию непосредственно через браузер, автотипографика стоит как плагин для WordPress (и есть отдельный для браузера), а ссылки и картинки прописываю вручную — как раз с помощью AddQuicktag :)

    ОтветитьОтветить
  17. Меня больше заинтересовало meta name="Description" meta name="Keywords" для каждого поста.

    Обнаружил что wordpress их удаляет.

    ОтветитьОтветить
  18. seo-самурай написал(а):

    Меня больше заинтересовало meta name="Description" meta name="Keywords" для каждого поста

    Есть шаблоны, поддерживающие данные произвольные поля. Например, все шаблоны от Elegantthemes.

    @ Yaroslav.CH, с восторгом понастраивала нужных кнопок — боже, как же это удобно стало теперь!

    Одного плагу недостаёт: возможности менять местами уже созданные кнопки. Приходится, если есть необходимость поставить новую кнопку с созданной много ранее, начинать всё сначала :(

    ОтветитьОтветить
  19. Не очень понял, как импортировать настройки плагина...

    ОтветитьОтветить
  20. Спасибо, как раз искала что-нибудь подобное! Уже установила, сейчас испробуем

    ОтветитьОтветить
  21. Давно искал что-то подобное, спасибо! Буду пользоваться и радоваться...

    ОтветитьОтветить
  22. @ Валодя: сервис позволяет выводить на своем сайте либо свои же статьи (картинка+текст+ссылка), либо же, если стать членом одной из групп, «обмениваться» статьями — анонсы распределяются между участниками группы. Каждый участник откручивает анонсы других участников. В общих чертах принцип напоминает банерообменную сеть.

    ОтветитьОтветить
  23. Пока пользуюсь стандартным редактором, но он такой неудобный капец, особенно при работе с рисунками. Рррррррр. Ща вот думаю TinyMCE поставить, надеюсь на улучшение работы

    ОтветитьОтветить
  24. А как на счет нагрузки на систему этим плагином? Сколько памяти жрет?

    ОтветитьОтветить
  25. У меня стоит TinyMCE, хотелось бы настроить кнопку «ответить» в комментариях. Ни как не могу... «Цитировать» не надо, хоть «ответить» вставить...

    Автор вы разбираетесь в этом? Спасибо!

    ОтветитьОтветить
  26. @Александр Борисов: TinyMCE не имеет отношения к комментариям в публичной части блога. Для организации кнопки «Ответить», можно воспользоваться соответствующим плагином. Более подробно о нем я писал в статье «Обустраиваем рабочее место комментатора» (см. раздел 8. Возможность ответа на комментарий).

    ОтветитьОтветить
  27. Плагин подходящий и дополнительные опции используем, куда же без них. Спасибо!

    ОтветитьОтветить
  28. Спасибо! Сколько смотрел подборки плагинов, но такого замечательного не видел!

    Очень помогает в работе!

    ОтветитьОтветить
  29. Самое то для перелинковки, когда хочешь вручную контроллировать процесс!

    Я уже собирался редактировать функцию встроенного редактора, т.к. при добавлении ссылок не отображаются теги — только записи и страницы. А у меня 90% трафика должно на теги идти.

    ОтветитьОтветить
  30. А у меня почему-то ни один плагин для визуального редактора не работает... Что уже только не делал... Наверно, что-то в коде wordpress-шаблона не то, приходится только стандартным обходится.

    ОтветитьОтветить
  31. А не подскажите, как настроить неформатированный ввод текста. Объясню: например я копирую с другого сайта кусок кода, и вставляю в редактор. Он вставляется с тем форматированием, которое было на сайте. А можно ли кастомизировать на вставку обычного текста (без ссылок, div-ов и прочего...)?

    ОтветитьОтветить
  32. @freeeeez: самый простой вариант — вставка через «Блокнот» — копируете текст с сайта -> вставляете его в Блокнот -> копируете из блокнота в редактор. Этот способ 100% гарантирует отсутствие любых тегов — Вы получаете plain text.

    Если нужно вставлять именно через редактор, то можно воспользоваться кнопками «Вставить как текст» или «Вставить из Word» — в зависимости от того, откуда взят текст:

    ОтветитьОтветить
  33. @YoS:

    Тоже долбался с кнопкой, но пошёл по более сложному пути (т.к. в этом деле совсем ещё профан) — сделал кнопочку в Dreamwiewer и хтмл просто прикручивал к виджетам.

    А тут добрый человек открыл глаза ))

    ОтветитьОтветить
  34. Эх, и как это я раньше не сообразила воспользоваться... Для такого маньяка как я, накрутившего себе шорткодов, такие кнопки просто необходимы. :) Теперь жизнь станет ещё лучше и ещё веселей. :D

    ОтветитьОтветить
  35. Мне больше всего по душе Adobe Dreanweaver. Хотя это больше дело привычки. Но пишу как правило в нём. Когда нужда заставила работать на нескольких компах (домашний и рабочий) нашёл парочку неплохих онлайн редакторов. И статьи пишу для вордпреса и код, когда нужно.

    ОтветитьОтветить

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

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