breadcrumbs_on_railsでパンくずリストのmetadata対応

Ruby on Railsでパンくずリストを生成するRubyGems「breadcrumbs_on_rails」でmetadataに対応するための手順です。

🚕 インストール

Gemfileに次の内容を追加してbundle installを実行。

# Breadcrumbs
gem 'breadcrumbs_on_rails'

🤔 Controller

Controller側にパンくずリストの内容を記述します。

class MyController
  add_breadcrumb 'home', :root_path
  add_breadcrumb 'my', :my_path

  def index
    # ...
    add_breadcrumb 'index', index_path
  end
end

🐝 Custom Builder

app/lib/breadcrumbs/custom_builder.rbに以下を追加します。

module Breadcrumbs
  class CustomBuilder < BreadcrumbsOnRails::Breadcrumbs::Builder
    def render
      @context.render '/shared/breadcrumbs', elements: @elements
    end
  end
end

😼 View

Bootstrap & Hamlでの記述方法です。app?views/shared/_breadcrumbs.hamlを追加します。

- if elements.present? && elements.count > 1
  .breadcrumb{ itemscope: '', itemtype: 'http://data-vocabulary.org/Breadcrumb' }
    .container
      .row
        .col-sm-12
          %ol
            - elements[0..-2].each do |element|
              %li.breadcrumb__item
                - if element.path.present?
                  %a{:href => element.path, :itemprop => 'url'}
                    %span{:itemprop => 'title'}= element.name
                - else
                  %span{:itemprop => 'title'}= element.name
            %li
              %span{:itemprop => 'title'}
                = elements.last.name

パンくずリストを表示する部分に次の内容を追加します。

= render_breadcrumbs builder: ::Breadcrumbs::CustomBuilder

😎 CSS

CSSでパンくずリストの要素と要素の間に「>」を表示するようにします。

breadcrumb__item:after {
  content: " > "; color: #999;
}

🐰 動作確認

「構造化データテストツール」で構造化されたデータが正しく読み取れているか確認できます。

🐮 参考リンク

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

酒と泪とRubyとRailsと