Плагин для WordPress «Предпросмотр комментария» на jQuery
Описание
Плагин «Предпросмотр комментария» (jQuery Comment Preview) подключает к форме комментирования WordPress функцию предпросмотра комментария без перезагрузки страницы. Работает на популярном фреймворке jQuery.
Для работы плагина требуется версия WordPress: 2.9 или выше.
Пример работы данного плагина вы можете наблюдать на настоящем блоге.
Особенности плагина
- Реализует красивый «живой» предпросмотр комментария, не занимая при этом дополнительного пространства на странице.
- Позволяет подключить простенький HTML-редактор, с помощью которого можно быстро вставлять HTML-теги в текст комментария (инструкции по работе с HTML-редактором находятся на странице настроек плагина).
- Есть возможность вставки тегов со следующими видами скобок:
<>
,[]
,{}
,()
. Достаточно в коде кнопок редактора указать соответствующие скобки для тегаbutton
. - В предпросмотре можно отобразить: имя комментирующего, его аватар (статический или динамический через сервис gravatar.com), время и дату комментария, текст комментария. Все это можно оформить с помощью CSS под дизайн вашего сайта.
- Если вы хотите снизить количество запросов к серверу вашего хостинга, в настройках можно запретить подключение файла стилей плагина.
- Скрипт плагина и файл стилей подключаются только на страницах, где присутствует форма комментариев.
Скачать
Внимание: для полноценной работы плагина могут потребоваться знания технологий CSS и HTML.
Плагин «jQuery Comment Preview» (предпросмотр комментария на WordPress)
Загрузок: 3417 | Последняя версия: 1.1.1 | Последнее обновление: 17.11.2015
Установка
- Скопировать папку
jquery-comment-preview
в папку с плагинами:/wp-content/plugins/
. - Активировать плагин через меню «Плагины» в админке WordPress.
- Если понадобится, настроить опции в админке на странице
Параметры -> jQuery Comment Preview
. - Если необходимо, отредактировать CSS-стили для блока предпросмотра в файле
jquery-comment-preview.css
. - Готово.
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>
Если ничего не работает
- Убедитесь, что используете соответствующую версию WordPress, которая требуется для работы плагина.
Убедитесь, что в файле
header.php
вашей темы присутствует следующий код:<?php wp_head(); ?>
Если его нет, то вставьте перед тегом
</head>
.- Если выполнение первых 2-х пунктов не решило проблему, сообщите подробности в комментарии к этому посту.
История версий
- Версия 1.1.1 (17.11.15):
- исправлены смайлы.
- Версия 1.1 (19.04.15):
- форматирование кода в предпросмотре теперь осуществляются встроенной в WordPress функцией
wpautop ()
через ajax-запрос; - css-файл и js-файлы плагина теперь подключаются через предусмотренные для этого функции WordPress;
- добавлена опция: подключать js-файлы перед тегом
</head>
или перед тегом</body>
; - добавлена опция, в которой можно указать теги, используемые сторонним плагином для подсветки кода.
- форматирование кода в предпросмотре теперь осуществляются встроенной в WordPress функцией
- Версия 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)
И ещё один вопросик. Вот у Вас в блоке с кодом, сверху идет кнопка «Взять код». Как такое реализовывается, если не секрет.
О, это сложно объяснять. Выковырял скрипт с другого сайта, откуда он там был взят, не знаю.
:) понятно. Попробую выковырять код с вашего сайта… если возможно и если вы не против…
Не против. Используется файл syntax-highlighter.js.
Как сделать как у вас — «Жирный», «ссылка»и т. д. , а не Ж, link и прочее?
Это меняется в настройках плагина.
Отличная штука, хотел бы такое реализовать на DLE 10.4. Не подтолкнете куда копать?
Здравствуйте! Установил себе. Все получилось как и было задумано. Спасибо. Но вот 1 проблема: у меня сайте комментарии могут оставлять только зарегистрированные пользователи. Поэтому раньше, еще до установки вашего варианта, внизу писалось сообщение «Писать комментарии могут только зарегистрированные пользователи. Авторизуйтесь» — ну или что-то вроде того. Так вот, после установки вашего плагина, форма перестала показываться, то есть там пусто вообще. Как быть? Как оставить ваш плагин и вернуть сообщение снизу?
Только что проверил — у меня сообщение выводится. Плагин на это вообще никак не влияет. Он затрагивает только поле ввода комментария.
Спасибо за оперативный ответ.
Хорошо. Тогда скорее всего ошибка на моей стороне. Будем искать с (:
Приветствую. Подскажите как исправить ошибки Undefined index: connect_js … строка 621, Undefined index: avatar_type … строка 626, Undefined index: connect_css … строка 608. Все эти ошибки в подключении файлов, из-за них не работает.
Я не сталкивался с такими ошибками, поэтому не знаю.
Добрый день! Сегодня обнаружил, что при активированном вашем плагине, перестают работать два других на странице «одна запись». Ошибка следующая: Uncaught TypeError: jQuery (…).ajaxyLiveSearch is not a function. При дезактивации вашего плагина, все снова начинает работать. После долгих рысканий в коде, пришел к выводу, что все дело в кнопке «предпросмотр» и связанной с ней технологией ajax. Возможной какой-то конфликт скриптов. Можно ли как-то убрать функцию предпросмотра, но при этом оставить все остальное (html редактор, смайлыи т. д. )?
Не убрать. Предпросмотр — основная суть плагина.
Здравствуйте,
Существует такой плагин «Simple Comment Editing», который позволяет пользователям редактировать комментария в определенный период. Дело в том что при активизации вашего плагина, плагин «Simple Comment Editing» перестает работать. Есть ли возможность это исправить?
Установил этот плагин. Консоль не показывает никаких ошибок. Поэтому не представляю, как найти причину. Возможно, какой-то конфликт скриптов.
Дело такое, воспользовался вашей статьей Скрипт предпросмотра комментария с помощью jQuery: вариант 2. Ситуация аналогичная глушит все ява скрипты на странице (кнопка вверх, плагин редактированияи т. д. ), но дело в том что когда я убрал пару сток которые цепляли фреймворк jQuery
и скрипт заработал, вот скрины:
prntscr.com/7yvcxl
http://prntscr.com/7yvd3v
единственное что не работает это в строке
не определяются переменные avatar и author. Не могли бы вы мне в этом помочь разобраться?
В настройках скрипта подписаны комментарии. Видимо, что-то неправильно заполнили.
Нет наверное я не правильно объяснил. На скринах я убрал из строчки эти значения. А сели их оставить то пишет вот так:
undefined: пишет … и его аватар (ссылка на пользователя тоже неверная)
Да кстати в вашем примере https://dimox.name/examples/jquery-comment-preview-2.html комментатор тоже не определяется.
prntscr.com/7z4b9p
Хотя в настройка вы его выводите:
В моем примере нет никаких ошибок.
Я не говорил что в нем есть ошибки, я просто хотел понять как сделать что бы определялась переменная автори т. д. Просто программисту не этой области не совсем легко понять что к чему. В вашем примере переменные берутся из заполненных полей, имя и т. д. Что бы переменная «author» и т. д. определялись если пользователь зарегистрирован, то их нужно в ваш скрипт передать, вот как это сделать может кому пригодится:
Сначала прописываете в шапке
Потом в функции темы вот это:
И в самом скрипте перед выводом автора вот такая строка:
Аналогично можно сделать и с остальными переменными.
Начиная с версии 4.2 в ВП больше нет встроенных смайлов, за то есть поддержка эмодзи.
Было бы здорово увидеть новую кнопку с эмодзи смайлами :-)
Старые смайлы вообще-то никуда не делись.
В том то и дело, что нет. Файлы картинок остались на месте, но WP больше не преобразует коды смайликов в картинки. Вернуть это можно только отдельным плагином, а мне бы не хотелось нагружать сайт.
Вот статья об этом: gnatkovsky.com.ua/propali-smajly-posle-obnovleniya-wordpress-do-versii-4−2.html
Вот как сейчас выглядит ваше окошко добавления смайлов:
yadi.sk/i/AoBUUyYFkJrz2
Я это и имел в виду.
Ясно. Надо будет что-то с этим сделать.
Здравствуйте!
Подключаю ваш модуль у себя на сайте он работает отлично. но по всему сайту вырубается colorbox то есть идет где-то конфликт не могу понять как исправить эту ошибку, в самом модуле если убрать
То проблема с colorbox изчезает, но соответственно не работает предпросмотр в комментариях…
А в консоли Выдает такое вот yadi.sk/i/3WPo6nlRtarHi
Заранее спасибо за помощь!