wordpress中3D标签云的制作.下

重庆陈江林SEO分享:上一篇文章介绍了3D标签云的源代码,接下来介绍如何将源代码添加到WordPress,具体步骤如下:

1、先下载JS+CSS文件,没有下载可以到《wordpress中3D标签云的制作.上》下载3D标签云的源代码;

2、在WordPress程序中添加3D标签云,需要用到miaov.js和miaov_style.css两个文件,本3D标签云使用JS+CSS来控制显示的。使用FTP工具将miaov.js和miaov_style.css放到网站主题的JS、CSS文件夹中,主题没有JS和CSS文件夹的可以自己创建,你也可以放到别的地方,到时候修改相应的调用地址就行;

3、进入网站后台——外观——编辑——顶部 (header.php)文件,在“head”和“/head”之间加入以下代码,之后更新文件:

<link rel="stylesheet" type="text/css" href="http://www.chenjianglin.cn/wp-content/themes/Lonely1.1/css/miaov_style.css" />

bqy102

PS:href=””中的地址根据你存放CSS文件修改,我是存放在主题下的CSS文件中,和下载的index.html静态网站的调用有点区别。

4、接下来就是调用标签云代码和JS文件,将以下代码添加到需要显示3D标签云的地方,由于本人使用的主题不能修改侧边栏,为了实验效果放在了底部 (footer.php)文件:

<div id="div1">
<?php wp_tag_cloud("number=50&smallest=6&largest=6&unit=px"); ?>
</div>
<script src='http://www.chenjianglin.cn/wp-content/themes/Lonely1.1/js/miaov.js' language='javascript'></script>

bqy103

5、添加到以上代码后更新文件,刷新网站3D标签云就出来了,效果如下:

3Dbqy

注意事项:
1、如果有标签显示,但是不是3D显示,那证明调用JS和CSS的地址有错,导致无法显示3D效果;
2、如需要修改3D标签云的源代码,可以使用DW软件打开index.html、miaov.js、miaov_style.css源文件;
3、miaov.js文件中的第一句“var radius = 150;”是控制3D标签云的半径,大小可以修改里面的数字;
4、如果不懂代码其他的就不要随便去修改源代码,要不然会出现错误哟;
5、有不懂得可以在网站留言,收到后重庆陈江林会在第一时间给你解决的方案。

wordpress中3D标签云的制作.下》有3个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注