Category Tagging with Hemingway theme

2007/02/21

ブログの右下のほうにタグクラウドを表示してみました。タグクラウドの表示には、Category Tagging Plugin と Hemingway テーマの Blocks 機能を利用しています。

Category Tagging Plugin は WordPress のカテゴリ機能に以下の 2 機能を追加するプラグインです。

  • タグクラウドの表示
  • 関連するエントリの表示

WordPress のエントリは複数のカテゴリに分類することができるので、このプラグインを追加すれば、カテゴリをタグとして扱うのに十分な機能を得ることが出来ます。
また、本ブログは Hemingway テーマを使用していますが、Hemingway には Blocks という機能があって、ブログ下部に表示する項目を、管理画面から変更することが出来ます。例えば、本ブログでは現在以下の Blocks を有効にしています。

  • Recently
  • Monthly Archives
  • Tag Cloud(今回追加した)

管理画面はこんな感じです。
Hemingway Options
この Blocks 機能は、簡単に独自の Block を追加できるようになっています。今回は Category Tagging Plugin のタグクラウド表示機能を使った、タグクラウド表示 Block を作りました。手順は以下のようになります。

  1. Category Tagging Plugin のインストール
  2. タグクラウド表示 Block の作成
  3. タグクラウド装飾用 CSS の追加とブロックの表示

以降、順に説明します。
1. Category Tagging Plugin のインストール
プラグインのサイトからダウンロードしたファイルを wp-content/plugins 以下に展開し、管理画面からプラグインを有効にします。

2. タグクラウド表示 Block の作成
wp-content/themes/hemingway/blocks 以下に tag_cloud.php を作成します。

<h2>Tag cloud</h2>
<?php
if (function_exists ('cattag_tagcloud') ) {
        echo '<ul class="tagcloud">' . cattag_tagcloud(8,18) . '</ul>';
}
?>

cattag_tagcloud 関数は Category Tagging Plugin のタグクラウド表示関数です。関数の説明はプラグインのサイトに任せますが、ここでは表示されるタグの最小サイズと最大サイズをそれぞれ 8 と 18 に指定しています。tag_cloud.php を作成してから Hemingway のオプション画面を開くと、tag_cloud.php が検出されており、Block 名を付けるように促すフォームが表示されます。
Hemingway に新規 Block を追加した直後の管理画面(例えば hogehoge.php を追加するとこんな画面になる)

ここでは「Tag Cloud」と入力しました。「Tag Cloud」が他の Blocks と同様に表示されていれば Block は完成です。

3. タグクラウド装飾用 CSS の追加とブロックの表示
上記で追加したブロックを装飾する CSS を Hemingway の style.css に追加します。以下のような CSS を wp-content/themes/hemingway/style.css に追加しました。

/*---------------------------------------------------------------------------
  For Tag Cloud <http://sw-guide.de/wordpress/category-tagging-plugin/>
---------------------------------------------------------------------------*/
ul.tagcloud {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	text-align:left;
}
ul.tagcloud li {
	display:inline;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin-left:0pt;
}
ul.tagcloud li a {
	font-weight:400;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	text-decoration:none;
}
ul.tagcloud li a:hover {
	text-decoration:underline;
}

最後に、Hemingway のオプション画面で「Tag Cloud」 Block を、表示したいエリアにドラッグ&ドロップし(最初の画像のようになる)、「Save my options」をクリックすると完成です。

2 Responses to “Category Tagging with Hemingway theme”

  1. chalice Says:

    通りすがりのwordpress初心者です。
    同様にwp-content/themes/hemingway/blocks 以下に tag_cloud.php を作成してみました。
    どうもうまく表示されたのはタイトルだけでした。
    ファイルを保存した時に文字コードを間違えたのかどうか。
    作成された tag_cloud.php の文字コードの状態をよろしければ、教えてください。
    スマイルマークのところがどうしても判別できません。
    お願いします。

  2. chalice Says:

    すみません。良く読み込まないでおりました。simple-tagsを使っておりまして回答がここにありました。
    http://code.google.com/p/simple-tags/wiki/TagCloud
    大変失礼申し上げました。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。