Как добавить в wordpress свои кнопки в html редактор? Как добавить кнопки в редактор wordpress
Как добавить новые кнопки в редактор Вордпресс без плагинов
При создании новой записи часто приходится дорабатывать её внешний вид, используя редактор в режиме HTML — удалять ненужные теги (<br/>, <span>, <p>) или добавлять новые для улучшения внешнего вида записи — создавать отдельные акцентные блоки, вставлять таблицы и т.п. Для этого можно использовать различные плагины, расширяющие функционал встроенного редактора. Но любой дополнительный плагин — это лишняя нагрузка.
Я устанавливаю только «жизненнонеобходимые» для полноценной работы плагины, и стараюсь сначала поискать решение возникшей доработки без применения сторонних плагинов, если такового решения найти не удалось или поджимают сроки, то ставлю плагин (продолжая искать решение).
Расширение функционала редактора Вордпресс, на мой взгляд, не нуждается в установке никаких дополнительных плагинов, реализовать некоторые полезные улучшения можно без них.
Сегодня рассмотрим, как добавить дополнительные кнопки в редактор.
По умолчанию редактор содержит некоторый набор кнопок, позволяющих быстро вставить html-тег в запись:
Среди этих кнопок вставка изображения, списка, ссылки и т.д.
Мне часто приходится при редактировании записей клиентских сайтов закрывать внутренние ссылки от индексирования, в частности от поискового робота Yandex.Для этого существует тег <noindex>. Создадим в редакторе кнопку с этим тегом для быстрой вставки его в любую запись сайта.
Что нужно для того, чтобы создать новую кнопку в редакторе WordPress?
Нам понадобится добавить небольшой фрагмент кода на основе имеющегося в файл quicktags.js, расположенный по адресу: сайт.ru/wp-includes/js/quicktags.js
Этот файл содержит код, который добавляет в редактор функционал вставки тегов по нажатию на соответствующую кнопку. Открываем файл для редактирования:
Как видим, файл сложен для восприятия, но нам нужно лишь найти фрагмент, на основе которого мы создадим свою кнопку в редакторе.
Например, фрагмент кода, добавляющего кнопку code, генерирующую тег <code>
edButtons[110]=new c.TagButton("code","code","<code>","</code>","c")Разберем параметры:
edButtons[110] //110 - порядок отображения кнопки =new c.TagButton("code","code", //Что будет отображено на кнопке "<code>", //Открывающий тег "</code>", //Закрывающий тег "c" //Внутреннее имя для функции )На основе этого фрагмента создаем свою кнопку для тега <noindex>:
edButtons[120]=new c.TagButton("noindex","noindex","<noindex>","</noindex>","")Вставляем наш фрашмент после фрагмента кода кнопки «code».
Необходимо учесть параметр: edButtons[120], он отвечает за последовательность, то есть наша кнопка с параметром 120 будет расположена после кнопки «code», соответственно у последующих фрагментов нужно поменять параметр на 130, 140 и 150 соответственно.
Сохраняем файл. Открываем редактор в режиме html. На панеле видим новую кнопку редактора под названием noindex.
При нажатии на кнопку в запись вставится открывающий тег, а при повторном — закрывающий.
Подобным образом можно создать необходимое количество кнопок для добавления частоиспользуемых тегов.
Рассмотрим ещё один пример создания новой кнопки для редактора, при помощи которой будем оформлять текстовый блок.
Создадим в файле стилей (style.css) оформление для блока.
.note{ color:#333; background-color:#cbebeb; padding:20px; }Теперь добавим кнопку, которая позволит создавать блок с данным классом для оформления текста по аналогии с предыдущим:
edButtons[130]=new c.TagButton("block-blue","block-blue","<div>","</div>","")Теперь, если мы воспользуемся новой кнопкой в редакторе Вордпресс, то получим вот такой текстовый блок:
Добавление своих кнопок в редактор WordPress реализуется достаточно несложно. Можно добавить все необходимые теги, и даже фрагменты, что сэкономит массу времени при создании материалов.
Существует недостаток — после обновления WordPress, внесенные изменения в файле quicktags.js будут утрачены, поэтому рекомендуется сохранить измененный файл у себя на локальном компьютере, а после обновления (которое происходит не так уж и часто) снова скопировать на сервер.
По той же теме:
z140.ru
Как добавить свои кнопки в редактор поста Wordpress?
Привет, друзья! Не так давно я писала пост о самых полезных шорткодах WordPress, в конце которого приводила код, добавляющий список шорткодов в редактор. И мне показалось, что было бы очень удобно добавить в редактор дополнительные кнопки, такие как теги заголовков, или pre, который я использую для вывода кода.
Как оказалось, добавить кнопки в редактор можно несколькими способами. Во-первых, можно установить специальный плагин, в котором уже можно будет добавлять нужные кнопки. И во-вторых, прописать необходимые кнопки вручную.
Плагин Post Editor Buttons
Это первый плагин, добавляющий в панель редактора новые кнопки. Скачать последнюю версию можно с официального сайта WordPress, или установить через установщик плагинов на вашем блоге.
Как видно из скриншота, он предельно прост в использовании:
Post Editor ButtonsЕго функции ограничиваются только добавлением новых кнопок в редактор wordpress. Внизу есть реклама, я не стала включать ее в скриншот 🙂
Плагин HTML Editor Reloaded
Этот плагин более интересен в плане своей функциональности.
Он позволяет добавлять новые кнопки не в низ списка, а после какой-то определенной – это делается нажатием на “плюсик” слева. Также для всех дополнительных тегов можно назначить клавишу быстрого доступа. Для того, чтобы после тега добавить перенос строки или табуляцию, можно использовать /t или /n соответственно.
HTML Editor ReloadedКроме того, реализована возможность импорта и экспорта используемого списка дополнительных тегов.
В результате использования любого из плагинов, дополнительные кнопки появлятся в редакторе HTML-разметки:
Добавление дополнительных кнопок в редактор без плагина
Для тех, кто по каким-то причинам не хочет использовать плагины, можно посоветовать следующий способ добавления новых кнопок в редактор.
Найдите файл quicktags.dev.js, который лежит в папке /wp-includes/js/. Откройте его, и в самом конце (у меня это 609 строка) найдите такой код:
|
609 610 611 612 613 614 615 616 617 618 619 620 621 622 |
edButtons[10] = new qt.TagButton('strong','b','<strong>','</strong>','b'); edButtons[20] = new qt.TagButton('em','i','<em>','</em>','i'), edButtons[30] = new qt.LinkButton(), // special case edButtons[40] = new qt.TagButton('block','b-quote','\n\n<blockquote>','</blockquote>\n\n','q'), edButtons[50] = new qt.TagButton('del','del','<del datetime="' + _datetime + '">','</del>','d'), edButtons[60] = new qt.TagButton('ins','ins','<ins datetime="' + _datetime + '">','</ins>','s'), edButtons[70] = new qt.ImgButton(), // special case edButtons[80] = new qt.TagButton('ul','ul','<ul>\n','</ul>\n\n','u'), edButtons[90] = new qt.TagButton('ol','ol','<ol>\n','</ol>\n\n','o'), edButtons[100] = new qt.TagButton('li','li','\t<li>','</li>\n','l'), edButtons[110] = new qt.TagButton('code','code','<code>','</code>','c'), edButtons[120] = new qt.TagButton('more','more','<!--more-->','','t'), edButtons[130] = new qt.SpellButton(), edButtons[140] = new qt.CloseButton(), |
Это теги, которые у вас сейчас выводятся на панель визуального редактора. Чтобы добавить новую кнопку, надо в нужном месте добавить код ее вызова, например:
edButtons[150] = new qt.TagButton('span','span','<span>','</span>','span') |
Так мы добавим на панель кнопку с тегом span.
Если вы хотите добавить кнопку не в конец списка, а в середину, то тогда вам придется поменять нумерацию у всех кнопок, которые идут после нее.
Теперь, когда все необходимые настройки совершены, надо снова зайти в каталог /wp-includes/js/, скопировать себе на компьютер файл quicktags.js, потом удалить его с сервера и переименовать quicktags.dev.js в quicktags.js. После этого вы сможете увидеть изменения в вашем редакторе. Если что-то не будет работать, то восстановите сохраненный файл с компа 🙂
К преимуществу ручного добавления относится то, что вы можете как захотите менять порядок кнопок.
Внимание! После обновления версии WordPress все настройки собьются, и вам придется делать все заново, поэтому советую сделать резервную копию файла настроек, и заменять его при обновлении системы.
На этом все. Если что-то непонятно, пишите!
oriolo.ru
Как добавить в wordpress свои кнопки в html редактор?
Всем привет. Сегодня я вам расскажу, как добавить в wordpress новые кнопки в визуальный и html редактор. Лично мне это очень необходимо. Как-то я даже читал статью, в которой подробно объяснялось, как добавить новые кнопки без плагинов. Но в конце концов решил не заморачиваться — нам поможет плагин AddQuickTag.
Возможности
Дело в том, что при написании статей я использую исключительно html-редактор, а не визуальный. Не знаю, мне так удобнее просто. Так вот в нем мне не хватало пару очень нужным и полезных кнопок. Именно установка AddQuickTag решила проблемы с их добавлением.
Я не буду давать никаких ссылок на скачивание, потому что плагин наверняка есть в официальном репозитории wordpress. После установки и активации пройдите в Настройки — AddQuickTag.
Сам процесс добавления кнопок очень прост — указываем заголовок и подсказывающий текст к кнопке (я использую такой же, как заголовок), далее указываем сначала код, который выведется при клике на кнопку первый раз (открывающий тег), а во второе поле вписать закрывающий. Это некоторые из тех кнопок, что я добавил:
Например, мне заголовки h3 просто крайне необходимы, да и в теги noindex частенько закрываю лишние фрагменты текста. Остальные блоки так или иначе помогают оформить код и т.д. Соответственно, добавив все нужные кнопки написание новых статей упростилось.Но это не все, что нужно сделать, чтобы кнопки появились в редакторе. Справа нужно также отметить галочкой нужные условия, при которых будут отображаться эти кнопки.
Например, мне они нужны исключительно для записей и только в html-редакторе. В связи с этим, я отметил тольку одну галочку, оставив все остальные поля пустыми.Ниже в настройках плагина есть возможность убирать те кнопки, которые уже по умолчанию встроены в редактор движка. В целом, я не вижу в этом необходимости, потому что все они так или иначе нужны, лишь 1-2 я не пользуюсь.
Еще можно экспортировать и импортировать кнопки. В целом, смысл я вижу в этом только если вы добавили много своих кнопок и переезжаете на другой хостинг, к примеру. Тогда эта возможность будет для вас полезной. Что ж, на этом мой крайне короткий обзор плагина завершается, но самое основное я сказал. Рекомендую вам его использовать, если нужно быстро добавить свои кнопки в html или визуальный редактор wordpress.
dolinacoda.ru
Как на WordPress добавить кнопку в редактор?
Визуальный редактор текста WordPress, при установки движка на сайт, имеет в себе лишь небольшой набор базовых функций для форматирования публикаций. Но зачастую, особенно когда уже немного «подружишься» WordPress, предустановленного функционала редактора оказывается явно не достаточно.
Ведь часто нужно добавлять в текст какие-то стили, оригинально оформленные блоки с контентом, всеразличные кнопки, эффекты, написанные на языке CSS. Добавление стилей вручную — это довольно нудное и занимающее много времени занятие. И часто, перед начинающими блоггерами встает вопрос, как на WordPress добавить кнопку в редактор?
Кратко :WYSIWYG («что видишь, то и получишь») — свойство прикладных программ или веб-интерфейсов, в которых содержание отображается в процессе редактирования и выглядит максимально близко похожим на конечную продукцию, которая может быть печатным документом, веб-страницей или презентацией. В настоящее время для подобных программ также широко используется понятие «визуальный редактор». Википедия.
В этой публикации мы установим кнопки со своими собственными стилями в редактор для WordPress с использованием плагина.. И применять новые кнопки можно будет к любому элементу публикации.
Так как-же все-таки на WordPress добавить кнопку в редактор?
Существует несколько решений этого вопроса. Какой из способов выбрать решать вам.
В этой статье пойдет речь об использовании специальных плагинов, которые добавляют кнопки в визуальный редактор текста WordPress. Если у вас нет определенных навыков CSS и HTML, вам на помощь придет, к примеру, плагин «TinyMCE Advanced Professsional Formats and Styles». Правда и в этом случае при добавлении собственных стилей в редактор для WordPress нужны минимальные знания языка CSS. Но в интернете сейчас можно найти великое множество различных справочников и пособий на эту тему. Так-что тут сложностей ни каких возникнуть не должно.
- TinyMCE Advanced — один из самых популярных плагинов, расширяющих список кнопок визуального редактора.
- TinyMCE Advanced Professsional Formats and Styles — плагин для добавления произвольных стилей в визуальный редактор для WordPress, имеющий в своем арсенале еще большее количество всеразличных настроек.
- Плагин WP Super Edit — расширение возможностей редактора WordPress имеет много различных настроек, на ваш вкус и цвет.
- Taxonomy TinyMCE — Этот плагин добавит визуальный редактор для окна описания вашей пользовательской таксономии.
- TinyMce editor Font FIX — с помощью этого плагина вы автоматически замените стандартный шрифт Arial, который стоит по умолчанию, на более красивый шрифт, отображаемый в визуальном редакторе.
- Category TinyMCE — Тоже самое как и предыдущий плагин WordPress, только он добавит визуальный редактор для описания ваших рубрик. Удобно, когда вы хотите создать секцию на странице просмотра архивов ваших рубрик.
- MCE Table Buttons — этот плагин добавит кнопки в редактор текста WordPress для составления таблиц.
- Incredible Font Awesome — С помощью этого плагина вы можете добавить все кнопки оригинального шрифта Awesome в свои записи.
Это лишь небольшая часть плагинов, позволяющих расширить редактор текста WordPress, смотрите, сравнивайте, тестируйте их работу и выбирайте наиболее подходящий.
В этой публикации я не стал описывать настройки того или иного плагина. На этот счет в интернете можно легко найти информацию. Направление думаю видно.
К плюсам использования плагинов для добавления кнопок, расширения функционала редактора для WordPress несомненно относится простота в использовании. Нет необходимости править коды, подключать скрипты и активировать скрытые возможности движка.
Самый большой недостаток — нагрузка на сервер. Кроме того через плагины, которые давно не обновляются, представляют интерес для злоумышленников, ведь в них используется устаревшая зашита. А «Кривой плагин», да и еще не обновленный, в добавок ко всему значительно тормозит скорость загрузки сайта.Так — что при выборе обращайте внимание на частоту обновлений и совместимость с вашей новой версией движка WordPress.
В следующих статьях я напишу о том, как легко на WordPress добавить кнопку в редактор без использования плагинов, а так-же рассмотрим один из способов добавления кнопок для вставки шорткодов в текстовый редактор для WordPress.
Лучший способ отблагодарить автора
Похожие по Тегам статьи
filwebs.ru
