wordpress标签云

Once you’ve defined a great set of tags for your WordPress posts (or pages), you’ll want to display a tag cloud from somewhere in your template. This is normally achieved using the wp_tag_cloud() or wp_generate_tag_cloud() functions which do the hard work for you:

为WordPress帖子( 或页面 )定义了一套不错的标签后,您将希望在模板中的某个位置显示标签云。 通常使用wp_tag_cloud()或wp_generate_tag_cloud()函数可为您完成辛苦的工作:

<a href="http://www.mysite.com/tag/word" class="tag-link-7" title="1 topic" style="font-size: 8pt;">word</a>
<a href="http://www.mysite.com/tag/tag" class="tag-link-5" title="2 topics" style="font-size: 14.3pt;">tag</a>
<a href="http://www.mysite.com/tag/phrase" class="tag-link-6" title="4 topics" style="font-size: 22pt;">phrase</a>
<a href="http://www.mysite.com/tag/subject" class="tag-link-4" title="1 topic" style="font-size: 8pt;">subject</a>

Perhaps you’re happy with that. I’m not…

也许您对此感到满意。 我不是…

  1. Inline styles? Didn’t we abandon those in 1998?内联样式? 我们不是在1998年放弃了这些吗?
  2. The classes are pointless. I’ll probably never need to style an individual tag and, even if I do, referencing it by ID is fragile.这些类是毫无意义的。 我可能永远不需要设置单个标签的样式,即使我这样做,通过ID引用它也很脆弱。
  3. I don’t need the fully-qualified URL.我不需要完全限定的URL。

wp_tag_cloud() offers several options but I want more control! As well as addressing the points above, I’d like to assign five or six classes to tags depending on their popularity, e.g. ‘tagged1’ for the least-used tag through to ‘tagged5’ for the most used.

wp_tag_cloud()提供了几个选项,但我想获得更多控制权! 除了解决上述问题外,我还要根据标签的受欢迎程度为标签分配五到六个类别,例如,“ tagged1”(用于最少使用的标签)到“ tagged5”(用于最常用的标签)。

Let’s write a PHP function which returns a customized tag cloud. It can be placed in your theme’s functions.php file (wp-content/themes/<themename>/functions.php) or a plugin.

让我们编写一个PHP函数,该函数返回定制的标签云。 可以将其放在主题的functions.php文件(wp-content / themes / <themename> /functions.php)或插件中。

First, we have our function name which accepts an array of named arguments and sets defaults:

首先,我们有一个函数名,该函数名接受命名参数数组并设置默认值:

