Стена тегов
Облако тегов, в привычном своем виде, уже мозолит глаза. Хочу поделится с Вами отличным дизайнерским ходом для отображения тегов в виде кирпичиков, которые меняют цвет в зависимости от своей плотности.
Выглядит просто великолепно. Так как 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>Вот и все. Всем спасибо! ~_~
Wow, marvelous weblog layout! How long have you been blogging for? you make blogging look easy. The total glance of your site is wonderful, as neatly as the content material!
It’s a shame you don’t have a donate button! I’d without a doubt donate to this excellent blog! I guess for now i’ll settle for book-marking and adding your RSS feed to my Google account. I look forward to brand new updates and will talk about this site with my Facebook group. Talk soon!
I like the valuable info you provide in your articles. I’ll bookmark your weblog and check again here frequently. I am quite certain I’ll learn plenty of new stuff right here! Good luck for the next!
Very interesting subject , appreciate it for putting up. «Wrinkles should merely indicate where smiles have been.» by Mark Twain.
hey there and thank you for your information – I’ve certainly picked up anything new from right here. I did however expertise a few technical issues using this web site, since I experienced to reload the website a lot of times previous to I could get it to load properly. I had been wondering if your web host is OK? Not that I am complaining, but sluggish loading instances times will very frequently affect your placement in google and could damage your high-quality score if ads and marketing with Adwords. Well I’m adding this RSS to my email and can look out for much more of your respective interesting content. Make sure you update this again soon..
Стена тегов | Чернев.ру I was recommended this blog by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my trouble. You’re incredible! Thanks! your article about Стена тегов | Чернев.руBest Regards Cindy
Стена тегов | Чернев.ру Pretty nice post. I just stumbled upon your weblog and wanted to say that I’ve truly enjoyed surfing around your blog posts. After all I’ll be subscribing to your rss feed and I hope you write again very soon!
Great post at Стена тегов | Чернев.ру. I was checking constantly this blog and I am impressed! Extremely helpful info specially the last part :) I care for such info much. I was looking for this particular info for a very long time. Thank you and best of luck.
If you wish to make sure you shield your skin within the greatest way that you could, you need to always apply sunscreen on a warm day. Even though this really is typical understanding, many people simply don’t do this.
Yet are you prepared to get benefits which generate a real cam corder higher than the remaining?The energy source to a pc is often one of the most underappreciated component of any pc and will nicely become an integral for you to improved, quicker as well as softer laptop or computer speeds of this laptop or computer.But the number of condominium units grew by over 4, 000 items.
Astrology can give you insight into one possible future, but you will find a lot of variables, such as the decisions you make for yourself, to forecast with any diploma of precision what will occur in the future. There are individuals who take astrology very seriously and people who will not even leave their homes if the stars and planets aren’t aligned favorably
Thanks, I’ve recently been looking for info about this subject for ages and yours is the best I’ve found so far.
I am so glad this internet thing works and your article really helped me. Might take you up on that home advice you
Heya i am for the first time here. I came across this board and I find It truly useful & it helped me out a lot. I hope to give something back and help others like you helped me.
I’m just writing to say that i think your website is really done well.
I¡¦ll immediately grab your rss feed as I can’t find your email subscription link or newsletter service. Do you have any? Kindly let me recognize in order that I may subscribe. Thanks.
Thought i would just write you to say that i think your website is really informative.
I just wanted to say that i think your blog is really done well.
izmir masöz , izmir masöz , izmir masozler
You have remarked very interesting details ! ps decent website .
I just wanted to say that i think your website is designed really nicely.
I just added this blog to my rss reader, excellent stuff. Can not get enough!
Hey there would you mind stating which blog platform you’re using? I’m looking to start my own blog soon but I’m having a hard time selecting between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design seems different then most blogs and I’m looking for something unique. P.S My apologies for getting off-topic but I had to ask!
Стена тегов | Чернев.ру I was suggested this blog by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my trouble. You’re incredible! Thanks! your article about Стена тегов | Чернев.руBest Regards Veronica
Стена тегов | Чернев.ру I was recommended this web site by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my trouble. You are incredible! Thanks! your article about Стена тегов | Чернев.руBest Regards Craig
Стена тегов | Чернев.ру I was recommended this blog by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty. You’re amazing! Thanks! your article about Стена тегов | Чернев.руBest Regards Justin
Nice post at Стена тегов | Чернев.ру. I was checking continuously this blog and I’m impressed! Very helpful information specially the last part :) I care for such info a lot. I was seeking this particular info for a long time. Thank you and best of luck.
Стена тегов | Чернев.ру I was suggested this blog by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my difficulty. You’re wonderful! Thanks! your article about Стена тегов | Чернев.руBest Regards Lawrence
Стена тегов | Чернев.ру I was recommended this web site by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my trouble. You’re incredible! Thanks! your article about Стена тегов | Чернев.руBest Regards Lisa
izmir bayan escortlar kulubü.
Please upload more video tutorials related to cooking if you have, as I would like to learn more and more concerning all recipes of cooking.
I recently came across your article and have been reading along. I want to express my admiration of your writing skill and ability to make readers read from the beginning to the end. I would like to read newer posts and to share my thoughts with you.
Absolutely brilliant post guys, been following you.
Accessories casually with flats and simple jewelry, or no jewelry at all. Do very simple hair also. And if it’s still to formal try a different dress.