Свобода слова вебмастерского http://dimox.name CSS-верстка, веб-мастеринг, интернет-технологии, манимейкинг Fri, 05 Feb 2010 07:56:52 +0000 http://wordpress.org/?v=8478 en http://creativecommons.org/licenses/by-nc-nd/2.0/Dimoxhttp://feedburner.google.com “Хлебные крошки” для WordPress без использования плагина http://dimox.name/wordpress-breadcrumbs-without-a-plugin/ http://dimox.name/wordpress-breadcrumbs-without-a-plugin/#comments Wed, 03 Feb 2010 13:16:16 +0000 Dimox http://dimox.name/wordpress-breadcrumbs-without-a-plugin/ “Хлебные крошки” - это важный элемент навигации веб-сайта, который повышает его юзабилити. Особенно это касается сайтов со сложной структурой. Я, к сожалению (а, может, и не к сожалению), не использую их на большинстве своих сайтов, возможно, потому, что у них слишком простая структура (для такого сайта, как этот, они, вроде бы, и не нужны).

Когда я решаю какую-либо задачу на WordPress-сайте, то всегда стараюсь обходится без плагинов, где это бывает возможно. Зачастую одна и та же задача может быть решена с меньшим количеством кода и бывает менее ресурсоемкой по сравнению с применением плагинов (кстати, пользуясь случаем, рекомендую еще один мой блог - WPhacks.name, на котором я публикую различные PHP-хаки для WordPress).

В Интернете я находил разные варианты реализации “хлебных крошек” без использования плагинов, но ни один из них меня не устроил, поскольку все они не показывали полную цепочку ссылок. Поэтому я создал свою функцию “хлебных крошек” для WordPress. И в данном посте хочу поделиться этой функцией с вами.

Особенности функции

  • Отображается полная цепочка ссылок до текущей страницы. Например, если текущая страница находится в рубрике второго уровня, то цепочка будет выглядеть следующим образом:

    Главная » Рубрика » Подрубрика » Название статьи

    Во всех решениях, которые я встречал (за исключением плагинов), такая цепочка выглядела вот так:

    Главная » Подрубрика » Название статьи

    Т.е. одно звено потеряно.

    Аналогично у меня выглядят и “крошки” для страниц. К примеру, для страницы 3-го уровня вложенности цепочка будет такой:

    Главная » Страница 1-го уровня » Страница 2-го уровня » Страница 3-го уровня

  • “Хлебные крошки” выводятся для следующих типов страниц WordPress-сайта:

    • постраничная навигация с главной страницы (вида site.ru/page/2/);
    • архив рубрики;
    • архив тега;
    • архив за день;
    • архив за месяц;
    • архив за год;
    • архив автора;
    • страница;
    • пост;
    • результаты поиска;
    • страница с ошибкой 404.
  • Добавляется порядковый номер страницы, если это 2-я или больше страница архивов.
  • Можно задать любой символ разделителя между ссылками.
  • Можно задать текст для ссылка “Главная”.
  • Используется отдельный CSS-класс для текущей позиции.

