Three主题如何添加3D旋转标签云

如果大家有关注知更鸟的博主们都知道，前阵子知更鸟大神分享了一个WordPress添加3D旋转标签云的JS文件和具体的添加办法，所以今天趁着有空我也把这个3D旋转标签云添加到Three主题中测试，现分享具体的操作步骤:

1、将下面的3d.js脚本下载放到Three主题js目录中，即Three\js。

下载地址

2、删除Three主题 functions.php 模板文件的彩色标签云代码，即删除473至485行。

3、打开Three主题 functions.php 模板文件，在大约260行，添加：

1. wp_enqueue_script( '3d', get_template_directory_uri() . '/js/3d.js' );

或者直接将下面代码加到主题header.php的34行上面。

1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/3d.js"></script>

4、登录WordPress后台》外观》小工具》添加“标签云”小工具到指定侧边栏（如首页侧边栏），然后鼠标对着侧边栏的这个标签云小工具右键》查看元素（360浏览器，其他应该差不多）》在浏览器最下方就可以看到这个小工具的名称为：tag_cloud-4。

5、将下面的样式添加到主题style.css的最后即可（PS：如果第3步得到的小工具名称不是4，而是其他数字，则修改CSS代码中相应的数字即可）：

1. /** 3D旋转标签云 **/

2. #tag_cloud-4 {

3. position:relative;

4. height:340px;

5. margin: 10px auto 0;

6. }

7. #tag_cloud-4 a {

8. position:absolute;

9. color: #fff;

10. text-align: center;

11. text-overflow: ellipsis;

12. whitewhite-space: nowrap;

13. top:0px;

14. left:0px;

15. padding: 3px 5px;

16. border: none;

17. }

18. #tag_cloud-4 a:hover {

19. background: #d02f53;

20. display: block;

21. }

22. #tag_cloud-4 a:nth-child(n) {

23. background: #666;

24. border-radius: 3px;

25. display: inline-block;

26. line-height: 18px;

27. margin: 0 10px 15px 0;

28. }

29. #tag_cloud-4 a:nth-child(2n) {

30. background: #d1a601;

31. }

32. #tag_cloud-4 a:nth-child(3n) {

33. background: #286c4a;

34. }

35. #tag_cloud-4 a:nth-child(5n) {

36. background: #518ab2;

37. }

38. #tag_cloud-4 a:nth-child(4n) {

39. background: #c91d13;

40. }

6、将3d.js文件19行的tag_cloud-2也改为tag_cloud-4即可（PS：如果第3步得到的小工具名称不是4，而是其他数字，则修改CSS代码中相应的数字即可）。

至此，Three主题已经成功添加了3D旋转标签云。不过这个只能添加到首页侧边栏或日志页侧边栏，如果想让这个标签云同时出现在首页和日志页侧边栏，我们还需要添加一个公共侧边栏，步骤如下：

1、打开Three主题 functions.php 模板文件，在48行后面添加以下代码：

1. register_sidebar( array(

2. 'name' => '公共侧边栏',

3. 'id' => 'sidebar-6',

4. 'description' => '整站小工具',

5. 'before_widget' => '<aside id="%1$s" class="widget %2$s">',

6. 'after_widget' => '<div class="clear"></div></aside>',

7. 'before_title' => '<h3 class="widget-title"><span class="cat">',

8. 'after_title' => '</span></h3>',

9. ) );

2、打开Three主题 sidebar.php 模板文件，在13行后面添加以下代码：

1. <?php dynamic_sidebar( 'sidebar-6' ); ?>

3、将刚才在后台》外观》小工具添加的“标签云”拖到“公共侧边栏”即可实现整站显示3D旋转标签云。