// generate tag cloud
function My_TagCloud($params = array()) {
extract(shortcode_atts(array(
'orderby' => 'name',        // sort by name or count
'order' => 'ASC',       // in ASCending or DESCending order
'number' => '',         // limit the number of tags
'wrapper' => '',        // a tag wrapped around tag links, e.g. li
'sizeclass' => 'tagged',    // the tag class name
'sizemin' => 1,           // the smallest number applied to the tag class
'sizemax' => 5            // the largest number applied to the tab class
), $params));

We now initialize $ret, our returned HTML, and $min and $max — the minimum and maximum number of times a tag is used:

现在,我们初始化$ret ,返回HTML以及$min$max -使用标签的最小次数和最大次数:

// initialize
$ret = '';
$min = 9999999; $max = 0;

The WordPress get_tags() function is now called. It returns an array of tag objects:

WordPress的get_tags()函数现在被调用。 它返回一个标签对象数组:

// fetch all WordPress tags
$tags = get_tags(array('orderby' => $orderby, 'order' => $order, 'number' => $number));

We now need to determine the the minimum and maximum number of times a tag is used in our site. The following loop sets $min and $max accordingly:

现在,我们需要确定在我们的网站中使用标签的最小和最大次数。 以下循环相应地设置$min$max

// get minimum and maximum number tag counts
foreach ($tags as $tag) {
$min = min($min, $tag->count);
$max = max($max, $tag->count);
}

We can now create our custom tag cloud HTML. We need to loop through all tags a second time and fetch the URL and the link title — a message indicating how many articles use that tag:

现在,我们可以创建自定义标签云HTML。 我们需要第二次遍历所有标签,并获取URL和链接标题-一条消息,指示有多少文章使用该标签:

// generate tag list
foreach ($tags as $tag) {
$url = get_tag_link($tag->term_id);
$title = $tag->count . ' article' . ($tag->count == 1 ? '' : 's');

Now for the tricky bit. By default, we want to assign a class ‘tagged1’ for the least-used tag through to ‘tagged5’ for the most used (the class name and numbers can be overridden by setting sizeclass, sizemin and sizemax parameters when calling the function).

现在为难点。 默认情况下,我们要为使用最少的标记分配一个类'tagged1'到为使用最多的标记分配一个'tagged5'(可以通过在调用函数时设置sizeclasssizeminsizemax参数来覆盖类名和数字)。

We know the minimum and maximum number of times a tag can be used so a little math can determine the class name for us. However, the equation would cause a divide by zero error if each tag was used, say, only once. In that situation, we set the class to just $sizeclass:

我们知道标签可以使用的最小和最大次数,因此,通过一点数学就可以确定我们的类名称。 但是,如果每个标签仅使用一次,则该方程将导致零除误差。 在这种情况下,我们将类设置为$sizeclass

if ($max > $min) {
$class = $sizeclass . floor((($tag->count - $min) / ($max - $min)) * ($sizemax - $sizemin) + $sizemin);
}
else {
$class = $sizeclass;
}

We now have enough information to create the HTML for our single tag and end the loop:

现在,我们有足够的信息来为我们的单个标记创建HTML并结束循环:

$ret .=
($wrapper ? "<$wrapper>" : '') .
"<a href="$url" class="$class" title="$title">{$tag->name}</a>" .
($wrapper ? "</$wrapper>" : '');
}

Finally, we remove the blog domain URL from $ret, return the value and complete the function block:

最后,我们从$ret删除博客域URL,返回值并完成功能块:

return str_replace(get_bloginfo('url'), '', $ret);
}

The function can be called in any theme file using My_TagCloud();. Arguments can be passed as an associative array, e.g. My_TagCloud(array('orderby'=>'count','order'=>'DESC'));. However, we could also permit content editors to add a tag cloud using a WordPress shortcode, e.g.

可以使用My_TagCloud();在任何主题文件中调用该函数My_TagCloud(); 。 参数可以作为关联数组传递,例如My_TagCloud(array('orderby'=>'count','order'=>'DESC')); 。 但是,我们也可以允许内容编辑者使用WordPress短代码添加标签云,例如

// enable [tagcloud] shortcode
add_shortcode('tagcloud', 'My_TagCloud');

In the following example we’ll create a tag cloud within an unordered list:

在以下示例中,我们将在无序列表中创建标签云:

$tags = OW_Tags(array('wrapper' => 'li'));
if ($tags) {
echo "<h2>Tags</h2>n<ul class="tagcloud">$tags</ul>n";
}

This produces far tidier HTML code:

这会产生更整齐HTML代码:

<h2>Tags</h2>
<ul class="tagcloud">
<li><a href="/tag/word" class="tagged1" title="1 article">word</a></li>
<li><a href="/tag/tag" class="tagged2" title="2 articles">tag</a></li>
<li><a href="/tag/phrase" class="tagged5" title="4 articles">phrase</a></li>
<li><a href="/tag/subject" class="tagged1" title="1 article">subject</a></li>
</ul>

which is easier to style and maintain CSS:

这更易于样式化和维护CSS:

ul.tagcloud, ul.tagcloud li
{
font-size: 1em;
list-style-type: none;
padding: 0;
margin: 0;
}
ul.tagcloud li
{
display: inline;
}
ul.tagcloud a
{
text-decoration: none;
padding: 3px 4px;
}
a.tagged1 { font-size: 0.60em; }
a.tagged2 { font-size: 0.80em; }
a.tagged3 { font-size: 1.00em; }
a.tagged4 { font-size: 1.20em; }
a.tagged5 { font-size: 1.40em; }

I hope you find it useful. Please use and adapt the code however you like in your own WordPress projects.

希望对你有帮助。 请在您自己的WordPress项目中使用和修改您喜欢的代码。