Функция “Хлебные крошки” для WordPress

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
function dimox_breadcrumbs() {

  $delimiter = '»'; //разделить между ссылками
  $name = 'Главная'; //текст ссылка "Главная"
  $currentBefore = '<span class="current">';
  $currentAfter = '</span>';

  if ( !is_home() || !is_front_page() || is_paged() ) {

    echo '<div id="crumbs">';

    global $post;
    $home = get_bloginfo('url');
    echo '<a href="' . $home . '">' . $name . '</a> ' . $delimiter . ' ';

    if ( is_category() ) {
      global $wp_query;
      $cat_obj = $wp_query->get_queried_object();
      $thisCat = $cat_obj->term_id;
      $thisCat = get_category($thisCat);
      $parentCat = get_category($thisCat->parent);
      if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
      echo $currentBefore . 'Archive by category &#39;';
      single_cat_title();
      echo '&#39;' . $currentAfter;

    } elseif ( is_day() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
      echo $currentBefore . get_the_time('d') . $currentAfter;

    } elseif ( is_month() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo $currentBefore . get_the_time('F') . $currentAfter;

    } elseif ( is_year() ) {
      echo $currentBefore . get_the_time('Y') . $currentAfter;

    } elseif ( is_single() ) {
      $cat = get_the_category(); $cat = $cat[0];
      echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
      echo $currentBefore;
      the_title();
      echo $currentAfter;

    } elseif ( is_page() && !$post->post_parent ) {
      echo $currentBefore;
      the_title();
      echo $currentAfter;

    } elseif ( is_page() && $post->post_parent ) {
      $parent_id  = $post->post_parent;
      $breadcrumbs = array();
      while ($parent_id) {
        $page = get_page($parent_id);
        $breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
        $parent_id  = $page->post_parent;
      }
      $breadcrumbs = array_reverse($breadcrumbs);
      foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
      echo $currentBefore;
      the_title();
      echo $currentAfter;

    } elseif ( is_search() ) {
      echo $currentBefore . 'Search results for &#39;' . get_search_query() . '&#39;' . $currentAfter;

    } elseif ( is_tag() ) {
      echo $currentBefore . 'Posts tagged &#39;';
      single_tag_title();
      echo '&#39;' . $currentAfter;

    } elseif ( is_author() ) {
      global $author;
      $userdata = get_userdata($author);
      echo $currentBefore . 'Articles posted by ' . $userdata->display_name . $currentAfter;

    } elseif ( is_404() ) {
      echo $currentBefore . 'Error 404' . $currentAfter;
    }

    if ( get_query_var('paged') ) {
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
      echo __('Page') . ' ' . get_query_var('paged');
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
    }

    echo '</div>';

  }
}

Функцию необходимо поместить в файл functions.php вашей WordPress-темы. После этого в то место шаблона, где хотите выводить “хлебные крошки”, добавьте следующий код:

1
<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?>

Единственное, что теперь останется сделать - оформить их с помощью CSS. Для этого к блоку “хлебных крошек” предусмотрен идентификатор #crumbs, а для текущей “крошки” класс .current.

P.S. Функция работает на WordPress, начиная с версии 2.5 и выше.

P.P.S. Если вы публикуете посты сразу в несколько рубрик, то в цепочке будут отображаться все эти рубрики через запятую. Я посты публикую всегда только в одну рубрику, поэтому не пытался сделать так, чтобы отображалась только одна из рубрик.

© Dimox, Свобода слова вебмастерского, 2010. | “Хлебные крошки” для WordPress без использования плагина

]]> http://dimox.name/wordpress-breadcrumbs-without-a-plugin/feed/ PHP mxGet - быстрый перенос файлов с одного хостинга на другой http://dimox.name/php-mxget-online-download-manager/ http://dimox.name/php-mxget-online-download-manager/#comments Fri, 15 Jan 2010 11:12:55 +0000 Dimox http://dimox.name/?p=973 Поскольку за последние несколько лет я постоянно “прыгаю” от одного хостинг-провайдера к другому, то имел и имею дело с такими панелями управления хостингом, как cPanel и ISPmanager. Если в ISPmanager есть все, что мне нужно (это просто обалденная панелька), то в cPanel есть один заметный минус - отсутствует функция загрузки файлов с другого сайта.

И что же делать, если нужно с какого-то другого сайта закачать на фтп файл размером мегабайт так под 100? Скачать этот файл к себе на комп, а потом загрузить его на фтп сайта?

Но в этом случае я вижу несколько возможных минусов: интернет-трафик (да, у многих сейчас безлимитка, но у кого-то ее нет, да и размер файла может быть гораздо больше 100 мегабайт), время потраченное на загрузку файла к себе и затем на закачку на сайт (при этом исходящая скорость Интернета может быть значительно ниже входящей и на upload может уйти уйма времени).

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

В этом поможет замечательная веб-утилита PHP mxGet. Она очень проста и удобна в использовании.

Принцип действия PHP mxGet заключается в следующем:

  1. загружаем утилиту в отдельную папку на своем сайте (рекомендую поставить на папку права 777, т.к. утилита создает свой файл) и открываем ее в браузере;

  2. указываем ссылку к файлу;

    PHP mxGet

  3. указываем в настройках локальную папку, в которую хотим сохранить файл;

    PHP mxGet

  4. нажимаем “Скачать”;

  5. всего немного времени, и… вуаля… нужный файл лежит на фтп вашего хостинга.

    PHP mxGet

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

Скачать PHP mxGet

PHP mxGet v.0.35 - онлайновый download-менеджер
(быстрая перекачка файлов с одного хоста на другой)

