Wordpress blog's solution to adding a color tag cloud

Method 1

The code is as follows:

Copy code

Open the functions. php file and insert the following code: // Color tag cloud Function colorCloud ($ text ){ $ Text = preg_replace_callback ("| <a (. +?)> | I "," colorCloudCallback ", $ text ); Return $ text; } Function colorCloudCallback ($ matches ){ $ Text = $ matches [1]; $ Color = dechex (rand )); $ Pattern = "/style = (\" | \ ") (. *) (\" | \ ")/I "; $ Text = preg_replace ($ pattern, "style = \" color :#{$ color}; $2; \ "", $ text ); Return "<a $ text> "; } Add_filter ("wp_tag_cloud", "colorCloud", 1 );

You can directly add code to the template that needs to call the tag cloud.

The code is as follows:	Copy code
<? Php wp_tag_cloud ();?>

The code $ color = dechex (rand () in the red part above is used to define the decimal value range of the random color of a tag. The value 0 equals to #000000,16777215 equals to # ffffff. We recommend that you redefine it, the random color may be the same as the background color of your webpage, so that users cannot see what it is. After locating the color range in photoshop, use the computer that comes with the system to convert hexadecimal to decimal.

Method 2

The code is as follows:

Copy code

<? Php Function cloud_tag () { $ Arr_tag = array (); $ I = 0; $ Query = mysql_query ("SELECT 'tag' FROM 'article '"); While ($ res = mysql_fetch_assoc ($ query ))     { $ Tmp = explode ('', strtoupper ($ res ['tag']); $ Arr_tag = array_merge ($ arr_tag, $ tmp );     } $ Arr_tag = array_unique ($ arr_tag ); Shuffle ($ arr_tag ); $ Str_tag = "<div style = \" padding: 5px; border: 1px solid # B7E2AD; \ "> "; Foreach ($ arr_tag as $ key => $ val)     { $ Font_size = rand (12, 40 ); $ Font_color = dechex (rand (0, 16777215 )); $ Str_tag. = "<a href = \"/article. php? Act = tag & tag = ". $ val. "\" style = \ "color :". $ font_color. "; font-size :". $ font_size. "px; text-decoration: none; \"> ". $ val. "</a> & nbsp ;";     } Return $ str_tag. = "</div> "; } ?>

Method 3

Open the functions. Php file of the current topic and add the following code:

The code is as follows:

Copy code

Function colorCloud ($ text ){ $ Text = preg_replace_callback ('| <a (. +?)> | I ', 'colorcloudcallback', $ text ); Return $ text; } Function colorCloudCallback ($ matches ){ $ Text = $ matches [1]; $ Color = dechex (rand )); $ Pattern = '/style = (\' | \ ") (. *) (\ '| \")/I '; $ Text = preg_replace ($ pattern, "style = \" color :#{$ color}; $2; \ "", $ text ); Return "<a $ text> "; } Add_filter ('WP _ tag_cloud ', 'colorcloud', 1 );

Then add the following call code where you want to display the color tag cloud:

The code is as follows:	Copy code
<? Php wp_tag_cloud ('smallest = 8 & largest = 24 & number = 50');?>

Parameter description:

Smallest = 8 & largest = 24 & number = 50

8 indicates the font size and font size.

24 indicates calling the most popular 24 tags.

50 indicates that 50 tags are output in total.

If the cloud effect of the above three color labels is defined in htm directly, I like separating like this,

Method 4

The following style code is added after the style.css file. The label spacing will look better.

 

The code is as follows:	Copy code
# Page-cnt.tags, # Page-cnt.friends {height: 576px; padding: 6px 0 0; overflow: hidden; line-height: 30px ;} # Page-cnt.tags, # Page-cnt.friends {height: auto; padding-top: 5px; overflow: visible ;} . Tags a {display: inline-block; margin: 0 4px; white-space: nowrap ;}

Add color function

Open the functions. Php file in the topic, at the very end?> The following code is added to implement the color tag cloud:

The code is as follows:

Copy code

Function colorCloud ($ text ){ $ Text = preg_replace_callback ('| <a (. +?)> | I ', 'colorcloudcallback', $ text ); Return $ text; } Function colorCloudCallback ($ matches ){ $ Text = $ matches [1]; $ Color = dechex (rand )); $ Pattern = '/style = (\' | \ ") (. *) (\ '| \")/I '; $ Text = preg_replace ($ pattern, "style = \" color :#{$ color}; $2; \ "", $ text ); Return "<a $ text> "; } Add_filter ('WP _ tag_cloud ', 'colorcloud', 1 );

Publish the Tags page

Upload to the root directory of the Tstyle topic, create a page in the background, and select the Tags template file in "page properties" on the right. Directly publish this page without entering any content, you can see the tags page.

 

So far, you can see your tag cloud page.

Note: The label cloud on the sidebar can also be directly called using the following code:

The code is as follows:	Copy code
<? Php wp_tag_cloud ('smallest = 12 & largest = 18 & unit = px & number = 20');?>

Let's sum up. From the above four methods, I personally prefer the last one, because it is troublesome to define css in pages.