Плагины и Темы для ВордПресс на русском языке —>

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

Опубликовано: 14 мая, 2011

Добрый день, когда вы публикуете пост на блоге, то наверно сталкиваетесь с такой проблемой, что не хватает некоторых кнопок, которые могли бы автоматизировать процесс написания и корректировки поста перед публикацией.
В частности мне не хватало таких вещей как кнопок для тэгов заголовков 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 редакторе, которая выделяет текст жирным шрифтом. Теперь копируем её и размещаем рядом, тэги меняем на нужные нам теги, например:
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://wp-admin.org/wp-content/uploads/13.jpg" alt="" /></div>'
,''
,'img-2'
);

Так же очень полезно создать кнопки для добавления своих стилей к тексту, если вы прописали к каким-нибудь селекторам CSS стили, то очень удобно их обозначать в тексте кнопкой, для примера:
edButtons[edButtons.length] =
new edButton('ed_code'
,'Код_span'
,'<span>'
,'</span>'
,'sp'
);

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

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

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