マチダの生活にはタグクラウドが必要かもしれない
…あれ？煮物について書いたのってこのサイトだっけ？それとも違う媒体だったっけ？と確認しようとしてはたと困ってしまった。当サイトには記事の検索機能が無いのである。
結局こっちに書いていたけどね煮物を作る普通の日
自分で作ったサイトに掲載している自分で書いた記事を探すのに手間取るんだから、自分ではない人ならばその苦労を推して知るべしだ。これは早急に何らかの検索機能を設けなければならない。
キーワードを入力して使う普通の検索ボックスは絶対用意するとして、あれなんだったっけ…あのさ、各記事についての関連ワードがたくさん羅列されてるみたいなやつ。なんか文字が大きかったり小さかったりして…とAIさんに聞いてみたら、どうやら「タグクラウド」というものであるらしいことがわかった。求める記事に直接リーチするビジネスライクな検索ボックスさんに対して、タグクラウドさんの方は何やらフワッとした緩さがあって楽しげに見える。こっちを先に設置してみたいな。
ワードプレスのサイトにタグクラウドを設置する方法
調べてみると以下のワードプレス関数を使って簡単に実装できるらしい。
<?php wp_tag_cloud(); ?>ほな早速やってみよか。
記事毎に設定したタグをクラウドとして表示
タグクラウドを実装するにあたっては、記事毎に関連ワード（これをタグという）を設定してやる必要がある。もちろん今までに書いた記事には何も設定していないので、過去にさかのぼって一からやらなくてはならない。
これは鶏むね肉のナゲット風ピカタの作り方について書いた記事に設定したタグだ。カテゴリ名と同じ語句（このページならば「料理」）についてはリンクが被るので除外しつつ、使った食材や調味料、調理法などを適当に散りばめてみたがどうだろうか。同様に今ある40数個の記事全てについてタグを設定したら、ここまでの準備は完了。
あとは件のワードプレス関数を任意の場所に設置して、と。表示されるかな？？
おお…これこれ！まさにわたしがイメージしていたやつ！ちなみに吐き出されたHTMLコードはシンプルなaタグの羅列となっていた。
<a href="https://machida-life.com/tag/diy/" class="tag-cloud-link tag-link-79 tag-link-position-1" style="font-size: 14.3pt;" aria-label="DIY (2個の項目)">DIY</a>
<a href="https://machida-life.com/tag/%e3%81%88%e3%81%82%e8%8d%89%e7%b4%99/" class="tag-cloud-link tag-link-60 tag-link-position-2" style="font-size: 14.3pt;" aria-label="えあ草紙 (2個の項目)">えあ草紙</a>
<a href="https://machida-life.com/tag/%e3%81%8a%e6%89%8b%e5%85%a5%e3%82%8c/" class="tag-cloud-link tag-link-98 tag-link-position-3" style="font-size: 8pt;" aria-label="お手入れ (1個の項目)">お手入れ</a>
<a href="https://machida-life.com/tag/%e3%81%8b%e3%81%a4%e3%81%8a%e7%af%80/" class="tag-cloud-link tag-link-74 tag-link-position-4" style="font-size: 18.5pt;" aria-label="かつお節 (3個の項目)">かつお節</a>
//…以下続いていくこのままではcssでの編集がしにくいので、以下のようにクラス名「tag_body」を付与したdivでラッピングした上で、タグクラウドの上にあるランキング表示セクションと同様の体裁に整えておく。
<section class="tag_cloud">
<div class="title">
<div class="decoration">
<img src="<?php echo get_template_directory_uri(); ?>/image/common/logo.svg" alt="マチダの生活ロゴ" class="logo">
<img src="<?php echo get_template_directory_uri(); ?>/image/common/fonts/tagcloud.svg" alt="Tag cloud" class="text">
</div>
<h2>タグクラウド</h2>
</div>
<div class="tag_body">
<?php wp_tag_cloud(); ?>
</div>
</section>タグクラウドをカスタマイズする
さて。ここであらためて見てみると、大小様々な文字は遊びがあっておもしろいが、なんだか騒がしすぎるきらいもないだろうか。ワードプレス関数の方でカスタマイズ出来るといいんだけど。
ワードプレス関数のパラメーターを変更
GoogleのAIアシスタントさんに尋ねたら、カスタマイズできることも、そのパラメーターの種類も一瞬にしてわかってしまった。便利な世の中になったもんだなぁ。
- smallest：一番件数が少ないタグのサイズ（初期値: 8）
- largest：一番件数が多いタグのサイズ（初期値: 22）
- unit：サイズに使う単位（pt、px、em、%など。初期値: pt）
- number：表示する最大タグ数（初期値: 0 = すべて）
- orderby：並び替えの基準（name = 名前順, count = 投稿数順）
- order：並びの向き（ASC = 昇順, DESC = 降順）
- format：出力形式（flat = 区切り文字で並べる, list = リスト形式）
- separator：flatのときの区切り文字（初期値: 空白）
フォントサイズを1emに固定して30個まで表示させたい。それぞれカスタマイズしたパラメーターを配列として引数に渡してやると、全体としては以下のようなコードになった。
//HTML完成
<section class="tag_cloud">
<div class="title">
<div class="decoration">
<img src="<?php echo get_template_directory_uri(); ?>/image/common/logo.svg" alt="マチダの生活ロゴ" class="logo">
<img src="<?php echo get_template_directory_uri(); ?>/image/common/fonts/tagcloud.svg" alt="Tag cloud" class="text">
</div>
<h2>タグクラウド</h2>
</div>
<div class="tag_body">
<?php
wp_tag_cloud(array(
'smallest' => 1, //一番小さいサイズ
'largest' => 1, //一番大きいサイズ smallestと一緒の値にするとサイズ固定
'unit' => 'em', //単位
'number' => 30, //表示個数
));
?>
</div>
</section>
これで良さそうなのでcssで細かい見た目も整えていこう。ラッパーであるdiv.tag_bodyをflexに設定し、gapでタグ間の余白を縦横一括調整。そして個々のタグはborderで四角く囲ってやることにした。
/*タグの余白をgapで調節*/
.ranking .tag_body{
display:flex;
flex-wrap:wrap;
gap:0.5em;
justify-content:center;
}
/*個々のタグをデザイン*/
.ranking .tag_body a{
display:inline-block;
border-style:solid;
border-width:1px;
border-color:#d3d3d3;
padding:0.1em 0.45em;
}
大枠はイメージ通りなのだが、ちょっと味気ないかしら。
Font awesomeを使ってタグアイコンを表示
色々検討した結果、文字の先頭にタグのアイコンを表示することにした。Ink Scapeでちょちょっと作ってやってもいいのだが、今後の汎用性を考えてFont Awesomeを利用することに。
参考サイトFont Awesome
Get Startedページ
最近ではちゃんとユーザー登録をして利用するのが推奨されているようなのでそれに倣おう。Get Startedページにある「Enter your email to get started with a free Kit! 」のフォームにEメールアドレスを入力し、Terms of Service and Privacy Policyに同意した上でStart For Freeボタンをクリックすると、認証のためのメールが届く。
Comfirmした後は名前や、いつからFont Awesomeを使っているかなど簡単な情報を入力すればユーザー登録は完了だ。
登録が済んだら上のページで自分の「kit」をカスタマイズして使うということらしい。ページ下にスクロールすると確かにわたしのキットがあった。
クリックするとこのキットの詳細ページにジャンプし、貼り付けるべきjsのリンクをscriptタグごとコピーすることが出来るので、使用したいページのhead内にペーストしてやろう。これでFont Awesomeの様々なアイコンが使えるようになるぞ。
/* cssでフォントとして呼び出してやる */
.ranking .tag_body a:before{
font-family:"Font Awesome 7 Free";
content:"\f02b";
font-weight:900;
padding-right:0.4em;
font-size:80%;
position:relative;
bottom:0.1em;
}ワードプレス関数で吐き出されたaタグの中に表示したいということから、iタグではなく擬似要素のbeforeを使って先頭にくっつけてやることにしたのだが、ここでトラブル発生だ。font-familyを「Font Awesome 7 Free」とし、表示したいタグアイコンのユニコード「\f02b」をcontentに指定するのは正しいやり方のはずなのに、どういうわけか上手く表示されない。
GoogleのAIアシスタントさんに協力してもらいつつ、KitのSettingsからFrameworkをWeb Fontsに変更してやることで解決した。
なぜこれで表示されたのか、またSVGの何がいけないくて表示されなかったのかは全く分からないしこれ以上調べるつもりもない。もういいんだよだってサクッと書いたけど実は２時間以上も試行錯誤してやっと表示されたんだから途中マジで面倒になって涙が出ちゃうところだったんだから。そして見た目もちゃんとわたしのイメージ通りに仕上がった。だからもういいWebフォントだろうがSVGだろうが知ったことじゃないんだおととい来やがれこんちくしょう。
というわけで今日はここまで。検索ボックスは恐らく簡単だろうから記事にせずひっそりと設置してやるつもりだ。
