Блог \ Для новичков \ Облако тэгов (меток)

Для чего нужны метки и как сделать облако тэгов на сайте? - Часть 2

Для чего нужны метки и как сделать облако тэгов на сайте? - Часть 1

Обновим память...

В прошлом посте мы условились, что метки у нас хранятся в базе данных в виде текстового поля. А разделяются они запятыми. Давайте посмотрим на изображение ниже, чобы увидеть это наглядно.

sozdanie-metok-ili-tegov-na-saite

Из данного изображения видно, что некоторые метки (PHP), используются несколько раз, но нам нужно будет вывести метки только единажды!! - без повторений.

1) Выводим из базы данных все тэги:

Допустим наша база данных называется "blog"

<?
// Делаем выборку из базы данных
$result = mysql_query("SELECT tags FROM blog",$db);
$myrow = mysql_fetch_array($result);
?>

Теперь нам нужно результат записать в какуюнибудь переменную:

// Запускаем цикл, в котром выведем все тэги через запятую
do
{
    //Создадим переменную в котрую будем дописывать, все метки в одну строку через запятую
    $tags .= $myrow['tags'].', ';// Обязательно ставим в конце запятую
}
while($myrow = mysql_fetch_array($result));

Результат: $tags = 'функции, php, программирование, базы данных, mysql, php, создание сайтов, html, php';

Точка и знак равно (.=) означает, что мы не заменяем значение переменной $tags, а дописываем к ней новые значения.

Если в конце не поставить запятую, то результат будет таким: [...]PHP, программирование базы данных, mysql, php[...] - между тэгом "программирование" и "базы данных" не будет запятой, а нам она нужна для того чтобы разбить все слова на массивы с помощью функции explode();

2) Теперь нужно разбить строку на слова и словосочетания:

$tags содержит строку в которой находятся слова и словосочетания разделенные запятыми. Сейчас мы с помощью функции explode() создадим массив.

<?
//в качестве разделителя будем использовать запятую
$tags = explode(',',$tags);
?>
ВНИМАНИЕ:
теперь $tags - это массив!!! - переменная нам больше не нужна.
 

3) Удаляем повторения из массива:

С помощью функции array_unique() мы удалим повторения из массива. В нашем случае три раза повторяется слово "PHP" - нам ведь не надо чтобы в облаке тэгов повторялись слова несколько раз.

<?
//в качестве разделителя будем использовать запятую
$tags = array_unique($tags);
?>
 

В нашем облаке тэгов ссылки будут выводится случайно

4) Организуем случайный вывод элементов массива:

В этом деле нам поможет функция array_rand(), она принмает два параметра. 1 - это массив, а 2 - это количество элементов массива, т.е. число - не буду заморачиваться, давайте разберем на примере.

ВАЖНО: вы должны понимать, что эта функция возвращает не массив, а его ключи!!

<?
//нам нужно получить 10 ключей, чтобы создать 10 меток, если хотите можете указать свое число
$tags_key = array_rand($tags, 10);
//Результат запишем в новый массив $tags_key
?>
Результат:
  $tags_key[0] = 3;
  $tags_key[1] = 24;
  $tags_key[2] = 9;
  $tags_key[3] = 7;
  $...
  $tags_key[10] = 12;
 

5) Создадим стили для ссылки:

<style>
.cloud_tags {border: 2px solid #ccc; padding: 10px; background: #f5f5f4; border-radius: 5px;}
.cloud_tags .link_1 {font-size: 30px;}
.cloud_tags .link_2 {font-size: 26px;}
.cloud_tags .link_3 {font-size: 22px;}
.cloud_tags .link_4 {font-size: 18px;}
.cloud_tags .link_5 {font-size: 16px;}
.cloud_tags .link_6 {font-size: 14px;}
.cloud_tags .link_7 {font-size: 12px;}
</style>

6) Теперь с помощью ключей мы выведем элементы массива $tags:

Сейчас мы просто переберем массив $tags_key с помощью функции foreach()

<?
$i = 0; //Создадим переменную $i чтобы задать разные стили для ссылки
foreach($tags_key as $key)
{
    $i++;
    $link[] = '<a href="search.php?search='.$tags[$key].'" class="link_'.$i.'">'.$tags[$key].'</a> ';
}
?>
Результат:
       <a class="link_1" href="search.php?search=php">php</a>
       <a class="link_2" href="search.php?search=базы данных">базы данных</a>
       и так 10 случайных ссылок


 

 
 oblako-tegov

