タグ(Tag)一覧を表示させるショートコードをPostSnippetsプラグインで作成する

スポンサーリンク

 

当ブログでは、タグ(Tag)決めが面倒なこともあり、タグ(Tag)一覧を表示させていませんでした。 投稿記事数が100記事を超えたので、この際、投稿記事のキーワードを見直してタグを再設定してタグ(Tag)一覧を表示させることにしました。 

但し、ウィジェットにあるタグクラウドを使えば簡単に表示させることが出来ますが、満足の行くカスタマイズが行えないので、Wordpressのタグクラウド関数wp_tag_cloud()を使って関数のオプションも簡単に変更できるようなショートコードを何時ものPostSnippetsプラグインで作成することにしました。

 

タグクラウド関数「wp_tag_cloud()」について

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

今回選定のタグクラウド・オプション

  1. separator:タグとタグの区切り文字
  2. format:flat表示か list表示かを指定する
  3. unit:文字サイズの単位指定(px)
  4. orderby:タグの並び順を指定【タグの名前(name) タグの使用数(count)】
  5. order:タグの表示順:昇順(ASC)か降順(DESC)かランダム(RAND)か
  6. number:タグの表示数を指定。(無記入で全タグが表示される)
  7. show_count:タグの使用数を表示させるか?( 1で表示 0で非表示)
[/] shortcode
<PostSnippetsでのタグクラウド関数の使用例>
wp_tag_cloud('separator= &format={format}&unit=px&orderby={orderby}&order={order}&number={number}&show_count={cnt_flg}') ;

 

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

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

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

Post Snippetsの設定画面

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

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

[/] shortcode
wp_tag_cloud('separator= &format={format}&unit=px&orderby={orderby}&order={order}&number={number}&show_count={cnt_flg} ') ;

 にVariables(5個)は以下の様にカンマ区切りで記述します。

format=flat,number=30,cnt_flg=1,orderby=count,order=DESC

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

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

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

 

ショートコード【tag】の使用例

オペレータ
作成したショートコードを3つのケースで使用例を説明します。
  • 固定ページに「タグ(Tag)一覧ページ」を新規に追加(ここをクリック)
  • サイドバーにTagを表示(ここをクリック)
  • 投稿記事にTagを表示(ここをクリック)

 


  • 「タグ(Tag)一覧ページ」(固定ページに新設)

    固定ページに変数指定したショートコードを配置しています。

    [/] shortcode
    [tag format="flat" number="0" cnt_flg="1" orderby="name" order="ASC"]
    

    オプション変数の説明

    • format="flat":タグの表示レイアウトはフラットに設定
    • number="0":タグの全てを表示
    • cnt_flg="1":タグの使用数を表示
    • orderby="name":タグの並び順を「タグ名」にする
    • order="ASC":タグの表示順を昇順にする

    実際のページを見る→(ここをクリック)

    この固定ページのindexは、noindex,nofollow に変更しないと、検索キーワードが重複しSEO的に問題となります。 また、Googleアドセンス広告も非表示にします。


  • サイドバーに配置

    ウィジェットのカスタムHTMLをサイドバーに追加してHTMLコードとショートコード【tag】を以下の様に記述しています。

    [/] HTMLcode
    [st-div class="mytagcloud" margin="0 0 20px 0" padding="0 0 0 0" add_style=""]
    [tag format="flat" number="30" cnt_flg="0" orderby="count" order="DESC"]
    [/st-div]
    <p style="text-align: center;"><a href="タグ一覧の固定ページURL">タグ(Tag)一覧へ</a></p>
    

    オプション変数の説明

    • format="flat":タグの表示レイアウトはフラットに設定
    • number="30":30個のタグを表示
    • cnt_flg="0":タグの使用数は非表示
    • orderby="count":タグの並び順を「タグの使用数」にする
    • order="DESC":タグの表示順を降順にする

    (備考)【st-div〜】はAffinger5テーマのショートコードで、<div>と同等の機能です。 class指定でスタイルシートのCSSを参照しています。 このCSSは、以下のURLから参考にさせて頂きました。 なお、タグの文字サイズ指定でCSSに、font-size:14px !important; を追記しています。

    https://soarbog.com/wp/2007


  • 投稿記事内に配置

    [/] shortcode
    [tag format="flat" number="20" cnt_flg="1" orderby="name" order="ASC"]
    

    タグをflatで表示、タグ表示数を20、タグの使用数を表示、タグの並び順をnameに、タグの表示順を昇順(ASC)にセットしています。


投稿記事内にタグが表示されました

AAC (20) Affinger5 (12) Apple Digital Masters (9) Automator (8) CDの歪率 (6) MCカートリッジ (4) MMカートリッジ (4) MP3 (8) PHP (5) Post Snippets (8) THD+N (5) XLD (13) カラヤン (6) ショートコード (6) ノコギリ波 (4) ハイレゾ (4) レシピ (4) ロリポップサーバ (10) 周波数分析 (5) 周波数特性 (5)

 

以上、タグ(Tag)一覧を表示させるショートコードの実例でした。 タグ(Tag)一覧を表示する環境が整ったもののTagの最適なキーワードを決めるのが中々に難しく今後、最適化を計る必要があると思った次第です。

 

スポンサーリンク

 

関連記事(一部広告含む)

 

 

Blog オススメ記事(コンテンツ選択)

ボタンを押してコンテンツ選択

レコード音質とハイレゾ化

CD音質と圧縮音源 AAC等

WebデザインやiPhone・PCなど

ツールと閑話ブログ

スポンサーリンク

© 2021 ハイレコのブログ Powered by AFFINGER5