Плагин для WordPress “Предпросмотр комментария” на jQuery

Описание

Плагин “Предпросмотр комментария” (jQuery Comment Preview) подключает к форме комментирования WordPress функцию предпросмотра комментария без перезагрузки страницы. Работает на популярном фреймворке jQuery.

Для работы плагина требуется версия WordPress: 2.9 или выше.

Пример работы данного плагина вы можете наблюдать на настоящем блоге.

Особенности плагина

  • Реализует красивый “живой” предпросмотр комментария, не занимая при этом дополнительного пространства на странице.
  • Позволяет подключить простенький HTML-редактор, с помощью которого можно быстро вставлять HTML-теги в текст комментария (инструкции по работе с HTML-редактором находятся на странице настроек плагина).
  • Есть возможность вставки тегов со следующими видами скобок: <>, [], {}, (). Достаточно в коде кнопок редактора указать соответствующие скобки для тега button.
  • В предпросмотре можно отобразить: имя комментирующего, его аватар (статический или динамический через сервис gravatar.com), время и дату комментария, текст комментария. Все это можно оформить с помощью CSS под дизайн вашего сайта.
  • Если вы хотите снизить количество запросов к серверу вашего хостинга, в настройках можно запретить подключение файла стилей плагина.
  • Скрипт плагина и файл стилей подключаются только на страницах, где присутствует форма комментариев.

Скачать

Внимание: для полноценной работы плагина могут потребоваться знания технологий CSS и HTML.

Плагин “jQuery Comment Preview” (предпросмотр комментария на WordPress)

Загрузок: 3433 | Последняя версия: 1.1.1 | Последнее обновление: 17.11.2015

Установка

  1. Скопировать папку jquery-comment-preview в папку с плагинами: /wp-content/plugins/.
  2. Активировать плагин через меню “Плагины” в админке WordPress.
  3. Если понадобится, настроить опции в админке на странице Параметры -> jQuery Comment Preview.
  4. Если необходимо, отредактировать CSS-стили для блока предпросмотра в файле jquery-comment-preview.css.
  5. Готово.

HTML-код блока предпросмотра

Плагин создает следующую структуру HTML-кода для блока предпросмотра (это может пригодиться при оформлении через CSS):

<div class="jcp-container">
	<div class="jcp-toolbar">
		<div class="jcp-html-editor">
			<a>кнопка</a>
			<a>кнопка</a>
			...
		</div>
		<a class="jcp-preview-tab">Предпросмотр</a>
	</div>
	<textarea name="comment"></textarea>
	<div class="jcp-preview"></div>
</div>

Если ничего не работает

  1. Убедитесь, что используете соответствующую версию WordPress, которая требуется для работы плагина.
  2. Убедитесь, что в файле header.php вашей темы присутствует следующий код:

    <?php wp_head(); ?>

    Если его нет, то вставьте перед тегом </head>.

  3. Если выполнение первых 2-х пунктов не решило проблему, сообщите подробности в комментарии к этому посту.

