カスタムブロックで投稿のタグ型カスタムタクソノミーを表示する。

カスタム投稿にタグ型のカスタムタクソノミーを設定したけど、使用しているテーマでは表示対応していない……ってこと、ありますよね。

テーマファイルをなるべく触りたくなかったため、カスタムブロックを作って、表示している投稿に設定したタクソノミーのターム一覧を、ブロックとして挿入できるようにしました!

プラグイン Lazy Blocks を使えば、テーマファイルを触ることなく、管理画面上でカスタムブロックが作成できたので、今回はその方法をご紹介します!

「タクソノミー」や「ターム」という言葉がわかりにくいかもしれないので、補足します。
画像のように、ふつうの投稿では「カテゴリー」や「タグ」という分類名に当たる部分が「タクソノミー」、「カテゴリー名」やタグそのもののように分類名に対して設定した項目のことを「ターム」と言います。

カスタムタクソノミーはカテゴリーのように親子関係を持つものも作れますが、今回はデフォルトの「タグ」に近い、親子関係を持たずに複数設定することを前提としている形式のものを使うので、便宜的に「タグ型カスタムタクソノミー」と呼んでいます。

こんな人におすすめ

  • 使用しているテーマには、デフォルトでカスタムタクソノミーを表示させる機能がない。
  • ひとつの投稿に複数のタグ型カスタムタクソノミーを設定する。
  • 投稿記事ページ内で、表示している投稿に設定されているターム(カスタムタグ)の一覧を表示させたい。
  • なるべくテーマファイルそのものに手を加えたくない。
  • Block Lab など別のプラグインでカスタムブロックを作っているけど、テーマファイルを追加するのがめんどう。

カスタムブロックを作成するプラグイン Lazy Blocks をインストール

Lazy Blocks は、管理画面上でカスタムブロックを作成できるプラグインです。

ブロックとして表示させたいコードも管理画面上で書くことができ、別途表示用のファイルをテーマディレクトリ内に追加する必要もありません。
フロント用のHTMLだけでなく、PHPのコードも書けるようになっているため、今回のように「現在の投稿のタームを取得する」みたいなブロックも簡単に作成可能です!

WordPress.org のプラグインページはこちらです。

ドキュメントへのリンクもあるので安心ですね!

プラグインをインストールして有効化します。

カスタムブロックを作成する

管理画面のメニューに「Lazy Blocks」が追加されているので、「新規作成」でカスタムブロックを作っていきます。

今回持たせたい機能は、「投稿記事の画面で、表示中の投稿に設定されているタグ型カスタムタクソノミーのタームをリンク付きで出力する」です。

Control は必要ないため空にしておきます。

CodePHP を選択し、エディタ下部の Single output code for Frontend and Editor にチェックを入れます。

エディタに入力するのは以下のコード

<ul class="p-post-custam-terms">
<?php $taxonomy_slags = array_keys(get_the_taxonomies($post->ID)); 
  foreach($taxonomy_slags as $taxonomy_slag) {
    echo get_the_term_list(
      $post->ID,
      $taxonomy_slag,
      '<li>',
      '',
      '</li>' );
  }
?> 
</ul>

リンク付きのタームをリスト形式で出力するようにしました。
ulにつけたクラスはスタイリング用につけているものなので、お好みで改変してください。

コードの説明

何が書いてあるのかざっくり説明します!

$taxonomy_slags = array_keys(get_the_taxonomies($post->ID));

get_the_taxonomies($post->ID)で、表示されている投稿のIDに紐づいているタクソノミー名の一覧を取得し、その一覧を$taxonomy_slagsとして保持します。

  foreach($taxonomy_slags as $taxonomy_slag) {
    echo get_the_term_list(
      $post->ID,
      $taxonomy_slag,
      '<li>',
      '',
      '</li>' );
  }

先ほど取得した一覧の項目(投稿のIDに紐づいているタクソノミー名)のひとつひとつを$taxonomy_slagとしながら、foreach{}内の処理をくり返します。

get_the_term_listは、投稿IDとタクソノミー名から、設定されているタームの一覧をリンク付きで取得するコードです。

もっと詳しく知りたい人は下記をご参照ください。

コードが書けたら、画面右側の Blocks タブでブロックの名前やスラッグ、アイコン等を設定します。

この時、ConditionShow in posts を設定すると、作成したカスタムブロックを表示させる。
カスタムタクソノミーを設定していないページでは使わないものなので、必要な投稿にのみ表示されるブロックとして設定しておくのもいいかも知れません。

公開すると、作成したカスタムブロックが投稿で使えるようになります!

通常のブロックと同じように、任意の場所に挿入でき、エディタ画面で出力結果も表示してくれます。

スタイリングについて

CSS でのスタイリングが必要な場合は、テーマの追加 CSS として書くこともできますし、テーマに依存させたくない場合は、カスタムブロックのコード内にインラインで書いてしまうのもアリだと思います。

今回は設定しませんでしたが、Control と組み合わせると、デザインのカスタマイズが可能なカスタムブロックも作れますね。

Lazy Blocks 自体が使い勝手の良さそうなプラグインですので、色々役立ててください!

この記事を書いた人

ひしもち

京都の某Web制作会社で4年弱勤務したのち、退職して個人事業主となりました。
現在の主なお仕事は、WordPressを利用したWebサイトの制作です。
業務システムのUIデザインをしていた経験もあり。

専業主夫+3人の子どもたちと暮らしています。ゲーム好きなインドア派ですが、ゆるゆる楽しむプレイスタイルです。