WordPress: サイドバーのカスタマイズ
当サイトで採用している WordPress のテーマ「iTheme」(提供元:N.Design Studio)はそのままではサイドバーのカテゴリーリストに記事数のカウントが表示されない。
これをカテゴリー名ごとに記事数を表示するようにカスタマイズした。
「iTheme」はウィジェットに対応しているのでサイドバーの処理は
wp-content/themes/itheme-1-1/functions.php
というファイルをエディットすればいい。
しかしこのファイルを見てもカテゴリー関係の処理は何も記述されていない。つまり専用のカテゴリーのウィジェットは用意されていないのだ。それぞれのカテゴリーに属する記事の数を表示させるにはオリジナルのカテゴリーウィジェットを書いて組み込む必要がある。
では、オリジナルのカテゴリーウィジェットを作ろう。
難しいことなど何もない。functions.php に記述されている widget_itheme_links() というリンク用のウィジェット処理をコピー&ペーストしてちょこっと修正するだけだ。
その前にここで利用する WordPress のカテゴリー処理の関数と付加しているパラメータの説明をしておこう。
- wp_list_categories()
-
リンク付きでカテゴリーのリストを出力する関数。
パラメータ:- orderby=[strings]
- show_count=[1|0]
- title_li=
表示されるカテゴリー名のソート順を指定する。
[strings] 意味 name カテゴリー名でソート(デフォルト) ID カテゴリーIDでソート count カテゴリーに含まれる記事数でソート カテゴリー毎に記事数を表示するか否かのモードを指定する。
1 表示する 0 表示しない(デフォルト) カテゴリーリストブロックに表示する時にタイトル部分をカスタマイズする時に指定する。今回の場合はタイトルを表示させないために意識的に空文字を指定している。
その他指定できるパラメータはオフィシャルのドキュメント Template Tags/wp list categoriesを参照してほしい。
オリジナルのカテゴリーウィジェットの関数
-
// functions.php の終わりの方
-
register_sidebar_widget(__('Links'), 'widget_itheme_links');
-
-
/* --- ここからカテゴリー用の処理を追加 --- */
-
function widget_HierarchicalCategories() {
-
?>
-
<!--sidebox start -->
-
<div id="categories" class="dbx-box">
-
<h3 class="dbx-handle">Categories</h3>
-
<div class="dbx-content">
-
<ul>
-
<?php wp_list_categories('orderby=name&show_count=1&title_li='); ?>
-
</ul>
-
</div>
-
</div>
-
<!--sidebox end -->
-
<?php
-
}
-
register_sidebar_widget('iThemeカテゴリー', 'widget_HierarchicalCategories');
-
}
-
/* --- ここまで追加 --- */
-
?>
《説明》
- 9行目:<div id="categories" ...>
- カテゴリーのブロックの id名を他の id名と重複しないように "categories" としている。
- 13行目:<?php wp_list_categories('orderby=name&show_count=1&title_li='); ?>
- カテゴリーリストを出力する wp_list_categories() をパラメータ付きで記述。
- 21行目:register_sidebar_widget('iThemeカテゴリー', ...);
- 'iThemeカテゴリー' は管理ツールのサイドバーレイアウトで「利用できるウィジェット」に表示される名称になる。WordPress のシステムで用意されているカテゴリーウィジェットと区別できるように 'iTheme' を追加している。
子カテゴリーをインデントさせるための CSS を追加
wp_list_categories() はデフォルトで子カテゴリーのリストタグを <ul class='children'> と出力するので、見栄えの統一と合わせてインデントするように style.css に以下のようにスタイルシートを追加する。
file: wp-content/themes/itheme-1-1/style.css
-
#categories ul.children li {
-
background: url(images/mini-category.gif) no-repeat;
-
margin-bottom: 2px;
-
padding-left: 18px;
-
}
これで専用のカテゴリーウィジェットの完成。ウィジェットマネージャーで "iThemeカテゴリー" を登録すれば記事数が表示される。
2007/7/29 1:24 AM
参考にさせていただきました。
特にサブカテゴリーをインデントさせたかったので、スタイルシートの記述がとても役に立ちました。