Html код кнопок редактора

SEO Маяк

Всем привет! Сегодня на seo-mayak.com интересная и не менее полезная тема — добавление кнопок в html редактор WordPress.

С версии 3.3 разработчики WordPress внедрили Quicktags API, тем самым предоставив нам возможность добавлять в html редактор свои кнопки с произвольными функциями, причем всего несколькими строчками кода.

Что такое Quicktags API? Quicktags можно перевести, как «Быстрые метки», а вот об API расскажу немного подробней.

Аббревиатура API расшифровывается, как «Application Programming Interface» и означает — интерфейс программирования приложений или можно так перевести — интерфейс прикладного программирования.

На заметку! API — это набор: функций, классов, констант и т.д, представляемых определенными библиотеками, сервисами или операционными системами.

Другими словами — это готовый код, который существенно упрощает работу программиста. Наверное все знакомы с библиотекой jQuery, написанной на языке JavaScript.

Если разобраться, то jQuery и есть своего рода API, так как данная библиотека существенно облегчает написание кода. Задачи, которые на JavaScript реализовываются за 20 строк, на jQuery можно уложиться в 5-6 строк. Думаю, определение API теперь должно быть понятно.

Quicktags API — это JavaScript функция, которая позволит нам существенно расширить функционал HTML редактора WordPress, причем без особых трудностей.

Пора уже перейти к практике. Поехали!

JavaScript API функция

Шаблон скрипта Quicktags выглядит следующим образом:

Теперь давайте разберемся с параметрами.

id (обязательный)- ID кнопки.

ID может состоять из любого уникального набора латинских символов или цифр. Если посмотреть исходный код, то любая кнопка редактора имеет стандартный набор HTML тегов.

Для примера возьмем исходный код кнопки b (выделение жирным):

На примере видно, что ID идет вторым параметром, и то, что мы впишем в параметр «id» будет подставлено после:

display (обязательный) — Название кнопки.

Текст, вписанный в данный параметр, станет значением HTML атрибута value:

Параметр display может также состоять из любых латинских символов или цифр, но имейте в виду — это не просто название кнопки, а ее видимое обозначение:

arg1 (обязательный) — Открывающий тег.

Открывающий тег может быть любой, например: или , все зависит от задачи, возложенную на кнопку.

Этот параметр в исходном коде вы конечно не найдете, но с помощью Quicktags API действие привяжется к кнопке.

arg1 (необязательный) — Закрывающий тег.

Понятно, что в данный параметр вписывается ответный тег, например:

или . Почему параметр необязательный, по-моему не трудно догадаться, просто есть и не парные теги.

access_key (необязательный) — буква для горячих клавиш.

То, что будет вписано в качестве параметра access_key станет значением HTML атрибута accesskey:

Для чего нужен данный параметр? По задумке, здесь задается буква или цифра на клавиатуре, которая в сочетании с ALT или другой клавишей, в зависимости от браузера, должна активировать кнопку без нажатия на нее.

Но на самом деле в исходный код тег accesskey не добавляется и сочетание горячих клавиш, согласно заданной букве, не работает, не знаю почему, может в будущем разработчики исправят этот баг.

title (необязательный) — Описание кнопки.

Тут тоже должно быть все понятно. В данном параметре вписываем описание кнопки, например «Заголовок h3». В html это будет выглядеть так:

priority (необязательный) — Позиция кнопки.

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

1-9 — первая позиция;
10-19 — вторая позиция;
20-29 — третья позиция
и т.д.

Например, если вписать цифру 5, то кнопка будет первой в ряду.

instance (необязательный) — Экземпляр класса.

Не совсем понял, что это за параметр. По всей видимости подразумевается возможность помещать кнопку в определенный экземпляр Quicktags, но что это за экземпляр, не очень понятно.

Правильное подключение скрипта Quicktags

Думаю надо объяснить, как правильно подключать скрипт Quicktags.

Разработчики создали специальный хук-событие admin_print_footer_scripts , который выведет скрипт Quicktags или любой другой скрипт в подвал админки. Все скрипты, подключенные через хук admin_print_footer_scripts будут выведены в исходный код только в том случаи, если открыта админ-панель.

К чему я это говорю. Просто я знаю, что некоторые веб-мастера выводят скрипты, которые предназначены исключительно для работы в админке, с помощью хука wp_footer . Надо понимать, что хук wp_footer будет выводить скрипты, как в исходный код админки, так и самого сайта, что конечно неправильно.

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

add_action( 'admin_print_footer_scripts', 'html_button' ); function html_button() < if ( wp_script_is('quicktags') )< ?>  >

С помощью функции wp_script_is() мы проверяем был ли зарегистрирован скрипт Quicktags и был ли добавлен в очередь на вывод, это позволит нам избежать не нужных конфликтов с другими скриптами.

Теперь перейдем к конкретным примерам.

Добавление кнопок в html редактор на примерах

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

add_action( 'admin_print_footer_scripts', 'html_button' ); function html_button() < if ( wp_script_is('quicktags') )< ?>  >

Теперь давайте подробно разберем все прописанные мной параметры:

