Laravelのパンくずリスト(Breadcrumb)の実装（リンクとJSON-LD)
Laravelのパンくずリストを実装します（ついでにJSON-LDも出力します)
Laravel5.3でためしています。
超おすすめライブラリです。
環境
Laravel5.3
PHP5.6.x
davejamesmiller/laravel-breadcrumbs（https://github.com/davejamesmiller/laravel-breadcrumbs）
composerでインストール
composer require davejamesmiller/laravel-breadcrumbs
composer.jsonにdavejamesmiller/laravel-breadcrumbsが追加されていることを確認
"require": {
"php": ">=5.6.4",
"laravel/framework": "5.3.*",
"laravelcollective/html": "5.3.*",
"davejamesmiller/laravel-breadcrumbs": "^3.0"
},
config/app.phpに2箇所追記
'providers' => [
DaveJamesMiller\Breadcrumbs\ServiceProvider::class,
],
'aliases' => [
'Breadcrumbs' => DaveJamesMiller\Breadcrumbs\Facade::class,
],
パンくずリストの定義ファイルを作成します。公式ドキュメントにある以下のパスに作成
routes/breadcrumbs.php
<?php
Breadcrumbs::register('home', function($breadcrumbs)
{
$breadcrumbs->push('ホーム', route('home'));
});
Breadcrumbs::register('search', function($breadcrumbs)
{
$breadcrumbs->parent('home');
$breadcrumbs->push('検索', route('search'));
});
テンプレートの作成
config/breadcrumbs.phpを作成
<?php
return [
'view' => 'common/breadcrumbs',
];
続いて、resources/views/common/breadcrumbs.blade.phpを作成
@if ($breadcrumbs)
<ul class="breadcrumb">
@foreach($breadcrumbs as $breadcrumb)
@if(!$breadcrumb->last)
<li><a href="{{ $breadcrumb->url }}">{{ $breadcrumb->title }}</a></li>
@else
<li>{{ $breadcrumb->title }}</li>
@endif
@endforeach
</ul>
@endif
ここまでで準備完了です。実際のテンプレートに記述してみます
テンプレ
resources/views/layouts/base.blade.php
<!DOCTYPE html>
<html lang="ja">
<body>
@yield('breadcrumbs')
</body>
</html>
ページ用のテンプレート
@extends('layouts.base')
@section('breadcrumbs', Breadcrumbs::render('search'))
（略）
結果
引数を渡してみます
routes/breadcrumbs.php
<?php
Breadcrumbs::register('home', function($breadcrumbs)
{
$breadcrumbs->push('ホーム', route('home'));
});
Breadcrumbs::register('search', function($breadcrumbs, $prefecture = null)
{
$breadcrumbs->parent('home');
if(!empty($prefecture)){
$breadcrumbs->push($prefecture->name . 'の検索', '/search/prefecture' . $prefecture->id);
}else{
$breadcrumbs->push('検索', '/search');
}
});
ページ用のテンプレート
@extends('layouts.base')
@section('breadcrumbs', Breadcrumbs::render('search', $prefecture))
（略）
結果
よいですね。
引数は可変長なのでいくつでもわたせます
@section('breadcrumbs', Breadcrumbs::render('search', $prefecture, $city, $town, $keyword))
パンくずを作成したので、JSON-LD(JSON for Linking Data)タグも出してみましょう。
resources/views/common/breadcrumbs.blade.phpに追記します
@if ($breadcrumbs)
<ul class="breadcrumb">
@foreach($breadcrumbs as $breadcrumb)
@if(!$breadcrumb->last)
<li><a href="{{ $breadcrumb->url }}">{{ $breadcrumb->title }}</a></li>
@else
<li>{{ $breadcrumb->title }}</li>
@endif
@endforeach
</ul>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
@foreach($breadcrumbs as $index => $breadcrumb)
{
"@type": "ListItem",
"position": {{ $index + 1 }},
"item":
{
"@id": "{{ $breadcrumb->url }}",
"name": "{{ $breadcrumb->title }}"
}
}
@if(!$breadcrumb->last)
,
@endif
@endforeach
]
}
</script>
@endif
出力結果はGoogleの構造化データチェックツールで確認しましょう
以上、簡単ですね。
