WordPress主题制作Tags模板彩色标签云代码

WordPress 欲思 1评论

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页面啦。

QQ图片20131223074903

QQ图片20131223075009

到这里为止,你就可以看到你的标签云页面啦。

注:侧边栏的标签云可以也使用下面的代码直接调用:

<?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模板彩色标签云代码

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 你好 想问下 你的彩色标签是怎么做出来的?自己写的代码还是插件?
    nkcells2016-05-19 20:41 回复