Elementorに足りないタグクラウド

タグクラウドウィジェットがないんです
Elementorタグクラウド
Minoru Nitta
Minoru Nitta
グラフィックデザイナー・フォトグラファー
このエントリーをはてなブックマークに追加

Elementorに足りないタグクラウド

Elementorの盲点

 盲点とか言うと、ちょっと大げさですけど超絶便利なElementorにも、たまにちょっと足りないなぁと思うところもあるわけです。

 その一つがタグクラウド。

 ブログではなくてもタグクラウドって情報の整理には便利なので、コーポレイトサイトなどにも使いたくなる考え方です。

 WordPressはネイティブで実装されている機能ですが、Elementorのウィジェットにそれらしいものは見当たりません。

WordPressのウィジェットを使う

 WordPressにもともと実装されているタグクラウドをElementorで使うと、スタイルタブがキャンセルされてしまいます。

 でも、手動でスタイルシートを書いてしまえばWordpressデフォルト実装のタグクラウドウィジェット でもある程度は見た目を調節することが可能です。

見出し部分

 Wordpressデフォルトのタグクラウドをウィジェットとして使ってみると、強制的に”タグ“という見出しがH5で指定されます。

 この見出しはちょっと見ぐるしいというか狙ったデザインをするのが難しいです。

 上は実際にWordpressのタグクラウドウィジェットを使ってタグクラウドを表示している状態ですが、左上に強制的に”タグ という見出しが表示されています。

Elementorクラス指定

 この問題を回避するには、まずタグクラウドウィジェットの高度な設定を開きます。

 指定パネルの一番下にあるCSSクラスに適当な名前を指定します。

 ここでは”tagtitle”と名付けました。

 ここで特有のクラス名を指定することでサイトの他の部分で意図しない影響がでないようにします。

 さらに高度な設定パネルをスクロールしていきカスタムCSSを開き、以下のようなスタイルシートを入力します。

.tagtitle h5{
display: none;
}

Add-onを利用してタグクラウドを表示する

 Elementor用に様々なサードパーティ―ウィジェットがリリースされています。

 その中に投稿に特化したUltimate Post Kit というウィジェットがあります。

 Ultimate Post Kit の中にあるTag Cloudウィジェットを使うと以下のようなタグクラウドの表現が可能になります。