Стена тегов
Облако тегов, в привычном своем виде, уже мозолит глаза. Хочу поделится с Вами отличным дизайнерским ходом для отображения тегов в виде кирпичиков, которые меняют цвет в зависимости от своей плотности.
Выглядит просто великолепно. Так как wordpress самая популярная платформа для блогов, то показывать мы будем именно на нем.
Живой пример
Реализация
Для реализации нашей нам понадобятся Jquery и дополнение к нему Thickbox. Все необходимые скрипты и таблицы стилей я нежно упаковал в один архив который можно будет скачать в конце этой заметки.
Для начала подключим необходимые нам таблицы стилей и скрипты. Скачиваем архив и распаковываем его в папку с вашей темой оформления, а после добавьте следующий код в шапку вашего блога между тегами <head></head>:
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/thickbox.js"></script>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/thickbox.css" type="text/css" media="screen,projection" />Теперь приступим к созданию самой стены тегов. Добавим следующий код, к примеру, в ваш сайдбар:
<!-- Hidden Tag Grid Array Code -->
<div id="tag_grid_container">
<div id="tag_grid_crop">
<ul id="tag_grid">
<?php
$tags = get_tags(array('orderby' => 'count', 'order' => 'DESC', 'number' => 25));
foreach ($tags as $tag) {
if ($tag->count < 5) {
echo('<li class="tagclass1">');
} else if ($tag->count < 8) {
echo('<li class="tagclass2">');
} else if ($tag->count < 12) {
echo('<li class="tagclass3">');
} else {
echo('<li class="tagclass4">');
}
echo('<a href="' . get_tag_link($tag->term_id) . '" rel="tag">' . $tag->name . "</a></li>\n");
}
?>
</ul>
<ul id="tag_key">
<li id="key">Плотность:</li>
<li id="key1">1 – 5</li>
<li id="key2">5 – 8</li>
<li id="key3">8 – 12</li>
<li id="key4">> 12</li>
</ul>
</div>
</div>
<!-- End Tag Grid Array Code --> Вы можете регулировать необходимое количество тегов для раскраски кирпичиков изменяя значения count < или даже добавлять еще цвета, с помощью добавления новых условий.
Теперь перейдем к оформлению наших тегов:
/* Styles for the Tag Grid */
#tag_grid_container {
display: none;
margin: 0;
}
#tag_grid_crop {
height: 395px;
overflow: hidden;
}
ul#tag_grid {
list-style-type: none;
width: 600px;
height: 320px;
overflow: hidden;
margin: 20px auto 0 auto;
padding: 0 0 0 8px;
line-height: 12px;
}
ul#tag_grid li {
width: 94px;
height: 41px;
padding: 7px 9px;
float: left;
margin: 0 8px 8px 0;
}
ul#tag_grid li a {
font-size: 11px;
}
ul#tag_grid li.tagclass1 {
border-bottom: 1px solid #cbc8bf;
background-color: #e7e4e2;
}
ul#tag_grid li.tagclass1 a {
text-decoration: none;
color: #c0bcb2;
}
ul#tag_grid li.tagclass1 a:hover {
text-decoration: underline;
color: #000;
}
ul#tag_grid li.tagclass2 {
border-bottom: 1px solid #b5b0a4;
background-color: #ddd9d6;
}
ul#tag_grid li.tagclass2 a {
text-decoration: none;
color: #5d584d;
}
ul#tag_grid li.tagclass2 a:hover {
text-decoration: underline;
color: #000;
}
ul#tag_grid li.tagclass3 {
border-bottom: 1px solid #807b71;
background-color: #cdc4bd;
}
ul#tag_grid li.tagclass3 a {
text-decoration: none;
color: #5b564d;
}
ul#tag_grid li.tagclass3 a:hover {
text-decoration: underline;
color: #000;
}
ul#tag_grid li.tagclass4 {
border-bottom: 1px solid #310000;
background-color: #8c0000;
}
ul#tag_grid li.tagclass4 a {
text-decoration: none;
color: #e7e4e2;
}
ul#tag_grid li.tagclass4 a:hover {
text-decoration: underline;
color: #FFF;
}
ul#tag_key {
list-style-type: none;
width: 600px;
overflow: hidden;
margin: 28px auto 0 auto;
padding: 0 0 0 8px;
line-height: 12px;
}
ul#tag_key li {
width: 94px;
padding: 7px 9px;
float: left;
margin: 0 8px 8px 0;
}
#key {
border-bottom: 1px solid #e7e4e2;
background-color: #f7f6f5;
color: #cbc8bf;
}
#key1 {
border-bottom: 1px solid #cbc8bf;
background-color: #e7e4e2;
color: #c0bcb2;
}
#key2 {
border-bottom: 1px solid #b5b0a4;
background-color: #ddd9d6;
color: #5d584d;
}
#key3 {
border-bottom: 1px solid #807b71;
background-color: #cdc4bd;
color: #5b564d;
}
#key4 {
border-bottom: 1px solid #310000;
background-color: #8c0000;
color: #e7e4e2;
}Для удобства я добавил этот код в архив(tags.css).
Теперь финальный штрих добавление ссылки при нажатии на которую будут отображается окно с тегами:
<a href="#TB_inline?height=405&width=606&inlineId=tag_grid_container" title="Стена тегов" class="thickbox">ЖМАК!</a>Вот и все. Всем спасибо! ~_~
Вот увидел новость на хабре и зашел в блог. Оказывается тут жизнь бурлит, а по rss не было обновлений уже месяца два и подозреваю, что проблема не у меня.
Увидел новость на хабре… зашел посмотреть. Уж извини, если облако тэгов интуитивно понятно-удобная штука… то это фигня. ничерта не понятно как работает, интуитивно вводит в шок и остолбенение.
п.с. это мой комментарий касательно готовой и представленной штуки (а не человека разработавшего или самой идеи)
а да и комментарий чтоб оставить – надо запариться)
Сделай сортировку по алфавиту и выглядеть стена будет интересней, чем сейчас.
Сейчас я вижу конфликт: стена отсортирована по убыванию, а легенда стены по возрастанию. Эти вектора создают визуальный конфликт.
При алфавитном выводе такого не будет, т.к. стена будет выглядеть естественно кирпичной, а легенда – естественно градиентной.
А зачем это надо? Любитель изобретать велосипед?
Спасибо поржал. Идея креативная но тупая. Нет применения.
Удобства тоже как и юзабилити. Облако на виду, а тут шариться надо да и возможности меньше. Тупость короче.
Идея не айс =(
P.S слово «Электропочта» это пиздец.
Наверное надо было получше идею оформить, прежде чем в массы запускать. Напильником допили, сделай концепцию интуитивно понятной – отзывы будут прямо противоположными.
2 Юрий
Если слово «электропочта вас как-то смущает – вот это пиздец. (типа – сам дурак)
Спасибо большое!!! Помучался на своём блоге и всё вышло….просто суппер!!! Раньше пользовался стандартным облаком тегов вордпресса….а щяс прям аж в душе похорошело как красиво
Достаточно оригинальное решение. Но не думаю, что оно станет таким же популярным как облако.
Спасибо.
Самое оригинальное облако тегов которое я видел – на Автокадабре.
Это решение мне не интуитивно. Прежде чем я нажал на кнопку я представлял большее. (кирпичики раскиданы в разброс, разные размеры, разный цвет)
Можешь подсказать, как сделать такое же оформление кода в записи? bbcode
у меня не работает . Нужен какой-то отдельный плагин?
дайте кто-нить скрипт обычного облака на пхп для блога (любого)
Хочу быть в топе Яндекса или Гугла, сейчас же.. Пусть не говорят, что это сложно, главное иметь brain.dll
Как на мой взгляд, то идея достаточна инетресна. Впервые её встретил на и сначала слегка втупил… но не более чем секунд на 10… приемущество, на мой взглад в том, что иногда интерестная тема содержит мало материала и разглядеть её в стандартном облаке достаточно тяжело. В данной реализации все выделяется цветом плашек а не размером. Единственно, что алфавитное расположение элементов было бы более интерестным, так как не создало бы цветового градиента на стене, а сделала бы именно кирпичной.
Пойдет так стенка. =)
Классное предложение по поводу Тегов… Спасибо.. Попробую сейчас у себя на сайте…
а не легче просто замутить готовое?
просто я начинающий вебмастер и мне нужно готовое чтобы по ниму учится
А мне кажется жутко неудобное решение. На сайте места займет много, а толку мало. Все таки стандартное облако круче!
Попробую использовать представленное решение. Спасибо за подсказку!
Я облако тэгов от Cumlus юзаю по мне самое прикольное!
Совсем не удобная Чушь!!
Полностью согласен!
То ли дело облако тегов datacloud, собираемое динамически!