WordPress主题制作Tags模板彩色标签云代码-欲思博客

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>&raquo;</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页面啦。

WordPress主题制作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模板彩色标签云代码

喜欢(2) 打赏