ソネブロにパンくずリストを追加してみた

記事の上と下にパンくずリストを作ってみました。

パンくずリストって何?

パンくずリストっていうのは簡単に言うとナビゲーションのひとつです。

ウェブサイト内におけるウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。

普通のウェブサイトと違ってソネブロはブログサービスでカテゴリに階層が無いため、パンくずリストがあったところで大した効果は無いかもしれません。でもカテゴリをきちんと管理してブログを書いてる人なら意味があるかなぁ…と。

ソネブロでのパンくずリストの作り方

ソネブロはブログパーツ内で記事名やカテゴリ名が取り出せるのでそれを使います。使うコードを以下に列挙します。

<% if:page_name eq 'article' %><% /if %>
ページが記事ページの時に出力します。
<% blog.page_url | html %>
ブログのURLをHTMLで出力します。
<% article.subject | html %>
記事のタイトルをHTMLで出力します。
<% unless:article_category.name eq '未分類' %><% /unless %>
記事のカテゴリが未分類ではないときに出力します。
<% article_category.page_url | html %>
カテゴリのURLをHTMLで出力します。
<% article_category.name | html %>
カテゴリ名をHTMLで出力します。

んで、パンくずリストのお約束を考えます。

  • ページの状態が記事ページであるとき。
  • カテゴリ名が無い(未分類)の時はカテゴリ名を出力しない。

ではタグを組み立てていきましょう。実際には<div>〜</div>の中は改行させずに書いていますが見た目の為に改行しています。

  1. <% if:page_name eq 'article' -%>
  2. <div class="breadcrumbs">
  3. <a href="<% blog.page_url | html %>">トップページ</a>
  4. <% unless:article_category.name eq '未分類' %>
  5. <a href="<% article_category.page_url | html %>"><% article_category.name | html %></a>
  6. <% /unless %>
  7. <% article.subject | html %>
  8. </div>
  9. <% /if -%>

-%ってハイフンついてるけど何?」って思われるかもしれませんがこれは"この後に改行コードを出力しない"というものです。実際にはunless内部は改行させずに書いているため書いていない場所があります。出力されたHTMLソースを確認して調整してみて下さい。

※以下の説明は<div></div>の解説は省いています。

順を追って説明しますと、まず以下のコードで「ページの状態が記事ページだったら出力してね」という命令をしておきます。

<% if:page_name eq 'article' -%>

トップページのリンクを作成します。

<a href="<% blog.page_url | html %>">トップページ</a>

カテゴリ名が未分類以外だったら出力してねっていう命令を出します。ここでポイントなのが矢印になるオブジェクトを一個分この中に含めておくことです。カテゴリ名の前の矢印でも後ろの矢印どちらでもかまいません。

<% unless:article_category.name eq '未分類' %>

カテゴリ名とリンクを出力します。

<a href="<% article_category.page_url | html %>"><% article_category.name | html %></a>

カテゴリ名を出力するタグを閉じておきます。

<% /unless %>

記事のタイトルを出力します。

<% article.subject | html %>

パンくずリスト全体を出力するタグを閉じておきます。

<% /if -%>

あとはこのコードをテンプレートに貼り付けたり、記事パーツに貼り付けたりすれば出来上がりです。カテゴリ管理してないとあまり意味はないかも…。

パンくずリストは階層で順番が決まっているので<ol>タグとfloat:leftで作ってみるのもいいかも。

Trackback