На изображении мы видем что размеры ссылок идут в порядке убывания, для этого можно либо поменять стили либо перемешать массив. Мы перемешаем массив, ведь для этого я его и создал $link[], а перемешаем мы его с помощью функции shuffle().

<?
shuffle($link);

// И выводим облако тэгов

echo '<div class="cloud_tags">';
foreach($link as $tag)
{
    
    echo $tag;
}
echo '</div>';

?>


 

 oblako-metok-v-sluchaynom-porjadke

Скачать исходники

Это лишь простой пример вывода облака тэгов на блоге, но так как статья для новичков, я думаю для начала вам хватит, если есть вопросы, пишите в комментах, буду отвечать...


Пример работы скрипта можете увидить на моем блоге справа.


Метки: метки, теги, облако тэгов, метки на блоге, тэги для сайта,

Игорь

Спасибо пригодится!!!

Андрей

Вам спасибо, приятно что хоть кто то читает!

Даша

// в качестве разделителя будем использовать запятую $tags = explode(',',$tags); Андрей скажите пожалуйста, что нежно дописать чтобы в качестве разделителя использовать запятую, тире, двоеточие и др. символу?

Андрей

Дарья здравствуйте, извиняюсь за долгий ответ!

Для того, чтобы использовать любой другой символ в качестве разделителя нужно: в переменной tags выбрать другой разделитель! Сейчас у нас стоит запятая, давайте поставим тире (-)

Т.е.  $tags .= $myrow['tags'].', '; заменим на $tags .= $myrow['tags'].'-';

И в функцию explode поставим тире (-) $tags = explode('-',$tags);

 

Переменная $tags - это строка, когда мы выбираем тире в качестве разделителя, у нас получается следующее:

<...>-<...>-<...>, а если запятую <...>,<...>,<...>

А функция explode лишь находет в тексте запятую или тире, и разбивает строку на части там где встречаются данные символы!

Если есть еще вопросы, пишите обязательно на них отвечу!!! Уже сразу, а не через два дня!!!

Даша

Немножко не так :)
 
Есть такая строчка, типа:
Маникюр - гель, акрил - Педикюр - Подарок
 
Как должен выглядеть код? чтобы получить все запятые, типа:
Маникюр, гель, акрил, Педикюр, Подарок

Андрей

Даша, здравствуйте еще раз!!

Здесь три варианта:

  1. Регулярные выражения, с помощью которого нужно задать разделитель запятую или тире
  2. Сначала разбиваете строку по запятым, а потом получившиеся массивы разбиваете с помощью тире:
  3. Сначала заменяете все тире на запятые, а потом разбиваете строку по запятым! - ЭТОТ ВАРИАНТ САМЫЙ ПРОСТОЙ!!!

 

Пример третьего варианта:

<?
   
    $str = 'Маникюр - гель, акрил - Педикюр - Подарок';
   
    // Функция которая заменит все тире на запятые
    $str = str_replace('-',',',$str);
   
    echo $str;
?>

Андрей

Кстати, если есть еще какие либо вопрсы, не стесняйтесь, задавайте!!!!

Сергей

Интересно, а как из обычной строки (например названия новости) автоматически создать теги, разделенные запятыми, удаляя все прочие символы.

Например: двоеточия, тире, знаки припинания, предлоги, и пр., а так же слова не являющиеся словами со смыслом. Т.е. "на, по, и, к, или ..." и прочие. Надеюсь я правильно объяснил.

Может ограничить вывод слов с количеством символов скажем больше трех... вот только как. 

Сергей

Сам спросил, сам отвечаю: 

$title = "здесь текст, либо переменная";
$str_tag = preg_replace('/[^a-zA-ZА-Яа-я\s]/u','',$title); // удаляем все символы кроме букв
$str_tag = mb_strtolower($str_tag, 'UTF8'); // переводим все буквы в строчные
$str_tag = str_replace(' ',', ',$str_tag); // разделяем теги запятыми
echo "$str_tag"

 

