今だけ、引きこもり八王子:Cocoonのタグ本文のコンテンツ表示とタグ数・投稿数の表示

この記事のURLとタイトルをコピーする

Photo by The HK Photo Company on Unsplash
前回 テイクアウトやデリバリー、地元ビジネスの情報サイト「今だけ、引きこもり八王子」の作り方 はこのWebサイトで使っているプラグインやテーマなどについてご紹介させていただきました。このサイトでは「店名」「会社名」についてタグを使って分類しています。Cocoonが追加している「タグ本文」にお店の情報を追加しているのでその内容を各コンテンツに表示するようにカスタマイズしたのでその方法について書きます。

テーマ:Cocoonで追加されているタグの項目

テーマCocoonではタグに複数の項目が追加されています。

この赤枠で囲った項目が、Cocoon独自の項目です。今だけ、引きこもり八王子 では、この中のコンテンツ本文に住所や電話番号などの基本情報を記述して、各タグページに表示するようにしました。

コンテンツ本文は、タグページにこんな感じに表示されます。

お店の住所などの情報を各情報ページにも表示させたいと思った

通常のタグの利用方法ではないのかもしれないのですが、このWebサイトでは

タグ=店名、ビジネス名

なので記事を見て 「おいしそうなテイクアウトだなぁ、どこにあるんだろう?」 と思ったときにすぐに住所やホームページがわかった方が便利です。タグは店名なのでクリックしてもらえれば見ることはできるのですがちょっとめんどくさいです。

ということで、タグに指定してあるタグ本文を表示するショートコードを作って投稿本文の下に表示させるようにしてみました。

タグのタグ本文を表示させるショートコード

タグのタグ本文を表示させるショートコードは、

このように書きました。このWebサイトの場合、タグは1つしか指定しないので1つめのタグからタグ本文:the_tag_contentを取得して、h2でタグ名の見出しをつけて返しています。

タグ本文を表示するショートコードを投稿本文下ウィジェットに指定する

このショートコードを投稿本文下ウィジェットに指定します。

ダッシュボード 外観>ウィジェット をクリック

テキストウィジェットを選んで、投稿本文下をクリックし、ウィジェットを追加をクリック

先ほど作ったショートコードを

このように指定して、保存をクリックします。

このようにすると、各投稿ページの下に

タグ本文が表示されて、記事を見てすぐにそのお店の情報を参照することができるようになりました。

タグ数=掲載店の数 や 投稿数 を表示するショートコード

Webサイトを見たときにどのくらいの情報量があるのかがわかるように掲載店数投稿数を表示しています。この表示もショートコードで行っています。

タグ数=掲載店数 を返すショートコード

投稿数を返すショートコード

と、こんな感じです。あとは先ほどと同じように表示したいウィジェットエリアに

のショートコードを追加すれば

このようにリアルタイムで件数を反映させることができます。

おまけ:ショートコード用のphpコードはどこに書くか?

ショートコード用のphpコードはどこに書くか?ですが、

・子テーマのfunctions.php

に書く(ref:子テーマ

かあるいは

Code Snippets

というプラグインを使って書いてください。(ref:Code Snippets)

今回作ったショートコードはCode Snippetsに置いて実行しています。インポートできるファイルを下に置いておきますので、Code Snippetsをお使いの場合はインポートすればすぐに使えると思います(圧縮してあるので展開してからご利用ください)。

usortblog_tagetc.json

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

この記事のURLとタイトルをコピーする
スポンサーリンク
スポンサー広告
トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。