Кастомизация облака тегов

Кастомизация облака тегов
Решил попробовать сделать симпатичные ссылки в облаке тегов и столкнулся с несколькими проблемами по части настройки шаблона.
В частности речь о полном отсутствии возможности настроить свой шаблон. Еще и эти обязательные «запятые» тоже не к месту, а чтобы что-то изменить или убрать — необходимо только вносить изменения в сами php файлы. Вот решением этих проблем мы и займемся. И в качестве бонуса дам код и стили тегов как на картинке.

Установка
Открыть файл engine/modules/show.full.php
Найти строку:

			$tpl->set( '{tags}', implode( ", ", $tags ) );

После нее вставить:

////////////////////////////////////////////////////////////////////////////////////////////////
			if(preg_match("#{tags=['"]([^'"]*)['"]}#i",$tpl->copy_template,$sep)) $tpl->set($sep[0],implode($sep[1],$tags));
////////////////////////////////////////////////////////////////////////////////////////////////

Теперь в шаблоне fullstory.tpl можно выводить теги тегом:

{tags=""}

где в кавычках указывается символ или текст разделитель между тегами. Вот так можно повторить вывод стандартного тега:

{tags} 
{tags=", "}

Теперь сама страница облака тегов:
Открыть файл engine/modules/tagscloud.php
Найти строку:

		} else $sql_select = "SELECT tag, COUNT(*) AS count FROM " . PREFIX . "_tags GROUP BY tag";

После нее вставить:

