Как добавить свои кнопки в HTML-редактор WordPress

Как добавить свои кнопки в HTML-редактор WordPress

Не знаю, сколько ещё людей, кроме меня, среди WordPress-блогеров, которые пользуются только вкладкой «HTML» в визуальном редакторе. Но уверен, что многим из блоговодов, уделяющим внимание оформлению текста, этот трюк поможет сэкономить время и свести всю рутину прописывания CSS-классов для тегов к простым кликам мышью по кнопкам.

Лично у меня, привычка следить за HTML появилась из-за того, что TinyMCE часто грешит вставкой лишних переносов <br /> и из-за того, что люблю смотреть живой код. Поэтому вкладкой «Визуально» в редакторе WordPress я пользуюсь очень редко.

А вот с накоплением проектов, получается так, что на каждом принимаются за правила оформления какие-то особые подходы, например, в этом блоге есть first-letter в начальном параграфе каждой статьи, в другом проекте нужно разбивать текст на колонки из админки, в третьем красить и увеличивать текст через <span> с определёнными классами. Поэтому понадобился способ расширить возможности визуального редактора.

Дальше примемся за настройку визуального редактора для WordPress под себя.

По адресу /wp-includes/js/ находим файлы quicktags.dev.js и quicktags.js, создаём их копии (обязательно!).

В quicktags.dev.js видим, что каждая кнопка описывается так (пример для кнопки «b» (strong), пояснения параметров в коде):

edButtons[edButtons.length] =
new edButton('ed_note'
,'b' //имя кнопки (для админки)
,'<strong>' //открывающий тег
,'</strong>' //закрывающий тег
,'b' //внутренне имя для кнопки (для функций)
);

Покажу на примере, как можно добавить свою кнопку, например, для особого параграфа <p class="my-style">…</p>:

edButtons[edButtons.length] =
new edButton('ed_note'
,'мой стиль' // чем короче имя кнопки, тем лучше
,'<p class="my-style">'
,'</p>'
,'myStyle'
);

Дальше, копируем этот код в quicktags.dev.js, расположив между остальными кнопками в нужном порядке, и сохраняем его (файл) под именем quicktags.js с заменой старого файла. (Можно сразу вставить в «старый» quicktags.js, но, как можно увидеть, он не совсем читабелен.)

Если всё сделано правильно, то в табе «HTML» появится ваша кнопка. При одиночном нажатии будет вставляться открывающий/закрывающий тег, а если обвести кусок текста и кликнуть — выделенный текст будет помещён между вашими тегами.

Естественно, стили для <p class="my-style">…</p> следует предварительно прописать в ваш style.css.

Таким образом, можно добавить нужные кнопки для всех особых случаев: других тегов, колонок, параграфов и даже смайлов :)

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

edButtons[edButtons.length] =
new edButton('ed_note'
,'левая колонка' 
,'<div style="float: left; width: 300px;">'
,'</div>'
,'leftCol'
);

Пусть это и вынужденное зло, но таким образом мне удалось научить одного клиента разбивать текст на колонки в своих статьях, не обременяя его знанием HTML/CSS. Когда ему нужно, он просто переключается на «HTML», разбивает кнопками текст на колонки, затем переключается обратно в «Визуально» и правит уже там, видя текст в колонках.

Да, мой источник знаний с описанием, как это можно было сделать (добавить кнопки).

Не забудьте, что при обновлении версии WordPress, вам придётся проделать все эти действия заново, либо просто заменить файлы quicktags.dev.js и quicktags.js на свои, заранее сохранённые.