Но появился другой вопрос, как создать метки из самого текста, выбрав, ну скажем 6 самых  повторяющихся в тексте слов? =)) 

Андрей

Сергей, Здравствуйте!

Посмотрите здесь: http://www.php.su/forum/topic.php?forum=1&topic=5501

Последний вариант наиболее подходящий!

 

Если не разберетесь, напишите в комментариях, я напишу свою функцию (никогда с таким не сталкивался, за 5 минут не состряпаю скрипт, надо подумать).

Только сделать это смогу, уже завтра, сегодня времени в обрез, надо сайт заказчику сдать.

А вообще я в любом случае, напишу скрипт, очень интересная тема для заметки на блог.

Антон

а как сделать чтобы каждый тег выводился с размером соответственным количеству этого тега? Это более логично чем просто случайный размер...

Андрей

Антон здравствуйте! Надо сначала вытащить все метки из базы данных, найти все повторяющиеся слова, а затем подсчитать количество повторений и поместить их в массив, затем массив нужно отсортировать в порядке убывания и выбрать только первые 10 элементов массива, или сколько вам надо меток.

$tag = explode(',',$tags);

$tag = array_unique($tag);

foreach ($tag as $val)

{

preg_match_all ('/'.$val.'/', $tags, $matches);

$metka[$val] = count($matches[0]);

}

arsort($metka);

$metka = array_slice($metka, 1, 10); // выбираем первые 10 элементов массива

$i = 0;

foreach($metka as $key => $val)

{

$i++;

$link[] = '<a href="search.php?search='.$key.'" class="link_'.$i.'">'.$key.'</a> ';

}

 

Исходники обновил, можете скачать.

Кстати на своем сайте тоже так сделал!

Антон

а как сделать чтобы каждый тег выводился с размером соответственным количеству этого тега? Это более логично чем просто случайный размер...

Антон

Спасибо автору! Очень помогло.. все получилось!

Андрей

Пожалуйста! Если есть вопросы, обращайтесь. Всегда рад помочь!!

Александр

Код отличный, основная задумка понятно, но столкнулся с такой проблемой, что из базы данных помимо тегом загружается еще и данные по этому тегу, однако их вывести так и не получилось. Строки бд: name, info name - отсюда берутся ключевые слова info - при любой попытке получения и вывода либо не определяется относительно выводимому слову, либо получил на выходе "Array" Помогите решить проблемку

Андрей

Здравствуйте, Александр.

Скорей всего у вас в поле info хранится массив, попробуйте вывести на экран, вот так: print_r($row['info']), и Вам станет все понятно.

Без Вашего кода, к сожалению, больше ничего сказать не могу. Нужно знать что именно хранится в info. Если вопрос не решите пишите в личку. Email адрес на вкладке "контакты"

Андрей

Андрей, а можно исходник файла search.php посмотреть, как он искать будит, а то я не пойму как его страпать. Через форму то понятно, а так нет, хочу на phpguru.com.ua привентить.

Заранее спасибо! Или на email скиньте пож.

Андрей

Андрей, здравствуйте!

Файл search.php написан довольно просто, так как я не ставил перед собой задач сделать супер поисковик.... Я просто подключил поиск от google, а методом GET передаю переменную.