////////////////////////////////////////////////////////////////////////////////////////////////
		$tagsort = 'tag';
		if(preg_match("#\[list([^]]*)\](.+?)\[/list\]#is",$tpl->copy_template,$tpl_list)){
			$limit = false;
			$sep = '';
			if(preg_match("#limit=['"](d+)['"]#i",$tpl_list[1],$lm)){
				$lm = intval($lm[1]);
				if($lm>0){
					$limit = true;
					$sql_select = "SELECT tag, COUNT(*) AS count FROM " . PREFIX . "_tags GROUP BY tag ORDER BY count DESC LIMIT 0,$lm";
				}
			}
			if(preg_match("#sep=['"]([^'"]*)['"]#i",$tpl_list[1],$sp)) $sep = $sp[1];
			if(preg_match("#sort=['"](count|tag)['"]#i",$tpl_list[1],$tgsr)) $tagsort = $tgsr[1];
		}
		if(!$limit) $sql_select = "SELECT tag, COUNT(*) AS count FROM " . PREFIX . "_tags GROUP BY tag ORDER BY count DESC";
////////////////////////////////////////////////////////////////////////////////////////////////

Найти строку:

		usort ($list, "compare_tags");

ПЕРЕД ней вставить:

////////////////////////////////////////////////////////////////////////////////////////////////
		if($tagsort=='tag')
////////////////////////////////////////////////////////////////////////////////////////////////

Найти код:

				if ($config['allow_alt_url'] )
					$tags[] = "<a href="".$config['http_home_url']."tags/".urlencode($value['tag'])."/" class="{$value['size']}" title="".$lang['tags_count']." ".$value['count']."">".$value['tag']."</a>";
				else
					$tags[] = "<a href="$PHP_SELF?do=tags&amp;tag=".urlencode($value['tag'])."" class="{$value['size']}" title="".$lang['tags_count']." ".$value['count']."">".$value['tag']."</a>";

Заменить на:

////////////////////////////////////////////////////////////////////////////////////////////////
				if($tpl_list[2]){
					if ($config['allow_alt_url'] ) $link = $config['http_home_url']."tags/".urlencode($value['tag'])."/";
					else $link = $PHP_SELF."?do=tags&amp;tag=".urlencode($value['tag']);
					$temp = $tpl_list[2];
					$temp = str_ireplace("{link}",$link,$temp);
					$temp = str_ireplace("{tag}",$value['tag'],$temp);
					$temp = str_ireplace("{count}",$value['count'],$temp);
					$tags[] = $temp;
				}else{
					if ($config['allow_alt_url'] )
						$tags[] = "<a href="".$config['http_home_url']."tags/".urlencode($value['tag'])."/" class="{$value['size']}" title="".$lang['tags_count']." ".$value['count']."">".$value['tag']."</a>";
					else
						$tags[] = "<a href="$PHP_SELF?do=tags&amp;tag=".urlencode($value['tag'])."" class="{$value['size']}" title="".$lang['tags_count']." ".$value['count']."">".$value['tag']."</a>";
				}
////////////////////////////////////////////////////////////////////////////////////////////////

Найти строку:

		$tags = implode(", ", $tags);

ПЕРЕД ней вставить:

////////////////////////////////////////////////////////////////////////////////////////////////
		if($tpl_list[0]) $tpl->copy_template = str_replace($tpl_list[0],implode($sep,$tags),$tpl->copy_template);
////////////////////////////////////////////////////////////////////////////////////////////////

Теперь в шаблоне tagscloud.tpl можно вместо просто тега {tags} использовать конструкцию:

[list limit="100" sep="" sort="count"]<a href="{link}"><span class="tagname">{tag}</span><span class="tagcount">{count}</span></a>[/list]

где
limit — количество тегов
sep — в кавычках указывается разделитель между тегами, можно не указывать
sort — tag или count, соответственно сортировка по имени тега или по количеству
Все вышеперечисленные параметры не являются обязательными. Можно писать просто:

[list]<a href="{link}">{tag} ({count})</a>[/list]

{link} — адрес страницы тега
{tag} — имя тега
{count} — количество новостей с тегом

Бонус:
В шаблоне tagscloud.tpl использовать код:

		<div class="numbertag">
			[list limit="100" sort="count"]<a href="{link}"><span class="tagname">{tag}</span><span class="tagcount">{count}</span></a>[/list]
		</div>

В шаблоне fullstory.tpl код:

<div class="finetags">{tags=''}</div>

Кастомизация облака тегов CSS:

.numbertag a,
.finetags a{
	box-sizing: border-box;
	display: inline-block;
	height: 27px;
	border: 1px solid #d4d4d4;
	border-bottom-color: #c7c7c7;
	border-radius: 3px 0 0 3px;
	box-shadow: 0 1px 3px rgba(0,0,0,.3);
	background: #f8f9fa url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAGklEQVQImWP48+cPEwMDA9P///8pomEYjzoAdawnBT2E540AAAAASUVORK5CYII=) repeat-x 0 0;
	color: #222;
	font: bold 12px/25px 'Trebuchet MS',Tahoma,sans-serif;
	text-decoration: none;
	padding: 0;
	position: relative;
	margin:0 15px 11px 0;
}
.finetags a{
	padding: 0 15px;
}
.numbertag a:hover,
.finetags a:hover{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAGUlEQVQImWP48OEDEwMDAxwzMjJSROMxBwA7vQMmCBtaoAAAAABJRU5ErkJggg==);
}

.numbertag a>span{
	display: inline-block;
	position: relative;
}
.numbertag .tagname{
	padding: 0 15px;
}
.numbertag .tagcount{
	padding: 0 8px;
	font: bold 11px/27px Tahoma;
	color: #fff;
	background: #db5a0f url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAJUlEQVQImWP4Xm/HxMDAwPT37x8mBgYGpn9//0JpKP8fGp98eQBJnih8eyJnCAAAAABJRU5ErkJggg==) repeat-x 0 0;
}

.tagcount:after,
.tagcount:before,
.finetags a:after,
.finetags a:before{
	content: "";
	display: block;
	left: 100%;
	top: 0;
	position: absolute;
	width: 5px;
	height: 27px;
}
.finetags a:after{
	margin-left: -4px;
}
.finetags a:before{
	margin-left: 1px;
}
.tagcount:before{
	left: -5px;
}
.tagcount:before,
.finetags a:after{
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAbCAYAAAC0s0UOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANVJREFUeNqMUksKwjAUfEmjtVKpooKgGzeuXXqM4sKt4KpH8g5uPIF4IJeiiO0bXyqCTSKY8AIZ5n1mEgWAPuu8W2IxSkhTYDVA2A0XhAXZSa9BuEz2mbYe+C+msMBuIwowu5GiSGY1h/V8lcW6GCYmn6QRdQyRMQrFINbbcaIFUJIqTKHnsRRpKZCqu4vMkvl4Lyt6SFT8bmTksr/cQMxR3o91lra1ZHz5edrMMO2Z5kjXZ0Vl5SliX5GVyZ52ClqHXy4h5BJ85+1hmg/HEir8GV4CDAA2PYgOGBxM/AAAAABJRU5ErkJggg==) no-repeat;
}
.tagcount:after,
.finetags a:before{
	width: 3px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAbCAYAAAC5rTVJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANRJREFUeNpifFpm+Z8BCliEOFgY4Jz///8z/APK/fjzj4Hp//9/DN9//2kUbj/KyPCl2vI/SBaEwTKvyswaQHoYP1WY/Qfp+QnUwwKSYQSKggxl+f/vHwNMBqznB9A0if7zjAzvivRQTXuapw0x7XW+FsS0v/8gBoBNY2KAGA2RAer59+8v2G3y028xMjzLUEQ17W6KPMS0J6my/2F6WP4BTQMBdgzTwG7787dRfeFzRob78WKopl2LFoGYdjdWGGEaA1AGaBADJzPQtPc//sEDESDAAKhfo4cJlrA+AAAAAElFTkSuQmCC) no-repeat;
}

Пример работы можно посмотреть на сайте http://color.sandev.pro/tags/

С уважением,
Олег Александрович a.k.a. Sander
Источник: sandev.pro

Просмотров:

Добавить комментарий