Nana主题如何添加WordPress 3D旋转彩色标签云

 懿古今   2016-10-15 09:13:12 更新  技术文档

WordPress免费响应式主题Nana自身集成的是彩色标签云,不过总有一些博主问到如何把这个WordPress彩色标签云改为WordPress 3D旋转彩色标签云。所以今天就跟大家分享一下Nana主题如何添加WordPress 3D旋转彩色标签云。

Nana主题如何添加WordPress 3D旋转彩色标签云

PS:由于Nana主题集成的彩色云会跟这个3D旋转彩色标签云有所冲突,会导致这个3D旋转彩色标签云色彩非常难看,所以必须二选一,想要3D旋转彩色标签云就必须删除这个主题默认的彩色标签云。

Nana主题添加WordPress 3D旋转彩色标签云方法:

方法一:文件替换法,适合Nana主题文件未修改过

1、下载Nana主题添加WordPress 3D旋转彩色标签云所需文件压缩包,并解压得到4个文件,分别是functions.php、style.css、widgets.php和3dtag.js文件。

2、分别将解压所得的functions.php和style.css文件替换Nana主题文件中的functions.php和style.css文件;widgets.php文件替换Nana\inc\functions\目录下的widgets.php文件;3dtag.js文件拷贝到Nana\js\目录下。

至此,Nana主题已经成功添加了WordPress 3D旋转彩色标签云到小工具中。我们想要使用这个3D旋转彩色标签云时,只需要登录后台 - 外观 - 小工具,找到“主题 3D标签云”,然后添加到相应侧边栏即可(可以同时添加到首页和文章页侧边栏)。

方法二:自行折腾法,适合Nana主题文件已被修改过

1、Nana主题中的functions.php文件,找到以下彩色标签云代码并删除,大概在471至483行。

  1. // 彩色标签云
  2. function colorCloud($text) {
  3.     $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
  4.     return $text;
  5. }
  6. function colorCloudCallback($matches) {
  7.     $text = $matches[1];
  8.     $color = dechex(rand(0,16777215));
  9.     $pattern = '/style=(\'|\")(.*)(\'|\")/i';
  10.     $text = preg_replace($pattern, "style=\"color:#{$color};$2;\""$text);
  11.     return "<a $text>";
  12. }
  13. add_filter('wp_tag_cloud', 'colorCloud', 1);

2、下载3dtag.js文件到Nana主题JS文件目录下(Nana\js\)。

3、打开Nana\inc\functions\widgets.php文件,在第一个<?php下方添加以下代码:

  1. // 3D标签云
  2. class cx_tag_cloud extends WP_Widget {
  3.      function cx_tag_cloud() {
  4.         $widget_ops = array('description' => '可实现3D特效');
  5.         $this->WP_Widget('cx_tag_cloud', '主题&nbsp;&nbsp;3D标签云', $widget_ops);
  6.      }
  7.      function widget($args$instance) {
  8.         extract($args);
  9.         $title = apply_filters( 'widget_title', $instance['title'] );
  10.         echo $before_widget;
  11.         if ( ! empty$title ) )
  12.         echo $before_title . $title . $after_title;
  13.         $number = strip_tags($instance['number']) ? absint( $instance['number'] ) : 20;
  14. ?>
  15.     <div id="tag_cloud_widget">
  16.     <?php wp_tag_cloud( array ( 'smallest' => '14', 'largest' => 14, 'unit' => 'px', 'order' => 'RAND', 'number' => $number ) ); ?>
  17.     <div class="clear"></div>
  18.     <?php wp_enqueue_script( '3dtag.min', get_template_directory_uri() . '/js/3dtag.js', array(), '', false ); ?>
  19. </div>
  20. <?php
  21.     echo $after_widget;
  22.     }
  23.     function update( $new_instance$old_instance ) {
  24.         if (!isset($new_instance['submit'])) {
  25.             return false;
  26.         }
  27.             $instance = $old_instance;
  28.             $instance = array();
  29.             $instance['title'] = strip_tags$new_instance['title'] );
  30.             $instance['number'] = strip_tags($new_instance['number']);
  31.             return $instance;
  32.         }
  33.     function form($instance) {
  34.         if ( isset( $instance[ 'title' ] ) ) {
  35.             $title = $instance[ 'title' ];
  36.         }
  37.         else {
  38.             $title = '3D标签云';
  39.         }
  40.         global $wpdb;
  41.         $instance = wp_parse_args((array$instancearray('number' => '20'));
  42.         $number = strip_tags($instance['number']);
  43. ?>
  44.     <p><label for="<?php echo $this->get_field_id( 'title' ); ?>">标题:</label>
  45.     <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" /></p>
  46.     <p><label for="<?php echo $this->get_field_id('number'); ?>">显示数量:</label>
  47.     <input id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>
  48.     <input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" />
  49. <?php }
  50. }
  51. add_action( 'widgets_init', create_function( '', 'register_widget( "cx_tag_cloud" );' ) );

4、打开Nana主题的style.css文件,在最后面添加以下代码:

  1. /** 3D标签 **/
  2. #tag_cloud_widget{position:relative;width:240px;height:240px;margin:10px auto 10px}
  3. #tag_cloud_widget a{position:absolute;color:#fff;text-align:center;text-overflow:ellipsis;whitewhite-space:nowrap;top:0;left:0;padding:3px 5px;box-shadow:0 1px 1px rgba(0,0,0,0.08)}
  4. #tag_cloud_widget a:hover{background:#d02f53;display:block}
  5. #tag_cloud_widget a:nth-child(n){background:#666;border-radius:3px;display:inline-block;line-height:18px;margin:0 10px 15px 0}
  6. #tag_cloud_widget a:nth-child(2n){background:#d1a601}
  7. #tag_cloud_widget a:nth-child(3n){background:#286c4a}
  8. #tag_cloud_widget a:nth-child(5n){background:#518ab2}
  9. #tag_cloud_widget a:nth-child(4n){background:#c91d13}
  10. #tag_cloud_widget a{line-height:15px;background:#999}

至此,Nana主题已经成功添加了WordPress 3D旋转彩色标签云到小工具中。我们想要使用这个3D旋转彩色标签云时,只需要登录后台 - 外观 - 小工具,找到“主题 3D标签云”,然后添加到相应侧边栏即可(可以同时添加到首页和文章页侧边栏)。

重要声明:本文所涉及到的代码均来源于网络上分享的知更鸟begin主题破解版,原则上版权属于知更鸟大神,希望大家喝水之余不要忘了挖井人哦。

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

你可能感兴趣的文章

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

发表评论

  1. 橘子书
    橘子书  @回复

    [呲牙] 不搞这个花俏

  2. 摩天之星
    摩天之星 @回复

    好,很详细

  3. 我爱动感单车网
    我爱动感单车网 @回复

    [偷笑] 我不喜欢3D效果的标签云,看着酷炫,但是不利于查找(然并卵)!

  4. Koolight
    Koolight @回复

    只怪图样图森破,早些时候写文章没有贴标签的好习惯,导致现在都没有标签可展示,唉!

    • 我爱动感单车网
      我爱动感单车网2016-09-24 16:37  回复

      @Koolight[呲牙] 现在补上以及加上也不迟呀,其实我博客的标签也是博客上线几个月后才补上的,原来也是一个都没有!

    • 懿古今
      懿古今2016-09-25 12:19  回复

      @Koolight我对于标签也不太懂,不过每篇文章都会弄一两个标签,就好比让文章归类一样,感觉还行

  5. 阳光
    阳光 @回复

    太赞了,收藏了