При написании статей для блога, я обычно пользовался стандартным редактором WordPress, однако недавно решил опробовать для себя нечто новое, а именно — полноэкранный режим или, как его еще называют, Дзен-режим. В целом я остался им доволен, однако, как Вы понимаете, есть один момент, который меня не устраивает — отсутствие кнопки, позволяющий вставить произвольный символ в текст.
#image.jpgОтсутствие же других кнопок нисколько меня не напрягает, так как для их нажатия можно использовать горячие клавиши, чего нельзя сказать об этой. Поэтому я решил исправить это, на мой взгляд, недоразумение.
Добавление кнопки
Для добавления этой кнопки, нам понадобится отредактировать файл functions.php Вашей текущей темы. Путь к этому файлу представлен ниже:
/wordpress/wp-content/themes/имя_вашей_темы/functions.php
В конец этого файла нужно добавить следующий код.
function enable_charmap_button( $buttons ) { $buttons['charmap'] = array( 'title' => __("Произвольный символ"), // Заголовок кнопки 'onclick' => "document.getElementsByClassName('mce-i-charmap')[0].parentNode.click()", // Действие при нажатии на кнопку 'both' => false // Показывать ее только в визуальном (WYSIWIG) режиме ); return $buttons; } // Применяем стандартный фильтр WordPress wp_fullscreen_buttons add_filter('wp_fullscreen_buttons', 'enable_charmap_button');
Хотя в коде присутствуют комментарии, я все же поясню, что здесь происходит. Мы описываем функцию enable_charmap_button, которая принимает один параметр — массив всех кнопок. В теле функции в массив $buttons добавляется новый элемент (наша кнопка), который является массивом, состоящим из трех элементов:
- title — заголовок кнопки (текст, который появляется при наведении курсора)
- onclick — действие, которое должно выполниться, при нажатии на кнопку
- both — параметр, который указывает, в обоих ли редакторах (визуальном и текстовом) должна отображаться кнопка
После добавления кнопки, функция просто возвращает наш массив. Теперь, чтобы эта функция работала так, как нам нужно, необходимо применить указанный в коде фильтр.
Вот такими нехитрыми действиями мы добавили кнопку на панель редактора в полноэкранном режиме. Единственное, я хочу заметить, что если у вас подключена библиотека JQuery, то Вы можете сделать немного проще, заменив строку
'onclick' => "document.getElementsByClassName('mce-i-charmap')[0].parentNode.click()",
следующей:
'onclick' => "$('.mce-i-charmap').parent().click();",