Загрузок: 258 | Размер: 23 Кб

Несмотря на то, что утилита PHP mxGet была создана в 2005 году и с тех пор не обновлялась, она и по сей день не потеряла своей актуальности.

© Dimox, Свобода слова вебмастерского, 2010. | PHP mxGet - быстрый перенос файлов с одного хостинга на другой

]]> http://dimox.name/php-mxget-online-download-manager/feed/ PHP-функция для WordPress “Ответ на комментарий %username%” http://dimox.name/wordpress-php-function-replied-to-username-comment/ http://dimox.name/wordpress-php-function-replied-to-username-comment/#comments Thu, 24 Dec 2009 13:05:42 +0000 Dimox http://dimox.name/?p=970 PHP-функция для WordPress 'Ответ на комментарий %username%' Я придумал и реализовал очередную полезную фигнюшку для WordPress ツ

Суть

Мне очень давно не хватало в WordPress нижеследующих двух простых и, вроде бы, банальных вещей, которые разработчики движка почему-то не додумаются сделать по умолчанию.

Обе функции касаются письма, которое получает администратор сайта после того, как на блоге был добавлен новый комментарий.

Вот о чем я говорю:

  1. Если на блоге активирована опция “древовидные комментарии”, было бы очень здорово в письме видеть текст о том, кому был оставлен комментарий: мне, как админу, или же кому-то из комментирующих посетителей. По тексту можно будет сразу понять, не заходя в блог, требует этот комментарий моего ответа или нет.
  2. Так же было бы здорово, если в том же самом письме будет присутствовать пряма ссылка на добавленный комментарий. Опять же это может быть в первую очередь полезно при древовидных комментах. Такая ссылка позволит не искать нужный коммент (ведь он может быть и не в конце списка комментов), а сразу же перейти к нему.

Практика использования этих двух “добавочек” на данном блоге показала, что это весьма полезные штуки. Я уже привык к ним, и в других моих блогах таких функций мне теперь не хватает.

Код PHP-функции

Реализация обоих вещей оказалась довольно простой (эту функцию необходимо запихнуть в файл functions.php вашей темы, если файла нет, то создать его, не забыв добавить <?php и ?> соответственно в начале и в конце файла):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function repliedToComment($text, $comment_id) {
  $comment = get_comment($comment_id);
  $parent_id = $comment->comment_parent;
  $parentComment = get_comment($parent_id);
  if ($parent_id > 0) {
    if ($parentComment->user_id == 1) {
      $text .= "\r\nЭто ответ на мой комментарий.";
    } else {
      $text .= "\r\nВ ответ на комментарий пользователя: " . $parentComment->comment_author;
    }
  }
  $approved = '';
  if ($comment->comment_approved != 1) $approved = ' (необходимо одобрить)';
  $text .= "\r\nОтветить" . $approved . ": " . get_comment_link($comment->comment_ID) . "\r\n";
  return $text;
}
add_filter('comment_notification_text', 'repliedToComment', 10, 2);
add_filter('comment_moderation_text', 'repliedToComment', 10, 2);

Пожалуй, единственное, на что стоит обратить внимание в этом коде, строка:

1
if ($parentComment->user_id == 1) {

где цифра 1 - это идентификатор пользователя. Думаю, в большинстве случаев он будет таким же.

Как выглядит результат

Соответствующий текст добавляется к конце письма, и выглядит это примерно следующим образом (кликабельно):

PHP-функция для WordPress 'Ответ на комментарий %username%'

Если это ответ на коммент кого-то из посетителей, то видим текст “В ответ на комментарий пользователя: %username%“. Если же это ответ на коммент админа, то текст будет таким: “Это ответ на мой комментарий.” Текст, естественно, можно заменить на какой-то другой.

Плюсом я еще перед прямой ссылкой на комментарий добавил напоминалочку “необходимо одобрить“, если комментарий ожидает модерации.

Что дальше?

  1. Есть мысль сделать из этого мой очередной плагин.
  2. Среди пользователей WordPress очень популярен плагин “Subscribe To Comments” (функционал которого, я считаю, уже давно должен быть частью движка), который отправляет письма посетителям сайта, если был оставлен новый коммент. Так вот, если реализовать 2 вышеописанные вещи и для этого плагина, тогда было бы вообще супер - полезность функции существенно бы возросла. Думаю, что это вполне реально сделать.

© Dimox, Свобода слова вебмастерского, 2009. | PHP-функция для WordPress “Ответ на комментарий %username%”

]]> http://dimox.name/wordpress-php-function-replied-to-username-comment/feed/ CSS-трюк: IE, таблица и “резиновые” изображения http://dimox.name/ie-table-and-liquid-images/ http://dimox.name/ie-table-and-liquid-images/#comments Wed, 16 Dec 2009 13:00:49 +0000 Dimox http://dimox.name/?p=969 Антон Молодой подкинул мне идею для этого поста. Он столкнулся с проблемой, с которой с моей косвенной помощью сам же и справился.

Я с этим багом (да, речь пойдет об очередном баге IE) никогда не сталкивался, поэтому решил написать об этом пост, во-первых, как шпаргалку для себя на будущее, во-вторых, вдруг кто-то из читателей и посетителей блога однажды столкнется с такой же проблемой.

Рассмотрим пример. Суть заключается в следующем:

  • У нас имеется “резиновая” страница, которая растягивается на всю ширину окна браузера.
  • Имеем таблицу с шириной 100%.
  • В таблице имеем ряд из 5-ти изображений (в нашем примере их реальная ширина - 250 пикселей), и необходимо, чтобы при изменении ширины окна браузера эти изображения растягивались или сужались пропорционально, заполняя всю ширину таблицы. Реализуется это следующим простым способом:

    HTML:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <table>
      <tr>
        <td><img src="1.jpg" alt="" /></td>
        <td><img src="2.jpg" alt="" /></td>
        <td><img src="3.jpg" alt="" /></td>
        <td><img src="4.jpg" alt="" /></td>
        <td><img src="5.jpg" alt="" /></td>
      </tr>
    </table>

    CSS:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    table {
      width: 100%; /* растягиваем таблицу на всю ширину контента */
      border-collapse: collapse; /* схлопываем границы ячеек */
    }
    table td {
      padding: 0 10px; /* для красоты добавляем отступы в ячейках */
    }
    table img {
      width: 100%; /* растягиваем изображение на всю ширину ячейки */
    }

Посмотрите на живой пример вышеописанного.

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

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

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

1
2
3
4
5
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* вот оно, лекарство от недуга IE6 и IE7 */
}

Теперь посмотрите на тот же самый пример, но с использованием этого CSS-трюка.

© Dimox, Свобода слова вебмастерского, 2009. | CSS-трюк: IE, таблица и “резиновые” изображения

]]> http://dimox.name/ie-table-and-liquid-images/feed/ jQuery-скрипт для куков при использовании кэша MaxCache на WordPress http://dimox.name/jquery-script-cookies-wordpress-maxcache/ http://dimox.name/jquery-script-cookies-wordpress-maxcache/#comments Mon, 07 Dec 2009 06:13:19 +0000 Dimox http://dimox.name/?p=968 Этот пост адресован пользователям WordPress, у которых стоит кэширование с помощь MaxCache.

WordPress имеет в своем функционале две очень хорошие особенности, которые повышают юзабилити сайта для посетителей, оставляющих комментарии:

  1. Однажды оставив одобренный администратором сайта комментарий, посетитель избавляется от необходимости при каждом следующем комментарии вновь вводить свои данные, такие, как имя, e-mail, и адрес сайта.
  2. Если добавляемый комментарий уходит на модерацию, то комментирующий все равно видит его на сайте, обычно с пометкой “коммент ожидает модерации”. Это дает посетителю понять, что комментарий успешно добавлен и не попал в спам-фильтр.

Проблема

Не так давно известный программист Максим создал очень полезный и нужный скрипт - кэш для WordPress (MaxCache), который существенно снижает нагрузку на сервер хостинга. Для моего тормознутого хостинга, на котором в данный момент мой блог dimox.name вынужден, так сказать, волочить свое существование, этот скрипт оказался спасением.

Но речь сейчас не о хостинге и не о скрипте MaxCache. Суть поста заключается в нижеследующем.

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

После установки кэша я неоднократно видел комментарии, в которых мои постоянные читатели с сожалением сообщали о необходимости каждый раз снова вводить свои данные.

Я всегда стараюсь идти на встречу посетителям своих сайтов, поэтому я нашел выход из данной ситуации - написал на jQuery скрипт, который выполняет 2 утерянные после установки кэша функции.

