【HubSpot】特定のブログで使用されているタグをリスト形式で出力する

こんにちは。イノーバ WEB部の三砂です。

よくサイドバーにはカテゴリー一覧のような動線を作るケースもあるかと思いますが、今回はそういったケースを想定して「導入事例」というブログの中で使われているタグのリストを出力したいと思います。

ついでにタグが使われている記事数のカウントも表示したいと思います。

ちなみにWP基準だとカテゴリーと呼んでしまいそうですが、HubSpotでは「タグ」という名称なのでそこは少し注意かもしれません。

完成図

導入事例のブログタイプで使われているタグだけが出ています。これが完成系です。

タグ自体はダミー感がすごいですが、リアリティのあるネーミングではあえて入れていません。

現状

こちらは単純にHTMLとCSSで組んでいるだけで静的な状態です。

出すタグリストのルールは？

先ほど添付した環境上のHubSpotブログは2種類あります。

導入事例(/casestudy/)
ニュース(/news/)

ブログ機能という一つの大枠の中のテーマと言いましょうか、要は導入事例という事例紹介のコンテンツを発信するブログと、ニュースというお知らせコンテンツを発信するブログの2種類があるということですね。

以下の画像を見てもらえるとイメージがしやすいかもしれません。

HubSpotではタグ自体の管理枠は一つかと思うのですが、その中でも「導入事例の記事に紐づいているタグだけをリスト表示してカウントも出したい」ということを実装したいわけです。

以下の画像はタグを管理しているページです。

WordPressだと、カスタム投稿などでタクソノミーは枠ごとに作れるので、ちょっとピンとこない部分もあるのですがHubSpot上ではタグは一画面で管理するような形ですね。

ブログタイプごとに使われているタグの絞り込みは出来ます。

実装コードの例

どうやって導入事例の記事に所属しているタグを呼び出すのかという話になってくるかと思いますが、IDを指定することで呼び出すことが出来ます。(今回CSSはあまり関係がないのでHTMLのみのコードさせてください)

公式の開発者ドキュメントが参考になります。
https://developers.hubspot.jp/docs/cms/hubl/functions

CSSクラス名などはどのようなものでも構いません。今回はサイドバー全体のコードではなく該当箇所のコードのみとしております。

<div class="sidebar-category">
　<h2 class="sidebar-heading">導入事例タグ</h2>
　{% set casestudy_tags = blog_tags("12桁の数字を記述します", 250) %}
　<ul class="sidebar-tag-list">
　　{% for tag in casestudy_tags %}
　　<li class="sidebar-tag-item">
　　　<a href="{{ blog_tag_url("12桁の数字を記述します", tag.slug) }}">
　　　　<p class="sidebar-tag-name">{{ tag.name }}</p>
　　　　<p class="sidebar-tag-count">{{ tag.live_posts }}</p>
　　　</a>
　</li>
　{% endfor %}
　</ul>
</div>

ポイント

blog_tagsでまず指定されたブログ(今回は導入事例)で使用されているタグを取得し、casestudy_tagsという変数に入れます。(名前はなんでも良いです)第一引数に12桁の数字という記述があるかと思いますが、これがブログのタイプ判断するIDです。以下のオレンジで囲まれている箇所から確認することが出来ます。ブログによってこのIDはランダムで生成されるようです。
casestudy_tagsをfor文でループ処理
blog_tag_urlでタグのURLを取得します。第一引数にはIDを入れることが出来るので先ほどの乱数を入れます。そうすることでリンクの構造が/casestudy(導入事例のスラッグ)/tag-slug/のようにすることが出来ます。
tag.nameでタグ名を取得します。
tag.live_postsで各タグが所属している記事の数をカウントし、表示しています。