[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 must be es...

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 $before . ...

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 must be es...

chiilabo.com

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

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

chiilabo.com

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