История версий

  • Версия 1.1.1 (17.11.15):
    • исправлены смайлы.
  • Версия 1.1 (19.04.15):
    • форматирование кода в предпросмотре теперь осуществляются встроенной в WordPress функцией wpautop() через ajax-запрос;
    • css-файл и js-файлы плагина теперь подключаются через предусмотренные для этого функции WordPress;
    • добавлена опция: подключать js-файлы перед тегом </head> или перед тегом </body>;
    • добавлена опция, в которой можно указать теги, используемые сторонним плагином для подсветки кода.
  • Версия 1.0 (28.03.15):
    • оптимизирован код скрипта;
    • изменена структура html-кода, идентификаторы заменены на классы;
    • добавлена возможность вставки тегов со следующими видами скобок: [], {}, ().
  • Версия 0.6 (06.06.13):
    • плагин подключает jQuery, который идет в комплекте с WordPress;
    • скрипт поддерживает jQuery 1.9 и выше.
  • Версия 0.5.1 (04.02.13):
    • исправлено: плагин не работал при включенном режиме отладки (WP_DEBUG).
  • Версия 0.5 (10.09.11):
    • теперь, если при вставке ссылки не выделен текст, то анкором становится сама ссылка;
    • добавлена возможность вставки ссылки на изображение через диалоговое окно.
  • Версия 0.4 (19.03.11):
    • оптимизирован jQuery-скрипт;
    • изменены названия идентификаторов блоков, внесены соответствующие изменения в CSS-файл;
    • устранен баг при использовании одинарной кавычки в файле перевода и в шаблоне блока предпросмотра;
    • изменен шаблон блока предпросмотра по умолчанию;
    • из шаблона блока предпросмотра теперь вырезается тег <script></script>;
    • изменен путь к файлу jquery-comment-preview.js;
    • сделан уменьшенный вариант файла md5.js.
  • Версия 0.3 (23.09.10):
    • данная версия предназначена для WordPress 2.9 и выше;
    • исправлено: плагин не работал, если “Адрес WordPress” и “Адрес сайта” различались;
    • в тексте кнопки предпросмотра сделана возможность использовать одинарную кавычку;
    • добавлена кнопка “О плагине”;
    • оптимизирована система сохранения настроек.
  • Версия 0.2 (02.05.10):
    • текстовые ссылки в предпросмотре становятся кликабельными;
    • новая опция: “Добавлять параметр target=”_blank” к внешним ссылкам”;
    • новая опция: “Показывать кнопку с WordPress смайлами” – использует встроенные в WordPress смайлы;
    • добавлена французская локализация.
  • Версия 0.1.7 (18.03.10):
    • исправлена ошибка, когда предпросмотр не работал до тех пор, пока не была нажата кнопка “Сохранить настройки” на странице опций плагина;
    • вместо jQuery 1.3.2 теперь подключается jQuery 1.4.2.
  • Версия 0.1.6 (05.01.10):
    • исправлена ошибка, когда теги HTML-редактором вставлялись некорректно в Internet Explorer;
    • при нажатии на кнопку “ссылка” открывается окно для ввода ссылки, как HTML-редакторе WordPress.
  • Версия 0.1.5 (20.12.09):
    • изменен дизайн панели предпросмотра, теперь он в стиле HTML-редактора WordPress;
    • изменена структура шаблона HTML-редактора;
    • скрипт прицепляется теперь по параметру name тега textarea, a не по id;
    • решена проблема, когда в ряде случаев предпросмотр не работал;
    • скрипты и файл стилей плагина подключаются теперь в head-секции кода страниц;
    • jQuery теперь берется с Гугла.
  • Версия 0.1.4 (20.06.09): добавлена опция “Значение параметра id тега textarea:”; добавлена возможность вставки даты и времени комментария в шаблон блока предпросмотра; добавлена опция показа аватара с сервиса gravatar.com.
  • Версия 0.1.3 (07.02.09): доработаны фильтры форматирования текста в предпросмотре; удалена автоматическая подгонка ширины панели предпросмотра под ширину поля <textarea>, теперь ее ширину нужно изменять через CSS, для этого нужно поиграться с параметром width идентификаторов #jquery-comment-wrap и #jquery-comment-preview, которые находятся в файле jquery-comment-preview.css.
  • Версия 0.1.2 (18.12.08): изменения, связанные с некорректным отображением формы комментирования в IE на некоторых WordPress-темах.
  • Версия 0.1.1 (17.12.08): пофиксен баг: невозможно было отправить комментарий.
  • Версия 0.1 (16.12.08): исходная версия.

