Как добавить дополнительные кнопки в редактор 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. Сертификация различного рода услуг и товаров а также санитарно-гигиеническое заключение входят в перечень возможностей компании СпецСервис Логистика.
Для девушек которые хотят приятно выделиться полезны будут статусы о любви вконтакте — красивые и остроумные фразы привлекут внимание парней.
комментариев 16 к статье “Как добавить дополнительные кнопки в редактор WordPress”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Записи и посты wordpress, оформление записи (5,91 из 7, голосов - 47)
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress (3,93 из 7, голосов - 44)
- Умный копирайт в footer.php для wordpress (5,63 из 7, голосов - 30)
- Обновление плагинов и тем в WordPress: автоматическое, через FTP, скрытие уведомлений (5,19 из 7, голосов - 31)
- Polylang — плагин для мультиязычных сайтов на нескольких языках в WordPress (4,42 из 7, голосов - 31)
- Плагин TinyMCE Advanced – wordpress текстовый редактор (6,35 из 7, голосов - 20)
- Рубрики и категории wordpress, функция wp_list_categories (6,05 из 7, голосов - 20)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
Да, отличная штука. На моем сайте/блоге есть кнопка, которая… !!!создает пост! :) Конечно, предварительно приходится шаманить с картинками и произвольными полями всякими, но сам факт порой веселит — написать новый пост одним нажатием кнопки в эдиторе!
PS. Отличный блог, читаю с удовольствием.
А вот как бы поменять цвет шрифта по умолчанию? У меня почему то серый стоит, и сука достал уже, упорно перекрашиваться не хочет.
СвятОм, это проще всего поменять в CSS, находишь класс для текста и пишешь что-то вроде color: black;
СвятОм, это можно сделать с помощью тега span прописав в атрибутах тега стиль шрифта, а
можно добавить новый класс CSS и создать для него кнопку :)
Отличная фича с редактором! Сам давно хотел немного поменять редактор под свои нужны, ибо стандартный не очень устраивает, а плагинами не хочу грузить движок.
AleDv, плагины тоже самое делают.
Очень странно, что разработчики WordPress до сих пор не могут догадаться добавить кнопки заголовков в HTML редактор.
Кстати, а что же с обычным редактором? Как туда кнопочки добавить? К примеру, можно было бы тэг ютуба запилить и спойлера для тех, у кого стоит соответствующие плагины.
Андрей, в статье как раз и рассказывать про обычный редактор, хотя, конечно, не про ютуб. Вообще подобная функциональность больше зависит от самих плагинов, как правило, в редакторы добавляются соответствующие кнопки.
Может я Вас не так понял? Но по скришнотам ведь видно, что кнопка добавилась в HTML редактор, а не в визуальный, который я и имел в виду по словом «обычный».
Можно и в визуальный сделать, только по сложнее. Да и ни к чему.
Визуальный редактор юзают, как правило, совсем не знакомые с вёрсткой люди.
Андрей, похоже я тоже не так понял:) В принципе, добавить в обычный текстовый редактор есть смысл, если делать сайт, скажем, под заказ. Если для себя то можно наверное и переключаться в HTML — не слишком это сложно.
Suvitruf, вот мне бы и хотелось узнать, как это сделать. В прочем, пойду погуглю. А на счет «ни к чему» — это «каждому свое». Мне вот было бы удобно, ведь в визуальном редакторе более наглядно видно, что у тебя со статьей получется, нежели смотреть, куда вставил ссылки для перелинковки в HTML редакторе.
Tod, это верно, но «как все-таки сделать?» — вопрос, который не перестает меня волновать =) Буду ждать статью на эту тему, думаю, она будет полезна не мне одному ;)
Андрей, если всё ещё интересует, можете глянуть http://suvitruf.ru/2012/04/14/1114/
А как в визуальный редактор добавить свою кнопку, со своим обработчиком? Чтобы результат вставлять в поле текста.
Как вчегда хрень…
Все подобные блоги только засерают эфир своим существованием…
Вся инфа в этой говно-статейки окончательно устарела. в 4-ом ВП это все не работает…
Alex, ну так по комментариям можно был сообразить, что статья 2011 года. Конечно, все может уже работать по другому. Информация быстро меняется.