Страницы

Поиск по вопросам

понедельник, 4 марта 2019 г.

Wordpress - добавление собственных кнопок в редактор + стилизация

Добавляю в редактор кнопки таким образом, через function.php:
QTags.addButton( 'sheens_jQtooltip', 'Phone', '+(7) 965 000-00-00');
Меня интересуют два вопроса:
1) Как можно придать созданной кнопке в редакторе цвет?
2) Если кнопок много, как их "категоризировать"? Допустим, я хочу, чтобы на одной линии были такие кнопки, как: телефон, адрес, имя, фамилия.
При обычном добавлении кнопки она просто становится в ряд по указанному типу. Как создать свой тип, и чтобы они были по линиям? Нужно, ибо когда они все вразброс - тяжеловато искать: одна - там, другая - сям.


Ответ

Порядок кнопок задается седьмым параметром (priority) функции QTags.addButton:
QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
где
id - html id кнопки, display - текст на кнопке, arg1 - открывающий тег, arg2 - закрывающий тег, access_key - клавиатурный шорткод кнопки, title - тултип (текст при наведении), priority - приоритет кнопки (позиция в строке), instance - экземпляр панели кнопок.
Добавьте в function.php такой пример:
function kagg_add_quicktags() { if (wp_script_is('quicktags')){ ?> add_action( 'admin_print_footer_scripts', 'kagg_add_quicktags' );
Этот код добавляет 4 кнопки: p, hr, pre и Phone. Обратите внимания на приоритеты и картинку с результатом внизу.
Чтобы задать цвет вашей кнопке, нужно запустить собственный файл стилей в админке. Добавьте следующий код в function.php:
function admin_style() { wp_enqueue_style('admin-styles', get_stylesheet_directory_uri().'/admin.css'); }
В папку вашей темы добавьте файл admin.css со следующим содержимым:
input#qt_content_kagg_paragraph, input#qt_content_kagg_hr, input#qt_content_kagg_pre, input#qt_content_kagg_phone { background: red; color: white; }
Вот такой результат я получил на своем тестовом сайте:

Комментариев нет:

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