Комментарии (249)

  1. 1 марта 2013 г. в 20:25

    Здравствуйте!!! Подскажите, можно дефолтную картинку с граватара заменить на свою дефолтную??? Через настройки плагина, тип аватара: статический, получается, но при этом тогда граватары комментаторов не просматриваются. А охота, чтобы и граватары комментаторов и если таковой нет, то моя дефолтная картинка показывалась.
    И ещё вопрос: можно сделать так, чтобы предпросмотр показывался не в форме комментирования, а последним комментарием, как когда комментарий на модерацию попадает.

    1. 1 марта 2013 г. в 23:57 / ответ на коммент Максим

      Подскажите, можно дефолтную картинку с граватара заменить на свою дефолтную???

      Найдите в плагине строку:

      var avatar = '<img src="http://www.gravatar.com/avatar/' + md5 + '?s=<?php echo $avatar_size; ?>" alt="" class="avatar" />';

      и замените на эту:

      var avatar = '<img src="http://www.gravatar.com/avatar/' + md5 + '?s=<?php echo $avatar_size; ?>&d=<?php echo urlencode('http://example.com/images/avatar.jpg'); ?>" alt="" class="avatar" />';

      А вместо http://example.com/images/avatar.jpg вставьте ссылку на свое изображение.

      И ещё вопрос: можно сделать так, чтобы предпросмотр показывался не в форме комментирования, а последним комментарием, как когда комментарий на модерацию попадает.

      Такой возможности, к сожалению, нет.

      1. 2 марта 2013 г. в 07:44 / ответ на коммент Dimox

        Спасибо!!! Заработало. Вчера весь день колдовал над кодом, так и не нашёл решения. А надо было всего лишь попросить помощи.

  2. Иван
    29 марта 2013 г. в 18:27

    А выбор цвета, и размер шрифта как то можно вывести?
    Спасибо!

    1. 29 марта 2013 г. в 18:49 / ответ на коммент Иван

      Можно, но придется для каждого размера или цвета создавать отдельную кнопку. Это все-таки не визуальный редактор.

  3. Иван
    19 апреля 2013 г. в 17:52

    Подскажите, пожалуйста, как можно в вашем плагине реализовать вставку шорткода такого плана (выделить ссылку и с обеих сторон) [img]ссылка[/img][float=center]
    Сам в это не очень понимаю но хотелось бы вывести такую кнопку.
    Заранее спасибо за ответ!

    1. 19 апреля 2013 г. в 18:58 / ответ на коммент Иван

      Такой возможности нет, можно создавать только хтмл-теги.

  4. 6 мая 2013 г. в 19:19

    Поставил Ваш плагин-замечательно работает, но… когда отключен Antispam Bee. Обратился к спецу знакомому-сказал писать Вам, чтоб посоветовали, как исправить эту несовместимость плагинов.

    1. После активации Antispam Bee нужно заглянуть в код страницы с комментариями и найти там что-то типа этого:

      <textarea name="432cb-comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea><textarea name="comment" style="display:none" rows="1" cols="1"></textarea>

      Скопировать 432cb-comment (у вас там будут другие цифры и буквы) и вставить в опцию моего плагина “Значение параметра name тега textarea”.

  5. 27 мая 2013 г. в 23:21

    После активации плагина, в админке появилась страничка настройки плагина, но на самом сайте ничего не появилось.

    1. 6 июня 2013 г. в 14:31 / ответ на коммент Пётр

      Плагин мог не работать из-за несовместимости с jQuery 1.9. Только что выложил новую версию плагина – эта проблема устранена.

      1. 8 июня 2013 г. в 07:57 / ответ на коммент Dimox

        Ничего не поменялось. У меня тема самописная, может я что-то упустил?

      2. 8 июня 2013 г. в 08:36 / ответ на коммент Dimox

        Протестировал на дефолтной теме – всё работает, что же я мог упустить в своей теме?

        1. 8 июня 2013 г. в 09:27 / ответ на коммент Пётр

          У вас в конце кода страницы перед </body> есть вот такой код:

          <div style="display:none"><b></b>
          </div>
          

          Скрипт почему-то ругается на него, попробуйте его удалить.

          1. 9 июня 2013 г. в 16:01 / ответ на коммент Dimox

            Не пойму откуда взялся этот код. Сам я ничего подобного не прописывал. Думал что это следствие работы какого-то плагина, но после отключения всех плагинов ситуация не поменялась. Даже не знаю что и думать. Буду копать…

  6. 3 августа 2013 г. в 10:34

    Хороший плагин, респект! Я их кучу перетасовал, сейчас вот только попробую подобрать плагин цитирования комментов.
    Кнопка tt непонятная без предпросмотра

  7. 19 сентября 2013 г. в 10:45

    Здравствуйте! Отличный плагин! Но подскажите, он выводится в форме по параметру name, но что если у меня на сайте 3 шаблона комментариев, все имеют одинаковый name=”comment”, но вывести блок плагина нужно только в одном из них? Как это реализовать? Заранее спасибо!

    1. 19 сентября 2013 г. в 11:05 / ответ на коммент Влад

      Не представляю, как.

      1. Влад
        19 сентября 2013 г. в 11:15 / ответ на коммент Dimox

        Я думал что Вы, как разработчик этого плагина знаете. Не подскажете пожалуйста, решение этой проблемы? вставить блок плагина нужно в шаблон комментариев, который выводится в single.php, и может на основе это создать условие типа если это single, то выводить, если нет – не выводить. Спасибо за помощь!

        1. 19 сентября 2013 г. в 12:26 / ответ на коммент Влад

          В плагине нет такой возможности.

          1. 19 сентября 2013 г. в 14:14 / ответ на коммент Dimox

            Жаль, что нет, а была бы как раз кстати. Но я нашел решение этой проблемы, может не совсем такое, как нужно было, но результат удовлетворяет – сделал с помощью CSS – по умолчанию стоит display none, а в файле single display block.

  8. Andrey
    26 октября 2013 г. в 03:53

    Почти… не работает)) Установил, всё работает для формы комментирования, но слетела прокрутка страницы “кнопка вверх”. Стояла на сайте полгода. Добавил jQuery Comment Preview и перестала быть прокрутка вверх. Вроде безобидный javascript-код у данной “кнопки вверх”, но сработала видать несовместимость скриптов…

  9. 19 ноября 2013 г. в 09:12

    А можно сделать кнопку с выводом сл. шорткода:

    [code][/code]

    т.е. вывод квадратных скобок?

    1. 19 ноября 2013 г. в 11:05 / ответ на коммент talgautb

      Только если править код плагина. Вот тут поменяй угловые скобки на квадратные:

      			} else {
      				var start = '<' + tag + attribs + '>';
      				var end = '</' + tag + '>';
      			}
      

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

  10. rutulets
    19 марта 2014 г. в 18:50

    А как добавить кнопки CSS HTML JavaScript PHP как у вас на блоге?

    1. 19 марта 2014 г. в 19:11 / ответ на коммент rutulets

      В настройках плагина.

      1. rutulets
        19 марта 2014 г. в 19:22 / ответ на коммент Dimox

        Нашел. Спасибо.

  11. rutulets
    19 марта 2014 г. в 18:50

    И ещё: Можно ли такие же кнопки добавить в редактор в админке

    1. 19 марта 2014 г. в 19:11 / ответ на коммент rutulets

      С этим плагином нельзя.

  12. rutulets
    19 марта 2014 г. в 19:23

    И ещё один вопросик. Вот у Вас в блоке с кодом, сверху идет кнопка “Взять код”. Как такое реализовывается, если не секрет.

    1. 19 марта 2014 г. в 20:21 / ответ на коммент rutulets

      О, это сложно объяснять. Выковырял скрипт с другого сайта, откуда он там был взят, не знаю.

      1. rutulets
        19 марта 2014 г. в 22:23 / ответ на коммент Dimox

        :) понятно. Попробую выковырять код с вашего сайта…если возможно и если вы не против…

        1. 20 марта 2014 г. в 10:22 / ответ на коммент rutulets

          Не против. Используется файл syntax-highlighter.js.

  13. 9 августа 2014 г. в 05:50

    Как сделать как у вас – “Жирный”, “ссылка” и т.д., а не Ж, link и прочее?

    1. 11 августа 2014 г. в 18:19 / ответ на коммент Роман

      Это меняется в настройках плагина.

  14. 8 мая 2015 г. в 20:30

    Отличная штука, хотел бы такое реализовать на DLE 10.4. Не подтолкнете куда копать?

  15. Webmaster
    25 июня 2015 г. в 23:53

    Здравствуйте! Установил себе. Все получилось как и было задумано. Спасибо. Но вот 1 проблема: у меня сайте комментарии могут оставлять только зарегистрированные пользователи. Поэтому раньше, еще до установки вашего варианта, внизу писалось сообщение “Писать комментарии могут только зарегистрированные пользователи. Авторизуйтесь” – ну или что-то вроде того. Так вот, после установки вашего плагина, форма перестала показываться, то есть там пусто вообще. Как быть? Как оставить ваш плагин и вернуть сообщение снизу?

    1. 26 июня 2015 г. в 00:25 / ответ на коммент Webmaster

      Только что проверил – у меня сообщение выводится. Плагин на это вообще никак не влияет. Он затрагивает только поле ввода комментария.

      1. Webmaster
        26 июня 2015 г. в 09:47 / ответ на коммент Dimox

        Спасибо за оперативный ответ.
        Хорошо. Тогда скорее всего ошибка на моей стороне. Будем искать с(:

  16. Yan
    21 июля 2015 г. в 16:07

    Приветствую. Подскажите как исправить ошибки Undefined index: connect_js … строка 621 ,Undefined index: avatar_type … строка 626 , Undefined index: connect_css … строка 608. Все эти ошибки в подключении файлов, из-за них не работает.

    1. 21 июля 2015 г. в 16:25 / ответ на коммент Yan

      Я не сталкивался с такими ошибками, поэтому не знаю.

  17. Webmaster
    22 июля 2015 г. в 12:31

    Добрый день! Сегодня обнаружил, что при активированном вашем плагине, перестают работать два других на странице “одна запись”. Ошибка следующая: Uncaught TypeError: jQuery(…).ajaxyLiveSearch is not a function. При дезактивации вашего плагина, все снова начинает работать. После долгих рысканий в коде, пришел к выводу, что все дело в кнопке “предпросмотр” и связанной с ней технологией ajax. Возможной какой-то конфликт скриптов. Можно ли как-то убрать функцию предпросмотра, но при этом оставить все остальное (html редактор, смайлы и т.д.)?

    1. 22 июля 2015 г. в 12:43 / ответ на коммент Webmaster

      Не убрать. Предпросмотр – основная суть плагина.

  18. 28 июля 2015 г. в 19:36

    Здравствуйте,

    Существует такой плагин “Simple Comment Editing”, который позволяет пользователям редактировать комментария в определенный период. Дело в том что при активизации вашего плагина, плагин “Simple Comment Editing” перестает работать. Есть ли возможность это исправить?

    1. Установил этот плагин. Консоль не показывает никаких ошибок. Поэтому не представляю, как найти причину. Возможно, какой-то конфликт скриптов.

      1. Дело такое, воспользовался вашей статьей Скрипт предпросмотра комментария с помощью jQuery: вариант 2. Ситуация аналогичная глушит все ява скрипты на странице (кнопка вверх, плагин редактирования и т.д.), но дело в том что когда я убрал пару сток которые цепляли фреймворк jQuery

        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">google.load("jquery", "1.2.6");</script>

        и скрипт заработал, вот скрины:
        http://prntscr.com/7yvcxl
        http://prntscr.com/7yvd3v

        единственное что не работает это в строке

        var preview_html = '<ol id="comment-preview"><li>'+ avatar +'<strong>'+ author +'</strong> пишет:<br />'+ comment_preview +'</li></ol>';

        не определяются переменные avatar и author. Не могли бы вы мне в этом помочь разобраться?

        1. В настройках скрипта подписаны комментарии. Видимо, что-то неправильно заполнили.

          1. Нет наверное я не правильно объяснил. На скринах я убрал из строчки эти значения. А сели их оставить то пишет вот так:

            undefined: пишет … и его аватар (ссылка на пользователя тоже неверная)

          2. Да кстати в вашем примере http://dimox.name/examples/jquery-comment-preview-2.html комментатор тоже не определяется.

            http://prntscr.com/7z4b9p

            Хотя в настройка вы его выводите:

            var author = $j('#'+ author_id).val();
            			var url = $j('#'+ url_id).val();
            			author = '<a href="'+ url +'">'+ author +'</a>';
            			if (url == '') { author = $j('#author').val(); }
            			var preview_html = '<ol id="comment-preview"><li>'+ avatar +'<strong>'+ author +'</strong> пишет:<br />'+ comment_preview +'</li></ol>';
            1. В моем примере нет никаких ошибок.

              1. 1 августа 2015 г. в 10:40 / ответ на коммент Dimox

                Я не говорил что в нем есть ошибки, я просто хотел понять как сделать что бы определялась переменная автор и т.д. Просто программисту не этой области не совсем легко понять что к чему. В вашем примере переменные берутся из заполненных полей, имя и т.д. Что бы переменная “author” и т.д. определялись если пользователь зарегистрирован, то их нужно в ваш скрипт передать, вот как это сделать может кому пригодится:

                Сначала прописываете в шапке

                <script type="text/javascript" src="jquery-comment-preview.js"></script>

                Потом в функции темы вот это:

                <?php
                wp_enqueue_script( 'my-ajax-request', 'http://путь до скрипта/jquery-comment-preview.js' );
                get_currentuserinfo();
                wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => $current_user->display_name )  );
                ?>

                И в самом скрипте перед выводом автора вот такая строка:

                if (author == undefined) author = MyAjax.ajaxurl;

                Аналогично можно сделать и с остальными переменными.

  19. 3 ноября 2015 г. в 14:44

    Начиная с версии 4.2 в ВП больше нет встроенных смайлов, за то есть поддержка эмодзи.
    Было бы здорово увидеть новую кнопку с эмодзи смайлами :-)

    1. 3 ноября 2015 г. в 15:20 / ответ на коммент Леонид

      Старые смайлы вообще-то никуда не делись.

      1. 8 ноября 2015 г. в 18:15 / ответ на коммент Dimox

        В том то и дело, что нет. Файлы картинок остались на месте, но WP больше не преобразует коды смайликов в картинки. Вернуть это можно только отдельным плагином, а мне бы не хотелось нагружать сайт.
        Вот статья об этом: http://gnatkovsky.com.ua/propali-smajly-posle-obnovleniya-wordpress-do-versii-4-2.html
        Вот как сейчас выглядит ваше окошко добавления смайлов:
        https://yadi.sk/i/AoBUUyYFkJrz2

        1. 8 ноября 2015 г. в 18:41 / ответ на коммент Леонид

          Файлы картинок остались на месте

          Я это и имел в виду.

          Вот как сейчас выглядит ваше окошко добавления смайлов:
          https://yadi.sk/i/AoBUUyYFkJrz2

          Ясно. Надо будет что-то с этим сделать.

  20. Василий
    24 июля 2016 г. в 23:37

    Здравствуйте!
    Подключаю ваш модуль у себя на сайте он работает отлично. но по всему сайту вырубается colorbox то есть идет где то конфликт не могу понять как исправить эту ошибку, в самом модуле если убрать

    add_action('wp_enqueue_scripts', 'jcp_js');

    То проблема с colorbox изчезает но соответственно не работает предпросмотр в комментариях…
    А в консоли Выдает такое вот https://yadi.sk/i/3WPo6nlRtarHi
    Заранее спасибо за помощь!

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код