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にパンくずリストの設置は完了です。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

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

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

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

  1. サマー

    しげぞうさま

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

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

  2. しげぞう 投稿作成者

    サマー様

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

    div#breadcrumb a {
        color: #000 !important;
    }
    

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

    span.nav-previous a {
        color: #000;
    }
    
    span.nav-previous a:visited {
        color: #000;
    }
    

    記事下の右側のリンク。

    .nav-next a {
        color: #000;
    }
    
    .nav-next a:visited {
        color: #000;
    }
    
  3. サマー

    しげぞうさま

    度々失礼いたします!

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

    宜しくお願いします。

  4. しげぞう 投稿作成者

    しおん様

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

  5. しおん

    しげぞう様

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

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

  6. しげぞう 投稿作成者

    いしきりさん様

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

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

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

    </a> ›

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

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

  7. いしきりさん

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

  8. しげぞう 投稿作成者

    ヒロ様

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

  9. ヒロ

    WordPressを使いまして一つのサイト作成で

    Googleアドセンスとインフォトップの情報商材を、
    同時に表示さすことはできません

    Googleアドセンス専用ページのアクセスを生かし、
    インフォトップの情報商材の個別ページにリンクで誘導することでしょうか

    サイトを拝見させていただきましても、アドセンス掲載記事がありません。

    一つのサイト作成でどのようにして、
    Googleアドセンスとインフォトップの情報商材を関連さすのか教えてください。
    お願いします。

  10. しげぞう 投稿作成者

    アキ様

    返信ありがとうございます。なんでしょうね、ブログを見てみたのですが、スタイルシート(CSS)でコードの記述ミスがかなり多いようです。コピペの時にミスってるのかもしれませんが、一度スタイルシートを全部削除して、以下のコードに張り替えて下さい。間違っていた部分だけ修正してます。

    /*
    Theme Name: Child
    Template: twentytwelve
    */
    
    @import url('../twentytwelve/style.css');
    
    /* フォントと文字の大きさ、色 */
    body {
    font-family: "メイリオ", Meiryo, 
    "Hiragino Kaku Gothic Pro",
    "ヒラギノ角ゴ Pro W3", "MS Pゴシック", "Lucida Grande", 
    "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    text-rendering: optimizeLegibility;
    color: #333;? /* 文字色 */
    font-size: 14px; /* 文字の大きさ */
    }
    
    body.custom-font-enabled {
    font-family: "メイリオ", Meiryo,
    "Hiragino Kaku Gothic Pro",
    "ヒラギノ角ゴ Pro W3", "MS Pゴシック", "Lucida Grande",
    "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    }
    
    /* 本文中の行間 */
    .entry-content p {line-height: 28px;}
    
    /* サイドバーの行間と文字の大きさ */
    .widget-area .widget li {
    line-height: 28px; /* 行間 */
    font-size: 14px; /* 文字の大きさ */
    }
    
    /* ブログタイトル部分 */
    .site-header h1 {
    font-size: 28px; /* 文字の大きさ */
    line-height: 1.846153846; /* タイトル部分の高さ */
    background-color: #fff; /* 背景に色を使う場合に記入 */
    }
    
    /* ブログタイトルの色 */
    .site-header h1 a {color:#000000;} /* タイトルの色 */
    .site-header h1 a:hover {
    color: #7a8285;} /* カーソルが乗った時の色 */
    
    /* 記事タイトル */
    .entry-header .entry-title {
    font-size: 20px; /* 文字の大きさ */
    line-height: 1.2; /* 高さ */
    padding-left: 10px; /* ちょっと左に余白 */
    }
    .entry-header .entry-title a {
    color: #000000;/* 文字の色 */
    }
    
    /* ウィジェットタイトル部分 */
    .widget-area .widget h3 {
    text-align:center; /* タイトルの中央寄せ */
    line-height: 20px; /* 高さ */
    font-size: 15px; /* 文字の大きさ */
    color: #fff; /* 文字色 */
    background-color: #1F5E73; /* 背景色 */
    border-radius: 3px; /* 角に丸みをつける */
    padding: 2px 10px; /* 左と上下に余白 */
    }
    
    /* 見出しh2 */
    .entry-content h2 {
    border-left: 5px solid #1F5E73;
    padding: 0 0 0 15px ;
    line-height: 2;
    font-size: 18px;
    background-color: #fff;}
    
    /* 記事内のリンク */
    .entry-content a {
    text-decoration: underline; /* リンク部分にアンダーライン */
    font-weight:bold; /* リンク文字を太字 */
    color: #0066cc;} /* リンクの色 */
    .entry-content a:visited {
    color: #0066cc;} /* 訪問済みの色 */
    .entry-content a:hover{
    color: #7a8285;} /* カーソルが乗った時の色 */
    
    /* サイドバーの文字 */
    .widget-area .widget p, .widget-area 
    .widget li, .widget-area .widget .textwidget {
    line-height: 28px; /* 文字の高さ */
    font-size: 14px; /* 文字の大きさ */
    }
    
    .widget-area .widget a {
    color: #000000; /* リンク部分の文字色 */
    text-decoration: underline; /* リンク部分にアンダーライン */
    font-weight: normal; /* 文字の太さはノーマル */
    }
    .widget-area .widget a:visited {color: #000000;}
    .widget-area .widget a:hover{color: #7a8285;}
    
    /* ナビメニュー */
    .main-navigation li a {
    color: #fff; /* 文字色(白) */
    font-weight:bold; /* 太字にして */
    line-height: 25px; /* 高さ */
    font-size: 15px;} /* 文字の大きさ */
    .main-navigation ul {
    margin: 0; /* 余白をなくす */
    background: #1F5E73; /* 背景色 */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    }
    
    .main-navigation li a:visited {color: #fff;}
    .main-navigation li a:hover{color: #7a8285;}
    
    @media screen and (min-width: 960px) {
    .main-navigation ul.nav-menu {
    display: table !important;
    table-layout: fixed;
    text-align: center;
    width: 100%;}
    
    .main-navigation li {
    display: table-cell;
    vertical-align: middle;}
    }
    
    /* ナビゲーションサブメニュ− */
    ul.sub-menu li a{
    color:#fff !important; /* サブメニュー文字色 */
    background-color:#1F5E73 !important;? /* サブメニューの背景色 */
    font-size:12px !important; /* 文字の大きさ */
    font-weight:bold !important;? /* 文字を太字に */
    }
    
    ul.sub-menu li {
    margin-right:0px !important; /* サブメニューの右の余白を0に */
    }
    
    /* 背景色 */?
    .site {background: #00ff66;}
    .widget-area {background: #000;}
    .site-content {background: #000;}
    .site-header {background: #000;}
    
    /* コンテンツ背景色 */
    .site-content { background: #f5faf1;} /* 色を指定 */
    
    /* コンテンツ背景画像 */?
    .site-content {
    background-image:
    url(http://アップロードしておいた画像URL);
    background-repeat:repeat;}
    
    /* サイドバーの背景色 */?
    .widget-area {background: #f5faf1;}
    
    /* ヘッダー下の余白をなくす */
    .site-header {padding: 24px 0 0 0;}
    
    hgroup {
    margin-bottom:10px;} /* タイトル下に余白 */
    
    .header-image {
    margin-bottom:10px;} /* ヘッダー画像下に余白 */
    
    .main-navigation {
    margin-bottom:10px;} /* ナビメニュー下に余白 */
    
    @media screen and (min-width: 600px) {
    .site {max-width: 860px;}
    .widget-area {width: 34.88372093%;}
    .site-content {width: 61.62790698%;}
    }
    
    @media screen and (min-width: 600px) {
    .ie8 .site {max-width: 860px;}
    .ie8 .widget-area {width: width: 34.88372093%;}
    .ie8 .site-content {width: 61.62790698%;}
    }
    
    /* パンくず */
    div#breadcrumb div {
    line-height: 20px; /* 文字の高さ */
    display: inline; /* 横並びに */
    }
    
    /* パンくず位置調整 */
    div#breadcrumb {
    margin:-15px 0 20px 0;}
    .site-header {
    padding: 24px 0 0 0;}
    
    /* 赤で囲った部分 */
    footer.entry-meta {
    margin-top: 24px; /* 記事との間隔 */
    font-size: 14px; /* 文字の大きさ */
    color: #000000; /* 文字の色 */
    font-weight: bold; /* 必要あれば太字に */
    }
    
    /* 黒で囲った部分 */
    .entry-meta a {
    font-size: 14px; /* 文字の大きさ */
    color: #000000; /* 文字の色 */
    font-weight: bold; /* 必要あれば太字に */
    text-decoration: none; /* 下線がいらない場合に記述 */
    }
    
    .entry-meta a:visited {
    color: #000000;} /* 訪問済みの色 */
    .entry-meta a:hover{
    color: #7a8285;} /* カーソルが乗った時の色 */
    
    .entry-content{margin-top:30px;}
    
    div.entry-post-thumbnail {
    float: left;
    margin: 0 10px 10px 0;}
    
    .archive-title {
    border-left: 5px solid #1F5E73;
    border-bottom:2px solid #1F5E73;
    padding: 0 0 0 15px ;
    color:#000000;
    line-height: 2;
    font-size: 18px;}
    
    .widget-area .textwidget ul {
    list-style:? none;}
    .widget-area .textwidget li {
    margin-left: 0px;}

    とりあえずこれをやってみて、また次の問題がでてくればそれをやってみましょう。

  11. アキ

    丁寧な解説と迅速な対応ありがとうございます!

    やはり一通り行ってはみたものの上手くいかず
    同じエラーが出てしまいます。

    もし質問以外にブログを見て致命的なミスまたは気になる点等ありましたら
    教えて欲しいです!

    何度もお手数かけてしまい申し訳ございません。
    よろしくお願いします。

  12. しげぞう 投稿作成者

    アキ様

    コメントありがとうございます。親テーマをいじる事は考えにくいですが、再度テーマをインストールすると親テーマは元に戻るかな?と思いますが、面倒なので、親テーマのsingle.phpです。テーマは「Twenty Twelve」ですよね?以下Twenty Twelveの親テーマのsingle.phpです。

    <?php
    /**
     * The Template for displaying all single posts
     *
     * @package WordPress
     * @subpackage Twenty_Twelve
     * @since Twenty Twelve 1.0
     */
    
    get_header(); ?>
    
    	<div id="primary" class="site-content">
    		<div id="content" role="main">
    
    			<?php while ( have_posts() ) : the_post(); ?>
    
    				<?php get_template_part( 'content', get_post_format() ); ?>
    
    				<nav class="nav-single">
    					<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
    					<span class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentytwelve' ) . '</span> %title' ); ?></span>
    					<span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'twentytwelve' ) . '</span>' ); ?></span>
    				</nav><!-- .nav-single -->
    
    				<?php comments_template( '', true ); ?>
    
    			<?php endwhile; // end of the loop. ?>
    
    		</div><!-- #content -->
    	</div><!-- #primary -->
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    上記を親テーマ、子テーマのsingle.phpに貼り付けてみてブログを表示し、「Ctrl」と「F5」を一緒に押してリロードしてから確認して下さい。

    もしそれでもダメならブログのURLを教えて下さい。コメント公開時にURLは削除しますのでどうぞよろしくお願い致します。

  13. アキ

    親テーマのsingle.phpを子テーマにコピペしてカスタマイズしたいコードをしげぞうさんが
    回答された様に貼り付けたのですが同じエラーが出てきてしまいます。

    もしかして何かの拍子で親テーマのsingle.phpをいじってしまったせいで子テーマにコピペしても元がおかしいのでうまく反映されないということはありえますか?
    もしそうだとしたらもう対処できないのでしょうか?
    お手数ですがご回答宜しくお願い致します

  14. しげぞう 投稿作成者

    アキ様

    コメントありがとうございます。single.phpの記述に間違っている部分があります。一度親テーマのsingle.phpをコピーして元に戻せばこちらもクリアできます。カスタマイズする前に記述をコピーしておき、メモ帳などにコピペしておいてからphpファイルを編集するようにするとエラーが出てもすぐに元に戻せます。

    カスタマイズしたいコードをコピーする時にきちんと最初から最後までコピーできているか?それからコードの行番号までコピーしていないか?を確認して作業してみて下さい。

  15. アキ

    質問です!!

    パンくずリストを作るためにsingle.php、category.php、tag.phpにコードを入力し自分のブログサイトで作った記事をクリックすると「Parse error: syntax error, unexpected ‘ ‘ (T_STRING) in /home/xxx1011/xxx1010.com/public_html/wp-content/themes/child/single.php on line 28」というエラーメッセージが出ます。

    この解決策を是非教えて欲しいです

  16. しげぞう 投稿作成者

    okinagatarashi様

    返信ありがとうございます。無事に解決できたようで良かったです!お礼は気持ちだけで十分です。コメントは記事の修正や新規記事作成のヒントになりますので、私としても非常にありがたいです。また何か分からない部分があればいつでもコメント下さいね!わざわざありがとうございました。

  17. okinagatarashi

    しげぞう様
    度々、ポンコツごめんなさい。
    メニューから表示されたページにパンくずはいらないですね!!!
    アホでした!!ポンコツにもほどがありました!
    ごめんなさい。さっきのコメント新しいHELP!消して下さい。
    本当に失礼しました。

    しげぞう様に何か、お礼をする方法はないですか?

  18. okinagatarashi

    しげぞう様
    ほんとに、本っ当ぅ~ッにありがとうございます!
    NICEにサックっと設置!の後何を間違えたか、どのページも見られなくなって、
    コンテンツ表示部分に何かしてしまった?ンですね…
    何度かやり直し中でメモ帳からコピペのときのミスかもです。そして、サックと直りました!!本当にご親切で助かります。
    ポンコツで迷惑ですがこれからも宜しくお願いします。

  19. しげぞう 投稿作成者

    okinagatarashi様

    コメントありがとうございます。教えて頂いたURLで確認をしました。okinagatarashi様の言われるように何やら文字が出てますね。これの原因について紹介をしまね。

    各PHPファイルには最初の部分にコメントが書いてあります。まずはWordPressの「外観」⇒「テーマ編集」と進み、右側に並んだphpファイルの中から「content-page.php」というファイルを開いてみて下さい。

    これの一番最初がこのようになっていると思います。

    <?php
    /**
     * The template used for displaying page content in page.php
     *
     * @package WordPress
     * @subpackage Twenty_Twelve
     * @since Twenty Twelve 1.0
     */
    ?>

    この部分の最初と最後に「/**」「*/」が付いていますよね。これは「この部分はコメント部分だから表示しないでね!」という処理(コメントアウト)です。

    この部分の一部が削除されているか編集されているか分かりませんが、コメントアウトになっていないのが原因だと思います。なので、この部分を確認されて下さい。

  20. okinagatarashi

    しげぞう様
    こんばんは。
    サックとNICEに設置でしたが、カテゴリーページだけ
    * The template used for displaying page content in page.php * * @package WordPress * @subpackage Twenty_Twelve * @since Twenty Twelve 1.0 */ ?>
    って、表示が出て、パンくずリストになりません。
    何がいけなかったのか。よく分りません。
    タグ、シングル、カテゴリー其々コピペしました。
    考えられることは何ですか?
    ご教授願えますと助かります。
    何度も本当にごめんなさい。

  21. okinagatarashi

    しげぞう様
    ありがとうございます。
    出来ました!NICE!です。消せないなら背景と同じ白字にして小さくしちゃえ!で解決です。
    いつもありがとうございます。

  22. okinagatarashi

    しげぞう様
    こんにちは!ありがとうございます。
    「 カテゴリー別アーカイブ: Japanese Style 」は確かにカテゴリーページです。
    各投稿にはないみたい。
    週明けチャレンジします。いつも、本当にありがとうございます。

  23. しげぞう 投稿作成者

    okinagatarashi様

    再度コメントありがとうございます!パンくず設置できたようで良かったです。えっと「 カテゴリー別アーカイブ: Japanese Style 」と表示されているのはおそらくカテゴリーページだと思います。この部分がカテゴリーページ全体のタイトルになっています。詳しくはこちらの記事で書いてますので、一度読んで見て下さい。
    カテゴリー別アーカイブの表示をカスタマイズ

  24. okinagatarashi

    こんにちは。
    パン屑リストはサクッと出来て驚き!です。って、いつもですが!
    設定をしたらパン屑リストの下に
    「 カテゴリー別アーカイブ: Japanese Style 」
    って、いうのが入ってしまいました。
    なにこれ?って感じですが・・・
    どうぞ、ご教授宜しくお願いします。

  25. poko 投稿作成者

    >mururun様

    わざわざコメントありがとうございました。返事が遅れてすみませんでした。現在サーバーの移転中でサーバー切り替え中だったため、コメントが上手く反映できませんでした。現在はサーバーも無事切り替わっているようですのでまた質問等ある時にはコメント頂けると嬉しいです。今後ともどうぞよろしくお願い致します。

  26. marurun

    先ほど質問させていただいたのですが固定ページへの設置もなんとかできましたので大丈夫になりました(^^)
    ありがとうございました。

  27. marurun

    とても分かりやすくて無事パンくずリストをつけられました。
    ありがとうございました。
    もしよかったら固定ページに付ける付け方も教えてください。
    single.php用のをpage.phpに貼ったところ、パンくずリストができはしたのですが、
    ホーム>子ページとなってしまい親にあたる部分が表示されません。何か方法はありますでしょうか?
    また、カテゴリーページとタグページはどこに表示されてるのか分からないのですが、カテゴリーページとタグページってなんですか?そのページを作っていないのかも知れませんが・・・。初心者の質問ですいません(><)
    ちなみにテーマはSmartline Liteでサイトはこれです。

  28. poko 投稿作成者

    >tuukai様

    いつもありがとうございます。パンくずリストはほどんど引用で私も非常に参考になりました。まだまだ勉強中ですがこれからもどうぞよろしくお願いします。

  29. tuukai

    こんにちは。

    物凄くわかりやすいですね、
    お蔭さまで、パンクズリストを設置することが出来ました!

    有難うございました。