Любая статья представленная в интернете, не будет привлекательна для читателя, если она:
- Является не уникальной и была скопирована с другого сайта.
- Написана на непонятном, доступном узкому кругу людей языке.
- Представлена в виде неотформатированной простыни текста.
В этот раз, расскажем как расширить возможности редактора WordPress и облегчить процесс форматирования.
Первый и второй пункт, более менее соблюдается многими, а вот третий, игнорируется. Зачастую, это связано с слишком долгим процессом внедрения различных кодов в статью, дабы придать ей изысков.
Прежде всего нужно понять, как именно можно упростить работу с кодами? Ответ на поверхности: добавить свои кнопки в редактор и задать им нужные атрибуты.
Расширяем возможности редактора без плагинов WordPress
Не будем лукавить и скажем честно, применив плагин, мы бы реально сократили время и получили бы должный эффект. Но, здесь есть и другая сторона медали, а именно увеличение ресурсов хостинга.
Любой новый плагин, это нагрузка на хостинг. При посещение в 100 человек в сутки, такой нагрузки будет не видно, но если эта цифра зашкаливает за 10 000 и более, это будет видно сразу и придется покупать новый, более дорогой тариф с лучшими ресурсами.
Мне этот путь совершенно не нравится, да и вообще не люблю устанавливать плагины, если тоже самое можно сделать своими руками.
Добавляем свои кнопки в текстовый HTML редактор WordPress
В нашем случае, рассмотрим вариант, с добавлением своих кнопок в популярный редактор TinyMCE.
Добавление кнопок в редактор, производится по средством функции QTags.addButton. Полностью код, будет выглядеть так:
QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
, где
- id — html id кнопки;
- display — текст на кнопке;
- arg1 — открывающий тег;
- arg2 — закрывающий тег;
- access_key — клавиатурный шорткод кнопки;
- title — текст при наведении;
- priority — приоритет кнопки (позиция в строке);
- instance — экземпляр панели кнопок.
Для примера, рабочий код можно изобразить вот так:
QTags.addButton( 'pre', 'pre', '<pre>', '</pre>', '', 'Добавление кода', 4 );
, из чего видно, что будем добавлять тег pre с надписью «Добавление код» и установим на 4-ую позицию в редакторе.
От слов к делу. Нам нужно добавить код:
//добавляю кнопки в редактор
if( !function_exists('_add_my_quicktags') ){
function _add_my_quicktags()
{ ?>
<script type="text/javascript">
QTags.addButton( 'pre', 'pre', '<pre>', '</pre>', '', 'Добавление кода', 4 );
QTags.addButton( 'h2', 'h2', '<h2 id="">', '</h2>', '', 'Заголовок H2', 2 );
QTags.addButton( 'h3', 'h3', '<h3>', '</h3>', '', 'Заголовок Н3', 3 );
QTags.addButton( 'Содержание', 'Содержание', '<div class="toc_container">', '</div>', '', 'Добавление содержания', 1 );
</script>
<?php }
add_action('admin_print_footer_scripts', '_add_my_quicktags');
}Файл, куда будем добавлять, называется functions.php, расположенный по адресу «/ваш сайт/public_html/wp-content/themes/ваш шаблон». Альтернативный вариант, зайти через админку WordPress, далее «Внешний вид» → «Редактор тем» → выбрать functions.php.
Прежде чем вносить изменения в код движка, не забудьте сделать резервные копии файлов.
Добавьте код в самом низу и сохраните изменения. Если все сделано правильно, то обновите страницу и зайдите в любую статью, обратив внимание на редактор TinyMCE.
У меня на скрине, видно, что появились 4-е новых кнопки во вкладке текстового редактора, а значит все сделано верно.
Теперь, достаточно выделить интересующий участок текста и нажать на одну из кнопок. Редактор автоматически добавит нужное форматирование, что реально упрощает работу.
Не забудьте!! При смене шаблона сайта, добавление кода нужно будет повторить для нового шаблона.
Добавляем свои кнопки в визуальный HTML редактор WordPress
Как вы знаете, в редакторе TinyMCE, присутствует две вкладки:
- Визуальный редактор;
- Текстовый редактор.
Для текстового редактора, которым к слову говоря пользуются чаще, нужные кнопки уже добавлены, но они не появились в визуальном. Сейчас этот момент будем исправлять.
В тот же самый файл functions.php, в самом конце, добавляем код:
/*
* Добавляем выпадающее меню в визуальный редактор
*/
function wpb_mce_buttons_2($buttons) {
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');
/*
* Функция вызова фильтра для настроек MCE
*/
function my_mce_before_init_insert_formats( $init_array ) {
// Определяем массив style_formats
$style_formats = array(
// Каждый дочерний элемент — формат со своими собственными настройками
array(
'title' => 'Содержание',
'block' => 'div',
'classes' => 'toc_container',
'wrapper' => true,
),
array(
'title' => 'Upload',
'block' => 'div',
'classes' => 'uplods',
'wrapper' => true,
),
);
// Вставляем массив, JSON ENCODED, в 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
// Прикрепляем вызов к 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );Если вы не программист, думаю такой код немного испугает и разобраться сразу что к чему, не получится, поэтому объясняю что да как.
Все что нам нужно знать из этого кода, это строчки добавления кнопок и их атрибутов:
array( 'title' => 'Содержание', 'block' => 'div', 'classes' => 'toc_container', 'wrapper' => true, ),
- title — включает в себя название кнопки;
- block — во что будем оборачивать выделенный текст (span, div);
- classes — добавляет название class для присвоения стилей.
При помощи копирования этих строк, можно добавить сколько угодно кнопок в выпадающее меню редактора WordPress.
В данный момент, мне интересна кнопка «Содержание», которую добавил в визуальный редактор и еще одну для примеру. Вот так они выглядят у меня:
На этом все, коды добавлены, атрибуты заданы, остается только выделять и тыка на кнопку, дальше редактор сделает все сам.
Согласитесь, это очень просто и нет необходимости в помощи плагинов. И все же, ниже, я привел небольшой список плагинов, которые созданы для расширения возможностей и вставки кнопок в редактор WordPress.
Плагины для вставки кнопок в редактор WordPress
Ниже приведенные плагины, можно установить через «Плагины» → «Установить плагин». В поиске найдите понравившийся из списка и нажмите установить.
TinyMCE Advanced — наверное самый востребованный плагин, при помощи которого можно расширить возможности редактора.
TinyMCE Advanced Professsional Formats and Styles — нужно добавить индивидуальные стили? Этот плагин подойдет лучше все. К тому же, предусмотрено большое количество настроек.
WP Super Edit — способен отлично расширить возможности редактора WordPress и легко добавит дополнительные кнопки.
MCE Table Buttons — добавляет кнопки создания таблиц в редакторе.
Каждый из этих плагинов поможет добавить дополнительные кнопки в редактор. По настройкам, уверен разберетесь сами, но все же планирую в одной из статей рассказать про каждый.
Безусловно, собранный список далеко не полный, но уверен и этого будет достаточно для адекватного выбора.
И заканчивая статью, хотел бы немного вернуться к плюсам и минусам установки плагинов.
Плюсы. Не знакомы с языком программирования и не имеете желания в этом разбираться, но есть необходимость добавить свои кнопки в редактор? В таком случае плагины помогут. Среди огромного количества существующих, каждый найдет именно то что нужно, а если не найдет, то сможет заказать на бирже фрилансеров FL.ru или Weblancer.ru.
Минусы. Нагрузка на сервер будет увеличиваться с каждым новым плагином, а если он еще и корявый, так вообще проблемы будут расти как снежный ком. К тому же, если плагин скачан с сомнительного сайта, велика вероятность подцепить заразу в виде вируса.
Ну да ладно, не буду пугать, каждый принимает решение самостоятельно. Сделали выбор на плагины, тогда качайте их из проверенных источников, а если хотите поработать руками, то код по добавлению кнопок в редактор WordPress, находится выше.
