WordPress 制作彩色标签云页面

林继 WordPress 2,385 共写了930个字 (2010-12-23 23:00:56) 没有评论 打印 扫描二维码 百度已收录

注意:千万不要使用 txt记事本来编辑php文件,否则出现任何问题,请自己负责,此外,建议先做好文件备份。
1、制作Tags模板
首先,我们要制作一个Tags模板,这里我们直接拿Tstyle 中的 page.php来直接修改。使用dreamweaver等编辑器打开page.php,在最顶部插入以下代码:

  1. <!--?php /* Template Name: Tags */ ?-->

上面的代码是用来表明这是一个模板文件。
接着,找到page.php中下面的文章内用调用标志代码:

  1. <div id="page-cnt"><!--?php the_content(); ?--></div>

用下面Tags的调用代码替代上面的代码:

  1. <div id="page-cnt" class="tags"><!--?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=0&orderby=count&order=DESC');?--></div>

注:上面的代码中,smallest表示标签的最小字号,largest表示最大字号,unit=px表示字体使用像素单位,number=0表示显示所有标签,orderby=count表示按照标签所关联的文章数来排列,order=DESC表示降序排序(ASC表示升序排序,DESC表示降序排序)。
最后,去除评论判断功能,删除page.php中下面的代码:

  1. <!--?php if (comments_open()) comments_template( '', true ); ?-->

另存为 tags.php,这样一来,一个Tags模板就做好了,最终的代码如下:

  1. <!--?php /* Template Name: Tags */ ?-->
  2. <!--?php get_header(); ?-->
  3.  
  4. <!--?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?-->
  5. <div id="content">
  6. <div class="f-m">
  7. <h2><em><a title="回到首页" href="<?php bloginfo('home'); ?>">首页</a></em>
  8. <span class="cut">»</span>
  9. <em><!--?php the_title(); ?--></em></h2>
  10. <div id="post-<?php the_ID(); ?><p>" class="box">
  11. <div id="page-cnt" class="tags"><!--?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=0&orderby=count&order=DESC');?--></div>
  12. </div>
  13. </div>
  14. </div>
  15. <!-- /content -->
  16. <!--?php endwhile; ?-->
  17.  
  18. <!--?php 	get_sidebar(); 	get_footer(); ?-->


2、在style.css文件中添加CSS样式
这时候,我们需要添加css样式,在style.css文件后面添加以下的样式代码,标签的间距就会好看些。

  1. #page-cnt.tags,
  2. #page-cnt.friends { height: 576px; padding: 6px 0 0; overflow: hidden; line-height: 30px; }
  3. #page-cnt.tags,
  4. #page-cnt.friends { height: auto; padding-top: 5px; overflow: visible; }
  5. .tags a { display: inline-block; margin: 0 4px; white-space: nowrap; }

3、添加彩色功能
打开主题中的functions.php文件,在最末端的 ?>前面添加下面的代码,就可以实现彩色标签云了:

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

4、发布Tags页面
上传到Tstyle主题根目录,到后台新建一个页面,在右边的“页面属性”选择Tags模板文件,不用填写任何内容,直接发布这个页面,就可以看到tags页面啦。

WordPress 制作彩色标签云页面 2010 11 27 01387

WordPress 制作彩色标签云页面 2010 11 27 01388

到这里为止,你就可以看到你的标签云页面啦。
注:侧边栏的标签云可以也使用下面的代码直接调用:

  1. <!--?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=20');?-->

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

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

< >