WordPress 3D旋转标签云

2018-10-07 wordpress经验
  • 文章介绍
  • 快速入门
  • 评价&建议

这个3D标签云可不是N年前的那个Flash版的 wp-cumulus, 这个3D旋转标签云完全使用JS代码编写,很小只有几K,不用担心像垃圾Flash对资源的耗费。

具体效果看本文的侧边栏标签云。

下面以WordPress默认主题Twenty Fifteen为例,将这个炫酷的特效加到你的博客上。

一,添加生成3D效果的脚本

将下载的3d.js脚本放到Twenty Fifteen主题js目录中。

注:这个3D旋转标签云有两种效果的JS文件,我用的是第二种。

打开Twenty Fifteen主题 functions.php 模板文件,在大约252行,添加:

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

或者直接将下面代码加到主题header模板

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

二,添加样式

将下面的样式添加到主题style.css的最后即可:

  1. #tag_cloud-2 {
  2. position:relative;
  3.     height:340px;
  4. margin: 10px auto 0;
  5. }
  6. #tag_cloud-2 a {
  7.     position:absolute;
  8. color: #fff;
  9.     text-align: center;
  10. overflow: ellipsis;
  11.     whitewhite-space: nowrap;
  12. top:0px;
  13.     left:0px;
  14. padding: 3px 5px;
  15.     border: none;
  16. #tag_cloud-2 a:hover {
  17. background: #d02f53;
  18.     display: block;
  19. #tag_cloud-2 a:nth-child(n) {
  20. background: #666;
  21.     border-radius: 3px;
  22. display: inline-block;
  23.     line-height: 18px;
  24. margin: 0 10px 15px 0;
  25. }
  26. #tag_cloud-2 a:nth-child(2n) {
  27.     background: #d1a601;
  28. #tag_cloud-2 a:nth-child(3n) {
  29. background: #286c4a;
  30. }
  31. #tag_cloud-2 a:nth-child(5n) {
  32.     background: #518ab2;
  33. #tag_cloud-2 a:nth-child(4n) {
  34. background: #c91d13;
  35. }

三、修改对应选择器名称

比较麻烦点的是,其中 #tag_cloud-2 需根据不同情况加以修改,比如查看标签云小工具的网页源代码显示的是:

  1. <aside id=”tag_cloud-3″ class=”widget widget_tag_cloud”>
  2. class=”widget-title”>标签</h2>

你就需要将 #tag_cloud-2改为#tag_cloud-3,同时将3d.js中的tag_cloud-2也改为tag_cloud-3.

这个3D旋转标签云本身是支持低版本IE的,不过本例中配套的样式使用了CSS3特效,所以在低版本IE上标签背影色会不显示.

0 0

国内专业的主题开发团队倾力打造,在线购买后即可下载!

主题商店

主题猫WP建站,累计帮助1000+客户企业成功建站,为草根创业提供助力!

立刻开启你的建站之旅
QQ在线客服

服务热线

wordpress建站咨询