【WordPress】固定ページにタグ一覧をショートコード表示＆パラメータでサイズ・表示数・記事件数を渡す方法(wp_tag_cloud)

今回は、WordPress搭載のタグクラウド出力ファンクション『wp_tag_cloud』を使用して、固定ページに投稿タグ一覧のページを作ってみます。また、ショートコード使用時にパラメータを渡して、文字サイズ調整・表示数・記事件数表示というのも行ってみました。早速内容を確認していきましょう。

今回使うWPファンクション、wp_tag_cloudとは？

その名の通り、タグクラウドを出力するファンクションです。ウィジェットでタグクラウドを使わないで、任意の場所に出力したいときはこちらを使うと思います。基本的には、wp_tag_cloud();とだけ書けば、デフォルト設定のタグクラウドが出ます。

そのほか、渡せるパラメータもいくつかあって、表示をカスタマイズすることが可能です。よく使いそうなのは以下のものでしょうか。

wp_tag_cloud（developer.wordpress.org）
https://developer.wordpress.org/reference/functions/wp_tag_cloud/

固定ページにタグ一覧をショートコード表示＆パラメータで調整する方法

投稿・固定ページ

まずはタグクラウドを表示したい固定ページを準備します。説明文をcontentに書いて、ショートコードも入れておきます。ショートコード名はtaglist、固定ページスラッグもtaglistとしました。このスラッグはあとで使います。

テーマテンプレート・page.php

page.phpでは、記事が入るボックスのclassに『$post->post_name』を追加しました。これでスラッグ名がclassで出て、ＣＳＳを当てるのがラクになります。

テーマＣＳＳ

上で当てた固定ページ専用のclassにＣＳＳをつけます。タグクラウドのフォーマットパラメータは指定していないので、aタグで出てきます。通常のaタグよりマージンを取りたい、みたいなこともあるかもしれません。

taglistのボックスには『padding:2rem 0;border-bottom: 1px dotted #ccc;』、taglist aには『display: inline-block;margin-bottom: 20px;』をあてました。下のマージンが少し追加されて見やすくなります。出力をリストにしている場合は『ul li』のように指定方法を変えましょう。

テーマfunctions.php

functions.phpにショートコードを登録します。wp_tag_cloudパラメータは『最小文字サイズ10，最大文字サイズ32，タグ全件表示，件数表示true，セパレータが全角スペース』となります。

また、ob_startとob_get_cleanで挟んでありますが、これはPHPの出力バッファ用ファンクションです。『ショートコードのほうが先に処理されて、本文より前に出てしまう』のを避けるため、一時的にバッファして遅らせてます。ob_get_cleanで出力バッファの内容を取得してバッファ終了します。

なお、バッファ終了させたいからといって、名前が似ているファンクション『ob_end_clean』を使ってしまうと、中身が空のタグクラウドが戻ってきます。

ob_start(PHPマニュアル)
https://www.php.net/manual/ja/function.ob-start.php

ob_get_clean(PHPマニュアル)
https://www.php.net/manual/ja/function.ob-get-clean.php

表示例

では早速、タグクラウド表示を確認してみます。 こんな感じで、文字数によるサイズ＆件数＆セパレータ付、登録されているタグ全件のタグクラウドができました。

実際の表示は、このサイトの以下のページにつけていますので、こちらもご確認ください。

投稿タグ一覧ページ
https://division-web.atelier-ss-agency.com/taglist/

あとがき・まとめ

まとめると、こんなところでしょうか。ウィジェットを使ってテンプレートに常に表示だと重くなるけど、タグ専用のページができてよかったです。