WordPressは、カテゴリ、アーカイブ、タグウィジェットに投稿数を表示させた場合、投稿数に括弧が付いてきます。
この括弧は結構じゃまだと思っている人は多いと思います。
Cocoonはその括弧を取り除いてCSSをあてて他のテーマと差別化しています。
この記事では、SWELLのカテゴリ、アーカイブ、タグウィジェットの投稿数の括弧を取り除いて、Cocoon風にカスタマイズする方法をご紹介します。
この記事の内容
ウィジェットの投稿数の括弧を取り除くには？
実は、ウィジェットに表示される投稿数の括弧を取り除くのは簡単です。
Cocoonのgithubを見てもいいですし、Cocoon作者のブログにも公開されています。
寝ログ
WordPressのカテゴリー・アーカイブウィジェットの投稿数に付加されるカッコを除去するカスタマイズ方法 WordPressのウィジェット機能に「カテゴリー」と「アーカイブ」ウィジェットがあります。 それぞれのウィジ…
寝ログ
WordPressタグクラウドウィジェットのstyle属性を取り除く方法（＆括弧も除去） WordPressに、タグクラウドウィジェットがあります。 WordPressデフォルト動作のタグクラウドは、…
記事の内容が古いので現在のCocoonに適用されているウィジェットのカスタマイズと少し違いますが、基本的には同じ内容です。
この内容をSWELLに適用していこうじゃないか、ということです。
SWELLは標準ウィジェットの表示を独自カスタマイズしている
実は、SWELLは標準ウィジェットの表示をテーマ独自にカスタマイズしています。
SWELLがウィジェットをカスタマイズしているソースは、lib/hooks/edit_core_html.phpです。
SWELLの独自カスタマイズのポイント
- カテゴリ、アーカイブウィジェットのaタグに投稿数を含むように変更している
- aタグのクラス名を変更している
前提が異なるので、Cocoonと同じようにカスタマイズすると上手くいきません。
SWELLのカテゴリ、アーカイブ、タグウィジェットをCocoon風にカスタマイズ
filterフック（wp_list_categories、get_archives_link）の優先順位をSWELLよりも下げて（10⇒11）、SWELLのカスタマイズ内容をベースにカスタマイズを追加します。
参考：wp_list_categories
参考：get_archives_link
カスタマイズコード
//カテゴリウィジェットの投稿数のカッコを取り除く
add_filter( 'wp_list_categories', 'remove_post_count_parentheses', 11, 2 );
add_filter( 'get_archives_link', 'remove_post_count_parentheses', 11, 2 );
if ( !function_exists( 'remove_post_count_parentheses' ) ):
function remove_post_count_parentheses( $output, $var ) {
//カテゴリーの場合（wp_list_categoriesは配列を返す、get_archives_linkはURLを返す）
if (is_array($var)) {
$output = str_replace('<span class="cat-post-count">(','<span class="cat-post-count">',$output);
}else{
$output = str_replace('<span class="post_count"> (','<span class="post_count">', $output );
}
$output = str_replace(')</span>','</span>',$output);
return $output;
}
endif;
//タグクラウドの出力変更
add_filter( 'wp_tag_cloud', 'wp_tag_cloud_custom', 10, 2);
if ( !function_exists( 'wp_tag_cloud_custom' ) ):
function wp_tag_cloud_custom( $output, $args ) {
//style属性を取り除く
$output = preg_replace( '/\s*?style="[^"]+?"/i', '', $output);
//タグテキストにspanタグの取り付け
$output = preg_replace( '/ aria-label="([^"]+?)">/i', ' aria-label="$1"><span class="tag-caption"> ', $output);
//数字を表示しているとき
if (isset($args['show_count']) && $args['show_count']) {
$output = str_replace( '<span class="tag-link-count">', '</span><span class="tag-link-count">', $output);
//_v($output);
//カッコを取り除く
$output = str_replace( '<span class="tag-link-count"> (', '<span class="tag-link-count">', $output);
$output = str_replace( ')</span>', '</span>', $output);
} else {//数字を表示しないとき
$output = str_replace( '</a>', '</span></a>', $output);
}
return $output;
}
endif;/*カテゴリー・アーカイブウィジェット*/
.widget_categories ul,
.widget_archive ul {
padding: 0;
list-style: none;
}
.widget_categories ul li ul,
.widget_archive ul li ul {
padding-left: 20px;
}
.widget_categories ul li a:hover,
.widget_archive ul li a:hover {
background-color: #f3f3f3;
transition: all 0.3s ease 0s;
}
.widget_categories ul li a .cat-post-count,
.widget_archive ul li a .post_count {
display: block;
float: right;
color: #fff;
background-color: #999;
font-size: 0.8em;
padding: 0 6px;
border-radius: 6px;
}
.tagcloud a .tag-link-count {
margin-left: 10px;
}
.tagcloud a::before {
font-family: icomoon;
content:"\e935";
padding-right: 3px;
}まとめ
SWELLとCocoonのいいとこどりをしたいと思っている人は多いと思いますので、Cocoonのこの機能、このデザインをSWELLに取り込みたいと思った時に参考にしてみてください。
コメント