Wix専門のWeb制作会社、合同会社アクトワンのVelo開発部です！
今回は、「現在どこのページにアクセスしているか」を表示するための「パンくずリスト」について、Veloで表示をカスタムする方法を解説致します！
ちなみに「パンくずリスト」の名前の由来は、グリム童話の「ヘンゼルとグレーテル」です。
物語には、ヘンゼルとグレーテルが家から森へ行く途中、帰り道を見失わないように、目印にパンくずを少しずつ落としていく場面があります。
さて、以下は Velo API Reference からの引用です。
Breadcrumbs (パンくずリスト)
「Velo を使えばパンくずリストのアイテム(items)を構成するラベル(label)、リンク(link)、アイコン(icon)をカスタマイズすることが出来ます。
また Wix エディターではサポートされていない動的ページにもパンくずリストを追加することが出来ます。」
「パンくずリストはラベル、アイコン、リンクから成り立っています。
サイト訪問者はラベルやアイコンをクリックしてリンク先に移動することが出来ます。
アイコンはメディア・マネジャー上のベクターイメージなどです。
リンクはオプションです。また表示する階層を … を使って短縮することも可能です。」
従ってパンくずリストの要点は以下の2点です。
items プロパティを持ち、label、icon、link で構成されている。
動的ページ上では階層を表示しない。
items
サイトのパンくずリスト(breadscrumbs1)の items プロパティをコンソールに表示してみると以下の様になっています。
戻り値はページの階層通りの配列になっています。
ホームページはアイコン表示になっているので画像ソースが登録されています。
芸の細かいところは配列の3番目のオブジェクトに isCurrent: true で、これは現在表示しているページ名 Page3の下線に対応しています。
items は読み書き可能なので、ページ読み込み時に書き換えればパンくずのカスタマイズは可能です。例えば以下のコードを実行してみましょう。
結果は以下の様に期待通りになります。
動的ページのパス
パンくずリストのデフォルトのラベル(label)はSEOベーシックで定義されるページの名前です。ところが動的ページの場合は表示が違っていてもページの名前はすべて同じです。
従って表示されている内容(CMSのitem)に応じたラベルは作ってくれません。
これがサポートしていないという意味なのだと思います。
動的ページはパス(path) によって表示内容を変えています。
従って表示内容に応じたパンくずリストを作りたければ表示ページの path 特にその最後尾の slug を取ってくればカスタマイズが可能になります。
slug を取得する
上図ではパンくずリストは Fiends(name) となっていて、確かに名前の Jiro を反映していません。
一方 path はURLの一部なのでブラウザーで確認できます。
動的ページでは prefix にすべてのページがぶら下がる構成になっています。ここでの prefix は "friends" です。そしてその傘下にぶら下がっているのがページ固有の slug で、ここではCMSの名前(name)フィールドで slug を作っています。
つまりこのページの slug は "jiro" で、これが path になります。
slug とページは1対1に対応しています。これは動的ページに限らずブログの Posts でも同じことです。実際、ブログには関数 getPostBySlug( ) が用意されています。
カスタマイズのコーディング
それでは以下のコーディングで動的ページから slug を取得してパンくずリストをカスタマイズしてみましょう。
1行目で path を取得するためのモジュールをインストールポートしています。
5行目で path を取得し、6行目でその配列から slug を取得しています。
path が配列になっているのは階層を持つことを意味していますが、ここでは slug 以外の階層はありませんから path[0] で slug が取得できます。
8行目～11行目で、この slug を使ってパンくずリストを書き換えています。本来は2階層のパンくずリストを3階層に書き換えています。
ホームのアイコンはそのままにしています。
実行結果を以下に示しました。
パンくずリストは期待通りの表示になっています。「jiro」に下線もついています。
Wixブログの場合
ブログの場合も同様で、パンくずリストの階層に記事のタイトルは反映されません。
従って slug を取得しますが、ブログの場合はこの slug からバックエンド関数 getPostsBySlug( ) を実行すれば CMSの当該 postオブジェクトを取得できます。
以下のコードを見てみましょう。
2行目でバックエンド関数をインポートしています。
9行目で当該postオブジェクトを取得し、10行目でそのタイトルを取得しています。
12行目からは動的ページの場合と同じです。
CMSの利用
動的ページの場合も、ブログの場合も、データを保存するCMSを持っています。
従って slug を取得した後はCMSにクエリーして当該アイテムを取得する方法もあります。
Comments