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

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

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

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

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

composer require diglactic/laravel-breadcrumbs

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

COMPOSER_MEMORY_LIMIT=-1 composer require diglactic/laravel-breadcrumbs

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

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

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

<?php

// Home
Breadcrumbs::for('home', function ($trail) {
    $trail->push('Home', route('home'));
});

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

<?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ファイルで、パンくずリストの出力をおこなう。

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

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

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

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

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

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

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

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

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

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

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

@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の部分を以下のように変更する。

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

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

php artisan config:clear

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