Стена тегов
Облако тегов, в привычном своем виде, уже мозолит глаза. Хочу поделится с Вами отличным дизайнерским ходом для отображения тегов в виде кирпичиков, которые меняют цвет в зависимости от своей плотности.
Выглядит просто великолепно. Так как 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, собираемое динамически!
Wonderful goods from you, man. Стена тегов | Чернев.ру I have understand your stuff previous to and you are just extremely wonderful. I actually like what you’ve acquired here, really like what you are saying and the way in which you say it. You make it enjoyable and you still care for to keep it sensible. I can not wait to read far more from you. This is really a great Стена тегов | Чернев.ру informations.
I’d have to test with you here. Which is not something I usually do! I get pleasure from reading a put up that can make people think. Also, thanks for allowing me to comment!
Thank you for sharing superb informations. Your web site is very cool. I’m impressed by the details that you have on this blog. It reveals how nicely you perceive this subject. Bookmarked this website page, will come back for more articles. You, my friend, ROCK! I found simply the information I already searched all over the place and just could not come across. What an ideal web-site.
I was looking through some of your content on this site and I believe this web site is very informative! Continue putting up.
Useful information. Lucky me I discovered your web site unintentionally, and I am surprised why this accident did not happened earlier! I bookmarked it.
I definitely wanted to jot down a quick message to express gratitude to you for all the awesome strategies you are sharing on this website. My time consuming internet search has at the end of the day been honored with high-quality suggestions to share with my classmates and friends. I ‘d admit that many of us visitors actually are rather blessed to exist in a very good network with many wonderful people with interesting techniques. I feel really fortunate to have encountered your entire web site and look forward to so many more entertaining minutes reading here. Thank you again for everything.
you’ve gotten an important blog here! would you like to make some invite posts on my weblog?
Wow! This can be one particular of the most beneficial blogs We have ever arrive across on this subject. Actually Great. I’m also a specialist in this topic so I can understand your effort.
It’s really a cool and helpful piece of information. I’m glad that you just shared this helpful info with us. Please keep us informed like this. Thank you for sharing.
Thanks for sharing excellent informations. Your web site is very cool. I’m impressed by the details that you’ve on this web site. It reveals how nicely you understand this subject. Bookmarked this website page, will come back for extra articles. You, my friend, ROCK! I found just the info I already searched everywhere and just could not come across. What a great website.
Thank you a lot for sharing this with all people you actually understand what you are talking approximately! Bookmarked. Kindly additionally seek advice from my web site =). We could have a link change contract between us!
This really answered my problem, thank you!
Nice post. I learn something more challenging on completely different blogs everyday. It will always be stimulating to read content from different writers and practice a little bit something from their store. I’d prefer to use some with the content material on my blog whether you don’t mind. Natually I’ll provide you with a hyperlink in your net blog. Thanks for sharing.
After examine a number of of the weblog posts in your website now, and I truly like your way of blogging. I bookmarked it to my bookmark website listing and shall be checking back soon. Pls check out my website as well and let me know what you think.
Hello there, just became alert to your blog through Google, and found that it is truly informative. I am going to watch out for brussels. I’ll appreciate if you continue this in future. A lot of people will be benefited from your writing. Cheers!
I used to be suggested this blog via my cousin. I am now not sure whether or not this publish is written by him as no one else recognise such precise about my problem. You are wonderful! Thanks!
This is the accurate Стена тегов | Чернев.ру blog for anyone who wants to seek out out some this substance. You note so much its almost debilitating to discourse with you (not that I really would want…HaHa). You definitely put a new whirl on a matter thats been typewritten around for eld. Squeamish matter, just eager!
This is the penalize Стена тегов | Чернев.ру journal for anyone who wants to act out out around this message. You request so such its nigh exhausting to converse with you (not that I real would want…HaHa). You definitely put a new aerobatics on a message thats been typed almost for geezerhood. Nice bunk, only large!
This is the right Стена тегов | Чернев.ру blog for anyone who wants to attempt out out some this substance. You attending so some its most wearing to reason with you (not that I truly would want…HaHa). You definitely put a new rotation on a message thats been printed some for age. Prissy force, but great!
This is very interesting, You’re a very skilled blogger. I have joined your rss feed and look forward to seeking more of your excellent post. Also, I have shared your website in my social networks!
Wonderful work! This is the type of information that should be shared around the internet. Disgrace on the search engines for no longer positioning this publish higher! Come on over and consult with my website . Thanks =)
Youre so cool! I dont suppose Ive learn something like this before. So good to seek out any person with some authentic thoughts on this subject. realy thanks for starting this up. this website is one thing that is wanted on the internet, someone with a bit of originality. useful job for bringing one thing new to the internet!
Thank you, I’ve recently been searching for information approximately this subject for a long time and yours is the greatest I’ve found out so far. But, what concerning the bottom line? Are you sure concerning the source?
Thanks a lot for giving everyone an extraordinarily superb opportunity to read articles and blog posts from this website. It really is so fantastic and as well , packed with a great time for me personally and my office friends to visit the blog nearly thrice weekly to read through the latest secrets you will have. And definitely, I’m so usually amazed concerning the beautiful tactics you serve. Certain 2 tips in this post are in reality the most impressive I have had.