Плагин для WordPress “Предпросмотр комментария” на jQuery
18 декабря 2008 г.
Описание
Плагин “Предпросмотр комментария” (jQuery Comment Preview) подключает к форме комментирования WordPress функцию предпросмотра комментария без перезагрузки страницы. Работает на популярном фреймворке jQuery.
Для работы плагина требуется версия WordPress: 2.3 или выше.
Пример работы данного плагина вы можете наблюдать на настоящем блоге.
Особенности плагина
- Реализует красивый “живой” предпросмотр комментария, не занимая при этом дополнительного пространства на странице.
- Позволяет подключить простенький HTML-редактор, с помощью которого можно быстро вставлять HTML-теги в текст комментария (инструкции по работе с HTML-редактором находятся на странице настроек плагина).
- В предпросмотре можно отобразить: имя комментирующего, его аватар (статический или динамический через сервис gravatar.com), время и дату комментария, текст комментария. Все это можно оформить с помощью CSS под дизайн вашего сайта.
- Если вы хотите снизить количество запросов к серверу вашего хостинга, в настройках можно запретить подключение файла стилей плагина.
- Скрипт плагина и файл стилей подключаются только на страницах, где присутствует форма комментариев.
Скачать
Внимание: для полноценной работы плагина могут потребоваться знания технологий CSS и HTML.
Плагин “jQuery Comment Preview” (предпросмотр комментария на WordPress)
Последняя версия: 0.2 | Последнее обновление: 02.05.2010
Установка
- Скопировать папку jquery-comment-preview в папку с плагинами: /wp-content/plugins/.
- Активировать плагин через меню “Плагины” в админке WordPress.
- Поиграться с параметром width идентификаторов #jquery-comment-wrap, #jquery-comment-preview и #comment_preview (которые находятся в файле jquery-comment-preview.css), чтобы подстроить ширину блока предпросмотра под дизайна вашего сайта.
- Если понадобится, настроить необходимые опции в админке на странице Настройки -> jQuery Comment Preview.
- Если необходимо, отредактировать другие CSS-стили для блока предпросмотра в файле jquery-comment-preview.css.
- Готово.
HTML-код блока предпросмотра
Плагин создает следующую структуру HTML-кода для блока предпросмотра (это может пригодиться при оформлении через CSS):
1 2 3 4 5 6 7 8 9 10 11 | <div id="jquery-comment-wrap"> <div id="jquery-comment-preview"> <div id="html-editor"> <a>кнопка</a> <a>кнопка</a> ... </div> <div id="preview-tab">предпросмотр</div> </div> <textarea name="comment"></textarea> </div> |
Если ничего не работает
- Убедитесь, что используете соответствующую версию WordPress, которая требуется для работы плагина.
-
Убедитесь, что в файле header.php вашей темы присутствует следующий код:
1<?php wp_head(); ?>Если его нет, то вставьте перед тегом </head>.
- Если выполнение первых 2-х пунктов не решило проблему, сообщайте подробности в комментарии к этому посту.
История версий
- Версия 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): исходная версия.
автор: Dimox | рубрика WordPress
Хороший плагин. Красиво сделано.
Только вот хотелось бы еще возможность просмотра сразу по ходу написания, т.е. возможность не скрывать окно “предпросмотр” для редактирования написаного, а просто чтобы оно чуть выше подсвечивалось.
Алексей Качаев, спасибо за отзыв. В принципе, можно сделать, чтобы плагин поддерживал 2 варианта предпросмотра, а в настройках выбирать наиболее подходящий вариант. Подумаю на этот счет. Скрипт того варианта, о котором вы говорите, я выкладывал в недавнем посте, так что уже можете его использовать.
Спасибо, выглядит и работает хорошо, уже начал использовать. Верстка в ИЕ чуть плывет, а в остальных нормально показывает.
AlexNote, пожалуйста.
В зависимости от дизайна сайта может потребоваться “подтачивать” некоторые стили, в том числе под ИЕ. Я тестировал плагин на многих темах (которые сам же и верстал :), в большинстве случаев отличий в ИЕ от остальных браузеров я не наблюдал. Косяк в некоторых темах наблюдаются как раз такой, как у тебя.
Тему для твоего сайта верстал тоже я, поэтому попробую разобраться, почему уехало.
Сразуже извиняюсь за оффтопик.
Хотел продемонстрировать подруге пример, как можно реализовать «добавление в закладки» и обнаружил, что ссылка подставляется не верная: пр. http://del.icio.us/post?url=undefined&title=undefined.
Рекомендую поправить ;)
Чистяков Денис, спасибо, что сообщили! Уже поправил =)
Dimox, Спасибо, теперь корректно везде!=) Предпросмотром ты поделился, теперь делить скриптом добавки в соцзакладки=) Очень аккуратный и симпатичный скрипт.
AlexNote, отлично, я очень рад ;)
Давно им хочу поделиться, но пока не могу решить один вопрос - он работает корректно только когда на странице один пост.
Dimox, так он и должен работать только на странице поста, полной версии поста, а не на титуле или в архивах. Чего перегружать зря. Ему бы еще третий лист, на котором емейл и рсс подписка на комменты.
М.. Либо у меня что-то где-то не так, либо я просто недогоняю чафо-то.. Ибо работать оно не хотит..
Sonikelf, по идее панелька должна появиться сразу после активации плагина. Возможно, что причина в других установленных у тебя плагинах или скриптах. Попробуй вот что:
1. Отключи все плагины, связанные с комментариями и включи мой плагин.
2. Временно переключи свою тему на дефолтную и проверь форму.
Довольно интересный плагин и оформление отличное и возможность просмотра во время описание тоже отлично смотрится в общем продолжите развивать
Dimox, спасибо за плагин, но вот возникла проблема. Почему-то в Opere и IE всё нормально с кодировкой а Chrome и FF ни в какую не хотят нормально отображать “Предпросмотр”
DRiVER, возможно, что-то не так с кодировкой вашего сайта.
Dimox, но с другими плагинами всё нормально, да и с кодировкой тоже всё нормально. Даже не знаю где копать :(
DRiVER, я тоже, к сожалению, не знаю.
Dimox, проблема решена измененим кодировки бд с cp1251 на utf8
Я установил плагин, активировал, но внешне в форме для комментариев ничего не изменилось. В общем, изменений никаких не заметил.
В чем может быть проблема?
Бизнес-тренер Михаил Графский, проверьте, есть ли у вас в файле comments.php вот такой код:
Если нет, до добавьте.
Такого кода в comments.php нет.
Подскажите, куда именно его нужно добавить?
Вставьте перед тегом </form>.
Вставил код перед тегом </form>, но ничего не изменилось :(
Но плагин, однако, хороший… Может подскажите, где еще можно копнуть?
Михаил Графский, напишите адрес сайта (перед этим активируйте плагин) и скажите версию WordPress.
у меня почему-то не появляется кнопка, и кнопки для тегов? код про который говорилось выше в comments.php есть, в чем может быть причина?
AngelOfFate, сообщите информацию, которую я указал в моем предыдущем комментарии.
плагин активирован, вот адрес сайта ну и Русский WordPress 2.6.5 Lecactus Edition версия
AngelOfFate, ссылка на скрипт выводится, т.е. по идее панелька должна была появиться. У меня предположение, что мой скрипт конфликтует с каким-то плагином, который у вас установлен. Попробуйте выполнить следующие действия:
1. Переключитесь на дефолтный шаблон и посмотрите, появилась ли панелька.
2. Если не появилась, то временно деактивируйте все плагины, кроме моего, и посмотрите на результат.
Адрес сайта: http://www.grafsky.ru
Версия вордпресса 2.3.3 от Lecactus
Михаил Графский, для работы плагина требуется версия 2.5 или выше.
2 Dimox оказалось что конфликт с плагином OpenID а в чем может быть проблема?
AngelOfFate, буду тестировать OpenID, попробую разобраться в проблеме.
Мой скрипт конфликтует с файлом jquery.xpath.min.js, который подключает плагин OpenID. Решения пока не нашел. Вопрос остается открытым.
А как можно добавить кнопку вставки УРЛа изображения?
Инструкция в настройках разве не помогла?
Вот таким будет код для изображения:
Спасибо, отличный плагин! Поставил и радуюсь. По ходу возникло предложение. У меня на блоге стоит плагин comment image embedder (позволяет вставлять картинку в комментарий). А что если его совместить с твоим, т.е. после кнопки “код с подсветкой” сделать еще и “вставить изображение”? Было бы отлично, да и пора уже новую версию плагина выкладывать :)
И по ходу написания коммента возник вопрос :)
“Помощь по дoбaвлeнию кода” и “правила комментирования” у тебя тоже на скрипте сделано, не подскажешь как?
ё-маё не то удалил в комменте. На предложение есть ответ в предыдущем комменте.
Я хотел ще спросить, как добавить кнопку “код с подсветкой” (как у тебя) или это тоже есть в инструкции?
Блог у тебя какой-то заколдованный: что ни коммент оставлю то косяк :)
Было бы неплохо, если бы можно было отменить коммент (как у 7блогеров - после добавления коммента появляется надпись “нажмите, чтобы отменить написание комментария” и идет обратный отсчет). Эта ф-ция кстати есть в плагине wp thread comment.
На счет вставки изображения: код, который ты дал в комменте №34 добавляет кнопку вставки изображения, но картинка этой копки “В” (такая же как у кнопки жирного шрифта). Как ее изменить?
Всё же comment image embedder удобнее и понятнее, там при нажатии “добавить картинку” вылазит окно “введите адрес изображения”. Просто те, кто в html вообще не бум бум могут не понять, что делать с конструкцией
Что-то меня немного попёрло, может быть какая-нибудь идея тебе понравится. А что если еще добавить возможность добавлять смайлики через html редактор. У меня стоит custom smileys, который после формы комментирования выводит строчку смайликов (можно загрузить любые в папку с плагином). Можно сделать еще одну кнопочку, при нажатии на которую вылазит окошко с выбором смайлика.
Если можно, дай плиз CSS код своей кнопки “Отправить комментарий”, хочу тоже сделать, чтобы менялся цвет рамки и чтобы мышка менялась из курсора на руку (у меня кнопка работает, но такое ощущение, что это не кнопка а просто надпись).
Я вообще не вижу смысла во вставке изображений в комментарий. А если уж очень надо, то кнопки, код которой в вышестоящем комменте, достаточно.
Здесь рассказано - http://dimox.name/adding-comments-rules/
Для нее нужно писать дополнительный CSS-код.
2
3
4
5
6
7
8
9
10
11
border: 1px solid #d6d3d3;
background: #F9F9F9;
height: 27px;
cursor: pointer;
overflow: visible;
}
#submit:hover {
background: #F8F7F6;
border: 1px solid #0094D6;
}
Если можно, приведи пример этого кода, я не совсем въезжаю, как этот реализовано.
И еще, с помощью какого плагина у тебя реализована кнопка “цитировать”?
Сначала тебе нужно создать картинку для этой кнопки, а потом в jquery-comment-preview.css добавить стиль для нее:
Это просто jQuery-скрипт.
Просто хочу выразить благодарность за то, что есть этот блог и сказать огромное спасибо его автору!
Хотелось бы еще тут увидеть описание функций jquery, чтобы самому скрипты редактировать. Не сегодня, завтра думаю это сильно пригодится. Не хочу, чтобы вы отдельно напригались по поводу создания списка функций и описания к ним. Если у вас есть какой либо список, выложите пожалуйста!
Спасибо! Очень приятно ;0)
Все уже сделано до меня. Могу порекомендовать хороший ресурс - http://www.linkexchanger.su. Сам часто к нему обращаюсь. Наверняка можно еще найти подобные ресурсы. На хабре, кстати, часто выкладывают хорошие материалы по jQuery.
Привет. Поставил твой плагин на блог. Добавил кнопку вставки кода плагина WP-Syntax (там следующий синтаксис:
).
В предпросмотре код не форматируется этим плагином. Возможно ли сделать так, чтобы это происходило?
зы: При добавлении коммента всё ок.
Не сделать, потому что мой плагин код обрабатывает ява-скриптом на уровне браузера, а твой плагин работает на уровне сервера, только после отправки коммента.
В принципе, это мелочь, но правильнее сделать add_action(’wp_head’, ‘jcp_css’), тогда будет валидно в xhtml. И к слову - с OpeinID плагин у меня вполне дружит.
Я знаю. Но в этом случае файл стилей будет подключаться на каждой странице, а нужно, чтоб только на странице с комментами. Попробую решить эту задачу.
Может быть в нем что-то изменилось со времен выявления проблемы. Надо будет снова протестировать.
Таки заставил у себя работать это счастье :) Спасибо, Дим - это просто чудо, а не плагин!
Такой вот вопрос еще только - когда джава выключена выводицца ошибка, так вот можно ли это перевести - http://clip2net.com/clip/m10803/1245579444-clip-14kb.jpg - и если можно, то где? Или это гугловский текст и перевести его нельзя в принципе?
Пожалуйста, рад, что понравилось =)
Текст, о котором ты говоришь, не имеет никакого отношения к моему плагину.
Не хочет твой плагин почему-то работать. =( Не реагирует на нажатия кнопка Предпросмотр и нету остальных кнопок… В чем может быть дело? Включал тему Default выключив при этом в админке все плагины кроме этого и всё равно тоже самое. =( Версия блога самая последняя на данный момент, с офф. сайта. Вот тут посмотри плиз http://webdigital.ru/2009/06/18/hello-world.html#comments Надеюсь подскажешь что с этим делать…
Почему-то у тебя не подключился еще один файл плагина, потому и не работает.
Попробуй сделать следующее. В файле jquery-comment-preview.php найди такую строку:
В ней замени /{avatar}/ на /\{avatar\}/. Потом проверь, работает ли.
Не помогло… =(
Есть ещё какие-нибудь варианты? =(
Напиши свой шаблон для блока предпросмотра из настроек плагина.
А с WordPress 2.8.4. плагин дружит? А то он у меня перестала работать кнопка “Предпросмотр” (после нажатия ничего не происходит). Либо из-за того, что я wordpress обновил (может в вордпресе обновилась версия jquery, а твой плагин ее не понимает), либо после переустановки самого плагина (когда нажал в админке “обновить автоматически” возникла какая-то ошибка, пришлось переустанавливать вручную). По инструкции я проверил, вроде как всё нормально.
И еще, я точно не уверен - давно было, но по-моему в старой версии при установке плагина нужно было в вручную подключать скрипт, а в этой не надо. Может из-за этого он не работает?
Дружит.
Всегда автоматически подключался.
Провозился еще кучу времени, но так и не заставил его работать. Правда выяснил еще кое-что странное: сбросил настройки плагина - textarea съехала. Но теперь плагин не реагирует на изменение параметров в jquery-comment-preview.css и style.css темы (если поставить “нет” в настройках).
В итоге: HTML редактор отображается, кнопки слева работают, а “предпросмотр” нет и плагин не реагирует на изменение параметров CSS.
Совсем никаких идей или забыл ответить?
Ты что-то неправильно делаешь.
Гениальный ответ :) Попробую еще раз переустановить :(
Подскажи, пожалуйста, как сделать, чтобы при нажатии на кнопку “код” code выводился не в таких скобках , а в квадратных [].
В файле jquery-comment-preview.php найди код:
2
var end = '</'+button_id+'>';
и замени его на этот:
2
3
4
5
6
7
var start = '['+button_id+attribs+']';
var end = '[/'+button_id+']';
} else {
var start = '<'+button_id+attribs+'>';
var end = '</'+button_id+'>';
}
Спасибо!
Добрый день!
У меня такая же проблема, как и у Яна.
Я нашел этот код, заменил его, и… ничего не изменилось. Предпросмотр, по-прежнему не работает.
Покажите, пожалуйста, ваш шаблон блока предпросмотра из настроек плагина.
2
3
4
5
6
7
<li>
{avatar}
<strong>{author}</strong> пишет:<br />
{comment}
</li>
</ol>
У вас почему-то к форме не подключается файл md5.js, причина этого мне не понятна. Поэтому вам пока придется использовать вариант со статическим аватаром (опция плагина).
Однако, у меня до сих пор так и не работает предпросмотр. Это произошло после обновления вордпресса до версии 2.8.6.
Это из-за того, что md5.js не подключается?
Все. Поставил в настройках “статический аватар” и все заработало. Благодарю! :)
Первое что хочу сказать - это огромное спасибо за замечательный плагин… давно хотел себе такой… сейчас полностью переделываю блог и он очень пригодился, только есть одно но =(
В хроме и лисе при двойном нажатии в textarea с твоим плагином сразу вставляется теги - , сколько раз нажмешь столько они и будут появляться, есть способ с этим бороться?
Заранее огромное спасибо!
P.S. можешь добавить в этот плагин смайлы - создать кнопку нажимая на которую появляется окошко с выбором буквально 5-10 обычных смайлов, я думаю многим бы пригодилось.
Сори, забыл обрамить теги… теги
Пожалуйста, рад, что понравилось. Кстати, почти готова новая версия, скорее всего завтра выложу.
Можешь показать пример? А то не совсем понятно. Да и не должно такого быть.
Сори, не добавлю, т.к. считаю это лишним.
А что добавилось или изменилось?
На локалхосте новый блог, придется видимо сначала выложить, а потом доправлять…. Там смотри как - дважды тыкаешь мышью по полю textarea (поля куда печатаешь сообщение), ну например чтобы все слово выделить и туда вставляются два стронга (открытие и закрытие…)
И еще хотел спросить - у меня jQuery грузится с гугла, а плагин вызывает вордпрессовский джиквери еще раз, причем когда я его отключил он перестал работать(
Будет написано в статье, когда выложу. Сообщу от этом.
Проверил в FF 2.0.x и 3.5.6 - не наблюдаю такого.
Может быть потому, что jQuery, который с WordPress, косячный. Я с этим не раз сталкивался. В новой версии jQuery подключается с Гугла, так что там проблемы этой не должно быть.
Доступна новая версия плагина. Список изменений.
Перед обновлением прошу обязательно прочитать текст касаемо обновления, который находится сразу под заголовком “Скачать”.
Дмитрий, так оказывается ты автор этого плагина! Видел на этом блоге возможность предпросмотра, хотел реализовать у себя, но не доходили руки до поиска плагина. Сегодня заметил твое сообщение в Твиттере.
Шикарно, теперь обязательно установлю его себе. Большое спасибо!
Да, оказывается, я =) Пользуйся в удовольствие.
Спасибо за отзыв и за ретвит.
Дима огромное спасибо за новую версию, здесь все заработало без проблем! Так и не смог разобраться в чем был косяк в предыдущей версии скрипта =(
Почему-то, когда ставлю ссылку в комментариях через этот плагин, то ссылка отображается в странном формате.
Например:
На твоем блоге то же самое. В чем прикол, и как сделать, чтобы ссылка отображалась нормально:
В какой момент так отображается - во время предпросмотра или после публикации комментария?
И в момент предпросмотра и после подтверждения комментария.
Такое может быть только в одном случае - если вы указываете ссылку без http://.
Да, так и есть. Ввел в настройки плагина, чтобы http:// добавлялось автоматом.
Спасибо, с наступающими праздниками вас, Дмитрий!
Скажите, а можно ли сделать так, чтобы при нажатии на кнопку “ссылка” появлялось окошко, куда эту ссылку предлагалось бы ввести? А уже после введения автоматом добавлялось бы http://
Скажите, это может быть направлением развития вашего чудо-плагина? :)
Спасибо. Вас тоже с наступающим!
Думаю, что смогу сделать точно так же, как это сейчас сделано в HTML-редакторе WordPress в админке.
О отлично, то что искал :) Ща потестю плагинчик
Плагин работает, спасибо большое :)
Есть один косяк - появляется он в ГуглХроме и Сафари. Опера и файрфокс не повторяют.
Косяк: при нажатии на кнопку “Предпросмотр”, при наличии введенных в textarea comment’ов любых символов, появляется два символа перевода строки. Короче два новых абзаца вставляется, ну или один :)
Такая же трабла и при тестах и с вот этим самым блогом :)
Будет круто, если можно это поправить
Посмотрю в свободное время.
Непонятно, каким образом они там появляются. Да и, собственно, не важно, я не вижу в этом проблемы. Эти переводы строк не мешают.
Я тоже думаю, что особо не мешают, но сам факт такого неясного явления меня смущает :)
С какой такой особенности браузер пхает перевод строки, и если б один только…
Спасибо все работает замечательно :)
подскажи если не сложно, как добился такого красивого вида комментариев ?
С помощью CSS.
Спасибо большое за плагин. Всё установилось и настроилось прекрасно! :)
Dimox посмотри плиз сайт в подписи, почему то сама ширина регулируется, но почему то только верхнего(где кнопка предосмотр), а самого поля ввода текста узкое, где копать то ?
в CSS все поправлено…
Я панели вообще не наблюдаю.
да я ее только на две минуты отключил и ты тут как тут :)
включил обратно.
посмотри плиз еще раз.
Не отображается. При обращении к файлу kels.ru/?jquery-comment-preview.js открывается не содержимое скрипта, а содержимое сайта. Наверное, с настройками на сервере не все в порядке.
сижу чешу репу, где смотреть ? может файл comment.php в теме нестандартный ?
он там это окошко динамически позволяет менять.
К сожалению, даже не представляю, в чем причина.
все разобрался, у меня там тема авторская, там в ней свои настройки были еще отдельные.
Спасибо !