Topics インフォコネクト最新情報

WordPressタグクラウドの設置方法を解説!カスタマイズ初級編

WordPressタグクラウドの設置方法を解説!カスタマイズ初級編

WordPressの豆知識

この記事は公開から1年以上経過しています。

こんにちは、クリエイターのSHOJIです。
前回のWordPress豆知識では、WordPressでのカテゴリーとタグの違いについて解説しました。

WordPressでのカテゴリーとタグの違いを解説!タグクラウド予備知識
https://info-con.co.jp/tips/wordpress-09-category-tag/

どちらも「記事を整理する」という意味では同じような機能でも、それぞれに異なる特徴と適した使い方があるとともに、適切な設定を行えば訪問者が情報を見つけやすくなり、PV数や滞在時間の向上、離脱率の改善といったSEO効果も期待できることがお分かりいただけたことと思います。

そんなカテゴリーとタグですが、WordPressにおけるタグについては設置方法がよく分からず導入できていない方も多いのではないでしょうか

そこで今回は、WordPressウィジェット「タグクラウド」設置と、初心者でも簡単にカスタマイズできる方法について解説してみたいと思います。

タグクラウドの設置

それでは「現在利用中のウィジェットを使ってサイドバーに表示する」という前提で解説していきたいと思います。

WordPressタグクラウドの設置方法を解説!カスタマイズ初級編

①管理画面にて[外観]→[ウィジェット]と進みます。

②ウィジェット一覧画面にて、左側の利用できるウィジェットの中から「タグクラウド」を右側のサイドバーウィジェットエリア内にドラッグ&ドロップします。

③ドラッグ&ドロップ後の設定表示にて「タイトル(サイトで実際に表示される見出し)」を入力し、「保存」ボタンをクリックします。

④すべての設定が終わったら「完了」ボタンをクリックします。
 

タグの準備と利用

ウィジェット画面でタグクラウドの設置が終わったら、実際にブログで設定するためのタグを準備していきます。

WordPressタグクラウドの設置方法を解説!カスタマイズ初級編

①管理画面にて[投稿]→[タグ]と進みます。

②タグ画面が表示されるので、左側の「新規タグを追加」設定にてタグとして表示される「名前」と、URLで利用される「スラッグ」を入力します。

WordPressタグクラウドの設置方法を解説!カスタマイズ初級編

③投稿画面右側のタグ設定項目にて、入力ボックスにタグを入力すると設定でき、設定されたタグが下部に表示されます。×印をクリックすることでキャンセルできます。

④タグの設定以外は普段の投稿と同じように記事を作成します。実際のサイト表示を確認すると、デフォルトでは下の画像のようにサイドバー内に表示されます。

WordPressタグクラウドの設置方法を解説!カスタマイズ初級編 

簡単カスタマイズ

ここまでの設定でもタグの機能としては問題ないのですが、デフォルトでのタグ表示がどうしてもダサくて気になります。

そこで、参考までに弊社が現在採用しているデザインについて公開させていただきます。

WordPressタグクラウドの設置方法を解説!カスタマイズ初級編

・文字サイズを固定
・タグ周りを線で囲み余白をとる
・タグ前に「#」を付与

実際に上記のようなスタイル設定していますが、これだけの設定でも印象がガラっと変わったのがお分かりいただけると思います。

また、レスポンシブ以外の特別な設定はしていないので、初心者の方にも簡単にご理解いただき、カスタマイズの参考にしていただけるのではないでしょうか。

最後に

今回は、タグクラウド初心者向けに導入とカスタマイズ方法について解説してみましたが、いかがだったでしょうか。ただし、ほぼデフォルト設定のままでは残念ながら利用しづらいのも事実。

例えば、投稿画面でタグ付けする度に入力するのって面倒ですよね。しかも、ダブって設定しないように気を付けていても、以前に設定したタグなんていちいち覚えてないし。

そこで次回は、もう少しカスタマイズのレベルを上げ、投稿画面におけるタグ設定をカテゴリーと同様「一覧表示の中からチェックを入れて設定」できるようにしたり、タグクラウドの最大表示数を変更したりなど解説してみたいと思います。

Webの豆知識]関連記事

Service

Contact

インフォコネクトに相談してみませんか?

経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください