スポンサーリンク
スポンサーリンク

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

インターネット小話ニッチな話題ホームページ運用

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

WordPressのサイドバーに記事のタグを追加した
WordPressのサイドバーに記事のタグを追加した

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

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

スポンサーリンク

「タグ」を表示する

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

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

Cocoonの投稿にタグを表示する設定
Cocoonの投稿にタグを表示する設定

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

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

WordPress標準の「タグクラウド」はすべてのタグ
WordPress標準の「タグクラウド」はすべてのタグ

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

タグを表示するphpコード

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

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

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

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

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

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

function.phpにショートコードを登録したが……
function.phpにショートコードを登録したが……

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

ショートコードを記事に追加できない
ショートコードを記事に追加できない

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

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

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

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

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

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

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

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

テキストウィジェットにphpコードを入力して評価する
テキストウィジェットにphpコードを入力して評価する

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

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

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

サイドバーに追加したそのほかのウィジェット
サイドバーに追加したそのほかのウィジェット
QRコードを読み込むと、関連記事を確認できます。
[Cocoon] 記事のタグをサイドバーに表示した(タグクラウドではない)
タイトルとURLをコピーしました