Плагин MCEComments, улучшения и нюансы

Из всех плагинов, расширяющих возможности написания комментариев на блоге, мне понравился именно MCEComments.

И понравился больше всего тем, что он использует уже встроенный TinyMCE, тогда как все остальные грузят собственный редактор. Ну вот зачем, скажите, на блоге иметь два редактора?

Кроме того, возможностей MCEComments более, чем достаточно. А если чего-то не хватает, то можем добавить и сами.

В этой статье рассмотрим следующие моменты:

• вставка изображения в комментарий;
• вставка  таблицы в комментарий;
• решим некоторые нюансы.

Причём, если вставка кнопки изображения описана на многих ресурсах, то как вставить таблицу я не нашёл нигде. Можно сказать эксклюзив, ради которого и пишу данную статью... 😉

Будем идти от простого к сложному, поэтому как вставить таблицу в комментарий я расскажу в самом конце статьи.

Итак, нюанс первый, с ним мы сталкиваемся сразу-же после установки плагина - это всплывающие подсказки, которые выглядят примерно вот так:

Не очень красиво...

Идея исправления этого недостатка не моя. Я нашел решение в Сети - дело в том, что плагин хоть и использует возможности штатного TinyMCE, языковой файл почему-то оттуда не считывает. Поэтому подсунем плагину MCEComments свой файл русской локализации wp-langs-ru.js (ссылка на скачивание в конце статьи).

Описание этого фикса я видел уже на нескольких блогах, но сам файл русификации кочует из блога в блог без изменений, а автор оригинала (да простит он меня - не помню, где именно я этот файл взял) перевёл только несколько основных кнопок. Но это и не важно - низкий поклон ему за идею!

По ходу своих изысканий на предмет улучшения функциональности MCEComments я немного расширил его перевод. Но об этом чуть позже.

Файл wp-langs-ru.js нужно закачать в папку /wp-includes/js/tinymce/langs

У меня в FTP-клиенте это выглядит примерно так:

После чего всплывающие подсказки нашего редактора комментариев примут вот такой вид:

Так уже гораздо лучше...

Это было самое лёгкое. Следующий этап немного посложнее.

Вставка изображения в комментарий

Займёмся добавлением кнопки вставки изображения...

В админ-панели переходим на вкладку Параметры - MCEComments

Доступностью кнопок редактора управляется здесь (Buttons in use:)

Щелкая по опциям Available buttons: можно менять набор отображаемых кнопок. Но там нет кнопки вставки изображения...

Зато нам никто не мешает прописать в поле ручками image

И получим нашу кнопку...

И что-же тут сложного, спросите Вы? Пока ничего - сложности начнутся дальше, впрочем, все решаемо...

Нажимаем кнопку изображения и получаем примерно вот такое окно:

Не пугайтесь. Все эти константы описаны в том-же языковом файле wp-langs-ru.js и я их тоже перевёл.

Поэтому установив этот файл, как описано выше, Вы получите окно нормального вида.

Примерно вот такое:

Ну какие тут сложности? Да, собственно, никаких...

Но возникает еще один нюанс - это отображение вставленной картинки непосредственно в комментарии.

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

Ну вот у меня как-то так это смотрелось:

Можно ли решить эту проблему?

Конечно можно и решать мы её будем при помощи небольшой правки файла стилей style.css, который лежит в папке вашего шаблона: /wp-content/themes/ваш_шаблон/style.css

Открываем файл стилей, лучше всего с помощью  Notepad++, ищем строку

.commentlist li {

У Вас она может несколько отличаться в зависимости от используемого шаблона, но в любом случае в определении присутствует .commentlist  и li .

Добавляем всего одну строчку: "float: left;" Просто приведу пример из своего шаблона:

.commentlist li {
 list-style: none outside none;
 float: left;
 min-width:300px;
 background-color: #fff;
 border: 1px solid #CCCCCC;
 border-radius: 4px 4px 4px 4px;
 padding: 2px 6px;
 margin: 2px 2px 5px 2px;
 Border-width: 1px 1px 1px 1px;
 -webkit-box-shadow: 2px 2px 1px rgba(0,0,0,0.6); /* Для Safari 3.0 */
 -moz-box-shadow: 2px 2px 1px rgba(0,0,0,0.6); /* Для Firefox 3.5 */
 box-shadow: 2px 2px 4px rgba(0,0,0,0.6); /* Для современных браузеров */
}

И теперь изображение полностью впишется в комментарий:

Конечно, хорошо бы еще и кнопку "Отправить" сместить в положение ниже картинки, но как сделать это средствами CSS я не нашёл, если возникнут идеи напишите в комментариях.

Хотя, если после картинки имеется текст, то всё будет отображено как надо.

Ну вот на этом работу с изображениями пока закончим.

Вставка таблицы в комментарий

Это пожалуй самое сложное из всего. По крайней мере для меня, ибо нигде в Сети я не нашёл описания как это вообще возможно сделать. Для Вас это будет проще, так-как описание процесса перед Вами.

В штатном TinyMCE возможность вставки таблицы отсутствует, поэтому попытка прописать table в настройках MCEComments по аналогии с image ни к чему не привела. Но, я использую редактор TinyMCE Advanced - там такая возможность имеется. Причем вставка таблицы реализована в виде дополнения TinyMCE Advanced, находящегося в папке /wp-content/plugins/tinymce-advanced/mce/table

Бегло посмотрев код MCEComments, я увидел, что его возможности могут быть расширены за счет разных дополнений, которые находятся в папке /wp-includes/js/tinymce/plugins...

Я скопировал всю папку table из /wp-content/plugins/tinymce-advanced/mce/ в /wp-includes/js/tinymce/plugins/

После чего в настройках MCEComments появилось долгожданное (кликните по картинке):

Щелкнув по "table" в строке "Detected plugins:" мы получим "table" в строке "Plugins in use:", и соответствующую кнопку на панели редактора MCEComments!

Не буду описывать долгие и нудные попытки заставить эту приблуду прочитать свой-же языковой файл с русификацией. Всё-же это вырвано из одного плагина и прикручено к другому. И все константы смотрелись так-же, как и в окне вставки изображения до перевода - ужасно.

Поэтому я просто перевел все, что можно в фале /wp-includes/js/tinymce/plugins/table/table.htm и получилось то, что получилось:

Если кому-то нужно изменить перевод, то правьте именно там.

Данное решение наверное сложно назвать изящным, но результат достигнут. А главное, что это будет работать даже если у Вас не установлен TinyMCE Advanced!

Инструкции по установке:

[wpfilebase tag=file id=3 tpl=simple /] Скачиваем и размещаем в /wp-includes/js/tinymce/langs [wpfilebase tag=file id=4 tpl=simple /] Скачиваем, распаковываем и заливаем в /wp-includes/js/tinymce/plugins

Материалы по теме:

Плагин CommentLuv, неприятные нюансы

Плагин визуального редактора комментариев снова закрыт

Резервное копирование WordPress

Плагины для WordPress, Базовый набор

Работа над блогом

Как правильно вставить видео с YouTube в запись блога