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

249 комментариев

Главная › WordPress

Содержание:
  1. Описание
  2. Особенности плагина
  3. Скачать
  4. Плагин «jQuery Comment Preview» (предпросмотр комментария на WordPress)
  5. Установка
  6. HTML-код блока предпросмотра
  7. Если ничего не работает
  8. История версий

Описание

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

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

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

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

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

Скачать

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

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

Загрузок: 3412 | Последняя версия: 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. rutulets
    9 лет назад

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

  2. Роман
    8 лет 7 месяцев назад

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

  3. ALTERNATE
    7 лет 10 месяцев назад

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

  4. Webmaster
    7 лет 8 месяцев назад

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

  5. Yan
    7 лет 8 месяцев назад

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

  6. Webmaster
    7 лет 8 месяцев назад

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

  7. Владимир
    7 лет 7 месяцев назад

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

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

    • Dimox
      7 лет 7 месяцев назад / ответ на коммент Владимир

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

      • Владимир
        7 лет 7 месяцев назад / ответ на коммент Dimox

        Дело такое, воспользовался вашей статьей Скрипт предпросмотра комментария с помощью 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. Не могли бы вы мне в этом помочь разобраться?

        • Dimox
          7 лет 7 месяцев назад / ответ на коммент Владимир

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

          • Владимир
            7 лет 7 месяцев назад / ответ на коммент Dimox

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

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

          • Владимир
            7 лет 7 месяцев назад / ответ на коммент Dimox

            Да кстати в вашем примере https://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>';
            • Dimox
              7 лет 7 месяцев назад / ответ на коммент Владимир

              В моем примере нет никаких ошибок.

              • Владимир
                7 лет 7 месяцев назад / ответ на коммент 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;

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

  8. Леонид
    7 лет 4 месяца назад

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

    • Dimox
      7 лет 4 месяца назад / ответ на коммент Леонид

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

      • Леонид
        7 лет 4 месяца назад / ответ на коммент Dimox

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

  9. Василий
    6 лет 7 месяцев назад

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

    add_action('wp_enqueue_scripts', 'jcp_js');

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

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