xili-tidy-tagsで投稿数を表示させる方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

私のメインサイトでxili-tidy-tagsを使って、タグクラウドを分割させようと思い、xili-tidy-tagsを使った時のことを書いておきます。
welcartでも商品にタグを設定し、それをタグクラウドに分割表示させることができるはずです。

xili-tidy-tagsのウィジェットが思い通りにならない

当初はウィジェットでサイドバーに表示させようと思っていたのですが、思い通りにならない点が2つありました。

  1. 投稿数が表示されなかった
  2. フォントアイコンが表示されなかった

投稿数を表示させる方法

先に結論から書くと、ウィジェットでxili-tidy-tagsのタグクラウドウィジェットを使うのではなく、カスタムHTMLウィジェットにxili-tidy-tagsのショートコードで表示させる方法を用いて解決しました。
ちなみに、表示順も降順に(投稿数の多いタグから)表示させる方法も併用しています。
そのコードは

<div class="tagcloud">
    [xili-tidy-tags params="tagsgroup=tag-group&orderby=count&order=DESC&show_count=true"]
</div>

です。

まず、基本のショートコードは公式サイト(http://dev.xiligroup.com/)に記載があり、次の通りです。


[xili-tidy-tags params="tagsgroup=trademark&largest=10&smallest=10" glue=" | "]

params="tagsgroup=trademark&largest=10&smallest=10"

tagsgroup= のところに表示させるタググループ(xili-tidy-tagsで設定したもの)のスラッグを書きます。

[xili-tidy-tags params="tagsgroup=trademark&largest=10&smallest=10" glue=" | "]
&largest=10&smallest=10 のそれぞれの数字を変えれば、タグクラウドに表示されるタグの文字の最大の大きさと最小の大きさを変えられます。
この部分を削除して
[xili-tidy-tags params="tagsgroup=trademark" glue=" | "]
と書くと、よくある投稿数が少ないタグはすごく小さく、多いタグはかなり大きい文字になります。

その後ろの
glue=” | ”
はタグ通しの区切り文字です。例えば
glue=" <br> "
とすれば、タグが改行されて並ぶわけです。

さて、公式サイトにもここまでしか書いていません。
そこで、Wordpressのタグのフィルターフックで投稿数を表示させる設定を調べると
$args['show_count'] = true;
だということが分かりました。
そこで、ショートコード内にshow_count=trueと追記すると、見事に表示されました!

さらに、投稿の多い順に並べたかったので、こちらもorderby=countを記述し、降順order=DESCも追加しました。

そもそも何故ウィジェットでなく、ショートコード記載にしようと思ったかについても書いておきます。

フォントアイコンを表示させるためにショートコードで表示させた

xili-tidy-tagsのタグクラウドウィジェットに設定されているdivのclass『xilitidytagscloud』にテーマのタグクラウドと同じcss設定をしたつもりなのですが、元々のテーマで表示されるフォントアイコンが表示されませんでした。
もう少し調べれば出来るとは思ったのですが、ふとxili-tidy-tagsはショートコードで任意の場所に設置できるということを思い出しました。
なので、カスタムHTMLウィジェットに、をテーマのタグクラウドのclassと同じ指定をしたdivで囲んだショートコードを記載してみると・・・テーマと同じように表示されたのです^^

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください