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

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」の最初の方にこのようなコードがあると思います。

<div id="primary" class="site-content">
		<div id="content" role="main">

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

<?php /*--- パンくずリスト --- */ ?>
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo home_url(); ?>" itemprop="url">
<span itemprop="title">ホーム</span>
</a> ›
</div>
<?php /*--- カテゴリーが階層化している場合に対応させる --- */ ?>
<?php $postcat = get_the_category(); ?>
<?php $catid = $postcat[0]->cat_ID; ?>
<?php $allcats = array($catid); ?>
<?php 
while(!$catid==0) {    /* すべてのカテゴリーIDを取得し配列にセットするループ */
    $mycat = get_category($catid);     /* カテゴリーIDをセット */
    $catid = $mycat->parent;     /* 上で取得したカテゴリーIDの親カテゴリーをセット */
    array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
<?php /*--- 親カテゴリーがある場合は表示させる --- */ ?>
<?php foreach($allcats as $catid): ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo get_category_link($catid); ?>" itemprop="url">
<span itemprop="title"><?php echo get_cat_name($catid); ?></span>
</a> ›
</div>
<?php endforeach; ?>
<div><?php the_title(); ?></div>
</div>    <!--- end [breadcrumb] -->

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

パンくず-3

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

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

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

<section id="primary" class="site-content">
		<div id="content" role="main">

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

<?php /*--- パンくずリスト --- */ ?>
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo home_url(); ?>" itemprop="url">
<span itemprop="title">ホーム</span>
</a> ›
</div>
<?php /*--- カテゴリーが階層化している場合に対応させる --- */ ?>
<?php $catid = $cat; /* 表示中のカテゴリーIDをセット */ ?>
<?php $allcats = array(); /* 親カテゴリーをセットする配列を初期化しておく */ ?>
<?php 
while(!$catid==0) {    /* すべてのカテゴリーIDを取得し配列にセットするループ */
    $mycat = get_category($catid);     /* カテゴリーIDをセット */
    $catid = $mycat->parent;     /* 上で取得したカテゴリーIDの親カテゴリーをセット */
    array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
<?php /*--- 親カテゴリーがある場合は表示させる --- */ ?>
<?php foreach($allcats as $catid): ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo get_category_link($catid); ?>" itemprop="url">
<span itemprop="title"><?php echo get_cat_name($catid); ?></span>
</a> ›
</div>
<?php endforeach; ?>
<?php /*--- 最下層のカテゴリ名を表示 --- */ ?>
<div><?php single_cat_title(); ?></div>
</div>    <!--- end [breadcrumb] -->

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

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

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

<section id="primary" class="site-content">
		<div id="content" role="main">

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

<?php /*--- パンくずリスト --- */ ?>
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo home_url(); ?>" itemprop="url">
<span itemprop="title">ホーム</span>
</a> ›
</div>
<?php /*--- カテゴリーが階層化している場合に対応させる --- */ ?>
<?php $catid = $cat; /* 表示中のカテゴリーIDをセット */ ?>
<?php $allcats = array(); /* 親カテゴリーをセットする配列を初期化しておく */ ?>
<?php 
while(!$catid==0) {    /* すべてのカテゴリーIDを取得し配列にセットするループ */
    $mycat = get_category($catid);     /* カテゴリーIDをセット */
    $catid = $mycat->parent;     /* 上で取得したカテゴリーIDの親カテゴリーをセット */
    array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
<?php /*--- 親タグがある場合は表示させる --- */ ?>
<?php foreach($allcats as $catid): ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo get_category_link($catid); ?>" itemprop="url">
<span itemprop="title"><?php echo get_cat_name($catid); ?></span>
</a> ›
</div>
<?php endforeach; ?>
<?php /*--- タグ名の表示 --- */ ?>
<div><?php single_cat_title(); ?></div>
</div>    <!--- end [breadcrumb] -->

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

最後に位置の調整をする

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

/* パンくず */
div#breadcrumb div {
line-height: 20px; /* 文字の高さ */
display: inline; /* 横並びに */
}

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

パンくず-4

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

/* パンくず位置調整 */
div#breadcrumb {
margin:-15px 0 20px 0;}
.site-header {
padding: 24px 0 0 0;}

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

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

パンくず-5

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

コメント

  1. ありばぼ より:

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

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

  2. しげぞう より:

    ありばぼ様

    コメントありがとうございます。ヘッダーメニューはおそらく関係ないと思います。パンくずを設置したsingle.phpだと思うのですが、これは個別ページの場合に表示されますし、category.phpならカテゴリーページにだけ反映されます。

    そのため、追加したファイルを確認して該当のページに反映されてないか確認をお願いします。反映されてない場合は再度子テーマの追加したコードの確認が必要かと思います。

  3. ありばぼ より:

    しげぞう様
    はじめまして。

    ワードプレス全くの初心者です。
    この記事を拝見させていただきながらパンくずリストの設置を試みたのですが、
    指定の箇所に貼り付けしてファイルの更新は正常に行われるのですがサイトの方に反映されません。
    関係があるのかわかりませんがメニュー・ヘッダー・タイトルの位置を入れ替える時にタイトル部分を削除してヘッダー・メニューの順番に入れ替えてしまいました。
    解決方法が全く思いつきません。
    解決策が何かありましたら教えていただきたいです。

  4. サマー より:

    しげぞうさま

    パンくずリストと、記事下リンク右と左と、無事に変更ができました!
    いつもありがとうございます。

    wordpressも慣れてきて、他にも検索したりしましたが、やっぱりしげぞうさんのサイトがとてもわかりやすいです。これからもまた宜しくお願いします。

  5. しげぞう より:

    サマー様

    パンくずリストのリンクの色は以下。すでに追加されているかもしれませんね。カラーコードだけ変更。

    [css]
    div#breadcrumb a {
    color: #000 !important;
    }
    [/css]

    記事下の左側のリンク。訪問済み(visited)のリンクの色も設定しておいた方がいいかも。

    [css]
    span.nav-previous a {
    color: #000;
    }

    span.nav-previous a:visited {
    color: #000;
    }
    [/css]

    記事下の右側のリンク。

    [css]
    .nav-next a {
    color: #000;
    }

    .nav-next a:visited {
    color: #000;
    }
    [/css]

  6. サマー より:

    しげぞうさま

    度々失礼いたします!

    「パンくずリスト」と、記事の一番下に出てくる「→前のページの題名」(右側)のリンクの色を変更したいのですが、どうしたらいいですか?
    いつも同じような質問ばかりで、すみません!

    宜しくお願いします。

  7. しげぞう より:

    しおん様

    コメントありがおとうございます。パンくずのコードを見てみると途中に「ホーム」という文字が入ってますので、その部分を書き直したらOKです。別の部分を間違って削除したりしないようにして下さい。

  8. しおん より:

    しげぞう様

    お世話になります。
    パン屑リストのホームという文字を
    独自の文字に変更したいのですが、変更する方法など
    ありますでしょうか?

    ご返事お待ちしております。
    よろしくお願い致します。

  9. しげぞう より:

    いしきりさん様

    コメントありがとうございます。最近同じような質問多いです、なぜでしょう?私もよく分かりません。コピペしたのに文字化けする感じかな?と思ってます。

    えっと、修正方法ですが、手動でOKと思います。追加したコードをちょっと編集します。

    「ホーム>未分類>テストページ」の「 > 」になるはずの部分を追加したコードから探します。全部下記のようになっているので探しやすいと思います。

    </a> ›

    このコピペした「 > 」1文字を一度削除して自分で「 > 」を入力してみて下さい。それぞれ2箇所くらいあるかなと思いますのでそれを編集してから保存。ブログを表示させてリロード(再読み込み)して確認お願いします。

    それから原因を探したいのでよかったら使っているブラウザ教えてもらえるとありがたいです。

  10. いしきりさん より:

    しげぞう先生
    affiliate150.comを利用させていただくようになってから2週間ほど経ちました。 かゆいところにも手が届くような至れり尽くせりの解説で、全くの素人だった私にもブログのサイトらしきものが出来上がりつつあります。 心よりお礼申し上げます。
    さて、Twenty Twelveへのパン屑リストの設置作業を行いました。 パン屑リストも出て、横
    並びになってほぼOKです。 ただ一つ問題があります。
    本来なら、「ホーム>未分類>テストページ」となるべきところが、
    私の場合、「ホーム?未分類?テストページ」というように、「?」が入ります。
    コードは、コピー&ペーストしただけで入力ミスということはないと思います。 ちょっと頑張って調べてみましたが、私のレベルではどこが問題になっているのかよくわかりませんでした。
    大変お手数をおかけいたします。 ご教授いただけると助かります。
    なにとぞよろしくお願いいたします。
    いしきりさん

  11. しげぞう より:

    ヒロ様

    コメントありがとうございます。そうですね、情報商材とアドセンスは相性が良くありませんが、アドセンス有りのテンプレートと無しのテンプレートを用意して使い分ける事で共存ができるかと思いますが、アドセンスのポリシーも変更になる場合があるので、これで対応できなくなる事もあるかもしれません。
    ⇒https://affiliate150.com/another-template-for-wordpress

タイトルとURLをコピーしました