お問い合わせ

SWELLカスタマイズ|Cocoon風のカテゴリ、アーカイブ、タグウィジェット投稿数表示

  • URLをコピーしました!

WordPressは、カテゴリ、アーカイブ、タグウィジェットに投稿数を表示させた場合、投稿数に括弧が付いてきます。

この括弧は結構じゃまだと思っている人は多いと思います。

Cocoonはその括弧を取り除いてCSSをあてて他のテーマと差別化しています。

この記事では、SWELLのカテゴリ、アーカイブ、タグウィジェットの投稿数の括弧を取り除いて、Cocoon風にカスタマイズする方法をご紹介します。

ウィジェットの投稿数の括弧を取り除くには?

実は、ウィジェットに表示される投稿数の括弧を取り除くのは簡単です。

Cocoonのgithubを見てもいいですし、Cocoon作者のブログにも公開されています。

記事の内容が古いので現在のCocoonに適用されているウィジェットのカスタマイズと少し違いますが、基本的には同じ内容です。

この内容をSWELLに適用していこうじゃないか、ということです。

SWELLは標準ウィジェットの表示を独自カスタマイズしている

実は、SWELLは標準ウィジェットの表示をテーマ独自にカスタマイズしています。

SWELLがウィジェットをカスタマイズしているソースは、lib/hooks/edit_core_html.phpです。

SWELLの独自カスタマイズのポイント
  • カテゴリ、アーカイブウィジェットのaタグに投稿数を含むように変更している
  • aタグのクラス名を変更している

CocoonとSWELLでは前提が異なるので、Cocoonと同じようにカスタマイズすると上手くいきません。

SWELLのカテゴリ、アーカイブ、タグウィジェットをCocoon風にカスタマイズ

filterフック(wp_list_categoriesget_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に取り込みたいと思った時に参考にしてみてください。

他の人にもシェアしてね
  • URLをコピーしました!
  • URLをコピーしました!
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次