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

 懿古今   2015-09-18 08:18:51 发布  技术文档

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

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

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。

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

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旋转标签云。

本文地址：https://www.yigujin.cn/465.html

你可能感兴趣的文章

文章标签： ,  
版权声明：本文为原创文章，版权归 懿古今 所有，欢迎分享本文，转载请保留出处！发布此文是出于传递更多信息之目的，若有来源标注错误或侵犯了您的合法权益，请发邮件至[email protected]，确认后马上更正、删除，谢谢！

文件下载

boke112导航_独立博客导航平台

 3d.js下载

发表评论

  1. 守心斋
    守心斋 @回复
    发表于2015-09-18 11:32  沙发

    这个效果好看

    • 懿古今
      懿古今2015-09-18 13:22  回复

      @守心斋比起默认的效果好很多，不过我就懒得显示在首页上

  2. 主宰者博客
    主宰者博客 @回复
    发表于2015-09-18 12:52  板凳

    好高深的代码 [抓狂]

  3. 中国历史
    中国历史 @回复
    发表于2015-09-18 14:19  地板

    我也想用，但我的是2012模板

    • 懿古今
      懿古今2015-09-18 15:22  回复

      @中国历史方法是一样的，应该是WordPress都可以用，你可以折腾试试

  4. 肉牛养殖
    肉牛养殖 @回复
    发表于2015-09-18 15:09  4楼

    好看，这个会影响网站打开速度不？

    • 懿古今
      懿古今2015-09-18 15:22  回复

      @肉牛养殖这个需要引用一个JS文件，不过文件很小，影响不大

  5. 吃过没｜chiguomei.cn
    吃过没｜chiguomei.cn @回复
    发表于2015-09-19 01:02  5楼

    不是这个主题的是不是同样的道理

  6. 飞越无限
    飞越无限 @回复
    发表于2015-09-25 14:10  6楼

    好，博主威武，这教程比较详细。之前知更鸟大湿的硬是没看明白从哪里改文件。（知道自己这方面能力不行哈,{主要不是搞前端开发的哈}路过的就不要喷我）。虽然现在对这功能不感兴趣了！但还是感谢博主亲身试验，并发表详细步骤哈。互联网的伟大之处在于分享！《请看官不要理解分享就是无偿》

    • 懿古今
      懿古今2015-09-25 17:02  回复

      @飞越无限懂得修改主题的一般都能够根据知更鸟提供的进行修改，不过有时候还是要详细一点可能会更好

  7. 飞越无限
    飞越无限 @回复
    发表于2015-09-25 14:25  7楼

    推荐博主用下由 牧风（mufeng.me）开发，峰尚博客修复问题版的《优酷视频收藏 Youku Videos 1.2.1》,个人感觉页面效果和播放效果相当棒，比知更鸟大湿的【视频】页面，直白的文章插入视频效果好多了。
    效果地址：http://www.blhere.com/videos
    PS:更期待博主能调整控制下视频播放窗口大小或者直接改成类似知更鸟的视频弹窗效果哈， [呲牙] （原版页面大小效果用户体验不太好）。

    • 懿古今
      懿古今2015-09-25 17:06  回复

      @飞越无限刚才体验了一下给出的效果地址的视频，感觉手机端的效果很普通。其实最关键是大部分人一年到头都分享不到几个视频，所以懒得折腾，欢迎大家自行折腾，有好的方法也可以整合进主题中，期待你们的分享。

      • 飞越无限
        飞越无限2015-09-25 21:00  回复

        @懿古今再推荐你个导航悬浮效果，感觉比较人性化，正常往下浏览不显示，如果显示的话毕竟会占用屏幕视野，影响体验；但如果鼠标滑轮向上，导航条悬浮显示。
        地址：https://fatesinger.com

        • 懿古今
          懿古今2015-09-26 22:18  回复

          @飞越无限刚才特意跑去试了一下，确实不错，不过我还是比较喜欢知更鸟的折腾顶部样式，等下次想折腾了再研究研究，谢谢告知。

  8. 残阳
    残阳 @回复
    发表于2015-10-09 00:10  8楼

    可惜没用你的主题啊，要自己琢磨了

  9. 明月登楼的博客
    明月登楼的博客 @回复
    发表于2015-10-27 01:47  9楼

    一直不甘心的折腾了N次后，都没有成功，唉！我还是放弃吧！

  10. 你爱屋博客
    你爱屋博客 @回复
    发表于2016-02-23 02:00  10楼

    看着好看，又感觉很麻烦。。难搞

  11. 李海
    李海 @回复
    发表于2016-03-19 23:33  11楼

    下载链接失效了！请博主重新分享一下！

    • 懿古今
      懿古今2016-03-20 08:51  回复

      @李海[疑问] 经测试下载链接正常，是百度云盘的地址

  12. 阆苑博客
    阆苑博客 @回复
    发表于2016-07-27 19:48  12楼

    这个功能很炫酷，不过唯一的缺点是不能所有的页面都添加，百度搜索“WordPress不同的页面均可以添加3D旋转标签云方法”，实际上还是用的鸟叔的技术，供大家参考