タグクラウドの作り方

目次:

タグクラウドの作り方
タグクラウドの作り方

ビデオ: タグクラウドの作り方

ビデオ: タグクラウドの作り方
ビデオ: 【初心者向け】Canvaで作るオリジナルショップロゴの作り方! 2023, 12月
Anonim

確かに多くのサイトやブログで、タグクラウドのような面白いものに出くわしました。あなたがあなたのウェブサイトまたはブログでそのような雲を作りたいならば、この記事であなたはそれを生成する方法についての指示を見つけることができます。

タグクラウドは、検索、リンク、および単語の言及で最も頻繁に表示されるタグまたはカテゴリのコレクションです。そして、1つまたは別の単語または概念が頻繁に発生するほど、画像は大きくなり、これらの概念および単語へのハイパーリンクが含まれます。

タグクラウドの作り方
タグクラウドの作り方

指示

ステップ1

まず、次の形式のペアのリストを生成します。タグ-出現回数。これを行うには、次のコードを使用します。

1. <?

2.クラスTagsCloud {

3.

4.プライベート$タグ;

5.

6.private $ font_size_min = 14;

7.private $ font_size_step = 5;

8.

9.function _construct($タグ){

10.

11.シャッフル($タグ);

12. $ this->タグ= $タグ;

13.

14. }

15.

16.プライベート関数get_tag_count($ tag_name、$ tags){

17.

18. $カウント= 0;

19.

20. foreach($タグを$タグとして){

21. if($ tag == $ tag_name){

22. $カウント++;

23. }

24. }

25.

26. $カウントを返します。

27.

28. }

29.

30.プライベート関数tagscloud($タグ){

31.

32. $ tags_list = array();

33.

34. foreach($タグを$タグとして){

35. $ tags_list [$ tag] = self:: get_tag_count($ tag、$ tags);

36. }

37.

38. $ tags_listを返します。

39.

40. }

41.

42.プライベート関数get_min_count($ tags_list){

43.

44. $ min = $ tags_list [$ this->タグ[0];

45.

46. foreach($ tags_list as $ tag_count){

47.

48. if($ tag_count <$ min)$ min = $ tag_count;

49.

50. }

51.

52. $ minを返します。

53.

54. }

55.

56. public function get_cloud(){

57.

58. $ cloud = Array();

59.

60. $ tags_list = self:: tagscloud($ this->タグ);

61. $ min_count = self:: get_min_count($ tags_list);

62.

63. foreach($ tags_list as $ tag => $ count){

64.

65. $ font_steps = $ count- $ min_count;

66. $ font_size = $ this-> font_size_min + $ this-> font_size_step * $ font_steps;

67.

68. $ cloud = "。$タグ。 ";

69. }

70.

71. $クラウドを返します。

72.

73. }

74. }

75. ?>

ステップ2

このコードを次のように操作します。

01. <?

02.

03. $タグ=配列(

04. '1111', '2222', '333', '444', 05. '5555', '666', '777', '777', 06. '333', '8888', '6666', '333',

07. '888', '000’, '989', '45455', 08. '5555', '63636', '54545', '55656'

09.);

10.

11. $ mycloud =新しいTagsCloud($タグ);

12. $ tags_list = $ mycloud-> get_cloud();

13.

14.foreach($ tags_list as $ tag){

15.echo $ tag。 ' ';

16. }

17.

18. ?>

数字の代わりに、必要なタグを付けてください!

ステップ3

関連性に基づいてタグクラウドを表示するには、次の手順を実行します。設定で、最小オカレンス数(つまり、1オカレンス)に対応する最小フォントサイズを設定します。 font_size_minフィールドを使用します。

ステップ4

残りのタグのフォントサイズを次のように設定します。出現するたびに、フォントが1ピクセルずつ増加します。これを行うには、font_size_stepフィールドを使用します。

ステップ5

タグクラウドを改善したい場合は、jsスクリプトに添付してください。

自分の雲を作って頑張ってください!