非插件免代码实现彩色标签云(纯静态)


非插件免代码实现彩色化云标签WordPress自定义云标签》提及了WordPress云标签云彩色设置,由于不需要彩色化应用,所以直接记录了网络上的一个非插件方案。一贯不喜欢在functions里面增加代码,而且实现彩色化还有更简单、加载更快速的非插件免代码方法——直接使用Html定义。


1.前提设置

在《WordPress自定义标签云》的方案三中提到的“直接用html语言代替wp_tag_cloud”是必须的前提。
比如用:

<div class=”sidelist”>
<h2>Tag</h2>
<ul>
<a href=’https://www.enkoo.net/tag/host’ class=’tag-link-18′ title=’主机’ style=’font-size:14pt;’>主机</a>
<a href=’https://www.enkoo.net/tag/internet’ class=’tag-link-19′ title=’互联网’ style=’font-size:18pt;’>互联网</a>
<a href=’https://www.enkoo.net/tag/portable’ class=’tag-link-20′ title=’便携版软件’ style=’font-size:14pt;’>便携版</a>
</ul>
</div>

这样的代码完全替换主题中的wp_tag_cloud,这些代码可以通过查看网页源代码直接复制。
为何这样做,这样做有什么意义已经说过,不再赘述。


2.增加色彩

非常简单,只需要根据自己需要增加一个类似color:#c50000;的颜色html代码即可。
比如用:

<a href=’https://www.enkoo.net/tag/host’ class=’tag-link-18′ title=’主机’ style=”color:#c50000; font-size: 14pt;” title=”主机” href=”https://www.enkoo.net/tag/host”>主机</a>
<a href=’https://www.enkoo.net/tag/internet’ class=’tag-link-19′ title=’互联网’ style=”color:#008000; font-size: 18pt;” title=”互联网” href=”https://www.enkoo.net/tag/internet”>互联网</a>
<a href=’https://www.enkoo.net/tag/portable’ class=’tag-link-20′ title=’便携版软件’ style=”color:#fbc958; font-size: 14pt;” title=”便携版软件” href=”https://www.enkoo.net/tag/portable”>便携版</a>

实现效果:

彩色标签云


这样做的好处:

  1. 避免使用插件或者是functions加载,优化WordPress代码;
  2. 直接使用HTML代码大量减少数据库查询,加速WordPress;
  3. 完全自定义色彩。