【Laravel】 laravel-breadcrumbsでトップページのみパンくずを付けない方法＆パラメータ付きページの条件分岐方法

laravel-prograshi（プロぐらし） Laravel
2023/5/27
記事内に広告が含まれていることがあります。
[PR]

Laravelのパンくずを簡単に設定できるlaravel-breadcrumbsで、ルートによって条件分岐を設定してパンくずを出し分ける方法について。

例えば、通常はルート名に一致するパンくずを表示させるが、それ以外に、トップページにはパンくずを設置しない方法や、パラメータ付きページのパンくずの設定方法について。

通常のパンくずの場合

パラメータを必要とせず、ルート名に対応するパンくずを表示するには、引数なしでBreadcrumbs::render()を呼び出せばOK。

{{ Breadcrumbs::render() }}

この場合、現在表示されているページと一致するルート名のパンくずが適用される。Breadcrumbs::for('ルート名', function ($trail){処理});

実例

例えばルート名がblog.indexというページを開いた場合、{{ Breadcrumbs::render() }}にはホーム > ブログ一覧が入る。

Breadcrumbs::for('top', function ($trail) {
    $trail->push('ホーム', route('top'));
});

// ホーム > ブログ一覧
Breadcrumbs::for('blog.index', function ($trail) {
    $trail->parent('top');
    $trail->push( 'ブログ一覧', route('blog.index'));
});

トップページにパンくずを表示させない

トップページにパンくずを表示させない場合は、Breadcrumbs::renderを指定しなければいい。

▼トップのルーティング

Route::get('/', ['as' => 'top', 'uses' => 'TopController@index']);

▼ビューでパンくずを設定

@if(Route::currentRouteName() === 'top')
@else
    {{ Breadcrumbs::render() }}
@endif

ルート名がtopの場合にはBreadcrumbs::renderの処理をスキップする。トップページ以外はbreadcrumbs.phpの中で一致するパンくずを表示する。

パラメータ付きページへのパンくず設定方法

パラメータ付きページにパンくずを設定する場合は、パンくずのリンクで指定したルート名にパラメータに入れる値を指定する必要がある。

これを指定しないと、Missing required parametersというエラーが発生する。

▼パラメータ付きページのルーティング例

Route::get('media/{media_slug}', 'ServiceController@show')->name('media.show');

ルート名media.showは{media_slug}というパラメータが必須となっている。

（１）コントローラでパラメータをビューに渡す

コントローラの中でビューにパラメータを渡す必要がある。

    public function show(Request $request, string $media_slug)
    {
        return view('media.show', [ 'media_slug' => $media_slug ] );
    }

(2)ビューでパンくずを呼び出す

@if(Route::currentRouteName() === 'media.show') 
    {{ Breadcrumbs::render('media.show', $media_slug) }}
@else
    {{ Breadcrumbs::render() }}
@endif

コントローラから受け取った変数をrenderの第二引数に指定する。

(3)パンくずの設定

Breadcrumbs::for('top', function ($trail) {
    $trail->push('ホーム', route('top'));
});

Breadcrumbs::for('service.media.show', function ($trail, $media_slug) {
    $trail->parent('top');
    $trail->push( $media_slug, route('media.show', [ 'media_slug' => $media_slug]));

これで、ビューに HOME > {media_slug} を表示することができる。

まとめ

上記をまとめて記述するとビューとパンくずの設定は以下のようになる。

    @include('layouts.header')
    @if(isset($exception))
        {{ Breadcrumbs::render('errors.common', $exception) }}
    @elseif(Route::currentRouteName() === 'top')
    @elseif(Route::currentRouteName() === 'media.show')
        {{ Breadcrumbs::render('media.show', $media_slug) }}
    @else
        {{ Breadcrumbs::render() }}
    @endif

ビューのbodyタグ全体の例

<body id="js-opinion" class="@yield('bodyClass')">
    @include('layouts.header')
    @if(isset($exception))
        {{ Breadcrumbs::render('errors.common', $exception) }}
    @elseif(Route::currentRouteName() === 'top')
    @elseif(Route::currentRouteName() === 'media.show')
        {{ Breadcrumbs::render('media.show', $media_slug) }}
    @else
        {{ Breadcrumbs::render() }}
    @endif
    <div class="@yield('contentClass')">
        @yield('content')
    </div>
    @include('layouts.footer')
    <script src="{{ mix('js/lazyload.js') }}"></script>
    @yield('jsCodeBody')
</body>

パンくずの設定

Breadcrumbs::for('top', function ($trail) {
    $trail->push('ホーム', route('top'));
});

// ホーム > ブログ一覧
Breadcrumbs::for('blog.index', function ($trail) {
    $trail->parent('top');
    $trail->push( 'ブログ一覧', route('blog.index'));
});


// ホーム > {media_slug}
Breadcrumbs::for('service.media.show', function ($trail, $media_slug) {
    $trail->parent('top');
    $trail->push( $media_slug, route('media.show', [ 'media_slug' => $media_slug]));

以上。

タイトルとURLをコピーしました