Now you need to log into the WordPress admin area and go to Pages -> Add new. Set the desired title to the page, and then in the section Page Attributes select a template for it - Tag Cloud, then click Update. That's all. Your tag cloud page is ready. You can colorize it using CSS.
Example 3: Creating a Scrollable Tag Cloud Block for a Sidebar
You can invite users to select tags in the sidebar from a scrollable block. To do this you need to create a function in the file functions.php.
Function cloudbox () ( if (function_exists("wp_tag_cloud")) ( $tags = wp_tag_cloud(array("smallest"=>10, "largest"=>10, "orderby"=>"name", "order"=> "ASC", "format" => "array")); foreach($tags as $tag) ( echo $tag."
";
}
}
}
In the function above we have used the function array format wp_tag_cloud(), the font was left the same as it was, and the list was sorted by name in descending order.
Now let's open ours sidebar.php and call this function.
Please select a tag
Let's style it using CSS.
#cloud ( background: #FFFFCC; height: 200px; width: 200px; margin: 0 auto; overflow: scroll; border: 4px solid #000000; padding: 2px; text-align: justify; ) #cloud a ( background: # 400000; color: #FFFF00; margin: 0 4px 8px 0; -webkit-border-radius: 20px; -size: 15px; ) #text ( font-style: italic; font-weight: bold; font-size: 20px; color: #FF9900; font-family: Comic Sans; )
As a result, the block will look like this.
Wonderful, Live, Flash 3D tag cloud(categories) can be created on your website using English or Russified WP-Cumulus on WordPress. The purpose of the tag cloud is to retain visitors and make it easier for them to find the information they need on the site.
How to make a tag cloud for a website You will find out by reading this article.
Hover your mouse over label cloud and it will come to life:
A very nice, live cloud can decorate a website with any theme. To do this, you need to configure the WP-Cumulus plugin, which will help create a tag cloud.
Download WP-Cumulus and install
The English-language WP-Cumulus plugin can be found in the site’s administrative toolbar: open Plugins => Add a plugin, type WP-Cumulus in the search box, install and activate the plugin. You can download it from the official WordPress website
by loading the Extend=>Plugins page and typing the name of the plugin in the search box.
I would like to warn Russian-speaking users that the original plugin does not support Russian characters in the names of tags and categories. Therefore, a Russified plugin was developed, which can be downloaded from the developer’s website
www.wordpressplugins.ru/download/wp-cumulus.zip
and connect in the site’s administrative toolbar: Plugin=>Add plugin, download the file, install and activate the plugin.
The plugin works in WordPress version 2.3 or higher. A cloud of tags (categories) can be inserted into a sidebar or onto a page.
Tag cloud in sidebar
To insert into tag cloud widget in the admin panel go to Design => Widgets. Select the wp-cumulus widget and drag it to the sidebar. Open the widget and make settings.
Set the width and height of the cloud. Tag, gradient, highlight, and background colors are specified as hexadecimal code. The color and code correspondence table is shown below:
More details on the table of color codes can be found on the Wikipedia website:
www.wikipedia.org
by typing the words “List of colors” into the search window.
It is not advisable to use the “transparent background” option; when using it, sometimes the cloud “fades” occurs. It is recommended to specify the background color of the cloud instead, the same as the background of the page.
The rotation speed is selected for ease of perception of Flash 3D.
To make the label cloud look beautiful, you need to check the “Arrange evenly over the sphere” option, otherwise the labels will overlap each other.
The cloud can display tags, categories, or both at the same time.
The wp_tag_cloud function parameters can be set as follows:
smallest=10&largest=40&number=20&orderby=count
where smallest and largest are the smallest and largest sizes of labels, respectively, and number is their number.
Tag cloud in a post or page
To insert tag clouds in the article, you need to open Settings=>WP-Cumulus in the site’s administrative toolbar and make settings similar to those described above.
On many resources, tags are displayed not only to fill empty space or beauty, as is often the case, but also for direct purpose. The material is grouped by certain words, which makes it easier to find the necessary information. Or they even replace standard categories with sorting by tags, this applies to large portals.
Today we will look at one way to display a tag cloud on a separate page of the site, and through a standard widget, by giving each tag a different link or background color. As a result, we will get a colored cloud of tags, and to all this we will add the output of regular tags at the end of the post.
We will not use special plugins, although there are a lot of them on this topic in the official repository. For example, for , an old and well-known module. We will perform all actions manually, so to speak, on our own with the help of some functions.
Tag cloud on a separate page
To implement it, we will need to remove unnecessary functions and add our own in the right place. I will skip the details regarding the template in the description, I will only touch on the main points (you can find everything else at the link above).
Duplicate the standard page.php file, save it under the name tags.php and add a comment at the very beginning of the file:
/* Template Name: tag cloud */
Inside this file, remove unnecessary functions: loop, navigation, comment form and everything else that is not needed. The idea is that the header, sidebar, footer and blocks should remain, preserving the correct appearance of the content.
Let's replace it with this:
All that remains is to write the following code in the functions.php file:
|i", "colorCloudCallback", $text); return $text; ) function colorCloudCallback($matches) ( $text = $matches; #Tag background color $colors = array("F99","C9C","F96" ,"6CC","6C9","37A7FF","B0D686","E6CC6E"); $color=$colors; $pattern = "/style=(\"|\")(.*)(\"| \")/i"; #Tag styles $text = preg_replace($pattern, "style=\"display: inline-block; *display: inline; *zoom: 1; color: #fff; text-shadow: 1px 1px 1px #989898; padding: 1px 5px; margin: 0 5px 5px 0; background-color: #($color); text-decoration: none!important; -webkit-transition: background-color .4s linear; -moz-transition: background-color .4s linear; transition: background-color .4s linear;\"", $text); \"|\")/i"; return "
It will add a random background color for the labels.
Result.
Colored tag cloud in sidebar
To display a regular tag cloud in the sidebar, just use a standard widget. It is present natively on any WordPress site, and is located in the “ Appearance-Widgets" But, for unknown reasons, if this does not suit someone, you can also use the wp_tag_cloud function. Just first, then put the following code in it:
And in the last action, add the following code to the functions.php file:
Function colorCloud($text) ( $text = preg_replace_callback("| |i", "colorCloudCallback", $text); return $text; ) function colorCloudCallback($matches) ( $text = $matches; $color = dechex(rand(0.16777215)); $pattern = "/style= (\"|\")(.*)(\"|\")/i"; $text = preg_replace($pattern, "style=\"color:#($color);$2;\"", $ text); return " "; ) add_filter("wp_tag_cloud", "colorCloud", 1);
Warning. Do not use these two functions at the same time (background color, link color), otherwise there may be a conflict. Choose one thing and it will work with all tags.
Result.
Displaying tags at the end of the post
In conclusion, as mentioned above, we will display the tags at the end of the article. We need to add single.php to the file, after the function, this code:
And a bit of design styles.
Tagpost a( background:#D02B7B; border-radius:2px; padding:4px; text-decoration:none !important; color:#fff!important; font-size:11px; )
Result.
That's all.
A huge number of websites are created on the WordPress engine, and it is used by both beginners and professionals.
CMS has many advantages, one of them is a huge selection of different plugins with which you can transform the appearance of the site. Thanks to extensions, you can install a lot of interesting widgets, including a cloud of tags (categories).
How to make a tag cloud for WordPress? This engine has a standard plugin to install a beautiful form with floating tags.
To use it, you must have tags written for each page; if you have not done this before, you will have to start with this, but adding tags is not difficult.
Best Tag Cloud Plugin for WordPress
There are many different extensions in the standard set, however, they are not always of high quality and often place a high load on the server.
To optimize your site, we have already told you how to add . Installing a tag cloud without extensions is too difficult, and the best solution is the WP-Cumulus plugin.
Download and install the add-on, after which a new item will appear in the main menu of the administrative panel so that you can set the settings. There are not many of them, but everything you need is here:
You don’t have to specify the title; set the size so that the block fits nicely into the template; the same goes for the background color. It is better to leave the rotation speed at default. note that You can display tags and categories in the cloud, this is the main advantage of the WP-Cumulus plugin.
After setting the parameters, add a tag cloud to any area (sidebar is ideal), you should get something like this:
The usual format in which all categories and tags are presented. You will spend just a few minutes to install the same block on your website.
Alternative tag cloud plugins for WordPress
Naturally, WP-Cumulus has a lot of analogues, so you can easily solve the problem if for some reason this extension does not suit you. New plugins appear all the time; let’s consider only those that have been used by thousands of website owners for a long time.
Tags are another functional element in the WordPress engine, which is used along with categories and the search bar. Thanks to them, you can improve behavioral factors on your web project, allowing the reader to search for similar publications using relevant words.
Often, the display of labels is already implemented in the design theme (at the end of each post), but in addition, you can use third-party plugins like “ ”, which create an original “label cloud” format. Or use the existing standard widget from the WordPress set, which will easily fit into any template design.
Label cloud
The standard “Tag Cloud” widget is located in the admin panel in the “Appearance” - “Widgets” section, and is installed like all other widgets (by dragging it into the active Sidebar or through the context menu).
Unlike third-party solutions, the “tag cloud” has minimal settings, prompting the webmaster to set a name for the title and mark the taxonomy output (in addition to tags, categories and custom data types will be shown).
The widget code itself, more precisely its “wp_tag_cloud” function, is located in the base WordPress directories (wp-includes), so editing the source is not recommended. But we can use another way to fine-tune the widget.
Tag Cloud settings
To make changes, you can create a separate function indicating the required parameters for a standard widget, or , and place a “label cloud” through a text widget.
I liked the method through the “Text” widget more, and my version took the following code:
Now in more detail about the function parameters that can be used to display labels:
- smallest – minimum font size for less popular publications;
- largest – maximum font size for the most popular publications;
- unit – unit of measurement for font size, can take the following values: pt, px, %;
- number – number of labels to display (default 45);
- format – format for displaying links: flat (separated by a space – by default), list – UL list, array – like an array for PHP;
- separator – value of the separator between labels (default – space);
- orderby – sorting settings: name – alphabetically (default), count – by quantity;
- order – sort order: ascending – ASC (default), descending – DESC, random – RAND;
- exclude – tags that should be excluded from display;
- include – labels that must be displayed.
Instead of an afterword
Thus, by editing the PHP code in the text widget, you can achieve the desired appearance for the “label cloud”. Now knowing the parameters, we see that the example I gave will display 30 labels with a font size of 9pt - 16pt, and sort them alphabetically (by name).