Для желающих потренироваться на расширении вкладки «Визуально» могу посоветовать эту ссылку. Я с TinyMCE не разбирался, поэтому можете сообщить в комментариях об удачных результатах ;)

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 23

  1. Scriptin, 07.10.2010 в 18:49

    А нет желания использовать zen coding для textarea вместо визуального редактора?

    Для проверки правильности ввода можно предпросмотр ниже текстового поля сделать — это не очень сложно реализуется.

    Еще на ум приходит Markdown с предпросмотром (как на stackoverflow.com), но это решение не везде годится.

    Ответить

    • rotor, 08.10.2010 в 15:46

      За судьбой Zen Coding я как-то следил в блоге Сергея Чикуёнка, но потестировать так руки и не дошли.

      В контексте этой статьи, не думаю, что это будет удачное решение для «клиентских» редакторов.

      Ответить

  2. Денис, 07.10.2010 в 22:23

    А я вот пишу пост в tiny mce, а в конце просто подчищаю ненужный мне шлак в html вкладке. Пока вроде проблем не возникало. На заметку взял, спасибо)

    Ответить

  3. Pavel Drum, 31.10.2010 в 12:16

    Спасибо. Мне как раз нужна была инфа о добавлении своих кнопок) А то заморочился ссылку на сайт в конце поста вручную ставить)

    Ответить

  4. bezvozmezdno, 13.01.2011 в 15:43

    Как мне этого не хватало,

    спасибо большое)

    Ответить

  5. Анна Нимус, 27.02.2011 в 11:04

    спасибо, двачую. первый адекватный пост.

    до этого нагуглил такое говно iskariot.ru/development/wysiwyg-buttons/ но так и не вкурил чего да как там написанно

    Ответить

    • rotor, 28.02.2011 в 1:52

      Если вы не разобрались, то это не значит, что пост Сергея плох. Это значит, что ещё есть куда расти.

      Ответить

  6. Дмитрий, 03.03.2011 в 22:14

    Сделал как в статье ... получилось, а то ни как не мог сделать

    Ответить

  7. Ametist, 23.03.2011 в 15:32

    Попробую сделать:) Я вкладкой HTML пользуюсь только для редактирования more , путем добавления названия поста.

    А про все остальное даже и не задумывалась. Вот только ссылки-рекомендации на зарубежные сайты, мне смогут помочь только если буду пользоваться онлайн-переводчиком.

    Сразу виден уровень моих маленьких знаний.

    Ответить

  8. Артем, 20.04.2011 в 15:43

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

    Ответить

  9. Max, 23.04.2011 в 22:44

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

    Ответить

  10. @ Master, 02.09.2011 в 14:16

    Все, вышеописанные действия с файлами темы — заморока не благодарная! Наилучший метод: использовать плагин Post Editor Buttons. Быстро, удобно и, что самое важное — понятно даже... новичку в кодинге. И не нужно править код и «ломать» голову, если, конечно, важен результат, а не процесс

    Ответить

  11. Шломо, 14.11.2011 в 14:15

    Спасибо за статью, воспользовался.

    Я ищу возможность добавить кнопку с с возможность вставить в текст строчку с формой/именем автора из Контактов(Contact Form 7). Цель — чтоб при нажатии на кноопку открылось окошко с возможностью выбора формы/контакта, аналогично вставки/выбору нужного изображения.

    Возможно Вы знаете как это сделать и сможете помочь либо направить?

    Ответить

  12. Мудрый Кот, 01.01.2012 в 23:23

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

    и сохраняем его (файл) под именем quicktags.js с заменой старого файла

    Ответить

  13. @ Андроид, 13.05.2012 в 19:26

    А есть какие либо более простые решения?

    Мне, например, хочется сделать чтоб при нажатии кнопки в пост вставлялись 3 картинки(каждый раз одни и те же) как это осуществить?

    Ответить

  14. Modelover, 05.07.2012 в 0:56

    У меня версия wordpress 3.3.1 и я так понял там уже все изменилось, как в свежей версии сделать такую кнопку ?

    Ответить

    • DanilaWW, 05.07.2012 в 13:27

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

      [code] edButtons[10] = new qt.TagButton ('strong','b','','','b');/code]

      и после нее втыкаешь свое по аналогии:

      [code]edButtons[15] = new qt.TagButton ('center','center','','','center');[/code]

      Ответить

    • DanilaWW, 05.07.2012 в 13:29

      код пожрало, ищи такой кусок: edButtons[10] = new qt.TagButton — копируй целиком строчку и вставляй уже по аналогии

      Ответить

  15. Modelover, 05.07.2012 в 18:35

    Не получается, все делаю как вы сказали, но нифига

    еще один момент мне нужно вставить тег такого вида [restrictedarea]

    Ответить

  16. Modelover, 05.07.2012 в 21:34

    Все получилось, но помог только плагин HTML Editor Reloaded

    Ответить

    • Мария, 20.08.2013 в 13:08

      У меня, очевидно, руки кривые)) Все проблемы в последнее время решаются только плагинами)))

      Ответить

  17. Александр, 06.05.2013 в 16:45

    Отдельное спасибо автору за «добавление колонки в запись». Когда мне нужно было — найти не смог, но теперь добавлю себе в блокнот.

    Ответить

  18. Зенков Андрей, 28.12.2016 в 1:11

    Ничего сложного нет в том, чтобы добавить кнопку. Нужно грамотно её описать. В каждой версии по-разному это делается, но механизм практически одинаковый

    Ответить

Есть что сказать?

Отменить ответ [X]