WordPress任意の場所に表示するタグクラウド(タグ一覧)ショートコードまとめ

タグクラウドイメージ WordPress

サイドバーにタグクラウドを表示させようと作業した際にウィジェットから表示させるタグクラウドだと元から装飾がついており、元デザインから変える時に微調整するのも大変だったのでタグクラウド(タグ一覧)ショートコードを作った時の備忘録です。

出力されるタグクラウドはCSS装飾してないと文字列で並んでるだけのシンプルなものなので自分好みに最初から装飾したい場合は使えるかもしれません。
タグクラウド(タグ一覧)ショートコード
get_tags()とwp_tag_cloud()両方でのやり方を載せています。

各ショートコードの実装コードや具体的な解説ページについてはそれぞれの詳細ページを参照してください。
詳細ページへジャンプ
ボリュームが多いので各々別ページに分け書きました。

php編集する際は失敗した時のためにバックアップを取っておいてください。

スポンサーリンク

get_tags()で作成したタグ一覧

最終的な仕上がりは下の画像のようになります(元々付いてるテーマなどの装飾の影響、ブラウザの違い等により見え方は異なるかもしれません)
タグクラウド(タグ一覧)ショートコード

get_tags()投稿数表示無し

各タグを付けた記事の数がどれだけあるか表示するのは要らないという、投稿数が不要なタグ一覧を作る場合の方法です
タグクラウド(タグ一覧)ショートコード

get_tags()投稿数を囲う文字列()以外にする

投稿数は表示したいけど()が要らない、または、()以外の違う文字列(例えば【】とか)にしたい場合の方法です。
カッコが無い方は<span class=””></span>で囲っていますので数字部分だけのCSS装飾もできます。
タグクラウド(タグ一覧)ショートコード
例えば、数字に付けたクラスを指定してこんな風にCSS装飾できます
タグクラウド(タグ一覧)ショートコードCSS装飾

wp_tag_cloud()で作成したタグ一覧

見た目の最終的な仕上がりはget_tags()で作成したタグ一覧と同じです。
タグクラウド(タグ一覧)ショートコード
当サイトで紹介しているものに限りますが、wp_tag_cloud()で作成したコードの方がシンプルな書き方でphpを始めたばかりの人はこちらの方が分かり易いかもしれません。
タグクラウド(タグ一覧)ショートコード

「続きはこちら」リンクを付ける

タグを全て表示させた一覧ページが別にあり「続きはこちら」リンクを付ける場合の方法です。
ジャンプ先にidを付けておき、<div class=””><a href=”URL#ジャンプ先のid名”>…タグ一覧ページはこちら »</a></div>のHTMLタグを追記しています。
タグクラウド(タグ一覧)ショートコード

HTMLサイトマップにタグ一覧を追加する

HTMLサイトマップにタグ一覧の項目を追加する方法。こちらのページみたいになります。
タグクラウドもあるHTMLサイトマップショートコード作成
※ タグクラウドもあるHTMLサイトマップショートコード作成するやり方になります。

タグ一覧ショートコード実装コードはfunctions.phpに追記する

ダッシュボード → 外観 → テーマエディター →
functions.php(子テーマ推奨)子テーマがある場合は子テーマの方のfunctions.phpにタグ一覧ショートコード実装コードを追記してください。
タグクラウド(タグ一覧)ショートコード

タグ一覧をサイドバーに表示させる(ウィジェット)

ウィジェットでタグ一覧をサイドバーに表示させる設定をする方法です。
WordPressタグクラウド(タグ一覧)をサイドバーに表示

get_tags()とwp_tag_cloud()の違い

get_tags() → 関数

wp_tag_cloud() → テンプレートタグ

どちらを使ってもよく、お好みの方を使用すればいいでしょう。
(たぶんなんですけど)wp_tag_cloud()の方がテンプレートなので扱いやすく簡単に表示できる。get_tags()の方は細かいカスタマイズまでしたい場合は向いてる。なのかなと思いました。

WordPress使い始めたばかり、phpを勉強し始めた、ならwp_tag_cloud()の方が理解しやすそうな気がします。

ショートコードadd_shortcode()

function funcname() {
    //ショートコードの内容
}
add_shortcode('shortcodename', 'funcname');

function 関数名() {
//ショートコードの内容
}
add_shortcode(‘ショートコード名’, ‘関数名’);
という書き方で、
add_shortcodeの1つ目がエディターに記入する[ショートコード名]を設定し、add_shortcodeの2つ目とfunctionの隣で関数名を設定します。関数名の文字列は同じ名前にします。
属性名にマルチバイト文字(大文字など)は使用できないので半角の英数字で名前の文字列を利用してください。

実装したショートコードを呼び出すにはエディターに[ショートコード名]と書きます。これでショートコードを記入した部分にタグクラウド一覧が表示されます。
タグクラウド(タグ一覧)ショートコード

タグクラウドページに「noindex」を設定

WordPressタグクラウドページ「noindex」設定
タグクラウドは数が多かったりすると重複コンテンツと判断されたりしてSEO的には良くないという意見もあります。数やキーワード管理して場合は「noindex」(検索エンジンに含めないでとクローラーに伝える)タグの設定をした方がいいかもしれません。

タイトルとURLをコピーしました