むねさだブログ
  • プロフィール
  • グルメ
  • ガジェット
  • カメラ・写真
  • 子育て
  • 旅行
  • イベント
  • お問い合わせ
  1. ホーム
  2. ブログカスタマイズ

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

2013/05/05
  • ツイートする

  • シェアする

  • はてブする

    4

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

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

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

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

SPONSORED LINK
SPONSORED LINK

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

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

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

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のテキストを全部選択して、メモ帳などに貼付けておくだけでも初めの状態が分かって良いと思います。

 

Wordpress
SPONSORED LINK
SPONSORED LINK
  • ツイートする

  • シェアする

  • はてブする

    4

いいね!を押して
最新記事をチェック

おすすめ記事

プロフィール

munesada

ブロガー、むねさだ よしろうです。
ワクワク感で笑顔を拡げる、”わんぱくブロガー”。

新しいものが大好き!食べ物・ガジェット・カメラ・旅行・生活雑貨など興味があるものを幅広くご紹介してます。
iPhone15 Pro Max・MacBook Pro16・EOS 5D4・OM-1ユーザー。
11歳になる娘がいます。パパ目線での子育てグッズの紹介も。 ScanSnapプレミアムアンバサダー、HHKBエバンジェリスト、おもいでばこ認定アンバサダーなど。

@mu_ne3さんをフォロー
くわしいプロフィール
Yahoo!で動画配信中

ブログの更新情報

follow us in feedly
@munesada_blogさんをフォロー
むねさだブログ

Facebookページへの「いいね」をして頂けると毎日の更新情報がFacebookで見れます。

人気記事

    • エアコンのドレンホースを延長したらベランダが濡れなくて気持ちが良いぞ!

    • 折れたネジの外し方!「ネジはずしビット」でカンタンに外せるぞ!

    • 山梨観光「鳴沢氷穴」と「富岳風穴」どっちがおすすめか?両方に行った感想をまとめたぞ!

    • 【当ブログ専用割引コード有り】Amazonプライムデーセールで最大50%も安くなるUGREEN製品を紹介するぞ!

    • 新発売!ローソン クイニーアマンサンド 塩キャラメルがしっとりふんわり甘くて美味しいぞ!

関連記事

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

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

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

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

ブログのテーマをSTINGER5にしてまず最初にいじった設定をまとめたぞ!
ブログカスタマイズ

ブログのテーマをSTINGER5にしてまず最初にいじった設定をまとめたぞ!

プロブロガー本2が予約開始っ。モチロン購入するぞっ!
ブログカスタマイズ

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

STINGERってこんなにカンタンなの!?お試しのつもりが即適用!ブログのテーマが気がついたら変わっていたぞ! #ブロネク #stinger5
ブログカスタマイズ

STINGERってこんなにカンタンなの!?お試しのつもりが即適用!ブログのテーマが気がついたら変わっていたぞ! #ブロネク #stinger5

ブログカスタマイズの記事をもっと読む

新着記事

この夏は、アイスの実+フリ食べパウダーで味変を楽しめるぞ!
グルメ

この夏は、アイスの実+フリ食べパウダーで味変を楽しめるぞ!

新商品!ローソン限定のサントリー 明日のサワー レモゆず・アセロラがリーズナブルで美味しいぞ!
お酒

新商品!ローソン限定のサントリー 明日のサワー レモゆず・アセロラがリーズナブルで美味しいぞ!

【当ブログ専用割引コード有り】Amazonプライムデーセールで最大50%も安くなるUGREEN製品を紹介するぞ!
ガジェット

【当ブログ専用割引コード有り】Amazonプライムデーセールで最大50%も安くなるUGREEN製品を紹介するぞ!

【UGREEN】Appleの「探す」に対応したスマートトラッカーがリーズナブルで普段使いに良いぞ!
ガジェット

【UGREEN】Appleの「探す」に対応したスマートトラッカーがリーズナブルで普段使いに良いぞ!

贅沢搾りプレミアム マンゴーが果汁感たっぷりで美味しいぞ!
お酒

贅沢搾りプレミアム マンゴーが果汁感たっぷりで美味しいぞ!

新着記事をもっと読む

カテゴリ

  • イベント
    • ブロネク
  • ガーデニング
  • ガジェット
    • Android
    • iPhone
    • Mac
    • Windows
    • おもいでばこ
  • カメラ・写真
    • カメラ
      • 360度カメラ
      • Canon
      • OLYMPUS AIR
      • OM-D
    • 写真
  • グルメ
    • お店
      • 六本木
      • 渋谷
      • 溝の口
      • 蒲田
    • カップ麺
  • ゲーム
    • Ingress
  • サービス・アプリ
    • Amazon
    • 格安SIM
  • デザイン・アート
  • ブログカスタマイズ
  • ブログについて
  • ライフスタイル
  • 健康・ダイエット
  • 子育て
  • 家具・家電
  • 文具
  • 旅行
    • ロンドン
  • 書籍
  • 未分類
  • 生活雑貨
  • 自転車・MTB
  • 車
  • 釣り
  • 食玩・おもちゃ
  • 飲み物
    • お酒
      • 日本酒
agilemedia
15301346_1142448849144320_1929483738_n
むねさだの欲しいものリスト公開中!
むねさだブログ
  • ホームに戻る
  • プロフィール
  • お問い合わせ

© 2025 むねさだブログ

閉じる

  • トップページへ戻る
  • プロフィール
  • お問い合わせ

カテゴリ

  • イベント
    • ブロネク
  • ガーデニング
  • ガジェット
    • Android
    • iPhone
    • Mac
    • Windows
    • おもいでばこ
  • カメラ・写真
    • カメラ
      • 360度カメラ
      • Canon
      • OLYMPUS AIR
      • OM-D
    • 写真
  • グルメ
    • お店
      • 六本木
      • 渋谷
      • 溝の口
      • 蒲田
    • カップ麺
  • ゲーム
    • Ingress
  • サービス・アプリ
    • Amazon
    • 格安SIM
  • デザイン・アート
  • ブログカスタマイズ
  • ブログについて
  • ライフスタイル
  • 健康・ダイエット
  • 子育て
  • 家具・家電
  • 文具
  • 旅行
    • ロンドン
  • 書籍
  • 未分類
  • 生活雑貨
  • 自転車・MTB
  • 車
  • 釣り
  • 食玩・おもちゃ
  • 飲み物
    • お酒
      • 日本酒