Апр
18
16

Как добавить дополнительные кнопки в редактор 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 где есть большинство необходимых кнопок для форматирования:

текстовый редактор wordpress

Правда в случаях когда нужно выделение по минимуму — жирный, 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 года. Конечно, все может уже работать по другому. Информация быстро меняется.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

Последние посты
Заработай в GoGetLinks
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости