Jetプラグインを解き明かす

カスタムタクソノミーの作り方 – JetEngine

JetEngineのTaxomomiesで『投稿』にも、『固定ページ』にも、『カスタム投稿タイプ』にも、すべの投稿タイプに『カスタムタクソノミー』を作成することができます。

また、JetEngineでカスタムタクソノミーを作成するとWordPressのありとあらゆる場所のラベル表示やタクソノミーにカスタムフィールドの追加ができるなど、さらに細かいUIでの作成が可能になります。

しかし今回は投稿の『カテゴリー』『タグ』と全く同じUIになるよう、あえて一番シンプルなカスタムタクソノミーの追加の仕方を紹介します。

JetEngineのことをもっと学びたい人はJetEngineの使い方完全ガイドを見てください!
さまざまなJetEngineに関する情報がまとめられています。

また、JetEngineでカスタムタクソノミーの作り方を紹介した動画もありますのでどうぞ活用してくださいね!

カスタムタクソノミーの役割と使用するメリット

『タクソノミー』とは『分類』という意味で、カテゴリーやタグもタクソノミーの一種となります。

そして『カスタムタクソノミー』とは、自分で作成した『カテゴリー』や『タグ』と同じ機能を持つもののことを言います。

カスタムタクソノミーを使うメリットは、とにかく情報の管理のしやすさと、サイトでタクソノミーごとにページをソートできることです。

またカスタムタクソノミーは自分が必要とする分何個でも作成することができます。

通常WordPressのデフォルトにあるタクソノミーは『投稿』の投稿タイプにある『カテゴリー』と『タグ』だけですから、それだけで情報量の多いサイトを管理していくのは大変です。

例えば、中古車販売サイトがあるとして、その中に『車』というカスタム投稿タイプがあるとします。

その中に『メーカー』というタクソノミーがあれば、その中でTOYOTA、Honda、日産・・・などと各メーカーごとにページをまとめることができます。

そうすればカスタムタクソノミーで仕分けしたありとあらゆる内容ごとにソートしてページを一覧表示させることができるので、サイトを訪問するユーザーにとっても必要な情報だけ絞り込みをして見れるためとても親切ですよね。

カスタムタクソノミーを追加する方法-4つのステップ

JetEngineでどのようにカスタムタクソノミーを追加するのかを、この記事のサンプルとして『車』という投稿タイプに『メーカー』というカスタムタクソノミーを実際に追加していきたいと思います。

なお、こちらで紹介する方法は投稿の『カテゴリー』と『タグ』と同じUIでカスタムタクソノミーを追加する方法です。

①Add Newをクリック

JetEngineのTaxonomiesの一覧画面・Add Newをクリック

ダッシュボードのメニューの『JetEngine』内にある『Taxonomies』をクリックすると上記の『Custom Taxonomies List』という画面が表示されます。

上部にある『Add New』をクリックします。

②General Settings設定

General Settingsの表示画面

まず、General Settingで新規追加するカスタムタクソノミーの必要事項を入力します。

Taxonomy Name

Taxonomy Nameの入力・投稿タイプのサブメニューに表示させたい名称を入力

『Taxonomy Name』は新規追加するカスタムタクソノミーのタイトルを入力します。

ちなみにここで設定した名前が投稿タイプのメニューに反映されます。

※この記事のサンプルでは『Taxonomu Name』を『メーカー』とします。

Taxonomy Slug

Taxonomy Slugの入力・半角英数字と`-` または `_`で記入

『Taxonomy Slug』にスラッグを半角英数字と`-` または `_` の記事号で入力します。

スラッグとはURLの一部になるもので、ここはTaxonomy Nameでつけたタイトルに関連したワードにしましょう。

※この記事のサンプルではTaxonomu Slugを『car_brand』としました。

Post Type

Post Typeの説明・リストからタクソノミーを載せたい投稿タイプを選択(複数選択可能)

『Post Type』では作成中のカスタムタクソノミーを表示させたい投稿タイプをリストの中から選択します。

