HTMLとかCSSは全く知識が無いのでブログをカスタマイズする時は恐る恐るな、むねさだ(@mu_ne3)です。
今日はブログのカスタマイズについてのお話。
最近、知り合いのブログにパンくずリストが追加されているのが気になっていました。
で、どうやってやるのかなー、というのが気になりつつ、なんか色々難しそうだから僕にはまだ無理だ…なんて諦めていました。
んが、ちょっとした方法でカンタンにつけれる事が分かったので紹介したいと思います。
そもそもパンくずリストって！？
そもそも、パンくずリストってなんぞや！？という人の為にカンタンにご紹介。
パンクなリストではなく、パンのくずのリストなんです。
パンくずリスト（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の一番下に追記しました。途中に入れるとよくわからない事になるので。
はい！以上！
上記を行う事で、パンくずリストがしっかりと表示されていると思います。
成功しているとこんな感じになると思います。
カテゴリを設定していれば少なくても、
トップページ＞カテゴリ＞記事タイトル
という並びになっていると思いますし、カテゴリーに対して親カテゴリー・子カテゴリーの設定をしていると上記キャプチャのように、順番に表示されます。
わんぱくブロガー的まとめ
プラグインをインストールして有効化して、コードを2カ所に貼付けるだけでパンくずリストを表示させる事が出来ました。
これならば、僕と同じくらい知識の無い初心者の人でも何とか自分だけで追加出来ると思います。
一番の難関は、single.phpのどこに貼付けるか、という部分ですが、そこは怪しそうな部分に「あ」などと短くて目立たない文章を入力して更新し、
実際のページを更新してはどこに表示されるかをチェックして判断しました。
その際、wordpressの編集画面は開いたままにしておき、
「あ」が変な所に表示されたり、下手すると記事ページ自体が表示しなくなるので、そうなったらすぐにwordpress側で先ほど入力した「あ」を消して更新し直すようにしましょう。
一応、single.phpのバックアップを取っておいた方が安心ですよ。
バックアップの方法が分からない人は、せめてsingle.phpのテキストを全部選択して、メモ帳などに貼付けておくだけでも初めの状態が分かって良いと思います。