複数タームのある階層型メニューを作成する

投稿タイプだけではなく、その中のさらに細かい分類、タクソノミを使ってタームを選択できるメニューを作ります。Wordpress を使った階層型メニュー作成です。

階層構造

ここの例では、「花図鑑」というカスタム投稿タイプがあるという状態を仮定します。

その中に「原産国」というタクソノミがあり、その中に「アフリカ」「オランダ」という２つのタームがあります。

タクソノミはもう１つあり、「季節」というタクソノミです。この中のには春～冬までの４つのタームがあります。

今回設計するサイト構造は、ツリー構造にユーザナビゲーションのしやすさを加味した、ファセット構造を用います。

サイト設計で「ツリー構造」と「ファセット構造」を使い分ける
http://example.com/

以下のメニュー作成では、このようなカスタム投稿タイプ、タクソノミ、タームが作成済みであることを前提に話を進めます。

メニュータイトルの入力

管理画面のサイドメニューから「外観」→「メニュー」と選択し、メニュー編集画面に行きます。

そして、作成するメニューにタイトルを付けます。

ここでは、タイトルを「テストメニュー」としました。タイトルを入力したら、「メニューを作成」ボタンを押します。

投稿タイプのメニュー設置

まず大元、投稿タイプのメニューを作ります。

画面左側にある選択メニュー群から、花図鑑を探します。

管理画面の設定上の注意

事前にカスタム投稿タイプやタームが作成済みなら、画面左側にある選択メニュー群には、そうした投稿タイプやタームがメニューパーツとして作られているはずです。

メニューパーツが表示されていない場合は、「表示オプション」を確認してみてください。

忘れ去られがちな、管理画面の「表示オプション」の設定
http://example.com/

花図鑑

花図鑑があったら、メニュータイトルバーの右端にある「▼」マークを押して設定内容を開きます。

設定内容の中に「最近」「すべて表示」「検索」という３つのタブがあるので、この中から「すべて表示」を選んでタブを開き、「All 花図鑑（表記は設定による）」のチェックボックスにチェックを入れます。

その状態で「メニューに追加」ボタンを押せば、画面右側の「メニュー構造」欄に
メニューパーツが追加され、すべての花図鑑の記事へのリンク、つまり花図鑑アーカイブへのリンクを設置したことになります。

タクソノミを設置

次にタクソノミをメニューパーツとして設置します。

原産国

この際、左側の選択メニュー群からは「カスタムメニュー」を選んで開きます。上図のように、URL の入力欄には仮として適当なアドレスを入力し、リンク文字列欄にはターム名、「原産国」を入力します。

その状態で「メニューに追加」ボタンを押せば、おなじようにメニュー構造欄にメニューパーツが追加されます。

ただし、ユーザ的には原産国のアーカイブに飛んでも意味はありません。その下の階層であるターム、「アフリカ」や「オランダ」などのリンクをくりっくすることによって、それぞれのアーカイブに飛べることに意味があります。

そこで、先ほど追加されたメニューパーツ「原産国」の設定内容である URL は空白に書き換えておきます。そうすることでこの部分はリンク化されず、サブメニューにつながる表示としての役割を果たすようになります。

季節

同じタクソノミどうしである「原産国」とおなじように「季節」もメニューに追加します。

階層を下げる

メニューパーツはドラッグ＆ドロップで移動させることができます。

上図のように、「All 花図鑑」より１つ階層を下げた位置にパーツを移動させることで、パーツに「サブアイテム」の表示が付きます。

タームをサブメニューに追加する

最後にメニュー構造の最下層にしたいタームを作成メニューに追加していきます。

アフリカ：オランダ

アフリカ、オランダ、２つのタームをメニューに組み込んでいくために、画面左側のメニューパーツ群から「原産国」を選び、「▼」マークを押して設定内容を開きます。

その設定内容からメニューに表示させたいタームをチェックボックスにチェックを入れることで選び、「メニューに追加」ボタンを押します。

春：夏：秋：冬

同じように次はメニューパーツ群から「季節」を選んで、設定内容から春～冬のタームをチェックしてメニューに追加します。

すると、上図のように「投稿タイプ ＞ タクソノミ > ターム」の3段階の階層構造がきれいに出来上がります。

これでメニューの作成は、ひと通り完了しました。この状態でメニューを保存します。

サイト内への設置

作成したメニューを実際に利用できるようにするために、サイト内に設置してみます。

メニュー編集画面の上部には、「メニューを編集」と「位置の管理」の２つのタブがあります。メニューの設置は、このうち「位置の管理」のタブで行います。

メニューが設置できる場所は、使っているテーマごとで違います。上の図の例では、「Primary Menu」と「Social Network Icon Menu」の２つの場所が指定できます。ここでは、ヘッダ部に用意された「Primary Menu」に設置していきます。

メニューの指定エリアでは、セレクトボックスのドロップダウンメニューから指定メニューを選択できるようになっています。

例では、「テストメニュー」しかまだ作成していないので、選択肢が１つしかありませんが、複数作っておけば、もちろんこのドロップダウンにすべての作成済みメニューが並びます。

メニューの指定が OK なら、「変更を保存」ボタンを押して、メニュー表示位置を決定します。

サイトを見てみましょう。

表示テスト

作成、設置したメニューを表示してみます。

複数あるすべてのタームまでメニューが表示されていることが確認できました。

機能テスト

作成したメニューが目的通りの機能を果たすかテストをします。

メニューの目的は、それぞれのメニュータイトルをクリックすることで、それぞれに合わせたアーカイブページに飛べることです。

テスト用にテーマは twentysixteen を使い、パンくずリストには Breadcrumb NavXt プラグインを利用しています。

アーカイブ：花図鑑

右上に設置した「All 花図鑑」メニューから、花図鑑のアーカイブに飛びます。パンくずの階層も正しく表示されています。

アーカイブ：アフリカ

次に原産国がアフリカの花のアーカイブに飛びます。パンくずリストの階層も正しく、タームまでのサブメニューが正しく開かれています。

アーカイブ：夏

季節が夏の花であるアーカイブに飛びます。夏の花であるグラジオラスが記事一覧のトップに表示されています。

アーカイブ：冬

最後に冬のアーカイブに飛びます。ページに「季節：冬」とアーカイブのタイトルも表示され、ページ説明も「冬に咲く花々です。」と設定通り表示されています。

ファセット構造のチェック

今回の場合、原産国がアフリカであり、花が咲く季節が冬であるフリージアが、アフリカ、冬の両アーカイブできちんと表示されています。さらにオランダや夏など、他のアーカイブにフリージアが表示されていないことも確認します。

この表示/非表示が正しく行われていれば、サイトのファセット構造が、最初の計画通り構築されたことになります。

まとめ

メニュー作成を行うことで、サイトのユーザビリティが格段に高くなりますし、カスタム投稿タイプを採用したサイトでは、このメニュー設計/制作の工程は必須であり、大変重要な意味を持ちます。

今回のメニュー作成を含め、全体を最適化したサイト構築を行うことで、通常のブログの範囲を超えた、価値の高いサイトをせっけいすることができます。