Products
GG网络技术分享 2025-03-18 16:13 0
WordPress免费响应式主题Nana自身集成的是彩色标签云，不过总有一些博主问到如何把这个WordPress彩色标签云改为WordPress 3D旋转彩色标签云。所以今天就跟大家分享一下Nana主题如何添加WordPress 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 ( ! emptyempty( $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主题破解版，原则上版权属于知更鸟大神，希望大家喝水之余不要忘了挖井人哦。
原文地址：http://yigujin.wang/958.html
随着移动互联网的发展，现在手机端的流量占比越来越大，响应式主题由于兼容PC和移动端以及部署方便等优点也被广大站长使用接受，不过由于电脑和手机系统兼容性的问题，很多用户遇到视频播放的问题：在网站添加的视频在电脑上可以正常播放，一到手机上就无法显示。
电脑上一般都会安装flash控件，视频大多也是使用flash播放器来播放的，而手机端目前网页播放视频都是采用HTML5的视频标准来播放，是不支持flash的，所以添加的视频代码如果是基于flash来播放的话则在移动端就无法显示了。可见产生的原因其实和主题、wordpress本身是没有什么关系的。
目前主流浏览器（Firefox、chrome、IE9+、360、QQ、Edge等）都是支持HTML5的视频播放能力，所以添加视频可以直接使用HTML5标准来，比如在wordpress后台直接上传MP4格式的视频点击插入文章即可。如果是第三方的视频，比如腾讯视频、优酷等，可以在获取代码的时候获取通用代码，通用代码会自动匹配客户端设备支持情况来兼容显示视频。
Demand feedback
