RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Мар
1

Делаем красивое облако тегов (меток) в wordpress

Всем привет. Сегодня мы с вами будем красиво оформлять при помощи стилей оформления CSS3 метки (облако тегов). Метки — используются на сайтах для группировки записей по какому-то признаку и предназначены для удобства нахождения информации пользователем на блоге. Для вывода всех меток в WordPress используется виджет: облако меток.

Облако тегов в wordpress

облако тегов в wordpress

Для отображения облака тегов на сайте достаточно просто перетащить виджет в нужное место сайдбара или футера (см. скриншот). Но, если вы в процессе написания записей не указывали метки для записи, то это облако тегов будет у вас пустым. Практически все  бесплатные cms для создания сайтов, имеют встроенную поддержку меток, их можно создавать при написании записи или после в админ панели сайта, раздел «Записи» — «Метки».

После добавления облака тегов на сайт, они будут иметь не очень красивый вид, а мы с вами попытаемся сделать их более привлекательными:

 красивое облако тегов

 Ну что, подойдет такое оформление? Тогда приступим.

Файл стилей облака тегов wordpress

Для создания такого облака тегов мы с вами будем использовать стилевое оформление на CSS3:

.tags {
float: left;
margin: 0 0 7px 15px;
position: relative;

font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size: 0.75em; font-weight: bold; text-decoration: none; color: #996633; text-shadow: 0px 1px 0px rgba(255,255,255,.4); padding: 0em 0.417em 0.05em 0.917em; border-top: 1px solid #d99d38; border-right: 1px solid #d99d38; border-bottom: 1px solid #d99d38; -webkit-border-radius: 0 0.25em 0.25em 0; -moz-border-radius: 0 0.25em 0.25em 0; border-radius: 0 0.25em 0.25em 0; background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=’#feda71′, EndColorStr=’#feba47′); -webkit-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); } .tags:before { content:»; width: 1.30em; height: 1.358em; background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr=’#feda71′, EndColorStr=’#feba47′); position: absolute; left: -0.69em; top: .2em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-left: 1px solid #d99d38; border-bottom: 1px solid #d99d38; -webkit-border-radius: 0 0 0 0.25em; -moz-border-radius: 0 0 0 0.25em; border-radius: 0 0 0 0.25em; z-index: 1; } .tags: after { content:»; width: 0.5em; height: 0.5em; background: #fff; -webkit-border-radius: 4.167em; -moz-border-radius: 4.167em; border-radius: 4.167em; border: 1px solid #d99d38; -webkit-box-shadow: 0 1px 0 #faeaba; -moz-box-shadow: 0 1px 0 #faeaba; box-shadow: 0 1px 0 #faeaba; position: absolute; top: 0.667em; left: -0.083em; z-index: 9999; } .tags: hover { background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=’#fee18d’, EndColorStr=’#fec86c’); border-color: #e1b160; } .tags: hover: before { background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr=’#fee18d’, EndColorStr=’#fec86c’);

border-color: #e1b160; }

Откройте админ панель сайта и перейдите на вкладку внешний вид/редактор, в правой колонке выберете файл style.css Скопируйте приведенный выше код и вставьте его в самый конец файла. На этом работа с файлом стилей завершена.

Параметры облака тегов — функция wp_tag_cloud

Если, открыть Html код страницы, и посмотреть на отображение облака тегов, то можно увидеть, что оно описывается двумя классами:

  • tagcloud
  • tags-link

Первым классом tagcloud описывается размер шрифта, формат вывода ссылок, порядок сортировки, разделитель между тегами, и.т.п Вторым классом tags-link описываются непосредственно теги.

Чтобы внести изменения в эти классы нам нужно открыть файл функций (function.php). И добавить в конец файла код описывающий класс tagcloud:

function set_tag_cloud_args( $args ) {
$args['number'] = 30;
$args['largest'] = 10;
$args['smallest'] = 10;
$args['unit'] = 'px';
$args['format'] = 'flat';
return $args;
}
  • smallest – минимальный размер шрифта наименее популярных тегов;
  • largest – максимальный размер шрифта для популярных меток;
  • unit – величина для определения шрифта – pt, px, em, % (по умолчанию в pt, я ставлю обычно в пикселях px);
  • number – количество тегов для отображения (45 по умолчанию);
  • format – формат вывода ссылок: flat (разделенные пробелом – по умолчанию), list – список UL, array – как массив для PHP;
  • separator – разделитель между тегами (по умолчанию – пробел);
  • orderby – сортировка: name – по названию (изначально), count – по популярности;
  • order – порядок сортировки: возрастающая – ASC (изначально), по спадающей – DESC, случайным образом – RAND;
  • exclude – теги для исключения из облака;
  • include – теги для включения в облако (будут отображены только они).

Обязательно установите параметр ‘largest’=’smallest’ = 10; — одинаковый размер шрифта для популярных и наименее популярных меток облака тегов. Остальные параметры устанавливайте на ваше усмотрение.

Теперь в файле category-template.php (он находится в папке wp-includes), найдите при помощи сочетания клавиш cntr+F следующие строки:

$a[] = "<a href='$tag_link' class='tag-link-$tag_id' title='" . esc_attr( $title_attribute ) . "' style='font-size: " .
str_replace( ',', '.', ( $args['smallest'] + ( ( $count - $min_count ) * $font_step ) ) )
. $args['unit'] . ";'>$tag_name</a>";

Эти строки отвечают за формировании ссылки тега, здесь нам нужно добавить css класс вывода

$a[] = "<a class='tags' href='$tag_link' title='" . esc_attr( $title_attribute ) . "' style='font-size: " .
str_replace( ',', '.', ( $args['smallest'] + ( ( $count - $min_count ) * $font_step ) ) )
. $args['unit'] . ";'>$tag_name</a>";

Получай первым обновления блога!

Введите Ваш e-mail:


Комментарии (2) на “Делаем красивое облако тегов (меток) в wordpress”

  • Guest (1 коммент.) 1 Октябрь 2014 в 5:06

    Проще плагин для этих тегов использовать.

    • CMSONY
      CMSONY (172 коммент.) 1 Октябрь 2014 в 11:46

      Многие не очень любят плагины.

Оставить комментарий


вверх