むねさだブログ

またの名を「わんぱくブログ」食・写真・ガジェットを使用した感想や情報を発信中!!

【初心者でもできる!】ブログに「パンくずリスト」を追加するプラグイン「Prime Strategy Bread Crumb」を設定してみたぞ!

   

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る

HTMLとかCSSは全く知識が無いのでブログをカスタマイズする時は恐る恐るな、むねさだ(@mu_ne3)です。
パンくずリストTOP

今日はブログのカスタマイズについてのお話。

最近、知り合いのブログにパンくずリストが追加されているのが気になっていました。
で、どうやってやるのかなー、というのが気になりつつ、なんか色々難しそうだから僕にはまだ無理だ…なんて諦めていました。

んが、ちょっとした方法でカンタンにつけれる事が分かったので紹介したいと思います。


スポンサード リンク

そもそもパンくずリストって!?

そもそも、パンくずリストってなんぞや!?という人の為にカンタンにご紹介。

パンクなリストではなく、パンのくずのリストなんです。

Wikipediaによると、

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

で、語源としては童話から来ているそうです。

日本語では「パンくずリスト(breadcrumb list)」だが、英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。
ウェブディレクトリのような大規模なウェブサイト内において、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。

つまり、ブログを見てくれている人が、今読んでいる記事が「どういうカテゴリーに属しているか」を分かりやすくしたり、「関連記事を見てもらいやすくなる」効果があります。

また、Googleさん的にもパンくずリストをつける事で、そのブログ内の関係性が分かるのでSEO的に良いらしいです。

ということで、パンくずリストは付けた方が何かと便利そう!
 

パンくずリストを追加するためのプラグインがあった!

パンくずリストは付けてみたいけど、HTMLとかCSSとかよく分かんないし…、と半ば諦めかけていたのですが、そんな僕に手を差し伸べるべく、パンくずリストをカンタンに追加する為のプラグインがあったんです。

それがこちら。
Prime Strategy Bread Crumb

設定の方法やらは、以下のサイトを参考にさせて頂きました。
プラグイン作者さんのページ。
パラメータでカスタマイズしやすいパンくずナビをプラグインにしてみた | Simple Colors

上記のサイトに詳しく書いてあったのですが、如何せん初心者の僕には、そのコードをどう組み合わせてどこに貼付けて良いのかが分からないんです…。

ということでもう少し調べてみるとその辺りが詳しく書いてあるサイトを発見。
パンくずりすとを表示したい | WordPress入門

まぁ、それでももう少し僕が噛み砕いて説明しておきます。あくまで僕の場合ですが、実例があると分かりやすいと思いますので。

single.php用コードの入れる場所

single.phpに貼付けるコードを僕の場合で言うと、「div class=”entry-container fix」とか「div class=”entry fix」と書いてある上に追加することでタイトル下に表示されました。

この辺りは使っているテーマ次第だと思いますので、当たりを付けて「えいや!」って入れました。

ちなみに、これだけ入れると、
・トップページ
・カテゴリー1
・カテゴリー2
・記事タイトル

というリスト表示になっていると思います。

それをCSSで、
トップページ>カテゴリー1>カテゴリー2>記事タイトル という表示にしていきます。

 

CSS用コードの入れる場所

CSS用のコードを僕はstyle.cssの一番下に追記しました。途中に入れるとよくわからない事になるので。

はい!以上!
上記を行う事で、パンくずリストがしっかりと表示されていると思います。

成功しているとこんな感じになると思います。
パンくずリストTOP

カテゴリを設定していれば少なくても、
トップページ>カテゴリ>記事タイトル

という並びになっていると思いますし、カテゴリーに対して親カテゴリー・子カテゴリーの設定をしていると上記キャプチャのように、順番に表示されます。

 

わんぱくブロガー的まとめ

プラグインをインストールして有効化して、コードを2カ所に貼付けるだけでパンくずリストを表示させる事が出来ました。

これならば、僕と同じくらい知識の無い初心者の人でも何とか自分だけで追加出来ると思います。

一番の難関は、single.phpのどこに貼付けるか、という部分ですが、そこは怪しそうな部分に「あ」などと短くて目立たない文章を入力して更新し、
実際のページを更新してはどこに表示されるかをチェックして判断しました。

その際、wordpressの編集画面は開いたままにしておき、
「あ」が変な所に表示されたり、下手すると記事ページ自体が表示しなくなるので、そうなったらすぐにwordpress側で先ほど入力した「あ」を消して更新し直すようにしましょう。
 
一応、single.phpのバックアップを取っておいた方が安心ですよ。
バックアップの方法が分からない人は、せめてsingle.phpのテキストを全部選択して、メモ帳などに貼付けておくだけでも初めの状態が分かって良いと思います。

 

 - ブログカスタマイズ

        
  • Pocket
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る
コメントはこちら。

  関連記事

超基本のhtmlタグ <h2>の使い方をずっと間違えてたぞ・・・

このむねさだブログを書き始めて後数日で半年が経とうとしています。 前のブログから …

スクロールしても常についてくる「ソーシャルボックス」を設置したぞ!

HTMLとかCSSというブログをカスタマイズする知識がほとんど無いむねさだ(@m …

【ブロガー必見!】GoogleAnalyticsで自分のブログへの被リンクが分かる「トラックバック」機能が便利だぞ!

他の人のブログで、自分のブログが紹介されていると嬉しくなります、むねさだ(@mu …

プロブロガー本2が予約開始っ。モチロン購入するぞっ!

このブログを始めて1年と4ヶ月毎日更新しています。 今でこそ毎日ブログを書くこと …

描画をサクサクに!ブログのサーバーをロリポップからWPXサーバーに移転した手順をメモしておくぞ!

むねさだブログを開設して、もうすぐで3年が経過します、むねさだ(@mu_ne3) …

【要注意!】WordPressを使ったブログのサイドバーに「サイト管理」を残している人は即、外した方が良いぞ…!

html、CSSって何ですか?って位WEBの知識の無い、むねさだ(@mu_ne3 …

ブログ記事を大量に丸パクリされたのでGoogle先生に報告しておいたぞ!

一応、毎日ブログ更新をしていますむねさだ(@mu_ne3)です。 日曜日の昼下が …

bnd48-kokuchi-eyecatch
【告知】10/30はブロネクオンエアー#48 「STINGERユーザー交えてブログテーマのお話してみるネク!」だぞ! #ブロネク

むねさだブログを毎日更新し始めて、2年半以上になります。むねさだ(@mu_ne3 …

初心者から上級者まで!「できる100ワザWordPress 必ず集客できる実践・サイト運営術」には確かにブログ・サイト運営のノウハウがつまっていたぞ!

WordPressの難しい設定とか、とんと分からないままブログを運営しています。 …

ブログのスマホ用デザインをカスタマイズしたぞ!

ブログのカスタマイズが楽しくなってきました、むねさだ(@mu_ne3)です。 H …