[Plugins] Ajax Comments 2.09 (на халяву)

Давненько я не выкладывал никаких плагинов, хотя испробовать успел довольно много.

Так о чём это я? Ах да, наверное найдётся несколько человек, которые скачали и установили мою версию Ajax Comment, но не это главное, а то, что у меня в блоге с определенной периодичностью, при отправке комментария, выдавалась ошибка о «Время истекло. Сервер не ответил вовремя.».

Полез я искать новую версию этого плагина и был обрадован сообщением о «Заплатите $1». И не денег мне было жалко, чтобы ещё пару месяцев назад его купить, просто возможность оплаты была только через PayPal, который было лень регистрировать.

Тут на днях как раз прошёл регистрацию и купил-таки новую (2.09) версию и очень она мне понравилась, перечислю фичи от автора, а самое интересное выделю красным:

  • Не надо ничего изменять в коде шаблонов. Работает сразу после активации.
  • Применяет WordPress Plugin API, поэтому отлично работает с другими плагинами.
  • Проверка капч и валидация форм происходит на стороне сервера, без обновления страницы.
  • Сообщения об ошибке появляются в красном прямоугольнике над формой комментариев.
  • Картинка отправки комментария отлично смотрится с любым дизайном.
  • В архиве содержится подробная документация для любителей покопаться в исходниках.
  • Работает с комментариями на любом языке, благодаря поддержки локализаций и unicode-символов.
  • jQuery fade-эффект, делающий читателей счастливее. 😀
  • 60 сек таймайт на сервере не даст подвиснуть читателям.
  • Протестирован на текущих версиях Firefox, Internet Explorer 6/7, Opera, Netscape, и Safari.

Плагин теперь отлично работает с WP AJAX Edit Comments, который раньше приходилось отключать. Мне даже не пришлось вносить никаких изменений, чтобы плагин начал адекватно работать с капчей, так что всё что я сделал — это перевёл пару строчек ошибок на русский.

И главное, на мой взгляд, что теперь вместо ява-скрипт библиотеки Prototype+Scriptaculous используется более легкий (по размерам) jQuery.

Ну а вот вам и ссылочка на сам плагин Ajax-Comments 2.09 (90 kb), думаю автор не будет сильно плакать, что я его раздаю на халяву, ведь «какой русский не любит халявы», к тому же GNU GPL v2 позволяет мне это делать, я же внёс изменения в исходные коды)))

Сразу оговорюсь — плагин тестировал мало, поэтому прошу в комментах хорошенько его «помучить» и оставить отзывы по работе.

ПыЦ: Плагин работает с WP 2.1 — 2.3.x и WP MU.

Выпадающее меню “имени Suckerfish” в WordPress

За последнее время сразу несколько человек поинтересовались у меня, а не в курсе ли я, как делать выпадающие меню в WordPress? Я честно отвечал «Нет», потому что с содроганием вспоминал, как когда-то, на заре изучения web-кодинга, пытался сделать более-менее нормальное выпадающее меню. Триста раз проклял я тогда и java-script, и html, и, конечно же, все браузеры.

Но раз люди спрашивают, то появляется жгучее желание им помочь, вот и полез раскапывать, как дела обстоят сейчас и что новенького умные дядьки намутили, и даже, знаете ли, нашёл. Причём нашёл и очень сильно удивился тому, как это было сделано — вот что значит мало практиковать вёрстку и работать с CSS, потому что, по сути, для того, чтобы намудрить ОТЛИЧНОЕ выпадающее меню, достаточно знать:
а) как делать ненумерованные списки в html (<ul></ul>)
б) уметь копипастить файл-стилей

Ну что же, если эти два пункта и то вызывают у вас сомнения, то буду предельно доступно излагать по шагам, а нетерпеливые могут сразу перейти сюда и посмотреть/пощупать своими руками, итак

Шаг 1. Готовим список пунктов меню руками

Сейчас объясню суть создания выпадающего меню из списков и после этого мы сделаем простейший список, который и будем мучить.

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

Всё просто и, я думаю, дополнительные разъяснения не требуются, главное не забыть указать у внешнего меню class=»nav» и id=»nav-one».

Шаг 2. Стилизуем списки

Сам файл стилей не слишком большой, но между тем целиком код в блоге я приводить не хочу, поэтому советую для дальнейшей беседы скачать файл стилей, а я буду просто рассказывать про принцип работы, ссылаясь на него.
Берём файл sfstyle.css и открываем блокнотом или любым другим редактором (если кому интересно, то я использую Zend Development Environment или, проще говоря, ZDE).
Ну что же, приступим.

Первым делом уберём у всевозможных списков все отступы и прочие списочные атрибуты, это делается в .nav, .nav ul. После чего выводим их в строчку, а не как обычно, за это у нас отвечает float:left; в .nav li. Сразу обращу внимание на то, что мы везде применяем относительное (relative) позиционирование (position), чтобы элементы появлялись в строго заданных им местах, относительно родительских элементов.