翻译自: https://www.sitepoint.com/better-wordpress-tag-cloud/

wordpress标签云

wordpress标签云_如何在WordPress中建立更好的标签云相关推荐

  1. django 传递中文_如何在Django中建立消息传递状态

    django 传递中文 by Ogundipe Samuel 由Ogundipe Samuel 如何在Django中建立消息传递状态 (How to Build a Message Delivery ...

  2. wordpress图像大小_如何在WordPress中添加图像积分(逐步操作)

    wordpress图像大小 Recently, some of our readers asked us about how to properly add image credits in Word ...

  3. wordpress添加媒体_如何在WordPress中添加新帖子并利用所有功能

    wordpress添加媒体 Are you trying to create a new post in WordPress? Do you want to learn about all the W ...

  4. wordpress添加媒体_如何在WordPress中添加精选内容滑块

    wordpress添加媒体 Do you want to add a featured content slider like Yahoo or ESPN? Many popular sites us ...

  5. wordpress添加媒体_如何在WordPress中添加jQuery FAQ手风琴

    wordpress添加媒体 Recently one of our users asked us if there was a way for them to add a FAQ accordion ...

  6. wordpress谷歌字体_如何在WordPress中添加Google Maps

    wordpress谷歌字体 You can add all kind of content into your WordPress site. At WPBeginner we have shown ...

  7. wordpress添加媒体_如何在WordPress中添加社交媒体共享计数小部件

    wordpress添加媒体 Earlier on this blog, we created a Social Media Cheat Sheet for WordPress, but that on ...

  8. wordpress标题设置_如何在WordPress中的帖子标题中添加赞助的帖子前缀

    wordpress标题设置 Often you see bloggers publish sponsored posts on their blog. Recently one of our user ...

  9. wordpress默认密码_如何在WordPress中为新用户设置默认管理员配色方案

    wordpress默认密码 One of the most talked about feature of WordPress 3.8 is the new admin interface. It i ...

最新文章

  1. MonoRail学习笔记一:一个小例子
  2. MVC4 下DropDownList使用方法(转)
  3. 2015年第六届蓝桥杯 - 省赛 - C/C++大学B组 - F. 加法变乘法
  4. 【BZOJ1042】硬币购物(动态规划,容斥原理)
  5. mysql 5.1升级5.6_mysql 5.1.71升级到5.6.30
  6. php 连接oracle乱码,PHP查询oracle数据显示乱码问题
  7. 好东西,将你的英文版TFS变为中文版?:Visual Studio 2005 Team Foundation Server 语言更改包...
  8. 二分查找算法-java
  9. 玩转群晖NAS套件系列一:cloud sync套件的安装与使用保姆级教程!
  10. 服务器XP系统打印机共享设置,小编调解xp系统打印机共享设置和使用的详细教程...
  11. 第二门课 改善深层神经网络:超参数调试、正则化以及优化(Improving Deep Neural Networks:Hyperparameter tuning…)
  12. 移动端H5页面必用代码
  13. C++ sort排序函数用法
  14. 小于等于、 大于等于Mybatis 、oracle
  15. 基于python的对比度增强(线性变换、直方图正规化、直方图均衡化、CLAHE)
  16. 计算机专业高级工程师考哪些专业,高级工程师职称考试项目有哪些
  17. css3 animation 实现帧动画
  18. 运行阶段及面向对象技巧
  19. Visual Studio 2013 下载地址 V12各种版本官方下载网址
  20. 51单片机之外部中断方式 ——— INT0 中断

热门文章

  1. 使用pdf.js实现pdf文件的在线预览(有码源)
  2. Quested V2108录音室监听音箱评测
  3. UML图绘制(三)-----活动图的画法 一
  4. Win32程序标准开发流程 .
  5. 关于剪报插件在新版本Chrome浏览器下不能使用的解决方案(最新)
  6. 【腾讯优测干货分享】使用多张图片做帧动画的性能优化 1
  7. 校园招聘攻略----硬件工程师基础问题(六)
  8. 彩票 量子计算机,科学家发明了能预测未来的量子计算机?且慢,它还不能预测彩票中奖号码...
  9. SAP天天学-教程(一)SAP公司简介
  10. java 随机数random