laravel-breadcrumbs というパッケージを使って、Laravel でパンくずリストを実装してみます。

パンくずリストとは？

この画像のように、ホーム ⇨ カテゴリー ⇨ 商品名などと、今ユーザーがどのページにいるのか迷わないような意図で設置されます。

パンくずリストという名前の由来は、

童話「ヘンゼルとグレーテル」の話の中に主人公の兄弟が森に入るときに、迷子にならないように自分たちが通ってきた道にパンくずを置いていったエピソードが由来となっています。

⇨ 引用元 URL

Laravel には、このパンくずリストを比較的簡単に作れるパッケージがあるので、それの使い方を記事にしていきたいと思います。

⇨ Laravel 記事の目次はこちら

環境

MacOS Laravel6 “diglactic/laravel-breadcrumbs”: “^6.1”,

パンくずリストのパッケージのインストール

composer require diglactic/laravel-breadcrumbs

パッケージのドキュメント

パンくずリストを定義するファイルを作成する

ファイルを作成します。（web.php とか、api.php と同じフォルダに作ります）

routes/breadcrumbs.php

中身をこのように記載してください。

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

for(‘home’,

の home は、「このパンくずリストの名前」みたいなものです。

push(‘Home’

の Home は、表示するテキストを指します。「ホーム」でも「ほ〜〜む」でもなんでも表示したいやつにしてみてください。

route(‘home’)

の home は、web.php で定義しているルーティングの name のやつです。前述の Home というテキストをクリックしたときに飛ぶリンクを指定します。

パンくずリストを表示で呼び出す

呼び出し方は、表示の blade に１行書くだけです。

{{ Breadcrumbs::render('home') }}

ここの home は、さきほどの項目でやった、

Breadcrumbs::for('home'

for の home を指定します。

階層のあるパンくずリストを作る

階層がある場合は、親階層と、今の階層の２行書きます。

// Home
Breadcrumbs::for('home', function ($trail) {
    $trail->push('ホーム', route('home'));
});
// Home > About
Breadcrumbs::for('about', function ($trail) {
    $trail->parent('home');
    $trail->push('このサイトについて', route('about'));
});

$trail->parent(‘home’);

の home は、親の for の名前になります。

そして、表示の Blade に

{{ Breadcrumbs::render('about') }}

を書くと、

画像のようなパンくずリストが完成しました！

パンくずリストの表示に変数を使う

// $titleのところに変数が入る。
Breadcrumbs::for('post', function ($trail,$title) {
    $trail->parent('home');
    $trail->push($title, route('post'));
});

$title のところに変数が入ります。

引数の要領で、表示の Blade からそこに変数を渡します。

表示の Blade

{{ Breadcrumbs::render('post','タイトルだよお') }}

//実際は下のように、Bladeには変数でpostがきていて、そこにタイトルオブジェクトがあるはずなのでこんな感じになると思います。
{{-- Breadcrumbs::render('post',$post->title) --}}

パンくずリストのレイアウトを変更する

このパンくずリストのパッケージにはあらかじめ何種類かのテンプレートがあります。

そのテンプレートを変更するためには、vendor の中のファイルの設定を変更する必要がありますが、vendor の中でファイルを変更しても、Github などで共有できないので、このコマンドを打ってファイルを生成して変更します。

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

新しくファイル

config/breadcrumbs.php

が生成されました。この中身の設定を変更します。

テンプレートの設定場所は、view と書かれているところになります。初期設定は

'view' => 'breadcrumbs::bootstrap4',

となっています。

では、カスタムしていきましょう。

まず、表示用のファイルを作成します。

resources/views/partials/breadcrumbs.blade.php

を作成します。

@unless ($breadcrumbs->isEmpty())

    <ol class="breadcrumb">
        @foreach ($breadcrumbs as $breadcrumb)

            @if (!is_null($breadcrumb->url) && !$loop->last)
                <li class="breadcrumb-item"><a href="{{ $breadcrumb->url }}">{{ $breadcrumb->title }}</a></li>
            @else
                <li class="breadcrumb-item active">{{ $breadcrumb->title }}</li>
            @endif

        @endforeach
    </ol>

@endunless

config/breadcrumbs.php を修正して、このファイルをテンプレートとしてみますよ、ってのを定義します。

    // 'view' => 'breadcrumbs::bootstrap4',
    'view' => 'partials.breadcrumbs', #--> resources/views/partials/breadcrumbs.blade.php

config ファイルを変更したら、反映させるためにコマンドを打ちます。

php artisan config:clear

表示を確認すると、さっきと変わってないと思いますが、これは、ただ単にテンプレートと同じ内容の記述を blade ファイルに書いているからです。

Blade の表示ファイルを編集して、style を追記します。

resources/views/partials/breadcrumbs.blade.php

<style>
    .breadcrumb {
        display: flex;
    }
    .breadcrumb-item {
        list-style: none;
        margin-left: 12px;
    }
</style>

このように、先ほどまでとスタイルが変更されたのが分かります。

あとは、この Blade のテンプレートを編集すればパンくずリストをオリジナルのレイアウトにすることができます。

パンくずリストは、いろんなサイトで実装されているので、レイアウトがイケているパンくずリストを探してみてください。そして、いけてる奴があったら教えてください笑

パンくずリストの設定分かりづらい人はこちら

自分も最初ややこしかった、というところを説明します。

「階層分かりづらく無い？」っていう問題です。

世の中のサービスは、ホーム ⇨ カテゴリー ⇨ 商品名みたいな感じで書かれていたりしますが、階層２までは分かりますが階層３以降どうすんねんと。

じゃあこのパンくずリストで実装しようとしたとき、

// これは間違っているやつ
Breadcrumbs::for('post', function ($trail,$title) {
    $trail->parent('home');
    $trail->parent('about');
    $trail->push($title, route('post'));
});

３行書かないとだめなのかな〜みたいな、感じで思っていました。

最初はみんなそんなもんだと思います。

正解は、２階層あるパンくずリストを親に選ぶと、３階層のパンくずリストができます。

当たり前といえば当たり前な設定な気がしますが、僕は最初ふええ？ってなっていました。

つまり、こんな感じです

// Home
Breadcrumbs::for('home', function ($trail) {
    $trail->push('ホーム', route('home'));
});
// Home > About
Breadcrumbs::for('about', function ($trail) {
    $trail->parent('home');
    $trail->push('このサイトについて', route('about'));
});
// Home > About > About2
Breadcrumbs::for('about2', function ($trail) {
    $trail->parent('about');
    $trail->push('このサイトについて2', route('about2'));
});

このような感じで、２階層のものを親とすれば、３階層のパンくずリストが出来上がります。

うん、ドキュメントにも書いてあるけど、最初はよくわかってなかった！

まとめ

いかがだったでしょうか？

Laravel でパンくずリストを作ってみました。

ブログや、EC サイトのようにカテゴリー分けして検索性をあげたい場合、実装したい機能だと思います。

また、パンくずリストには構造化のタグを埋め込むと SEO 上プラスになるので、それも今後書いていければと思います。

記事の内容に関する、質問・苦情・誤りの修正は Twitter の DM で受けております。指摘ウェルカムです。よろしくお願いします。