Теперь нам необходимо спрятать внутренние списки с глаз долой и отображать их только при наведении. Тут мне попалось два способа:
1) Найденый на A List Apart — для вложенных ul элементов устанавливаем атрибут display:none;, а при наведении (li :hover ul) возвращаем в нормальное значение block.
2) Попавшийся на одном Ajax-ориентированном сайте — прятать список за экран (top:-999em;), а потом устанавливать позицию при наведении.

Так как я взял CSS из второго варианта (почему станет ясно позже), то с первым предлагаю поэкспериментировать самостоятельно.

В принципе на этом можно было бы и закончить, если бы не всеми любимый Internet Explorer (будь он неладен), который плохо обрабатывает псевдо-класс :hover, поэтому переходим к следующему шагу.

Шаг 3. Немного java-script и jQuery

Как это не прискорбно, но java-script придётся применять в любом случае, но я имею вам предложить целых два варианта (ну на самом деле их, наверное, больше), а вы уж сами решайте каким воспользоваться. Объяснять как именно ЭТО работает, не буду, скажу только, что всё сводится к прицеплению обработчкиков при наведении для всех li внешнего списка.
Способ 1 — Чистый java-script

Способ 2 — C применением jQuery

Кому как, а мне визуально больше нравится второй вариант, к сожалению, тут есть одно «НО» — необходимость подключения библиотеки jQuery. Не скажу, что это огромный минус, потому что: а) она идёт в комплекте с WordPress, так что ничего дополнительно скачивать не придётся; б) возможно какой-то из установленных у вас плагинов уже ею пользуется. Сама библиотека весит 20-30кб, поэтому особо не обременит пользователя, к тому же грузится она только первый раз, а потом подгружается из кэша. И не стоит забывать, что она позволяет делать многие интересные вещи, о чём ниже, в пункте 4.

Сейчас я объясню как её подключить:
1. Проверьте, не подключена ли она уже каким-нибудь плагином, для этого откройте любой пост в своём блоге и в html коде поищите слово «jQuery».
2. Если его нет, то лезем в файл темы header.php и где-нибудь перед </head> вставьте
<script type=»text/javascript» src=»http://ваш_домен/wp-includes/js/jquery/jquery.js»></script>

Кстати, если кто не знает, то приведенные выше java-script листинги нужно тоже вставить в хэдер до </head>, обрамив с обоих сторон <script type=»text/javascript»>…</script>

Шаг 4. jQuery-бонус — плавное меню

Раз уж мы вынудили пользователя скачать лишних целых 25кб, то надо его за это как-то наградить:)
Как вы смотрите на то, чтобы сделать появление меню плавным? Думаете сложно? А как вам вот такой код?

Помоему просто отлично, а главное понятно) Добавлю лишь, что вместо «fast» можно добавить «slow» или любое число в миллисекундах.

Тем, кто всё это прочёл думаю стоит посетить эту страничку с примером, где теперь должно быть всё понятно, а если остались какие-то вопросы или я что-то не точно написал — прошу в комменты.

Теперь думаю при помощи этой методики не составит труда делать различные меню — при помощи всяких там wp_list_categories и иже с ним.

ПыЦ: Только не спрашивайте меня, почему SuckerFish. Как я понимаю — это означает рыбу прилипалу или я ошибаюсь? Есть среди читателей знатоки ангельского языка?

Обзор плагинов WordPress — AJAX плагины для читателей блога

Продолжаем пролистывать список из 300 плагинов. На этот раз это AJAX плагины, облегчающие жизнь вашим читателям.

panda-ico AJAX Comments 2.0 — Отправка комментариев без перезагрузки страницы, делает процесс комментирования намного более удобным и плавным.
Уже не раз писал про этот плагин, который можно скачать у меня.

AJAX Google Video Search — Поиск по Google Video не покидая блог.
«Очень полезная» и востребованная функция.

AJAX Shoutbox — Чат в реальном времени, с звуковым оповещением о новых сообщениях.
Таких вещей я тоже никогда не понимал.

Cool Weather — Позволяет посетителям просматривать прогноз погоды в любом регионе.
Синоптики и так врут, так что нечего им делать это ещё и в блоге) Хотя кому как.

Currency Converter — Добавляет конвертер валют на страницу. Данные берутся из Yahoo Finance.
В бизнес-ориентированный блог.

Google MapSearch Widget — Поиск по Google Maps.
Сомнительная радость.

panda-ico Gregarious — Плагин социальных закладок, включающий кнопки для Digg, Reddit, Feedburner FeedFlare и многие другие.
Букмаркинг — это полезно. Нужно сравнить этот плагин с версией от Максима.

Hottaimoijiruna — Добавляет самообновляющиеся часики — временной пояс определяется блоггером.
Не вижу смысла.

Inline Ajax Comments — Скрывает комментарии, до тех пор пока пользователь не кликнет по ним.
Здравое зерно в этом плагине есть. Пока что правда я не уверен, что оно МНЕ нужно.

panda-ico Inline Ajax Page — Отображает обрезанную версию поста, а после клика загружает полную версию на этой же странице.
Идея мне нравится. Стоит посмотреть и реализацию — подгружает ли скрипт остаток страницы из базы или просто отображает скрытый до этого фрагмент. От этого зависит в принципе индексация статей с главной, поэтому лишнее баловство излишне.

