関連タグの＋－に画像を付けておしゃれに
WP Simple Tags plugin で Technorati Tag 等を表示 | Rif.3rdでは、Related Tags の表示をしましたが、味気ないので+－を画像にしてそれっぽくしてみました。
Demo
- タグアーカイブページの上部（サイドバーのTagsから）の+をクリックするとタグプラス検索になります。
- 複数のタグをプラスすると、削除できるタグ(－)が表示されます。
使用しているプラグイン
プラグインオプション画面設定（関連タグ）
- 表示数: デフォルト=5 テーマとCSSに合わせて増やす（40）
- 表示形式: flat
- 和集合のメソット: AND
- フォーマット:
PHP:
-
<a href="%tag_link%?phpMyAdmin=TmY6iB0UDgsijA973HYzLL4CTUd">%tag_name%</a> <span>(%tag_count%)</span><a class="tbg1" href="%tag_link_add%?phpMyAdmin=TmY6iB0UDgsijA973HYzLL4CTUd">+</a>
- セパレータ: .
- 除去形式: flat
- 除去リンクフォーマット
PHP:
-
<a href="%tag_link_remove%?phpMyAdmin=TmY6iB0UDgsijA973HYzLL4CTUd" title="検索から %tag_name_attribute% を除去します">%tag_name%</a><a class="tbg2" href="%tag_link_remove%?phpMyAdmin=TmY6iB0UDgsijA973HYzLL4CTUd" title="検索から %tag_name_attribute% を除去します">-</a>
Archive.php
PHP:
-
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
の後に(テーマに合わせて)
PHP:
-
<div class="related-tags">
-
<?php st_related_tags(); ?>
-
<br />
-
<?php st_remove_related_tags(); ?>
-
</div>
CSS
CSS:
-
.related-tags{padding: 10px; margin: 10px; border: 1px solid #ddd; clear: both;font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;}
-
.related-tags span{ color: #999; font-size: 85%;}
-
a.tbg1{ background: url(img/plus.gif) no-repeat 0 0px; width: 10px; width: 10px; padding: 1px; color: #fff;}
-
a.tbg2{ background: url(img/minus.gif) no-repeat 0 0px; width: 10px; width: 10px; padding: 1px; color: #fff;}
-
a.tbg1:hover, a.tbg2:hover { color: #fff;}
- CSSは色々あるでしょうが、ここでは、あえて＋－を消さないで表示しています。
