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

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

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

    12

  • シェアする

  • はてブする

    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
  • ツイートする

    12

  • シェアする

  • はてブする

    4

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

おすすめ記事

プロフィール

munesada

むねさだ(mu_ne3)です。
ワクワク感で笑顔を拡げる、”わんぱくブロガー”。

食べ物・ガジェット・カメラ・旅行・生活雑貨など興味があるものを幅広くご紹介してます。
iPhone11Pro・MBP13・EOS 5D4・OM-D E-M1mIII・GoPro7・THETA Vユーザ。
7歳になる娘がいます。パパ目線での子育てグッズの紹介も。

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

ブログの更新情報

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

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

人気記事

    • 生ハム・しらすが乗せ放題パスタ!イタリアンキッチン「VANSAN」がすごいぞ!

    • 日産セレナ(C27)のリモコンキー電池交換!電池の種類と開ける際のコツを教えるぞ!

    • 知ってた?Facebookで「過去の投稿」をカンタンに探す方法を教えるぞ!

    • 7倍サイズで11倍濃いキャラメルコーンがセブンイレブンで発売だぞ!

    • Uber Eatsリュックの詳細サイズやその他の使い方を紹介するぞ!

関連記事

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

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

WordPress 5.5へのアップデートは注意!バグ(不具合)があったのでダウングレードする方法を教えるぞ!
ブログカスタマイズ

WordPress 5.5へのアップデートは注意!バグ(不具合)があったのでダウングレードする方法を教えるぞ!

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

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

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

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

カエレバやRinkerに変わる、素敵な商品リンク作成プラグイン「ポチップ」がめっちゃ良いぞ…!
ブログカスタマイズ

カエレバやRinkerに変わる、素敵な商品リンク作成プラグイン「ポチップ」がめっちゃ良いぞ…!

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

新着記事

「じゃがりこ 焦がしキャラメル味」が甘いじゃがりこで美味しいぞ!
グルメ

「じゃがりこ 焦がしキャラメル味」が甘いじゃがりこで美味しいぞ!

「雪見だいふくみたいなパン」は、プニプニもっちり美味しいぞ!
グルメ

「雪見だいふくみたいなパン」は、プニプニもっちり美味しいぞ!

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

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

山梨観光「富岳風穴」は、青木ヶ原樹海の豊かな緑に囲まれた天然の冷蔵庫だぞ!
旅行

山梨観光「富岳風穴」は、青木ヶ原樹海の豊かな緑に囲まれた天然の冷蔵庫だぞ!

山梨観光「鳴沢氷穴」!真夏でも氷がある天然の冷蔵庫!しゃがんで進む洞窟でワクワクだぞ!
旅行

山梨観光「鳴沢氷穴」!真夏でも氷がある天然の冷蔵庫!しゃがんで進む洞窟でワクワクだぞ!

新着記事をもっと読む

カテゴリ

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

© 2023 むねさだブログ

閉じる

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

カテゴリ

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