WordPressでタグ一覧を表示するショートコードを作成する方法｜PostSnippetsプラグインで実装

注記1：ウィジェット中に赤字で下記が付記されています。
This widget is no longer being updated. Please use the "Terms Display [TaxoPress Shortcode]" widget instead. (訳：このウィジェットは更新されなくなりました。代わりに「利用規約表示（TaxoPressショートコード）」ウィジェットをご利用ください。)

 

タグクラウド関数 wp_tag_cloud() の基本と主なオプション

タグクラウド関数「wp_tag_cloud()」はWordpress のPHP関数です。　この関数は、以下に示します様に、関数の（）内に＆で連結したオプションを引数に指定すれば、オプション設定が行えます。（使用していないオプションはデフォルト値が指定されます）

 PHP:wp_tag_cloud
＜PostSnippetsでのタグクラウド関数の使用例＞
wp_tag_cloud('separator=　&format=flat&〜中略〜unit=px&orderby=name&order=ASC&number=20&show_count=1') ;

＆で連結したオプションを引数に指定は分かり難いので、配列変数で代替えできます。

 PHP:wp_tag_cloud
$mytags = array(
'separator' => ' ' , //区切り文字を付加 。ここでは半角スペース
'smallest' => 8, // 最小フォントサイズ（default）
'largest' => 22, // 最大フォントサイズ（default）
'unit' => 'px', // フォントサイズの単位
'format' => 'flat',
'number' =>20,
'orderby' => 'name',
'order' => 'ASC',
'show_count' => '1',
);
echo wp_tag_cloud($mytags);

 

PostSnippetsプラグインでショートコードを作成する手順

PostSnippets Pluginの基本的使い方は、以下の記事を参照してください。

ここでは、PostSnippetsプラグインの設定画面（下の画面）で項目①〜⑥について説明し、ショートコードを作成します。

①ショートコードの名前を記入：ここでは、tag としました。

② に下のタグクラウドコードをペーストします。　、 5個の変数を{ }で囲んでいます。

 PHP
 $mytags = array(
'separator' => ' ' , //区切り文字を付加
'smallest' => {s_fontsize} ,
'largest' => {l_fontsize} ,
'unit' => 'px',
'number' => {number},
'orderby' => '{orderby}',
'order' => '{order}',
'show_count' => {cnt_flg},
);
echo wp_tag_cloud($mytags);

③ にVariables（５個）は以下の様にカンマ区切りで記述します。

s_fontsize=8,l_fontsize=22,format=flat,number=30,cnt_flg=1,orderby=count,order=DESC

④ のShortcodeはレ点を入れます。 ⑤ のPHPはレ点を付けます。

⑥ Descriptionは、適当にわかり易いショートコードの説明文を記入します。

以上の設定が終わったらSave ボタンを押して保存すれば、ショートコード[tag]の完成です。

完成したショートコード

 shortcode
[tag s_fontsize="8" l_fontsize="22" format="flat" number="30" cnt_flg="1" orderby="count" order="DESC"]

 

作成したショートコード  [tag] の使い方と表示例

作成したショートコード[tag]を配置すれば、固定ページ、投稿ページやサイドバーにTag一覧を表示できます。

defaultのまま

 shortcode
[tag s_fontsize="8" l_fontsize="22" format="flat" number="30" cnt_flg="1" orderby="count" order="DESC"]

 

名前順で並べる

赤文字：ショートコード[tag]の変更箇所

 shortcode
[tag s_fontsize="8" l_fontsize="22" format="flat" number="30" cnt_flg="1" orderby="name" order="ASC"]

 

枠を付ける

【st-div】はAffinger6のdiv用パーツを活用し、枠のスタイルをクラスタ（tag_list）に適用しています。
赤文字：ショートコード[tag]の変更箇所

 shortcode
[st-div class="tag_list" margin="0 0 20px 0" padding="0 0 0 0" add_style=""]
 
[tag s_fontsize="12" l_fontsize="12" format="flat" number="30" cnt_flg="0" orderby="count" order="DESC"]
 
[/st-div]
 
--スタイルシートに記述する--
<style>
div.tag_list a {
display: inline-block;
margin: 0 .1em .6em 0;
padding: .6em;
line-height: 1;
text-decoration: none;
color: #454545;
background-color: #fff;
border: 1px solid #454545;
border-radius: 5px;
}
</style>

 

 

以上、タグ（Tag）一覧を表示させるショートコードの実例でした。