Свобода слова вебмастерского http://dimox.name CSS-верстка, веб-мастеринг, интернет-технологии, манимейкинг Sun, 07 Mar 2010 10:20:48 +0000 http://wordpress.org/?v=2211 en http://creativecommons.org/licenses/by-nc-nd/2.0/Dimoxhttp://feedburner.google.com Универсальный jQuery-скрипт для блоков с вкладками (табами) http://dimox.name/universal-jquery-tabs-script/ http://dimox.name/universal-jquery-tabs-script/#comments Tue, 02 Mar 2010 07:33:36 +0000 Dimox http://dimox.name/universal-jquery-tabs-script/ Универсальный jQuery-скрипт для блоков с вкладками Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге.

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

Почему я называю свой новый скрипт для jQuery-вкладок универсальным:

  • он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов, как это было сделано в старом варианте;
  • можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
  • содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,4 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок, как это было в старом варианте, при этом размер нового варианта скрипта не больше размера скрипта для одного блока с вкладками из старого варианта.

Что ж, хватит сухих слов, переходим к сути.

Код jQuery-крипта для переключаемых блоков с вкладками

Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами <head> и </head>):

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Я предпочитаю “брать” его с Гугла, поскольку, во-первых, велика вероятность, что у посетителя, который зайдет на сайт, jQuery уже закэширован в браузере (значит страница загрузится быстрее), во вторых, скорость серверов Гугла стабильна и быстра.

Вот такой у меня получился, на мой взгляд, миниатюрный и красивенький скрипт:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function($) {
$(function() {

  $('ul.tabs').each(function() {
    $(this).find('li').each(function(i) {
      $(this).click(function(){
        $(this).addClass('current').siblings().removeClass('current');
        var p = $(this).parents('div.section');
        p.find('div.box').hide();
        p.find('div.box:eq('+i+')').fadeIn(150);
      });
    });
  });

})
})(jQuery)

Для тех, кто еще не знает, как подключать этот скрипт - создать файл с расширением .js, вставить в него код скрипта и подключить по аналогии c jQuery (см. выше), естественно, заменив ссылку на адрес скрипта.

В этом скрипте, кстати, еще реализован эффект плавного появления переключаемых блоков.

HTML-код, который нужно использовать для скрипта

1
2
3
4
5
6
7
8
9
10
11
12
<div class="section">
  <ul class="tabs">
    <li class="current">1-я вкладка</li>
    <li>2-я вкладка</li>
  </ul>
  <div class="box visible">
    Содержимое первого блока
  </div>
  <div class="box">
    Содержимое второго блока
  </div>
</div><!-- .section -->

Обратите внимание, что структура HTML-кода строго привязана к скрипту, поэтому, если вы пожелаете изменить названия используемых классов, не забывайте их поменять и в скрипте.

Обязательные CSS-стили для вышеуказанного HTML-кода

1
2
3
4
5
6
.box {
  display: none; /* по умолчанию прячем все блоки */
}
.box.visible {
  display: block; /* по умолчанию показываем нужный блок */
}

Если, например, необходимо, чтобы по умолчанию отображался второй блок, тогда нужно переместить класс .visible во второй блок div.box, а также переместить класс .current во второй элемент в списке вкладок.

Примеры

  • Живой пример jQuery-вкладок вы можете наблюдать прямо на этом блоге в сайдбаре.
  • Отдельный пример, который можно скачать ниже. На этот раз представляю 2 варианта: с горизонтальными и с вертикальными вкладками.

Скачать

Универсальный jQuery-скрипт для блоков с вкладками

Загрузок: 105 | Размер: 4 Кб

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

P.S. Мне в твиттере как-то сказали, что я “изобретаю колесо”, что такой скрипт уже есть в jQuery UI. Ну и пусть, пусть я “изобрел колесо”, главное, что я получаю большое удовольствие от данного процесса и одновременно повышаю свой опыт в jQuery. Разве это плохо? =)

Обновление от 07.03.10

Спасибо пользователю Keleran, который в комментариях подсказал еще более сокращенный вариант скрипта (обратите внимание, что для него нужно использовать jQuery не ниже версии 1.4.2):

1
2
3
4
5
6
7
8
9
10
(function($) {
$(function() {

  $('ul.tabs').delegate('li:not(.current)', 'click', function() {
    $(this).addClass('current').siblings().removeClass('current')
      .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
  })

})
})(jQuery)

© Dimox, Свобода слова вебмастерского, 2010. | Универсальный jQuery-скрипт для блоков с вкладками (табами)

]]> http://dimox.name/universal-jquery-tabs-script/feed/ “Хлебные крошки” для 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 = '&raquo;'; //разделить между ссылками
  $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-менеджер
(быстрая перекачка файлов с одного хоста на другой)

Загрузок: 366 | Размер: 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/