Плагин для WordPress “Предпросмотр комментария” на jQuery
Описание
Плагин “Предпросмотр комментария” (jQuery Comment Preview) подключает к форме комментирования WordPress функцию предпросмотра комментария без перезагрузки страницы. Работает на популярном фреймворке jQuery.
Для работы плагина требуется версия WordPress: 2.9 или выше.
Пример работы данного плагина вы можете наблюдать на настоящем блоге.
Особенности плагина
- Реализует красивый “живой” предпросмотр комментария, не занимая при этом дополнительного пространства на странице.
- Позволяет подключить простенький HTML-редактор, с помощью которого можно быстро вставлять HTML-теги в текст комментария (инструкции по работе с HTML-редактором находятся на странице настроек плагина).
- Есть возможность вставки тегов со следующими видами скобок:
<>
,[]
,{}
,()
. Достаточно в коде кнопок редактора указать соответствующие скобки для тегаbutton
. - В предпросмотре можно отобразить: имя комментирующего, его аватар (статический или динамический через сервис gravatar.com), время и дату комментария, текст комментария. Все это можно оформить с помощью CSS под дизайн вашего сайта.
- Если вы хотите снизить количество запросов к серверу вашего хостинга, в настройках можно запретить подключение файла стилей плагина.
- Скрипт плагина и файл стилей подключаются только на страницах, где присутствует форма комментариев.
Скачать
Внимание: для полноценной работы плагина могут потребоваться знания технологий CSS и HTML.
Плагин “jQuery Comment Preview” (предпросмотр комментария на WordPress)
Загрузок: 3434 | Последняя версия: 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)
Здравствуйте!!! Подскажите, можно дефолтную картинку с граватара заменить на свою дефолтную??? Через настройки плагина, тип аватара: статический, получается, но при этом тогда граватары комментаторов не просматриваются. А охота, чтобы и граватары комментаторов и если таковой нет, то моя дефолтная картинка показывалась.
И ещё вопрос: можно сделать так, чтобы предпросмотр показывался не в форме комментирования, а последним комментарием, как когда комментарий на модерацию попадает.
Найдите в плагине строку:
и замените на эту:
А вместо
http://example.com/images/avatar.jpg
вставьте ссылку на свое изображение.Такой возможности, к сожалению, нет.
Спасибо!!! Заработало. Вчера весь день колдовал над кодом, так и не нашёл решения. А надо было всего лишь попросить помощи.
А выбор цвета, и размер шрифта как то можно вывести?
Спасибо!
Можно, но придется для каждого размера или цвета создавать отдельную кнопку. Это все-таки не визуальный редактор.
Подскажите, пожалуйста, как можно в вашем плагине реализовать вставку шорткода такого плана (выделить ссылку и с обеих сторон) [img]ссылка[/img][float=center]
Сам в это не очень понимаю но хотелось бы вывести такую кнопку.
Заранее спасибо за ответ!
Такой возможности нет, можно создавать только хтмл-теги.
Поставил Ваш плагин-замечательно работает, но… когда отключен Antispam Bee. Обратился к спецу знакомому-сказал писать Вам, чтоб посоветовали, как исправить эту несовместимость плагинов.
После активации Antispam Bee нужно заглянуть в код страницы с комментариями и найти там что-то типа этого:
Скопировать
432cb-comment
(у вас там будут другие цифры и буквы) и вставить в опцию моего плагина “Значение параметра name тега textarea”.После активации плагина, в админке появилась страничка настройки плагина, но на самом сайте ничего не появилось.
Плагин мог не работать из-за несовместимости с jQuery 1.9. Только что выложил новую версию плагина – эта проблема устранена.
Ничего не поменялось. У меня тема самописная, может я что-то упустил?
Протестировал на дефолтной теме – всё работает, что же я мог упустить в своей теме?
У вас в конце кода страницы перед
</body>
есть вот такой код:Скрипт почему-то ругается на него, попробуйте его удалить.
Не пойму откуда взялся этот код. Сам я ничего подобного не прописывал. Думал что это следствие работы какого-то плагина, но после отключения всех плагинов ситуация не поменялась. Даже не знаю что и думать. Буду копать…
Хороший плагин, респект! Я их кучу перетасовал, сейчас вот только попробую подобрать плагин цитирования комментов.
Кнопка tt непонятная без предпросмотра
Здравствуйте! Отличный плагин! Но подскажите, он выводится в форме по параметру name, но что если у меня на сайте 3 шаблона комментариев, все имеют одинаковый name=”comment”, но вывести блок плагина нужно только в одном из них? Как это реализовать? Заранее спасибо!
Не представляю, как.
Я думал что Вы, как разработчик этого плагина знаете. Не подскажете пожалуйста, решение этой проблемы? вставить блок плагина нужно в шаблон комментариев, который выводится в single.php, и может на основе это создать условие типа если это single, то выводить, если нет – не выводить. Спасибо за помощь!
В плагине нет такой возможности.
Жаль, что нет, а была бы как раз кстати. Но я нашел решение этой проблемы, может не совсем такое, как нужно было, но результат удовлетворяет – сделал с помощью CSS – по умолчанию стоит display none, а в файле single display block.
Почти… не работает)) Установил, всё работает для формы комментирования, но слетела прокрутка страницы “кнопка вверх”. Стояла на сайте полгода. Добавил jQuery Comment Preview и перестала быть прокрутка вверх. Вроде безобидный javascript-код у данной “кнопки вверх”, но сработала видать несовместимость скриптов…
А можно сделать кнопку с выводом сл. шорткода:
т.е. вывод квадратных скобок?
Только если править код плагина. Вот тут поменяй угловые скобки на квадратные:
И в этом случае, если ты также используешь обычные теги, то они все станут с квадратными скобками.
А как добавить кнопки CSS HTML JavaScript PHP как у вас на блоге?
В настройках плагина.
Нашел. Спасибо.
И ещё: Можно ли такие же кнопки добавить в редактор в админке
С этим плагином нельзя.
И ещё один вопросик. Вот у Вас в блоке с кодом, сверху идет кнопка “Взять код”. Как такое реализовывается, если не секрет.
О, это сложно объяснять. Выковырял скрипт с другого сайта, откуда он там был взят, не знаю.
:) понятно. Попробую выковырять код с вашего сайта…если возможно и если вы не против…
Не против. Используется файл 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
и скрипт заработал, вот скрины:
http://prntscr.com/7yvcxl
http://prntscr.com/7yvd3v
единственное что не работает это в строке
не определяются переменные avatar и author. Не могли бы вы мне в этом помочь разобраться?
В настройках скрипта подписаны комментарии. Видимо, что-то неправильно заполнили.
Нет наверное я не правильно объяснил. На скринах я убрал из строчки эти значения. А сели их оставить то пишет вот так:
undefined: пишет … и его аватар (ссылка на пользователя тоже неверная)
Да кстати в вашем примере http://dimox.name/examples/jquery-comment-preview-2.html комментатор тоже не определяется.
http://prntscr.com/7z4b9p
Хотя в настройка вы его выводите:
В моем примере нет никаких ошибок.
Я не говорил что в нем есть ошибки, я просто хотел понять как сделать что бы определялась переменная автор и т.д. Просто программисту не этой области не совсем легко понять что к чему. В вашем примере переменные берутся из заполненных полей, имя и т.д. Что бы переменная “author” и т.д. определялись если пользователь зарегистрирован, то их нужно в ваш скрипт передать, вот как это сделать может кому пригодится:
Сначала прописываете в шапке
Потом в функции темы вот это:
И в самом скрипте перед выводом автора вот такая строка:
Аналогично можно сделать и с остальными переменными.
Начиная с версии 4.2 в ВП больше нет встроенных смайлов, за то есть поддержка эмодзи.
Было бы здорово увидеть новую кнопку с эмодзи смайлами :-)
Старые смайлы вообще-то никуда не делись.
В том то и дело, что нет. Файлы картинок остались на месте, но WP больше не преобразует коды смайликов в картинки. Вернуть это можно только отдельным плагином, а мне бы не хотелось нагружать сайт.
Вот статья об этом: http://gnatkovsky.com.ua/propali-smajly-posle-obnovleniya-wordpress-do-versii-4-2.html
Вот как сейчас выглядит ваше окошко добавления смайлов:
https://yadi.sk/i/AoBUUyYFkJrz2
Я это и имел в виду.
Ясно. Надо будет что-то с этим сделать.
Здравствуйте!
Подключаю ваш модуль у себя на сайте он работает отлично. но по всему сайту вырубается colorbox то есть идет где то конфликт не могу понять как исправить эту ошибку, в самом модуле если убрать
То проблема с colorbox изчезает но соответственно не работает предпросмотр в комментариях…
А в консоли Выдает такое вот https://yadi.sk/i/3WPo6nlRtarHi
Заранее спасибо за помощь!