WordPress免费响应式主题Nana自身集成的是彩色标签云,不过总有一些博主问到如何把这个WordPress彩色标签云改为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行。
- // 彩色标签云
- function colorCloud($text) {
- $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
- return $text;
- }
- function colorCloudCallback($matches) {
- $text = $matches[1];
- $color = dechex(rand(0,16777215));
- $pattern = '/style=(\'|\")(.*)(\'|\")/i';
- $text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);
- return "<a $text>";
- }
- add_filter('wp_tag_cloud', 'colorCloud', 1);
2、下载3dtag.js文件到Nana主题JS文件目录下(Nana\js\)。
3、打开Nana\inc\functions\widgets.php文件,在第一个<?php下方添加以下代码:
- // 3D标签云
- class cx_tag_cloud extends WP_Widget {
- function cx_tag_cloud() {
- $widget_ops = array('description' => '可实现3D特效');
- $this->WP_Widget('cx_tag_cloud', '主题 3D标签云', $widget_ops);
- }
- function widget($args, $instance) {
- extract($args);
- $title = apply_filters( 'widget_title', $instance['title'] );
- echo $before_widget;
- if ( ! empty( $title ) )
- echo $before_title . $title . $after_title;
- $number = strip_tags($instance['number']) ? absint( $instance['number'] ) : 20;
- ?>
- <div id="tag_cloud_widget">
- <?php wp_tag_cloud( array ( 'smallest' => '14', 'largest' => 14, 'unit' => 'px', 'order' => 'RAND', 'number' => $number ) ); ?>
- <div class="clear"></div>
- <?php wp_enqueue_script( '3dtag.min', get_template_directory_uri() . '/js/3dtag.js', array(), '', false ); ?>
- </div>
- <?php
- echo $after_widget;
- }
- function update( $new_instance, $old_instance ) {
- if (!isset($new_instance['submit'])) {
- return false;
- }
- $instance = $old_instance;
- $instance = array();
- $instance['title'] = strip_tags( $new_instance['title'] );
- $instance['number'] = strip_tags($new_instance['number']);
- return $instance;
- }
- function form($instance) {
- if ( isset( $instance[ 'title' ] ) ) {
- $title = $instance[ 'title' ];
- }
- else {
- $title = '3D标签云';
- }
- global $wpdb;
- $instance = wp_parse_args((array) $instance, array('number' => '20'));
- $number = strip_tags($instance['number']);
- ?>
- <p><label for="<?php echo $this->get_field_id( 'title' ); ?>">标题:</label>
- <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>
- <p><label for="<?php echo $this->get_field_id('number'); ?>">显示数量:</label>
- <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>
- <input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" />
- <?php }
- }
- add_action( 'widgets_init', create_function( '', 'register_widget( "cx_tag_cloud" );' ) );
4、打开Nana主题的style.css文件,在最后面添加以下代码:
- /** 3D标签 **/
- #tag_cloud_widget{position:relative;width:240px;height:240px;margin:10px auto 10px}
- #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)}
- #tag_cloud_widget a:hover{background:#d02f53;display:block}
- #tag_cloud_widget a:nth-child(n){background:#666;border-radius:3px;display:inline-block;line-height:18px;margin:0 10px 15px 0}
- #tag_cloud_widget a:nth-child(2n){background:#d1a601}
- #tag_cloud_widget a:nth-child(3n){background:#286c4a}
- #tag_cloud_widget a:nth-child(5n){background:#518ab2}
- #tag_cloud_widget a:nth-child(4n){background:#c91d13}
- #tag_cloud_widget a{line-height:15px;background:#999}
至此,Nana主题已经成功添加了WordPress 3D旋转彩色标签云到小工具中。我们想要使用这个3D旋转彩色标签云时,只需要登录后台 - 外观 - 小工具,找到“主题 3D标签云”,然后添加到相应侧边栏即可(可以同时添加到首页和文章页侧边栏)。
重要声明:本文所涉及到的代码均来源于网络上分享的知更鸟begin主题破解版,原则上版权属于知更鸟大神,希望大家喝水之余不要忘了挖井人哦。
发表于2016-09-23 10:40 沙发
[呲牙] 不搞这个花俏
发表于2016-09-23 14:58 板凳
好,很详细
发表于2016-09-23 15:02 地板
[偷笑] 我不喜欢3D效果的标签云,看着酷炫,但是不利于查找(然并卵)!
@我爱动感单车网其实我也不喜欢,不过很多博主觉得比较酷炫,所以就顺便折腾分享给大家
发表于2016-09-23 19:35 4楼
只怪图样图森破,早些时候写文章没有贴标签的好习惯,导致现在都没有标签可展示,唉!
@Koolight[呲牙] 现在补上以及加上也不迟呀,其实我博客的标签也是博客上线几个月后才补上的,原来也是一个都没有!
@Koolight我对于标签也不太懂,不过每篇文章都会弄一两个标签,就好比让文章归类一样,感觉还行
发表于2017-10-20 15:06 5楼
太赞了,收藏了