Далее я подробненько опишу код скрипта. Если у вас нет желания все это читать, то можете сразу “перескочить” на конечный код скрипта.

Функция №1 - “вспоминаем” комментирующего

Чтобы избежать возможных конфликтов jQuery с другими фреймворками, создадим вот такую переменную, которую в дальнейшем и будем использовать:

1
var $j = jQuery.noConflict();

Ну а все содержимое скрипта будем размещать вот в такую функцию, которая выполнит находящийся в ней код после загрузки веб-страницы:

1
$j(function() { ... })

Для того, чтобы “вспомнить” нашего посетителя, который уже оставлял комментарий, мы создадим куки, в которых запишем его имя, e-mail и адрес сайта. Работать мы будешь, соответственно, с формой комментирования WordPress. Ее HTML-код выглядит примерно следующим образом (показываю только теги, необходимы нам):

1
2
3
4
5
6
<form action="/wp-comments-post.php" method="post" id="commentform">
  <input type="text" name="author" />
  <input type="text" name="email" />
  <input type="text" name="url" />
  ...
</form>

Чтобы скрипт, который мы получим в результате, у вас работал, убедитесь, что в вашем шаблоне WordPress у тега form используется точно такой же идентификатор (id=”commentform”).

У каждого input-тега в этой форме есть неизменный параметр name=”", за которые мы и будем цепляться при написании скрипта.

Куки мы будет создавать в тот момент, когда комментирующий нажимает кнопку “Добавить комментарий”, для этого воспользуемся вот такой функцией:

1
$j('#commentform').submit(function() { ... });

В ней мы считаем значения полей input[name=”author”], input[name=”email”], input[name=”url”] и с помощью функции createCookie() (ее код я приведу в конце, дабы не раздувать размер статьи) поместим их в куки браузера:

1
2
3
4
5
6
7
$j('#commentform').submit(function() {

  createCookie('wp_commenter_author', $j('input[name="author"]').val(), 365);
  createCookie('wp_commenter_email', $j('input[name="email"]').val(), 365);
  createCookie('wp_commenter_url', $j('input[name="url"]').val(), 365);

});

В результате в браузере пользователя появляются куки со следующими названиями: wp_commenter_author, wp_commenter_email и wp_commenter_url. Цифра 365 указывает на количество дней хранения этих куков.

Можно было так и оставить вышеуказанный код создания куков, но в ходе тестирования обнаружился следующий момент. Как вы знаете, если вы залогинены на своем блоге, то при добавлении комментария поля имя/е-mail/сайт за ненадобностью не отображаются. Поэтому, поскольку этих полей нет, то в 3-х создаваемых куках записывается значение “undifined” (т.е. значение не определено). А, поскольку, далее мы будем эти куки считывать, то нам таких неопределенностей необходимо избежать. Поэтому мы делаем это следующим образом:

1
2
3
4
5
6
7
$j('#commentform').submit(function() {

  if ($j('input[name="author"]').length) createCookie('wp_commenter_author', $j('input[name="author"]').val(), 365);
  if ($j('input[name="email"]').length) createCookie('wp_commenter_email', $j('input[name="email"]').val(), 365);
  if ($j('input[name="url"]').length) createCookie('wp_commenter_url', $j('input[name="url"]').val(), 365);

});

Т.е. условием вида if ($j(’input[name=”author”]’).length) мы проверяем существования 3-х полей, и, если они есть на странице (т.е. это не залогиненный пользователь), то создаем куки со значениями данных полей.

Хорошо, куки создали. Теперь нужно их считать для последующий подстановки в эти поля. Создадим переменные, в которые сразу же заносим значения наших кук (код функции readCookie() будет приведен также в конце):

1
2
3
var author = readCookie('wp_commenter_author');
var email = readCookie('wp_commenter_email');
var url = readCookie('wp_commenter_url');

Куки прочитали, теперь нужно заполнить ими 3 наших поля (имя/е-mail/сайт):

1
2
3
if (author) $j('input[name="author"]').val(author);
if (email) $j('input[name="email"]').val(email);
if (url) $j('input[name="url"]').val(url);

Условие вида if (author) говорит нам, что, если кука существует в браузере пользователя, то мы вставляем ее значение в соответствующее поле. Эта проверка необходима, чтобы избежать ошибки, если кук нет.

