[Cocoon] 記事のタグをサイドバーに表示した（タグクラウドではない）

ブログのサイドバーの項目を見直してみました。

カスタム検索とナビゲーションメニューの間に、
・リンク
・目次
・タグ
・関連記事
を追加しました。

とくに、記事のタグを追加するのが、大変だったのでメモします。

1. 「タグ」を表示する

今回、サイドバーにタグを設置しようと思ったのは、検索が面倒な人に関連記事を探しやすくしたいからです。

Cocoonテーマでは、記事のタイトル上下や本文下には、「タグ」を表示することができます。

しかし、タグに関するウィジェットというと、WordPress 標準の「タグクラウド」ウィジェットがあります。

しかし、「タグクラウド」は、ブログ全体のタグが一覧されてしまいます。

タグがきちんと整理されているサイトには良いのですが、思い付きでタグ付けしている このサイトの場合は、関係ないタグが多く表示されてしまって探しにくいです。

2. タグを表示するphpコード

Cocoonのソースコードを見てみると、「カテゴリ・タグ（categories-tags）」のテンプレート（tmp）に書いてありました。

  <?php if (get_the_tags()): ?>
  <div class="entry-tags"><?php the_tag_links() ?></div>
  <?php endif; ?>

意味は、「もし、記事にタグがついていれば、タグのリンク一覧を表示する」となります。

cocoon/tmp/categories-tags.php at master · yhira/cocoon

100％GPLの無料Wordpressテーマです。開発中の開発バージョンです。安定版をダウンロードする場合は、Cocoon配布サイトからダウンロードしてください。 - yhira/cocoon

github.com

3. ショートコードにできなかった

/** タグのショートコードを作る*/
function generate_tags( $atts ) {
        return the_tag_links();
}
add_shortcode( 'tags', 'generate_tags' );

これを、function.phpに入れて、ショートコードに登録したかったのですが、うまくいきませんでした。

ショートコードを挿入すると、更新できなくなりました。

更新に失敗しました。返答が正しい JSON レスポンスではありません。

名前空間の関係で get_tag_links()関数の呼び出しがうまくいっていないようです。

追記：2022年11月6日

テキストウィジェットからphpコードを評価する方法ではなく、ショートコードとしても作成できました。

名前空間の問題ではなく、get_tag_links()関数内のechoで文字列が「出力」されていたからでした。

[Cocoon] 記事の関連タグをサイドバーに表示した・その2（ショートコードにできた）

結論としては、the_tag_links() ではなく、get_the_tag_links()を呼べばよかっただけでした。 以前の方法の問題点 以前、記事の関連タグをサイドバーに表示するときに、ショートコードにできず、テキストウィジェットでPHPコードを実行する、という方法でむりやり解決していました。 ただし、この方法はウィジェットを確認するたびに、ビジュアル表示になって「コードが評価」されててまうため、作り直しが必要でした。 ウィジェットを確認するだけで壊れてしまうのです…...

chiilabo.com

4. テキストウィジェットからphpコードを呼び出せた

自分で1からタグを表示するショートコードを作るのは大変そうだったので、以前、テキストウィジェットからphpコードを実行できるようにするカスタマイズを思い出しました。

WordPressのテンプレートをいじらずにPHPコードで遊びたい【テキストウィジェットで評価】

WordPressのカスタマイズにはPHPコードを利用しますが、テンプレートをいじるのはなんか不安です。 ウィジェットとしてPHPコードを実行したいと思います。 追記（2024-07-20） 任意のPHPコードを評価する機能は、セキュリティリスクが大きいので削除しました。 カスタムHTMLではPHPコードは実行できない まず試したのがウィジェットの「カスタムHTML」です。 しかし、「<?」で始まるタグはエラーになってしまいます。 Special characters mus...

chiilabo.com

ウィジェットに「テキスト」を追加して、コードを入力します。

<?php if (get_the_tags()): ?><h3 class="widget">関連キーワード</h3><div class="entry-tags"><?php the_tag_links() ?></div><?php endif; ?>

テキスト編集のまま、すぐに「保存」します。

ビジュアル編集にして戻すと、コードが評価されて、入力した関数が消えてしまうからです。

ということで、ウィジェットにタグを追加できました。

5. そのほかの追加ウィジェット

リンクのリストは、わざわざメニューを作って、「ナビゲーションメニュー」にするのが面倒だったので、「カスタムHTML」にしました。

続きはこちら。

[PHP] タグ一覧に件数を追加する（Cocoon）

ショートコードで表示している、ブログの記事のタグ一覧に、「件数」を追加しました。 「タグリンク」をタップしても表示される記事が少ないと、別のタグを探し直さないといけないからです。 前回はこちら。 「クリック率向上のために！WordPressで「タグ一覧」に「記事数」を追加する方法」のコードを元に、ショートコード用関数にするために echo の部分を return にして、文字列を返すようにします。 // the_tags_with_count() の末尾 echo $befo...

chiilabo.com

[Cocoon]タグ一覧から1記事しかないタグを除外した（WordPress）

WordPressのCocoonテーマのタグ一覧で、1記事しかないタグを非表示にするように、functions.phpのショートコードを修正しました。 記事数が2以上のタグを降順で表示するようにしたら、タグ一覧がスッキリして関連記事を探しやすくなりました。 生成AIでコードの修正案を生成したので、数分でできました。 環境 WordPress, Cocoonテーマ さらにタグ一覧をカスタマイズした 以前、WordPressサイトで記事のタグ一覧を表示するショートコードを作りまし...

chiilabo.com

こちらもどうぞ。

WordPressのテンプレートをいじらずにPHPコードで遊びたい【テキストウィジェットで評価】

WordPressのカスタマイズにはPHPコードを利用しますが、テンプレートをいじるのはなんか不安です。 ウィジェットとしてPHPコードを実行したいと思います。 追記（2024-07-20） 任意のPHPコードを評価する機能は、セキュリティリスクが大きいので削除しました。 カスタムHTMLではPHPコードは実行できない まず試したのがウィジェットの「カスタムHTML」です。 しかし、「<?」で始まるタグはエラーになってしまいます。 Special characters mus...

chiilabo.com

Googleのカスタム検索ボックスの遅延表示によるガタツキをなくしたい【CLS】

PCでページを表示したときに、サイドバーの検索バーが遅れて表示されて、画面がズレるのが気になります。 遅延表示による画面のガタツキ 検索バーには、Googleのカスタム検索を利用しています。 サイドバーの検索ボックスの遅延表示でズレる このように、ウェブページの画面が、後から表示される要素によってズレることを「CLS（Cumulative Layout Shift：累積的な割付の変移）」といいます。 div要素のheight属性ではうまくいかず スクリプトが非同期処理で読み込...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。