WordPress редактор – добавление кнопок

Вопрос для тех, кто пользуется движком  CMS WordPress для разработки сайтов: знаете ли вы, что у вас есть возможность расширить визуальный текстовый редактор? Согласитесь, в стандартном текстовом редакторе Wordpress не достаточно функций для работы с текстом. Вот например, как поставить в текстовом редакторе wordpress в тексте "х²" или "Н₂О"? Никак!!! Да, никак, если вы не сделали расширенную возможность текстового редактора. Давайте посмотрим на примере, как выглядит стандартный текстовый редактор (тот что по умолчанию) и как выглядит расширенный.

Стандартный текстовый редактор (по умолчанию)

Расширеный текстовый редактор

Обратите внимание, на то место в картинке, где я выделил красным. Как видите из примера, возможность текстового редактора Wordpress расширилась.

Как расширить текстовый редактор Wordpress.

Это вовсе не сложно и займет всего минуту вашего времени. Откройте файл functions.php вашей темы и добавьте между тегами
<?php........и........?>, вот такой код:

/*кнопки текстового редактора*/
function enable_more_buttons($buttons) {
 $buttons[] = 'hr';
 $buttons[] = 'sub';
 $buttons[] = 'sup';
 $buttons[] = 'fontselect';
 $buttons[] = 'fontsizeselect';
 $buttons[] = 'cleanup';
 $buttons[] = 'styleselect';
 $buttons[] = 'anchor';
 return $buttons;
}
add_filter("mce_buttons_3", "enable_more_buttons");

Жмите "Обновить файл".

○ Обозначение:

hr - линия;
sub - нижний регистр;
sup - верхний регистр;
fontselect - шрифты;
fontsizeselect - размер текста;
cleanup - очистка;
styleselect - CSS стили;
anchor - якорь.

Это все кнопки, которые мне нужны, а их намного больше. Вот их список:

hr, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, cut, copy, paste, undo, redo, link, unlink, image, cleanup, help, code, bold, italic, underline, strikethrough, removeformat, formatselect, fontselect, fontsizeselect, styleselect, sub, sup, forecolor, visualaid, anchor, newdocument, backcolor, charmap, separator.

○ Чтобы добавить еще одну кнопку, добавьте к коду еще одну строчку:

$buttons[] = ‘сюда вставьте название кнопки’;

Например:

$buttons[] = 'backcolor';

Вот и все. Только что вы расширили возможность текстового редактора wordpress. Смотрите результат! Если что не понятно или вы знаете дополнение, пишите в комментарии.

С Уважением Webmasterok2009

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

9 Ответов на комментарий - WordPress редактор – добавление кнопок

1. Оксана

   09.08.2013 в 11:12

   А можно поподробнее в какой части всех этих буковок, циферок и значков находится , и куда добавлять после буквы “и” или перед?
2. Степан => автор блога

   09.08.2013 в 11:42

   Оксана, осмелюсь предположить, что вы – новичок в работе с Вордпресом. Поэтому ответ свой построю так:
   1. Чтобы открыть файл functions.php, нужно зайти в Админ-панель, в левом меню перейти на “Внешний вид”, а потом на “Редактор”.
   2. Откроется новая страничка и в меню с правой стороны найдите “Функции темы functions.php” – перейдите на него.
   3. Перед вами откроется куча кодов, которые начинаются с и заканчиваются ?>.
   4. Копируете код, о котором говорилось в моей статье, и вставляете его сразу перед ?> (т.е., спускаетесь в самый низ и перед ?> вставляете код)
   5. Обязательно не забудьте нажать “Обновить файл”!!!
   6. Теперь, когда вы будете добавлять новую запись или страницу, вы должны заметить появление новых функций (кнопок).
3. Ирина

   09.03.2014 в 15:32

   Здравствуйте Степан! Помогите пожалуйста, я тоже новичок, с другими проблемами справлялась сама, а здесь совсем запуталась, этих знаков там оч. много, перед каким из них вставлять кол, никак не пойму, помогите пожалуйста.. Можно Вам прислать код из моего functions.php ?
4. Степан => автор блога

   09.03.2014 в 20:11

   Здравствуйте Ирина! Вставляете код в файле “functions.php” перед знаком “?>”. То есть, это будет выглядеть вот так:

   <?php
   
   /*кнопки текстового редактора*/
   function enable_more_buttons($buttons) {
    $buttons[] = 'hr';
    $buttons[] = 'sub';
    $buttons[] = 'sup';
    $buttons[] = 'fontselect';
    $buttons[] = 'fontsizeselect';
    $buttons[] = 'cleanup';
    $buttons[] = 'styleselect';
    $buttons[] = 'anchor';
    return $buttons;
   }
   add_filter("mce_buttons_3", "enable_more_buttons");
   
   ?>
   

   Если у Вас, Ирина, не получиться, напишите в комментарии, помогу!
5. Сергей

   21.01.2016 в 20:39

   Это про вставку доп. кнопок в ВИЗУАЛЬНЫЙ редактор, это понятно, даже плагинов таких куча (Ultimate TinyMCE, например). А вот как добавить свою кнопочку в Текстовый редактор – вот какой вопрос. Потому что переключаясь между двумя вкладками Визуальный и Текстовый – код перемешивается, портится, во многих случаях. Так что выбор некоторых людей – это отключить Визуальный редактор! Но как тогда добавить пару кнопочек в Текстовый, а? Степан, выручай!
6. Степан => автор блога

   24.01.2016 в 23:51

   Здравствуйте, Сергей! Прочитайте вот эту статью, там я все об этом рассказал
7. Сергей

   26.01.2016 в 01:03

   Спасибо, Степан! То что нужно, именно это я и искал!
8. санислав

   11.12.2016 в 22:00

   Скажите есть кнопка с назначением красной строки?
9. Степан => автор блога

   13.12.2016 в 09:29

   В CSS файле вашей темы пропишите:

   p {
   text-indent: 10px;
   }
   

   Кнопка не появится, но красная строка будет. Попробуйте!

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: wordpress