В результате мы получаем вот такой конечный скрипт, который реализует 1-ю функцию - запоминает данные, введенные комментирующим, и в последствии автоматически подставляет их в поля.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var $j = jQuery.noConflict();

$j(function() {

  var author = readCookie('wp_commenter_author');
  var email = readCookie('wp_commenter_email');
  var url = readCookie('wp_commenter_url');

  if (author) $j('input[name="author"]').val(author);
  if (email) $j('input[name="email"]').val(email);
  if (url) $j('input[name="url"]').val(url);

  $j('#commentform').submit(function() {
    if ($j('input[name="author"]').length) createCookie('wp_commenter_author', $j('input[name="author"]').val(), 365);
    if ($j('input[name="email"]').length) createCookie('wp_commenter_email', $j('input[name="email"]').val(), 365);
    if ($j('input[name="url"]').length) createCookie('wp_commenter_url', $j('input[name="url"]').val(), 365);
  });

})

Можно было бы и остановится на таком скрипте. Но, ведь у нас еще есть и вторая задача. Дело в том, что при использовании MaxCache, если комментарий уходит на модерацию, то комментирующий не видит своего комментария на странице, (как это бывает, если кэш не используется). В результате некоторые товарищи думают, что комментарий ушел в спам (или просто что-то пошло не так) и отправляют комментарий заново по нескольку раз.

Чтобы подобного избежать, мы доработаем наш скрипт.

Функция №2 - даем знать, что комментарий добавлен

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

1
<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a>

А если смотреть исходный HTML-код страницы WordPress-сайта, то должен быть примерно такой код:

1
<a href="адрес_страницы/#comment-123" title="02 февраля, 2008 в 10:06 пп">текст ссылки</a>

Сначала мы добавим новую куку, которая будет создаваться также при нажатии на кнопку “Добавить комментарий” и создадим переменную, в которую ее будем считывать:

1
2
3
4
5
6
var submitCheck = readCookie('wp_submit_check');

$j('#commentform').submit(function() {
  ...
  createCookie('wp_submit_check', '1', 1);
});

Ее значение ставим равным “1″ и срок ее хранения - 1 день.

Все, что мы будем делать дальше, будет работать только при условии, что значение куки “wp_submit_check” равно “1″.

1
if (submitCheck == '1') { ... }

А кука эта когда у нас появляется? Правильно - при отправке формы. Т.е. все манипуляции с кукой wp_submit_check сделаны для того, чтобы выполнять нижеследующие действия только тогда, когда отправлен комментарий, и посетителю нужно об этом сообщить.

Если кратко на словах, то мы будем делать следующее - после добавления комментария посетитель перенаправляется на страницу с адресом вида http://site.ru/postname/#comment-123, где цифра - это идентификатор добавленного комментария. Далее проверяем, есть ли уже на странице ссылка с точно таким же якорем (#comment-123), если нет, то показываем посетителю сообщение о том, что его комментарий добавлен.

