WordPressに自作のパンくずリストを設置する方法

今回はWordPressにプラグイン無しで自作の「パンくずリスト」を作り設置する方法とCSSで位置調整までの解説です。「パンくずリスト」は私のブログにも設置しているこの部分です。

パンくず-1

このパンくずの部分は利用されているテーマですでに設置されている場合もありますし、パンくずを設置するプラグインなどもありますが、今回はパンくずリストを自作して設置します。

今回パンくずリストを設置するに当たって「りくまろぐ」様の記事が非常に参考にさせて頂きました。というかほ位置調整以外はほとんど引用させて頂きました。ありがとうございます。

私の場合はTwenty Twelveを利用してますので、Twenty Twelveでの設置方法を図解で解説してみます。

スポンサーリンク

パンくずリストを設置する理由

最初にこのパンくずリストがなぜ必要なのかという部分を説明しておきますね。パンくずリストは訪問者が今ブログの中のどのカテゴリーの記事を読んでいるのか?という事が分かりやすい道案内的な役割をします。

これが設置してあった方が親切ですよね。それからこのパンくずリストは検索結果にもいい影響があると言われています。

パンくず-2

このように検索結果にもこのパンくずリストが表示されます。設置しなくても問題はありませんが、やらないよりはやった方がいいと思いません?

パンくずリストを設置する手順

パンくずリストの作り方や設置には2通りのやり方があります。

  1. プラグインで簡単設置
  2. 子テーマで該当する場所をカスタマイズ

1番目のプラグインを使うと設置は楽ですが、仕組みを知っておかないとプラグインの不具合があった時に困ってしまいます。そのためちょっと手間はかかりますが私は子テーマをカスタマイズして設置する方法にしています。

今回はこのカスタマイズの方法を紹介します。カスタマイズのいい練習にもなるのでやってみましょう。

パンくずリスト設置に必要なファイル

パンくずを設置する場合には子テーマに該当するファイルをコピーしておきます。子テーマの作り方で紹介しましたよね。

今回使うファイルは次の通りです。これらを子テーマに追加しておいて下さい。

  1. single.php:個別記事ページのテンプレート
  2. category.php:カテゴリーページのテンプレート
  3. tag.php:タグページのテンプレート

以上3つのテンプレートにそれぞれパンくずを設置しますので、親テーマ(TwentyTwelve)の3つのファイルをコピーして子テーマに追加しておきましょう。それからパンくず設置のコードを追加するとパンくずが縦に並びますので、最後にこれを横並びにして位置の微調整をしていきます。

個別記事ページ「single.php」にパンくずを設置

それでは子テーマの「single.php」にパンくず設置のコードを足して行きましょう。「single.php」の最初の方にこのようなコードがあると思います。

この部分の下にパンくず設置のコードを入れます。

これをこのままコピーして追加します。これで個別記事にパンくず設置が完了ですが、このままだと縦並びになっていると思います。

パンくず-3

これは最後に調整しますので、まずは全てのパンくずの設置を完了してしまいましょう。

カテゴリーページ「category.php」にパンくずを設置

子テーマの「category.php」の最初の方に次の記述があります。

この部分の下にパンくず設置のコードを入れます。

これをこのままコピーして貼り付けて下さい。

タグページ「tag.php」にパンくずを設置

これも同じ要領です。「tag.php」の最初の方に次の記述があります。

この下にパンくずのコードを入れます。

以上でパンくずの設置自体は完了です。後は位置調整をしていきます。

最後に位置の調整をする

パンくずを設置した段階では縦並びになっていると思いますのでこれを横並びにして位置の調整をします。今度は子テーマのスタイルシート (style.css)に次のコードを追加して下さい。

文字の高さはお好みの数字に変更して下さい。これで横並びになるはずです。

パンくず-4

横並びにはなりましたが、位置が微妙ですね、メニューナビからは間隔が開き過ぎですし、記事タイトルとの間隔は狭すぎですよね。そのため細かい位置調整をしてみましょう。次のコードを追加して下さい。

「margin:」という部分でパンくずリストの位置を調整しています。ここの「-15px」を変更するとパンくずの上の余白が変わります。

「20px」の部分がパンくずの下の間隔です。これも必要であれば変更して下さい。それから「.site-header」というのは元々ヘッダー下に余白が設定されていたのでこれを調整してみました。これはこのままでOKです。結果このようになりました。

パンくず-5

以上WordPressにパンくずリストの設置は完了です。

最終更新日:2016/02/27

WordPressに自作のパンくずリストを設置する方法”に31件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. ありばぼ

    しげぞう様
    返信ありがとうございます。

    色々いじっていましたら表示されました。
    お手数おかけして申し訳ありませんでした。