今回はLaravelでのパンくずリスト実装方法を紹介する。

なお、ここで紹介するパンくずリストは、2階層以上の可変する階層への対応と、構造化データマークアップに対応するものだ。

パッケージのインストール

パンくずリストくらい自分で実装しても良いのだが、composerでパッケージをインストールする方が早い。

以下のコマンドをターミナルで実行。

1
composer require diglactic/laravel-breadcrumbs

環境によってはインストール時に、メモリオーバーによるエラーが発生することがあるので、その場合はCOMPOSER_MEMORY_LIMIT=-1を追記してインストールをおこなう。

1
COMPOSER_MEMORY_LIMIT=-1 composer require diglactic/laravel-breadcrumbs

パンくず定義ファイルの作成

次に/routesディレクトリ内にbreadcrumbs.phpという名前のファイルを作成。
このファイル内にパンくずリストを定義していくことになる。

なお前述のとおり、可変する階層に対応できるパンくずリストを定義するが、まずはパンくずのルートとなるトップページ（Home）のパンくずを定義するところから始める。
以下のパンくずを定義しよう。

1
2
3
4
5
6
<?php
 
// Home
Breadcrumbs::for('home', function ($trail) {
    $trail->push('Home', route('home'));
});

次に、可変する階層に対応できるunder_layerという名前のパンくずを定義。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<?php
 
// Home
Breadcrumbs::for('home', function ($trail) {
    $trail->push('Home', route('home'));
});
 
// Home > level1 > level2 > ...
Breadcrumbs::for('under_layer', function ($trail, $under_layers = []) {
    $trail->parent('home');
 
    foreach ($under_layers as $layer) {
        $trail->push($layer['title'], $layer['route'] ? $layer['route'] : null);
    }
});

これでパンくずリストを使う準備は完了だ。

ビューファイルでパンくずリストを表示

ビューとなるbladeファイルで、パンくずリストの出力をおこなう。

1
2
3
4
{{ Breadcrumbs::render('under_layer', [
    ['title' => 'カート', 'route' => route('cart')],
    ['title' => '注文手続き', 'route' => route('shopping')],
]) }}

出力はBreadcrumbs::renderでおこなうが、階層のあるページの場合は第二引数に配列としてページ情報を渡してやれば良い。
※routeはサイトにより別途定義する必要あり

先ほど定義したunder_layerパンくずリスト側で、渡された配列に対しループ処理をかけ、可変する階層に対応できるようになっている。

構造化データマークアップに対応させる

デフォルトでは非対応となっているため、追加でパンくずリストを構造化データマークアップに対応させる。

まず、Composerでインストールした今回のパンくずリストは、テンプレートがvendorフォルダ内に存在するため、以下のコマンドを実行してテンプレートをconfigフォルダへコピーする。

1
php artisan vendor:publish --tag=breadcrumbs-config

これでconfig/breadcrumbs.phpが生成されるはずだ。

次にオリジナルのテンプレートを作成する。

今回はresources/views/blocks/breadcrumbs.blade.phpにファイルを作成した。

ファイル内に以下のコードを記述しよう。
※おそらくどの環境でもコピペでそのまま使えるはず

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@unless ($breadcrumbs->isEmpty())
 
    <ol itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumb">
        @foreach ($breadcrumbs as $breadcrumb)
 
            @if (!is_null($breadcrumb->url) && !$loop->last)
                <li itemprop="itemListElement" itemscope
                    itemtype="https://schema.org/ListItem"
                    class="breadcrumb-item">
                    <a itemprop="item" href="{{ $breadcrumb->url }}">
                        <span itemprop="name">
                            {{ $breadcrumb->title }}
                        </span>
                    </a>
                    <meta itemprop="position" content="{{ $loop->index + 1 }}" />
                </li>
            @else
                <li itemprop="itemListElement" itemscope
                    itemtype="https://schema.org/ListItem"
                    class="breadcrumb-item active">
                    <span itemprop="name">
                        {{ $breadcrumb->title }}
                    </span>
                    <meta itemprop="position" content="{{ $loop->index + 1 }}" />
                </li>
            @endif
 
        @endforeach
    </ol>
 
@endunless

オリジナルテンプレートの用意ができたら、先ほど作成したconfig/breadcrumbs.phpのviewの部分を以下のように変更する。

1
2
// 'view' => 'breadcrumbs::bootstrap5',
'view' => 'blocks.breadcrumbs', #--> resources/views/blocks/breadcrumbs.blade.php

configファイルを変更したので、変更を反映させるために以下のコマンドを実行。

1
php artisan config:clear

これでLaravelのパンくずリストを構造化データマークアップに対応させることができた。