QTags.addButton( 'eg_h3', 'h3', '
', '
', 'h', 'Заголовок h3', 1 );

eg_h3 — ID идентификатор кнопки;
h3 — display название кнопки, иконка;

— arg1 открывающий тег;

— arg2 закрывающий тег. Если закрывающего тега нет, то указываем пустые кавычки » ;
h — access_key горячая клавиша. Можно не указывать просто оставив пустые кавычки;
Заголовок h3 — title описание кнопки, которое будет всплывать при наведении;
1 — priority — приоритет или местоположение кнопки среди других. Если ничего не указывать, по умолчанию кнопка получит приоритет 140-150 .

Вот что получится в итоге:

Если надо добавить еще одну или несколько кнопок, то просто добавляем код(ы) кнопок в скрипт по уже существующему шаблону.

Для примера, приведу коды кнопок, которые я добавил в свой html редактор:

add_action( 'admin_print_footer_scripts', 'html_button' ); function html_button() < if ( wp_script_is('quicktags') )< ?>  >

Я теперь даже ajax-ссылку на подписку в feedburner вывожу с помощью кнопки. Супер удобно!
Привязка к кнопке произвольной функции
Кроме простого добавления кнопок, со стандартными задачами, разработчики в Quicktags API предусмотрели возможность привязывать к кнопке произвольную JavaScript функцию.
QTags.addButton( 'id', 'display', название функции);
 
Приведу пример функции, которая будет срабатывать при нажатии на кнопку «class» и выводить блок div с произвольным классом, который надо будет вписать в модальное окно:
 
add_action( 'admin_print_footer_scripts', 'html_button_class' ); function html_button_class() < if ( wp_script_is('quicktags') )< ?>  >
 
 
 
Здесь важно, чтобы произвольная JavaScript функция располагалась ниже метода QTags.addButton, как показано на примере.
 
Зарезервированные параметры
 
В таблице представлен список всех зарезервированных параметров и во избежании ошибок лучше их не использовать.
 
Удаление кнопок из html редактора
 
Для удаления не нужных кнопок с панели HTML редактора, разработчики WordPress предусмотрели специальный хук-фильтр quicktags_settings .
 
Допустим нам надоели стандартные кнопки и мы хотим их все удалить. Вуаля:
 
function remove_html_buttons($buttons) < $buttons['buttons'] = '/'; return $buttons; >add_filter('quicktags_settings', 'remove_html_buttons');
 
В редакторе остались, только те кнопки которые я сам создал:
 
 
 
Если же мы хотим оставить некоторые стандартные кнопки, то во второй строчке функции, в кавычках через запятую перечисляем ID нужных кнопок. Например:
 
function remove_html_buttons($buttons) < $buttons['buttons'] = 'strong,em,link,code,more'; return $buttons; >add_filter('quicktags_settings', 'remove_html_buttons');
 
Важно! Пробелов после запятых быть не должно. Результат:
 
 
 
В следующей статье я расскажу, как встроить редактор TinyMCE в форму комментариев WordPress, так что подписывайтесь на обновления блога , будет интересно.
 
С уважением, Виталий Кириллов
 
Источник
 
Как сделать кнопку в HTML
 
Для создания кнопок используется тег . Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:
 
Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name , disabled и type .
 
Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.
 
Атрибут disabled блокирует доступ к кнопке.
 
Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:
 
button — значение по умолчанию. Означает, что элемент — обычная кнопка. Она может добавлять товары в корзину или избранное, переключать слайдеры или закрывать всплывающие окна.
 
submit задаётся кнопкам для отправки формы. Когда пользователь нажимает на кнопку с таким типом, браузер отправляет данные формы на сервер.
 
reset добавляется кнопкам сброса формы. Когда пользователь нажимает на такую кнопку, браузер возвращает значения всех полей формы к изначальным.
 
А как же input?
 
Создать кнопку можно и с помощью тега , если указать ему тип button :
 
Это рабочий способ. О нём надо знать, ведь вы можете встретить его в проектах. Но самим так делать не стоит. У кнопок, созданных на инпуте, есть ограничения: сложно управлять размерами и положением изображений, а также нет псевдоэлементов. Поэтому оставьте для создания элементов формы, таких как текстовые поля, радиокнопки или чекбоксы. А кнопки верстайте с помощью .
 
Как сделать кнопку с иконкой
 
Посмотрим три способа создания кнопки с иконкой.
 
С помощью тега
 
Способ подойдёт для контентных изображений.
 
 
Так вы можете добавлять кнопки с эмодзи, лайками, дизлайками или чем-то ещё. Иконке нужно обязательно задавать размеры, чтобы кнопка зарезервировала место и не прыгала, когда загрузится иконка.
 
Добавить инлайн SVG в разметку
 
Способ подойдёт, если изображение меняет состояния, как здесь:
 
 
Код простой: пишем тег и добавляем в него код SVG-изображения.
 
Вставить фоном в CSS
 
Способ подойдёт, если иконка играет декоративную роль и не меняется при наведении или клике на кнопку. Например, в таких случаях:
 
 
Как добавить иконку в кнопку:
 
Какой способ выбрать — зависит от ваших задач и особенностей проекта. Вы также можете использовать разные методы в рамках одного проекта. Например, часть кнопок сделать со встроенным в разметку SVG, а часть — с фоновым изображением.
 
Материалы по теме
 
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
 
Источник
 
Читайте также:  jQuery Get & Set Width of an Element