個人サイト、前から持ってたことは持ってたんですけど、なんやかんや更新は億劫で三日坊主になりがちだったんですよね（なまじHTML/CSS/JSの知識はあるもんだから見た目には凝る）。それを防ぐためにWordPressを導入してみたんです。練習も兼ねてね。
テーマには、「Cocoon」を使わせていただいています。
https://wp-cocoon.com/
レイアウトは気に入ったのでほぼそのまま使わせてもらってて、見た目を整えるためにある程度自分でCSSを書き足しました。黒と緑の配色とか、マウスオーバーするとさくら色になったりするのとかね。
行動のきっかけ
でね、ちょっと物足りないなーと思ったのが、「タグ別に記事を見れるやつ」が無いこと。
よく見る機能だし、簡単に追加できるやろと思って、情報を集めはじめました。
「WordPress タグクラウド」で検索すると、WordPressのカスタマイズ画面の「ウィジェット」の中を見ればいいことが分かりました。
その中に「サイドバースクロール追従」って言うセクションがあって、そのなかに「タグクラウド」を発見！ 設置！ ヨシ！！
めちゃくちゃ見た目がわりーんですけど。
あきらかに自分で書いた部分のCSSが効いてないです。Cocoonと噛み合ってない。
それに……
月毎のアーカイブやカテゴリを表示する部分のウィジェットは「ブロック」！ 名前からすると抽象的・汎用的なアイテムなのでは？
「タグクラウド」はもういらん。消して「ブロック」の中身を見ます。
？？？？？？
なにかをマークアップしているのは分かりますが、なんだこれ？
「categories」を「tags」に変えればええんか！？ なんて考えたりしましたが、もちろん動かず。
次は「WordPress ブロックHTML」で検索してみます。
すると、「WordPressの記事上にHTMLを記述するブロック」の情報がたくさん。惜しい！ そこじゃない！ ブロックHTMLとやらの記法が知りたいんじゃい！
検索しても情報が見つからない
あれやこれや調べてみますが、有益な情報がなかなか出ない。検索がヘタやなー。
上掲の「ブロックHTML」の中から、「wp heading」で検索。
……出た！
https://www.javadrive.jp/wordpress/gutenberg/index12.html
あ、ここよくお世話になっとるサイトや……。
つまり……
この「<!– wp: heading –>」みたいなやつが、ウィジェット特有のものではなくて、WordPressの記事も構成するマークアップだったわけだ！
試しに、WordPressの記事編集画面で記事にタグクラウドを配置して、それをコピー。
中身はマークアップされたテキストなんやろ！？ 適当にメモ帳でも開いて、ペースト！
で、でたー！！
あーすっきり。
つまりは
サイドバーのウィジェットの中に「ブロック」をつくって、
<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:heading -->
<h2>タグ</h2>
<!-- /wp:heading -->
<!-- wp:tag-cloud /-->
</div>
<!-- /wp:group -->と記述すればよかったわけでした（改行やインデントは見やすさのためのものです）。
「tags」じゃなくて「tag-cloud」だったか、惜しかったな（そこはどうでもいい）。
まとめると
- WordPressのエディタ（Gutenbergと言うそうです）の要素は、HTMLのコメントアウトのスタイルでマークアップされている
- Gutenbergエディタの記法は、そのままウィジェットのカスタマイズと共通である
- 諦めずに調べるとだいたいすっきりする
またひとつかしこくなれましたね。めでたしめでたし。先人の皆様に感謝します。
ということで、弊サイトにタグクラウドが追加されました。
コメント