プレイスホルダーをクリックすると以下のような選択可能な投稿タイプのリストが選択されます。

  • 投稿
  • 固定ページ
  • メディア
  • リビジョン
  • ナビゲーションメニューの項目
  • カスタムCSS
  • チェンジセット
  • oEmbed Response
  • ユーザーリクエスト
  • 再利用ブロック
  • テンプレート
  • ランディングページ
  • マイテンプレート
  • Custom Code
  • Listing Items
  • カスタム投稿タイプ
  • Custom Fonts
  • Custom Icons

※この記事のサンプルでは自分で作成した『車』の投稿タイプを選択しています。

`Edit taxonomy/meta box` link

`Edit taxonomy/meta box` linkの説明・カスタムタクソノミーの編集画面にJetEngineのタクソノミーの編集画面にジャンプするリンクをつけるかどうかの設定

『`Edit taxonomy/meta box` link』はTaxonomiesのMeta fieldsからカスタムタクソノミーの編集画面に追加した追加フィールドの横にTaxonomiesの編集画面にジャンプするリンク(ギアマーク)をつけるかどうかの選択です。

`Edit taxonomy/meta box` linkをオンにした後のタクソノミー変種画面に表示されたリンクのサンプル

上記は『`Edit taxonomy/meta box` link』を『オン』にし、編集画面にリンクが表示されたときの表示画面です。

なお、上記画像の『サムネ』という追加フィールドはMeta fieldsで追加したカスタムフィールドです。

このリンクはMeta fieldsで追加したフィールドがある場合のみ表示されますので、特に追加フィールドがない場合はいくら`Edit taxonomy/meta box` link』を『オン』にしても何も表示されることはありません。

③Advanced Settingsの設定

Advanced Settingsの表示画面

『Advanced Settings』は自分が編集するWordPressの編集画面のUIを編集するものです。

このAdvanced Settingsの編集画面は、Taxonimiesだけに限らずJetEngineのほとんどの機能の編集画面にあるものです。

Advanced Settingsでは一体何ができるのかを『JetEngineのLabelsとAdvanced Settingsの設定方法』の記事でくわしく説明していますのでよかったらご覧くださいね。

基本的にTaxonomiesでのAdvanced Settingsの設定はデフォルトのままで問題ありませんが、以下のセクションで説明することは要チェックです!

Show in Admin Menuはオンにしましょう

 Advanced Settingsの『Show in Admin Menu』をオンにするとどうなるかの説明

『Show in Admin Menu』はダッシュボードのアドミンメニュー上の投稿タイプのサブメニュー内にタクソノミーのラベルを表示させるかどうかの選択です。

ここはデフォルトですでに『オン』に設定されていますが、スイッチャーが『オン』であるかの確認をきちんとしましょう。

階層(親/子カテゴリー)を作りたい場合はHieralchicalをオンにする

Advanced Settings・Hieralchicalをオンにするとどうなるかの説明・タクソノミーに階層を作る

『Hierarchical』(ハイアラーキカル)はタクソノミーに『カテゴリー』のような親カテゴリー/子カテゴリーの階層を付けるかどうかの選択です。

Hierarchicalのデフォルトは『オフ』に設定されていますので、階層を付ける場合は『オン』に設定してください。

※この記事のサンプルでは車のメーカーの階層がある場合があるのでHierarchicalを『オン』に設定します。
→メーカーの階層を例えるなら、MINIはBMWが所有している車なので親カテゴリーがBMWで子カテゴリーがMINIとなります。

④Add Taxonomyをクリック

『Add Taxonomy』をクリック

『Add Taxonomy』をクリックします。

これでカスタムタクソノミーの『メーカー』が『車』の投稿タイプに追加されました。

カスタムタクソノミーを追加した後のタクソノミー一覧画面の様子
Taxonimies一覧画面

追加したタクソノミーの項目の作り方はタグ・カテゴリーの編集の仕方と同じ

追加したタクソノミーの編集画面

上記は作成したカスタムタクソノミーの『メーカー』の編集画面です。

カスタムタクソノミーの項目の追加の仕方は投稿タイプの『カテゴリー』や『タグ』と同じです。

くわしいタクソノミーの編集の仕方についてくわしく知りたい方は【WordPress 投稿の『カテゴリーとタグ』を編集する方法】の記事をご覧くださいね!

追加したタクソノミーに項目(カテゴリー)を追加した後の表示画面

上記は『メーカー』のタクソノミーの項目を追加した後の表示画面です。

参考として以下の項目をメーカーに追加しました。

  • TOYOTA
  • フォード
  • フォルクスワーゲン
  • 日産
投稿タイプのエディター内に表示されたタクソノミーの実際の表示

上記は実際の『車』の投稿タイプの編集画面にタクソノミーが追加された時の表示画面です。

画面左側のエディターに『メーカー』というタイトルとタクソノミーのリストが表示されました。

上記セクションで触れなかった機能・Labels / Meta fields

上記セクションで『Labels』と『Meta fields』について特に触れなかったのは、カスタムタクソノミーのUIを『投稿』の『カテゴリー』『タグ』と同じUIにするためにはこれらの設定が正直不要であったためです。

ということは、これらの設定も加えるとWordPressの編集画面をさらに自分好みのUIにカスタムできるということです。

LabelsはWordPress編集画面の各ラベルを変更する機能

Labels・Menu name textを実際に変更した後のアドミンメニューのサブメニューの表示画面

『Labels』はWordPressの編集画面の各ラベル(機能の名称)を変更できるツールです。

例えば上記画面のようにLabelsの『Menu name text』に『メーカーです。』と記入すると、アドミンメニュー内のサブメニューに今まで『メーカー』と表示されていたものが『メーカーです。』に変更します。

Lebelsにではこのようにして『Menu name text』以外にも各所の編集機能にラベルを個別に変更していくことができます。

しかし、 Labelsは未記入のままでまったく問題ありません。

というのも何も記入しないでおけば、ほとんどすべてのラベルがWordPressのデフォルトと同じUIになるからです。

このLabelsについて『JetEngineのLabelsとAdvanced Settingsの設定方法』という記事でさらにくわしく説明していますのでよかったらご覧になってくださいね。

Meta fieldsは編集画面に追加フィールドを入れる機能

カスタムタクソノミーの編集画面に表示されているデフォルトのフィールド(説明)

『Taxonimies』の『Meta fields』は、カスタムタクソノミーの編集画面内に追加フィールドを入れることができます。

上記は自分で作成した『メーカー』というタクソノミーですが、その編集画面内にはすでにデフォルトで『説明』というフィールドが入っています。

『説明』以外の追加フィールドを『Meta fields』で作成し、同じ編集画面に追加していくことができます。

TaxonimiesのMeta fieldsでフィールドを追加した後のタクソノミーの編集画面

上記はTaxonomiesの編集画面内にあるMeta fieldsで作成した『サムネ』と『国』を選択する追加フィールド(サンプル)です。

Meta fieldsでカスタムフィールドを作成する方法については『JetEngine Meta fieldsの機能説明・カスタムフィールドのレイアウトのカスタマイズ』の記事でくわしく説明をしていますのでそちらを参考にしてください。

まとめ

JetEngineでカスタムタクソノミーを作るには、たった4ステップで簡単にカスタムタクソノミーが追加できるのでとても簡単ですね。

JetEngineの編集画面を開けるとなんだか色々な機能や設定があり、一見むずかしそうに見えてしまいますが、その中には全然触らなくてもまったく問題がない機能がたくさんあります。

Labelsで編集画面のラベルの変更ができたり、Advanced Settingsに細かな機能設定があったり、Meta fieldsでタクソノミーの編集画面に追加フィールドも入れることもできたりと、通常よりも必要以上の設定ができてしまうのが『JetEngine』なんですよね。

だからそれらの設定の大半をすっ飛ばしても、CPT UIと同じレベルのカスタムタクソノミーができ上がるというだけなので、まずはこの記事で紹介したカスタムタクソノミーを追加する方法-4ステップをぜひ参考にしてくださいね!

この記事ではJetEngineでカスタムタクソノミーを作成する方法に焦点を当てましたが、JetEngineにはその他にも色々な機能や設定がぎゅっと詰まっています。

JetEngineで何か路頭に迷ったら、ぜひ『JetEngineの使い方完全ガイド』をご覧になってください。

この記事でJetEngineでできることを一挙に紹介していますので、きっと何かの問題解決に役立てると思います!

目次