Jak stworzyć menu składające się z Tagów, jak w Technorati.com?

Zapewne spotkałeś się już na którymś z serwisów związanych z blogosferą charakterystyczne menu składające się z ciągu słów różnej wielkości.


Fragment www.technorati.com/tag

Jest to interesujący sposób na pokazanie menu składającego się z bardzo wielu elementów. Wielkość czcionki, jaką zapisane są poszczególne kategorie, uzależniona jest w tym przypadku od względnej popularności danej kategorii.

Dzięki takiemu prostemu rozwiązaniu, Internaucie wystarczy rzut oka, by ustalić najpopularniejsze zagadnienia. Wbrew pozorom, jest to bardzo czytelne rozwiązanie.

Podobne menu wdrożyłem na stronie głównej cneb.pl widocznej po zalogowaniu się.


Fragment menu na www.cneb.pl widocznego po zalogowaniu się.

W przypadku cneb.pl wielkość czcionki uzależniona jest od ilości artykułów, dyskusji i innych materiałów w danej kategorii tematycznej.

Z całą pewnością nie powiniśmy ograniczać się tylko do tego typu menu w serwisie. Jest to jednak ciekawa alternatywa dla klasycznej listy kategorii.

Czynnik decydujący o wielkości czcionki nie jest jednak istotny, jeśli chcemy stworzyć tego typu menu we własnym serwisie. W cneb.pl zastosowałem następującą metodę do wygenerowania menu:

1. Do każdej kategorii przypisałem liczbę artykułów, jaka się w niej znajduje - pole cat_count. Równie dobrze może to być jej liczba odwiedzin albo inny istotny dla nas wskaźnik ilościowy.
    
2. Następnie wyciągnąłem z bazy danych listę unikalnych wartości cat_count za pomocą zapytania SELECT DISTINCT cat_count.
    
   
3. Zliczyłem liczbę uzyskanych unikalnych wartości cat_count.
    
4. Ustaliłem, że chcę wdrożyć 9 wielkości czcionki w menu.
    
5. Podzieliłem liczbę unikalnych wartości przez 9 i zaokrągliłem wynik w górę do liczby całkowitej (funkcja ceil() w PHP). W moim przypadku otrzymałem 4.
    
6. Następnie wykonałem pętlę while, która przypisuje wartość rankingu (od 1 do 9) kategoriom, które mają daną wartość cat_count i zwiększa o 1 ideks wartości cat_count. Co czwartą wartość indeksu zwiększałem wartość rankingu o 1 resetując przy okazji indeks. Dzięki temu lista wszystkich kategorii został podzielona na 9 równych części.
    
   
7. Funkcję tę wykonuję za każdym razem, gdy zostanie przypisany nowy materiał do którejś z kategorii.
    
   
8. Następnie skrypt generujący menu wstawia do każdego linku style="font-size:Xpx" - X jest zastępowane wynikiem dodawania 10 i wartości rankingu danej kategorii. Czyli od 10+1 do 10+9. Oczywiście poprawniej jest stworzyć 9 class w stylach CSS np. o nazwach tag1, tag2.... tag9 i przypisywać je do odpowiednich kategorii.

Oto konkretny skrypt z komentarzami, jeśli nie znasz się na PHP, pokaż go programiście - ułatwisz mu zadanie:

<?php // pobieram z listy kategorii identyfikatory wszystkich kategorii $sql = mysql_query("SELECT cid FROM CMS_cat"); while($cat = mysql_fetch_array($sql)) {     // liczę, ile w danej kategorii jest materiałów     $ile = mysql_numrows(sql("SELECT aid FROM CMS_articles_cat     WHERE cid = $cat[cid]"));         // aktualizuję wartość cat_count dnaej kategorii informującą     // o liczbie materiałów  w kategorii     sql("UPDATE CMS_cat SET cat_count = '$ile' WHERE cid = '$cat[cid]'"); } // pobieram listę unikalnych wartości cat_count z listy kategorii // sortując je wg tej wartości rosnąco $sql = mysql_query("SELECT DISTINCT cat_count FROM CMS_cat ORDER BY cat_count ASC"); // obliczam liczbę unikalnych wartości $ile = mysql_numrows($sql); // obliczam, co ile wartości należy podnieść ranking // założyłem 9 stopni wielkości czcionki. $coile = ceil($ile/9); // ustawiam indeks wartości i rankingu na 1 $i    =    1; $rank = 1; while($cat = mysql_fetch_array($sql)) {     // wstawiam wartość rankingu do danych każdej kategorii,     // która ma daną wartość cat_count.     sql("UPDATE CMS_cat SET cat_rank = '$rank'     WHERE cat_count = '$cat[cat_count]'");         // jesli indeks unikalnych wartosci zrówna się z wartością     // zmiennej $coile, resetuję indeks i zwiększam wartość rankingu     if ($i==$coile) {         $i=1;         $rank++;     } else { // w przeciwnym wypadku zwiększam wartość indeksu o 1         $i++;     } } ?>

Chętnie dowiem się o ciekawych wdrożeniach tego typu menu w serwisach nie będących blogami, gdzie jest to rozwiązanie coraz bardziej popularne.