WordPress ウィジェットのタグクラウドのカスタマイズ方法

by ブログ工房 「 WordPress 」記事で、今日一番読まれているページ TOP 5

まだデータがありません。

カテゴリー別今日の人気ランキング
スポンサーリンク

はじめに

当ブログでは、タグの一覧を表示してくれるタグクラウドをWordPressのウィジェットを使って表示していますが、デフォルトのままだとタグ名の文字が大きすぎたり、多すぎたりして、レイアウトのバランスが悪く、見た目に落ち着きません。

ウィジェット側では文字の大きさや並び順等を操作することができないので、プラグインを使わずに、文字サイズ、表示タグ数、並び順を変更するカスタマイズを施したので、備忘録としてまとめます。

WordPressのウィジェットの初期値

初期値は、「小さいタグを8pt」、「大きいタグを22pt」、「最大 45 タグ」、「flat(空白区切り)形式」、「タグ名の昇順」で「すべてのタグを表示」する設定になっています。

初期値一覧、パラメータの詳細は下記URLで調べられます。
参考:WordPress Codex 日本語版「テンプレートタグ/wp tag cloud

タグクラウドのカスタマイズ方法

今回は、この内

  • 最小文字サイズ(smallest)
  • 最大文字サイズ(largest)
  • 表示タグ数の上限(number)
  • 並び順(order)

を変更しましたが、他のパラメータ初期値も同じ方法で変更することができます。

カスタマイズを実施の際は、記述ミスや文法ミスを犯すと最悪の場合、WordPressが動かなくなることもありますので、「functions.php」を変更する場合は、必ず事前にファイルのバックアップを取り(別名で保存)、不具合が発生したら元に戻せるようにしてください。

万が一、不具合が発生した場合はこちらをごらんください。

WordPress で画面が真っ白になってしまった場合の3つの対処法
カスタマイズ中に起こった場合は WordPressをカスタマイズしていると、特に functions.php などのphpファイルの記述を...

functions.phpにコードを追加

下のコードを、「functions.php」に追加します。子テーマを使うと、親テーマのバージョンアップなどの影響を受けずに管理ができ、便利です。

(注)WordPress4.4以降は、カスタマイズ後の配列 $myargs をそのまま返したのでは、タグクラウドのウィジェットのタイトル項目が表示されないという不具合がでるので、元の配列 $args とカスタマイズ後の配列 $myargs をマージして、元の配列をリターンします。

子テーマを利用してサイトデザインをカスタマイズする方法はこちらを参照してください。

functions.phpに追記する方法

子テーマを利用してHTMLエディターにタグや定型文のボタンを追加する方法
クイックタグとは WordPressで原稿を作成する時に、HTMLエディターに記事内でよく使う見出しなどのタグをボタン(クイックタグ)とし...

style.cssに追記する方法

子テーマを利用してサイトデザインをカスタマイズする方法
子テーマによるテーマの編集方法 WoedPressのテーマは、 配置するコンテンツを設定したり、テーマの機能を設定するためのphpフ...

タグクラウド、カスタマイズ前とカスタマイズ後

下がカスタマイズの前と後の状態です。デフォルトのタグクラウドでは「ちょっと文字が大きくてレイアウトが吐出した感じ」って思ってたので、文字バランスも見易くなって満足です。

カスタマイズ前&後

スポンサーリンク
wp_レクタングル (大)
wp_レクタングル (大)
☆最後までお読みいただきましてありがとうございます。
☆この記事がお役に立ちましたらシェア・フォローしていただけると嬉しいです!

シェアする

フォローする