タグクラウドをTwitter Bootstrapでシンプルな色でわかるものにする方法

はじめに

前回は、WordPress Bootstrap「WPBS」というテーマを紹介しました。このテーマには、TwitterBootstrapのLabelを使ったタグクラウドがありましたね。トピック数に応じて分かりやすく色が変わるスグレモノで、他のテーマでも使いたいと思ってしまいます（もちろん、このサイトでも）。

今回は、まさにこれを「WPBS」を参考にしてテーマTwenty Elevenに再現したいと思います。変更するファイルと必要なプラグインは、次のようになります。Bootstrapの導入はプラグインで行なっています。

• CSS → Enhancing CSS
• JavaScript (jQuery) → header.php Enhancing JavaScript
• PHP → functions.php
• Bootstrap → WordPress Twitter Bootstrap CSS(参考記事)

この記事では、320pressによるwordpress-bootstrapで使われているコードを、Twenty Elevenに導入する手順を説明しています。

参考サイト

» 320press/wordpress-bootstrap · GitHub

補足 テーマTwenty Eleven 1.3をカスタマイズしています。

追記: 2012-03-31

ライセンスについて調べきれていないところがありましたので、ここに追加します。
用いたコードはwordpress-bootstrapで使われているものであり、ライセンスがGPL(GNU General Public License v2.0), Apache License 2.0であることが以下より分かります。

wordpress-bootstrap style.css

[css highlight_lines="9,10"]
/*
Theme Name: wp-bootstrap
Theme URI: http://320press.com/wpbs
Description: A simple responsive theme based on twitter's bootstrap framework. Includes multiple page templates, two different sidebars and a theme options panel.
Version: 2.0
Author: 320press
Author URI: http://320press.com
Tags: black, white, one-column, two-columns, flexible-width, custom-background, custom-colors, custom-menu, full-width-template, theme-options
License: GNU General Public License v2.0 & Apache License 2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html http://www.apache.org/licenses/LICENSE-2.0
*/
[/css]

以上のライセンスを調べてみると、

GPL(GNU General Public License)

　…中略…
ライセンスの要点は３点。
１点目は「著作権表示を保持しなければならない＋無保証である」という事。

　…中略…
２点目は、「GPLライセンスのオープンソース・フリーソフトウェアは、誰でも自由に複製・改変・頒布することが許可されている」という事。

　…中略…
そして３点目。「GPLライセンスのソフトウェアやプログラムを使用した場合、その制作物もGPLライセンスで配布しなければならない」という、歪みねぇ制約。

ITキヲスク | GPLやMITやCCなど主要ライセンスの内容と意味のまとめ

Apache License 2.0
　…中略…
要点としては、

1. ユーザのソフトウェア使用/頒布/修正、派生版の頒布をすることを制限しない
2. 頒布される二次的著作物が同じライセンスで提供されたり、フリー/オープンソースソフトウェアとして頒布されることを要求しない
3. 要求するのは、ユーザーがそのソフトウェアに Apache License のコードが使われていることを知らせる文言を入れることだけ
4. コピーレフトライセンスと異なり、Apache License コードの二次創作物のユーザーには、フリーなライセンスが適用しなくても良い
5. ライセンスされたファイルそれぞれに元々ある著作権と特許権の記述はそのまま保持されなければならず、何らかの修正が施されている場合は、その旨を追加記述しなければならない

Apache License 2.0を勉強しよう! | NO AC.Milan, NO LIFE

とのことですので、（英語が苦手でして、原典の解釈を間違う可能性があり、以上の引用から判断します。）
著作権表示を保持することに加えて、引用したコードの箇所および修正についての言及を以下の各コード部分に新たに明記します。

また、今回ライセンスについて調べましたが、解釈が間違っている可能性もありますので、些細なことでも教えて頂ければ幸いです。

1. CSSとJavaScriptを導入する

Enhancing CSS, Enhancing JavaScriptを使います

2. jQueryをheaderから読み込ませる

header.phpにjQuery 1.7.1を読み込むコードを記述

3. PHP文の追加と見た目の確認

functions.phpを変更した後、見た目を確認します

1. CSSとJavaScriptを導入する

まずは、プラグインEnhancing CSS, Enhancing JavaScriptを導入します。これらは、CSS、JavaScriptを追加するプラグインです。

Enhancing CSSは過去の記事で説明しているので、そちらを参考にしてください。Enhancing JavaScriptの導入方法は、WordPress側で、プラグイン » 新規追加に移動し、"Enhancing JavaScript"で検索。いますぐインストールをクリックして、プラグインを有効化でOKです。

wordpress-bootstrapで使われているコードから、タグクラウドの部分をCSS、JavaScriptに追加します。外観 » 拡張CSSから/* Your style */以下に追加するCSSを記述します。

引用元: style.css 386〜416行目
修正: なし

拡張CSS

[css]
/* Your style */
/* widget styles */

#tag-cloud{
margin-bottom: 18px;
line-height: 160%;
}

/* for some reason the bs version currently available for download doesn't have this style */
.label{
text-transform: uppercase;
}

/* override standard link hover for the tag cloud widget */
#tag-cloud a:hover,
.tags a:hover{
color: #ffffff;
text-decoration: none;
}

#tag-cloud a{
white-space: pre;
text-transform: uppercase;
}
[/css]

続いて、外観 » 拡張JavaScriptから/* 拡張JavaScript */以下に追加するJavaScriptを記述します。特に、9〜18行目によって色分けがされています。
引用元: library/js/scripts.js 351〜387行目
修正: なし

拡張JavaScript

[javascript highlight_lines="9,10,11,12,13,14,15,16,17,18"]
/* 拡張JavaScript */
// add twitter bootstrap classes and color based on how many times tag is used
function addTwitterBSClass(thisObj) {
var title = $(thisObj).attr('title');
if (title) {
var titles = title.split(' ');
if (titles[0]) {
var num = parseInt(titles[0]);
if (num > 0)
$(thisObj).addClass('label');
if (num == 2)
$(thisObj).addClass('label label-info');
if (num > 2 && num < 4)
$(thisObj).addClass('label label-success');
if (num >= 5 && num < 10)
$(thisObj).addClass('label label-warning');
if (num >=10)
$(thisObj).addClass('label label-important');
}
}
else
$(thisObj).addClass('label');
return true;
}

// as the page loads, cal these scripts
$(document).ready(function() {

// modify tag cloud links to match up with twitter bootstrap
$("#tag-cloud a").each(function() {
addTwitterBSClass(this);
return true;
});

$("p.tags a").each(function() {
addTwitterBSClass(this);
return true;
});

}); /* end of as page load scripts */
[/javascript]

2. jQueryをheaderから読み込ませる

このタグクラウドの利用には、JavaScriptによりjQueryが必要となるのでheader.phpの<head>
タグ内部に次のコードを追加します。

header.phpへの追加

[php]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
[/php]

3. PHP文の追加と見た目の確認

通常のタグクラウドを改良する形でmy_widget_tag_cloud_args()が作られています。このコードをfunctions.phpに追加します。特に、7, 8行目の数字を変更することでフォントサイズを変更できます。6行目は、最小のタグ数を指定しています。0の場合は、すべてのタグを表示します。
引用元: functions.php 192〜224行目
修正: あり

修正前

[php num=6]
$args['number'] = 20; // show less tags
$args['largest'] = 9.75; // make largest and smallest the same - i don't like the varying font-size look
$args['smallest'] = 9.75;
[/php]

functions.phpへの追加

[php highlight_lines="6,7,8"]
/*********** update standard wp tag cloud widget so it looks better ************/

add_filter( 'widget_tag_cloud_args', 'my_widget_tag_cloud_args' );

function my_widget_tag_cloud_args( $args ) {
$args['number'] = 0; // show less tags
$args['largest'] = 11; // make largest and smallest the same - i don't like the varying font-size look
$args['smallest'] = 11;
$args['unit'] = 'px';
return $args;
}

// filter tag clould output so that it can be styled by CSS
function add_tag_class( $taglinks ) {
$tags = explode('</a>', $taglinks);
$regex = "#(.*tag-link[-])(.*)(' title.*)#e";
foreach( $tags as $tag ) {
$tagn[] = preg_replace($regex, "('$1$2 label tag-'.get_tag($2)->slug.'$3')", $tag );
}
$taglinks = implode('</a>', $tagn);
return $taglinks;
}

add_action('wp_tag_cloud', 'add_tag_class');

add_filter('wp_tag_cloud','wp_tag_cloud_filter', 10, 2);

function wp_tag_cloud_filter($return, $args)
{
return '<div id="tag-cloud">'.$return.'</div>';
}
[/php]

これで完了です。ウィジェットのタグクラウドが、次のようになっていることを確認してください。

先にも書きましたが、各コードの色分け・フォントサイズなどを変更することができます。この方法ではGoogle Chrome, Firefox, Safari（すべてMac）で、うまく表示されることを確認しました。

お気づきの方もいらっしゃると思います。はい、このサイトのテーマでも導入しています。しかし、今のところFirefox（Mac）以外ではうまく表示できていません……おそらくテーマやプラグインが競合しているはずなんですが、いまだ解決できていません。

少し試してみたら、Google Chrome, Firefox, Safari（すべてMac）で、うまく表示されるようになりました。その方法を書いておきます。うまくいかないテーマがあれば、まずはこれを試してみてください。

次のコードを、header.phpのwp_head()よりも上に記述して、他のjQueryの読み込みコードを消せばうまくいきました。

header.phpへの追加

[php]
<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), '1.7.1');
?>
[/php]
これは、次のサイトを非常に参考にさせて頂きました。

参考サイト

» WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 - かちびと.net
数多くの対処例があり、うまくいかない場合の参考になります