1、制作Tags模板
首先,我们要制作一个Tags模板,这里我们直接拿Tstyle 中的 page.php来直接修改。使用dreamweaver等编辑器打开page.php,在最顶部插入以下代码:
<?php /* Template Name: Tags */ ?>
上面的代码是用来表明这是一个模板文件。
接着,找到page.php中下面的文章内用调用标志代码:
<div id="page-cnt"><?php the_content(); ?></div>
用下面Tags的调用代码替代上面的代码:
<div id="page-cnt"> <?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中下面的代码:
<?php if (comments_open()) comments_template( '', true ); ?>
另存为 tags.php,这样一来,一个Tags模板就做好了,最终的代码如下:
<?php /* Template Name: Tags */ ?> <?php get_header(); ?> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div id="content"> <div></div> <div> <h2> <em><a title="回到首页" href="<?php bloginfo('home'); ?>">首页</a></em> <span>»</span> <em><?php the_title(); ?></em> </h2> <div id="post-<?php the_ID(); ?>"> <div id="page-cnt"> <?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=0&orderby=count&order=DESC');?> </div> </div> </div> <div></div> </div><!-- /content --> <?php endwhile; ?> <?php get_sidebar(); get_footer(); ?>
2、在style.css文件中添加CSS样式
这时候,我们需要添加css样式,在style.css文件后面添加以下的样式代码,标签的间距就会好看些。
#page-cnt.tags, #page-cnt.friends { height: 576px; padding: 6px 0 0; overflow: hidden; line-height: 30px; } #page-cnt.tags, #page-cnt.friends { height: auto; padding-top: 5px; overflow: visible; } .tags a { display: inline-block; margin: 0 4px; white-space: nowrap; }
3、添加彩色功能
打开主题中的functions.php文件,在最末端的 ?>前面添加下面的代码,就可以实现彩色标签云了:
; 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);
4、发布Tags页面
上传到Tstyle主题根目录,到后台新建一个页面,在右边的“页面属性”选择Tags模板文件,不用填写任何内容,直接发布这个页面,就可以看到tags页面啦。
到这里为止,你就可以看到你的标签云页面啦。
注:侧边栏的标签云可以也使用下面的代码直接调用:
<?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=20');?>
WordPress 文章标签tags调用方法:
1、打开文章页模板single.php,在你需要显示Tags的地方,添加下面的代码:
<div id="article-tag"> <?php the_tags('<strong>标签:</strong> ', ' , ' , ''); ?> </div>
2、为了更好看些,打开你的CSS样式文件style.css,添加下面的CSS样式:
#article-tag { clear: both; border: 1px dotted #ccc; padding: 5px; margin-bottom: 5px; } #article-tag, #article-cnt #article-tag a { text-decoration: none; color: #666; } #article-cnt #article-tag a:hover { text-decoration: underline; }
未经允许不得转载:欲思博客 » WordPress主题制作Tags模板彩色标签云代码
评论1