Category Tagging with Hemingway theme

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

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

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

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

• Recently
• Monthly Archives
• Tag Cloud（今回追加した）

管理画面はこんな感じです。

この 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 名を付けるように促すフォームが表示されます。
（例えば 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」をクリックすると完成です。

広告