Файл searh.php:

  1. Получаем значение $_GET['search'] - только не забудьте стандартную защиту, htmlspecialchars например.
  2. Затем код поисковика в сервисе google (http://www.google.com/cse/) - там я думаю Вы разберетесь.
  3. Затем мождно изменить CSS свойства, чтобы поиск подходил под дизайн Вашего сайта, как у меня.
Итог, передаете  $_GET['search'], а дальше google все делает сам!

konstantin

доброго дня как вы сделали что под новостью у вас выводиться всего 5 меток. у меня проблема на сайте, замучился непонимаю как сделать чтобы не все метки к статье выводились а например 5  или 10 а дальше ..... вот сайт подскажите что можно придумать. спасибо proverimdietu.ru

Андрей

Konstantin здравствуйте! Честно говоря даже не знаю, что Вам посоветовать так как я не работаю с движком WordPress. На сколько я помню при добавлении статьи в WordPress есть специальное поле "ТЕГИ", в которое вы их вписываете и они автоматически появляются на сайте....

Или Вы в ручную пишите модуль для добавления тегов? Тогда нужен код, и пример базы данных...

Больше к сожалению ничего сказать не могу, так как не знаю каким образом и куда происходит добавление меток. 

phpguru

Спасибо я и без гугла написал обработчик, и все работает на самом сайте. Пока тестирую, все нормально.

phpguru

Все получилось классно и без гугла, всего 2кб кода и все работает отлично, спасибо автору за идею, немного подправил переделал, допилил и получилось всё ок. Пример можно здесь просмотреть кого интересует http://phpguru.com.ua

p

Автор иправь в исходнике 3 раза

<meta http-equiv="content-type" content="text/html;charset=utf-8">

Андрей

Не совсем понял, зачем тут прописывать кодировку? и тем более 3 раза?

Алексей

Здравствуйте, такая ситуация:

//Создадим переменную в котрую будем дописывать, все метки в одну строку через запятую

$tags .= $myrow['tags'].', ';

Мой результат:

балансир, окунь, балансир, мотыль, мотыль, 

На последнем элементе в конце тоже ставится запятая! Как её убрать? Так как после применения функции $tag = explode(',',$tags); появляется ячейка массива с пустым значением. Мне пустые ячейки не нужны.

Алексей

Задачку с обрезкой запятой решил так :

 

====================

......

// Запускаем цикл, в котром выведем все тэги через зщапятую

do

{

//Создатим переменную в котрую будем дописывать, все метки в одну строку через запятую

$tags .= $myrow['tags'].', ';

}

while($myrow = mysql_fetch_array($result));

$tags = mb_substr($tags, 0, -2, 'UTF-8'); // Обрезаем два символа в коне строки - пробел и запятая

// Разобъем строку $tags на элементы массива, а в качестве разделителя будем использовать запятую

$tag = explode(',',$tags);

function array_trim($array) // Создаём функцию удаления пробелов по краям из всех элементов массива

{

return array_map('trim', $array);

}

$tags = array_trim($tags); // Удаляем все пробелы по краям элементов массива

$tag = array_unique($tag);

......

====================

 

А также у элементов массива удалил пробелы по краям, так как функция array_unique() учитывала пробелы при сравнении, получалось что одно и тоже слово с пробелом и без считались как разные. 

Благодарю за идею с метками.

Андрей

Алексей, доброго времени суток!

$tags .= $myrow['tags'].', ';  
Мой результат:
балансир, окунь, балансир, мотыль, мотыль, 

Для того чтобы удалить запятую в конце строки (НЕ МАССИВА) достаточно воспользоваться функцией rtrim($tags,','); И в качестве второго параметра указать запятую, тогда эта функция удалит последнюю запятую! 

Александр

Спасибо за статью!!!

На сайте сделал облако + в новостях прикрутил но уже по своей технологии  =)

Борис

Спасибо, очень полезная статья.

Коха

Здравствуйте Андрей. Подскажите пожалуйста если вас не затруднит, у меня все отличног получилось, вот только при наведении на каждую метку, ссылка показывает не метку а какую то длинную каряву типа - E5%G0%H7DD5%E5%G0%H7DD5%E5%G0%H7DD5%E5%G0%H7DD5%E5%G0%H7DD5%

Андрей

Здравствуйте!

Давно не сталкивался с такой проблемой, возможно не точно укажу на ошибку.. Но скорее всего дело в том, что вы используете кодировку windows-1251 (Возможно наоборот в кодировке UTF-8) . А в данной кодировке все латинские символы в URL преобразуются в двухбайтовый символьный код. 

Вот статья по этому поводу: http://www.design-sites.ru/utility/url-encoding.php
А вообще копать нужно в сторону url_decode, url_encode.

Если все таки не разберетесь, обращайтесь. Без проблем помогу, но тогда нужен будет скрипт.

Ваши комментарии!

Имя:*


Email:*


Email:*

Не будет показан

Текст:*



Немного о нас

Да, действительно теперь я не один. В моей команде работают несколько программистов, дизайнер и отличный SMM специалист.

Так что теперь мы оказываем абсолютно весь спектр услуг, связанный с организацией бизнеса в интернете. Начиная от создания сайта и заканчивая продвижением его в интернете.

*/ ?>

Пишите!