Апр

Как добавить дополнительные кнопки в редактор WordPress

Сегодня в блоге гостевой пост о том как добавить дополнительные кнопки в текстовый редактор WordPress, автор заметки Евгений который ведет блог о продвижении Сospi.ru.

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

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

Чтобы добавить дополнительные кнопки, нам надо изменить файл quicktags.dev.js, который находиться по адресу /wp-includes/js/. Рядом с этим файлом лежит сам исполнительный файл quicktags.js, его мы удаляем и работаем с quicktags.dev.js.

Откройте его и найдите вот такие строчки:

edButtons[edButtons.length] =
new edButton('ed_strong'
,'b'
,'<strong>'
,'</strong>'
,'b'
);

Эта функция добавляет первую кнопку в HTML редакторе, которая выделяет текст жирным шрифтом. Теперь копируем её и размещаем рядом, тэги <strong> меняем на нужные нам теги, например <h2>:

edButtons[edButtons.length] =
new edButton('ed_strong'
,'h2'
,'<h2>'
,'</h2>'
,'h2'
);

И в редакторе мы увидим вот такую картину:

Важно: На этом этапе кнопка не появиться в редакторе, потому что файл надо переименовать, об этом ниже.

По аналогии, можно добавить какие угодно кнопки, для вставки изображений с корректировкой по центру я создал вот такую кнопочку:

edButtons[edButtons.length] =
new edButton('ed_ul'
,'img-2'
,'<div style="text-align: center;"><img src="http://cospi.ru/wp-content/uploads/13.jpg" alt="" /></div>'
,''
,'img-2'
);

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

edButtons[edButtons.length] =
new edButton('ed_code'
,'Код_span'
,'<span class="cod1">'
,'</span>'
,'sp'
);

Сам класс cod1, прописан в файле style.css до этого. Такая кнопка у меня оформляет текст, вот так:

После того, когда вы вставили все нужные вам кнопки и разместили их как вам нравиться, то сохраните файл quicktags.dev.js и переименуйте его в quicktags.js. После этого, когда вы зайдёте в Текстовый редактор, то вы увидите новые кнопочки.

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

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

С другой стороны, если вы используете стандартное выделение, то куда проще установить плагин TinyMCE Advanced где есть большинство необходимых кнопок для форматирования:

Правда в случаях когда нужно выделение по минимуму — жирный, h2 и крайне важно не нагружать хостинг можно использовать данный хак с кнопками в стандартном редакторе.

P.S. Сертификация различного рода услуг и товаров а также санитарно-гигиеническое заключение входят в перечень возможностей компании СпецСервис Логистика.
Для девушек которые хотят приятно выделиться полезны будут статусы о любви вконтакте — красивые и остроумные фразы привлекут внимание парней.

Оцените статью:

(голосов - 13, средний балл: 4,46 из 7)

Загрузка...

Категории: Возможности; Хаки и секреты;

Теги: оформление админки, текстовый редактор, тексты блога.

комментариев 16 к статье “Как добавить дополнительные кнопки в редактор WordPress”

kunicz 18.04.2011
Да, отличная штука. На моем сайте/блоге есть кнопка, которая… !!!создает пост! :) Конечно, предварительно приходится шаманить с картинками и произвольными полями всякими, но сам факт порой веселит — написать новый пост одним нажатием кнопки в эдиторе!

PS. Отличный блог, читаю с удовольствием.
СвятОм 20.05.2011
А вот как бы поменять цвет шрифта по умолчанию? У меня почему то серый стоит, и сука достал уже, упорно перекрашиваться не хочет.
Tod 22.05.2011
СвятОм, это проще всего поменять в CSS, находишь класс для текста и пишешь что-то вроде color: black;
Михалыч 22.10.2011
СвятОм, это можно сделать с помощью тега span прописав в атрибутах тега стиль шрифта, а
можно добавить новый класс CSS и создать для него кнопку :)
AleDv 18.01.2012
Отличная фича с редактором! Сам давно хотел немного поменять редактор под свои нужны, ибо стандартный не очень устраивает, а плагинами не хочу грузить движок.
Suvitruf 19.01.2012
AleDv, плагины тоже самое делают.
Андрей 08.04.2012
Очень странно, что разработчики WordPress до сих пор не могут догадаться добавить кнопки заголовков в HTML редактор.

Кстати, а что же с обычным редактором? Как туда кнопочки добавить? К примеру, можно было бы тэг ютуба запилить и спойлера для тех, у кого стоит соответствующие плагины.
Tod 09.04.2012
Андрей, в статье как раз и рассказывать про обычный редактор, хотя, конечно, не про ютуб. Вообще подобная функциональность больше зависит от самих плагинов, как правило, в редакторы добавляются соответствующие кнопки.
Андрей 09.04.2012
Может я Вас не так понял? Но по скришнотам ведь видно, что кнопка добавилась в HTML редактор, а не в визуальный, который я и имел в виду по словом «обычный».
Suvitruf 09.04.2012
Можно и в визуальный сделать, только по сложнее. Да и ни к чему.
Визуальный редактор юзают, как правило, совсем не знакомые с вёрсткой люди.
Tod 10.04.2012
Андрей, похоже я тоже не так понял:) В принципе, добавить в обычный текстовый редактор есть смысл, если делать сайт, скажем, под заказ. Если для себя то можно наверное и переключаться в HTML — не слишком это сложно.
Андрей 10.04.2012
Suvitruf, вот мне бы и хотелось узнать, как это сделать. В прочем, пойду погуглю. А на счет «ни к чему» — это «каждому свое». Мне вот было бы удобно, ведь в визуальном редакторе более наглядно видно, что у тебя со статьей получется, нежели смотреть, куда вставил ссылки для перелинковки в HTML редакторе.

Tod, это верно, но «как все-таки сделать?» — вопрос, который не перестает меня волновать =) Буду ждать статью на эту тему, думаю, она будет полезна не мне одному ;)
Suvitruf 14.04.2012
Андрей, если всё ещё интересует, можете глянуть http://suvitruf.ru/2012/04/14/1114/
Николай 19.05.2012
А как в визуальный редактор добавить свою кнопку, со своим обработчиком? Чтобы результат вставлять в поле текста.
Alex 03.11.2014
Как вчегда хрень…
Все подобные блоги только засерают эфир своим существованием…
Вся инфа в этой говно-статейки окончательно устарела. в 4-ом ВП это все не работает…
Tod 03.11.2014
Alex, ну так по комментариям можно был сообразить, что статья 2011 года. Конечно, все может уже работать по другому. Информация быстро меняется.