Tagboard Widget — Добавляет панель, в которой отображаются последнии комментарии сразу же после их появления в блоге, т.е. без перезагрузки страницы.
Прикольно, но только на сайте автора скачать плагин нельзя — «Временно модифицируется».

Units Converter — Переводит сотни различных единиц измерений (длины, площади, объёма, веса/массы и скорости) без перезагрузки страницы.
«Very useful»…

WP Movie Ratings — Объединяет данные с сайта IMDB с ревью на фильмы в блоге, а так же позволяет читателям оценивать фильм.
*Заняться что ли написанием ревью…* Вполне может быть полезен определенному кругу блоггеров.

XDTalk — Позволяет зарегистрированным пользователям общаться между собой.

Честно говоря этот список немного разочаровал — полезного почти нет, во всяком случае для меня. Может кто надоумит как можно было бы воспользоваться этими плагинами?


Из этой же серии можно почитать:
AJAX плагины для авторов блогов

Обзор плагинов WordPress — AJAX плагины для авторов блогов

Думаю не я один видел статью «300+ Tools for Running Your WordPress Blog», но не уверен, что всем хватило терпения её осилить в один присест, да и к тому же на ангельском языке.
Поэтому предлагаю вам тот же самый обзор, но разбитый на тематические блоки + по-русски.
Естественно просто перевод мало кому интересен, т.ч. курсивом обозначены мои комментарии. Часть плагинов я пропускаю умышленно, потому как они больше ориентированы на «заморских» пользователей WordPress.
Сразу скажу, что сам я эти плагины не применял (пока), но заинтересовавшие меня будут отмечены вот таким значком — panda-ico + пояснение, почему плагин мне интересен. Велика вероятность, что эти плагины буду ставить на свой блог и уже в серии «Как я ставил блог на WordPress» опишу что с ними и как. И если что будет в них переводить — буду выкладывать локализованные версии.
Почему панда? Потому что они просто мне нравятся, вот и всё)

Начнём:

AJAX WordPress плагины — Полезные авторам блогов

AjaxWP — Добавляет возможности AJAX везде где только можно, что увеличивает скорость работы.
Довольно расплывчатое описание, да и не любитель я all-in-one вещей.

Alexa Rank — Отображает ваш Alexa Rank (показатель статистики посещаемости ресурса среди пользователей с установленным Alexa Bar. Немного информации тут.)
Для рунета довольно спорный показатель, т.к. мало кто использует этот самый Alexa Bar

panda-ico Ajax Comment Preview — Создаёт предпросмотр комментария, до его отправки в блог.
Может быть полезен, чтобы удостоверится, что разметка и ссылки указаны правильно.

asTunes — Выводит данные из вашего профиля в Audioscrobbler/last.fm и размещает их в виде списка в блоге.
Максимум, где это применимо, имхо, персональный (не тематический) блог. Потому что реальной пользы от этой информации — 0.

Codebox — Создаёт блок в боковой панели для отображения заготовок с исходными кодами.
Хотел посмотреть что это из себя представляет, но по ссылке из статьи ничего не нашёл. В гугле есть ссылка на репозиторий, но желания устанавливать у меня не появилось.

Crossroads — Добавляет эскизы и комментарии из вашего Flickr аккаунта.
Ну что поделать, не пользуюсь я фликером.

panda-ico FireStats — Обширная статистика по блогу, включая информацию о ссылающихся сайтах и популярных страницах.
Статистика — это хорошо. Хоть и пользуюсь Гугл-Аналистиком, но попробовать данный плагин тоже не прочь.

Google PageRank — Позволяет отображать ваш Google Page Rank на страницах блога.
Польза конечно сомнительная.

Hardened-Trackback — Генерит одноразовые трекбэки, для борьбы с трекбэк спамом.
На меня мало ссылаются, поэтому «трэкбэк спам» — сложноосознаваемая вещь.

imgViewJX — Картинка на главной странице берётся случайным образом из изображений в указанной папки.
Может подойдёт для некоторых тем оформления.

Live Spell Checker — Добавляет проверку орфографии в админ панели при написании постов.
В FireFox проверка орфографии по умолчанию, поэтому плагин для меня бесполезен. К тому же не понятно — какие языки поддерживаются.

WordPress Mailing List — У вас есть список рассылки? Позвольте своим подписчикам управлять подпиской прямо с главной страницы блога.
Может быть и полезно, но пока что я не сталкивался с проблемой управления подписками, да и к тому же скорее всего это действует только для зарегистрированных пользователей.

WP e-Commerce — Корзина покупок для вашего блога.
Кому-то точно пригодится.

panda-ico WP-Polls — Полностью настраиваемое голосование.
Как только появится необходимость в голосовании — установлю.

panda-ico WP-Post Ratings — Позволяет читателям оценивать ваши посты.
Нужно посмотреть как это выглядит и настраивается ли оформление.


В следующем выпуске — Ajax плагины для читателей блога.