WordPress 3D rotating tag cloud

This 3D tag cloud is not the flash version of WP cumulus n years ago. This 3D rotating tag cloud is completely written in JS code, which is very small and only a few kilos. There is no need to worry about the resource consumption of garbage flash.

See the specific effect of the sidebar tag cloud.

Take the default theme of WordPress as an example to add this cool special effect to your blog.

1、 Add script to generate 3D effect

Put the downloaded 3d.js script into the theme JS directory of “twenty fifth”.

Note: this 3D rotating tag cloud has two JS files, the second one I use.

Open the theme of twenty fifth functions.php Template file, in about 252 lines, add:

wp_ enqueue_ script( ‘3d’, get_ template_ directory_ uri() . ‘/js/3d.js’ );

Or add the following code directly to the topic header template

<script type=”text/javascript” src=”<?php bloginfo(‘template_ directory’); ?>/js/3d.js”></script>2、 Add style

Add the following style to the theme style.css Finally, you can:

#tag_ cloud-2 {position:relative;     height:340px;margin: 10px auto 0;}#tag_ cloud-2 a {     position:absolute;color: #fff;    text-align: center;overflow: ellipsis;    whitewhite-space: nowrap;top:0px;     left:0px;padding: 3px 5px;    border: none;#tag_ cloud-2 a:hover {background: #d02f53;    display: block;#tag_ cloud-2 a:nth-child(n) {background: #666;    border-radius: 3px;display: inline-block;    line-height: 18px;margin: 0 10px 15px 0;}#tag_ cloud-2 a:nth-child(2n) {    background: #d1a601;#tag_ cloud-2 a:nth-child(3n) {background: #286c4a;}#tag_ cloud-2 a:nth-child(5n) {    background: #518ab2;#tag_ cloud-2 a:nth-child(4n) {background: #c91d13;}3、 Modify the name of the corresponding selector

What’s more troublesome is that ᦇ tag_ Cloud-2 needs to be modified according to different situations. For example, the page source code of the tag cloud gadget shows:

<aside id=”tag_ cloud-3″ class=”widget widget_ tag_ cloud”>Class = &; widget title &; >label <& H2 >

You need to tag_ Cloud-2 changed to “tag”_ Cloud-3, and the tag in 3d.js_ Cloud-2 is also changed to tag_ cloud-3.

The 3D rotating label cloud itself supports low version ie, but the supporting style in this example uses CSS3 effect, so the back color of the label will not be displayed on low version ie

Related Article
how to automatically add tag links to the article

Today, I'd like to share a WordPress SEO optimization tip, which can realize the automatic addition of keyword tags in Read more

WordPress displays the registration time of the login user in the frontend

When using WordPress to build a website, some users want to display the user registration time in the frontend, but Read more

WordPress adds the number of SQL queries at the bottom

An excellent woodpress theme is definitely that the less SQL consulting is used, the better. How can we see how Read more

Some WordPress articles can be seen after comments / replies

If we want to hide part of the content of the article and need the user's comments and replies to Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image