Дальнейшие комментарии напишу в самом скрипте:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
if (submitCheck == '1') {

  // считываем URL из адресной строки браузера и заносим в переменную
  var href = window.location.href;

  // проверяем, находимся ли мы на странице вида http://site.ru/postname/#comment-123
  // (страница с таким адресом открывается всегда при добавлении комментария в WordPress)
  if (/.+#comment-(\d+)/ig.test(href)) {

    // получаем цифру из URL в адресной строке,
    // которая стоит после "#comment-",
    // и помещаем ее в переменную
    var cid = href.replace(/.+#comment-(\d+)/ig, '$1');

    // создаем регулярное выражение, которое будем использовать дальше,
    // и заносим его в переменную reg
    var reg = new RegExp('#comment-' + cid,'ig');

    // переменная, значение которой будем менять,
    // если ссылка с якорем найдется
    var commentIdFind = 0;

    // пробегаемся по каждой ссылке в комментариях
    $j('#commentlist a').each(function() {

      // тестируем URL ссылки (атрибут href) с помощью
      // регулярного выражения reg (см. выше)
      if (reg.test($j(this).attr('href'))) {

        // если нашли такую ссылку с якорем из адресной строки
        // (а это значит, что коммент выведен на страницу и ничего
        // дополнительно показывать посетителю не нужно),
        // то переменной commentIdFind ставим значение = 1
        // и удаляем куку wp_submit_check
        commentIdFind = 1;
        eraseCookie('wp_submit_check');
      }

    })

    // если commentIdFind = 0, получается, что ссылка не была найдена,
    // значит комментарий не выведен на страницу, и нужно показать сообщение
    if (commentIdFind == 0) {

      // выводим сообщение путем добавления тега <li></li> в конец списка с комментариями
      // и назначаем ему идентификатор вида comment-123,
      // где вместо цифры подставляется ID добавленного комментария,
      // для того, чтобы проскроллить страницу к этому сообщению
      // HTML-код сообщения измените под себя
      $j('#commentlist').append('<li id="comment-' + cid + '"><em><strong>' + author + '</strong>, спасибо за Ваш комментарий! Он будет опубликован, как только его проверит администратор сайта.</em></li>');

      // считываем юзер-агента для определения браузера Opera,
      // чтобы применить к нему особые стили
      var userAgent = navigator.userAgent.toLowerCase();
      if (/opera/.test(userAgent)) { var top = 'html'; } else { var top = 'html, body'; }

      // определяем расстояние от верхнего края браузера
      // до элемента с нашим сообщением, заносим в переменную
      var offset = $j('#comment-' + cid).offset().top;

      // плавно прокручиваем окно браузера до сообщения,
      // которое показываем посетителю
      $j(top).animate({scrollTop: offset}, 500);
    }

  // если мы ушли со странице вида http://site.ru/postname/#comment-123,
  // то удаляем куку wp_submit_check
  } else {
    eraseCookie('wp_submit_check');
  }

}

В результате выполнения этой части кода комментатор увидит вот такое сообщение (естественно, если выполнены все вышеописанные условия):

%username%, спасибо за Ваш комментарий! Он будет опубликован, как только его проверит администратор сайта.

Конечный код jQuery-скрипта

В итоге у нас получился вот такой скрипт (для тех, кто не читал мои подробности по коду - обратите внимание на условия работы скрипта: условие раз, условие два):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
function eraseCookie(name) {
  createCookie(name,"",-1);
}

var $j = jQuery.noConflict();

$j(function() {

  var author = readCookie('wp_commenter_author');
  var email = readCookie('wp_commenter_email');
  var url = readCookie('wp_commenter_url');
  var submitCheck = readCookie('wp_submit_check');

  if (author) $j('input[name="author"]').val(author);
  if (email) $j('input[name="email"]').val(email);
  if (url) $j('input[name="url"]').val(url);

  $j('#commentform').submit(function() {
    if ($j('input[name="author"]').length) createCookie('wp_commenter_author', $j('input[name="author"]').val(), 365);
    if ($j('input[name="email"]').length) createCookie('wp_commenter_email', $j('input[name="email"]').val(), 365);
    if ($j('input[name="url"]').length) createCookie('wp_commenter_url', $j('input[name="url"]').val(), 365);
    createCookie('wp_submit_check', '1', 1);
  });

  if (submitCheck == '1') {

    var href = window.location.href;

    if (/.+#comment-(\d+)/ig.test(href)) {

      var cid = href.replace(/.+#comment-(\d+)/ig, '$1');
      var reg = new RegExp('#comment-' + cid,'ig');
      var commentIdFind = 0;

      $j('#commentlist a').each(function() {
        if (reg.test($j(this).attr('href'))) {
          commentIdFind = 1;
          eraseCookie('wp_submit_check');
        }
      })
      if (commentIdFind == 0) {
        $j('#commentlist').append('<li id="comment-' + cid + '"><em><strong>' + author + '</strong>, спасибо за Ваш комментарий! Он будет опубликован, как только его проверит администратор сайта.</em></li>');
        var userAgent = navigator.userAgent.toLowerCase();
        if (/opera/.test(userAgent)) { var top = 'html'; } else { var top = 'html, body'; }
        var offset = $j('#comment-' + cid).offset().top;
        $j(top).animate({scrollTop: offset}, 500);
      }
    } else {
      eraseCookie('wp_submit_check');
    }

  }

})

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

© Dimox, Свобода слова вебмастерского, 2009. | jQuery-скрипт для куков при использовании кэша MaxCache на WordPress

]]> http://dimox.name/jquery-script-cookies-wordpress-maxcache/feed/