ﾎｰﾑ
PC
WP
WordPress導入
ﾊﾟﾝくずﾘｽﾄ

ﾊﾟﾝくずﾘｽﾄ

≪ ﾌﾞﾛｸﾞ前後へのﾘﾝｸ | Wp | ﾌｧﾋﾞｺﾝの設置 ≫

パンくずリスト

パンくずリストとは

　パンくずリストとは、このページの左上に表示されているような、ホームページトップから、現在開いているページまでの階層を表示したリストです。
　これを表示することで、自分がホームページ上のどの位置のページを開いているかが一目でわかり、しかもそれぞれの階層にはリンクが張ってあるので、上の階層に移動することなども簡単にできるようになります。

パンくずリストの表示名

　パンくずリストには、そのページ名がそのまま表示されます。ですから、下位項目があるページの場合、そのページの名前は、パンくずリストに表示したいものにします。
　そのままでは、ページを開いた時のタイトルがおかしなものになりますから、ページ名は非表示にして、ページのタイトルを、別途「<h2>Title</h2>」のようにして、ページの最初に追加します。
　ページのタイトルを上位項目の名前に変えても、メニュー表示は、メニューの変更画面で、ページ名とは別の表示を指定できるので、そこで希望のページ表示に変更します。

パンくずリストの表示位置

cocoonの場合

　「管理メニュー>cocoon設定」の下位項目、「投稿」と「固定ページ」にパンくずリストの表示位置を指定する場所がそれぞれあります。
　ここのメニューで、「記事タイトル」の所を、「パンくずリストに記事タイトルを含める」にしないと、フォルダのトップページ名をフォルダ名にしたときにうまく表示されません。　

h1タイトル（元のページタイトル表示）の非表示

KANSOの場合

　ページ編集の左側メニューに、「タイトルを非表示」の項目があるので、それをチェックすると、ページ名のタイトル表示をしなくなります。
　ただこのタブは、本来「KANSO固定ページ目次」に表示するかしないかを指定する目的のものの様です。私は、サイドメニューに、Accordeon Menu CKを使っているので、全く支障はありませんが、「KANSO固定ページ目次」を使う場合は、この手はおそらく使えません。

cocoonの場合

　KANSOの様に、編集画面に、ページタイトルを非表示にする項目がないので、強制的に、見えないようにしてしまいます。

/* タイトル文字　非表示 */
.page .entry-title,
.post .entry-title{
  display: none;
}

　上は固定ページ用、下は投稿用です。テーマファイルエディターから、style.css に上記の記述を追加します。
　ただ、これはソースコードにある<h1>を、人間には見せないようにしているだけですから、googleなどの検索エンジンには、評価を下げてしまう可能性はあります。

トップページのパンくずリスト

　トップページには、リストが自動挿入されないので、更に上位ページがある場合には、手動でリンクを挿入します。
　文字サイズや、文字色を自動挿入されたものに合わせると、さらに違和感がないでしょう。
　下のようなPHPの変更はせず、Top画面にこれを加えるだけでも、上位ページへの移動が格段にしやすくなります。

KANSOの場合

<div><span style="font-size: 12px;"><a style="color: #888888;" href="http://www.*******.com">Top</a>　>　**home</span></div>

cocoonの場合

<div id="breadcrumb" class="breadcrumb breadcrumb-page pbp-main-top" itemscope itemtype="https://schema.org/BreadcrumbList"><div class="breadcrumb-home" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"> <span class="fa fa-home fa-fw" aria-hidden="true"></span><a href="https://www.neko01.com/" itemprop="item"><span itemprop="name">ﾎｰﾑ</span> </a> <meta itemprop="position" content="1" /><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span></div>
<div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a href="https://www.neko01.com/pc/" itemprop="item"><span itemprop="name">Pc</span></a><meta itemprop="position" content="2" /><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span></div>
<div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a href="https://www.neko01.com/pc/wp" itemprop="item"><span itemprop="name">WP</span></a><meta itemprop="position" content="3" /><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span></div>
<div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a href="https://www.neko01.com/pc/wp/" itemprop="item"><span itemprop="name">WordPress導入</span></a><meta itemprop="position" content="4" /></div>
</div>
<!-- /#breadcrumb -->

　HPのTop頁に貼るリンクなので、自分の頁へのリンクはいらないかと思って、黄色のマーカー部分のリンクを削除していた所、google search console の ﾊﾟﾝくずﾘｽﾄで、「項目『item』がありません」というエラーが出てきていました。itemListElement を指定している所のリンクはどうも消してしまっては都合が悪い様です。
　リンクが不要な場合は、このリンクが含まれている<div></div>タグの内容自体を

<div class="breadcrumb-item"><span>WordPress導入</span></div>

のように変更します。

クリックすると拡大画像を表示します

　KANSOやcocoonには標準でパンくずリストが付いているので、ホームぺージのトップで使うにはそのままでよいのですが、トップページの下位にWordPressのページを設定したような場合には、[HOME]が、その項目のTopページになってしまい、その上位ページへのリンクが表示できません。
　これを表示させるようにするためには、テーマのPHPをいじる必要があります。
　ただ、変更をしても、テーマが更新される度に、この設定が上書きされてしまいます。それもかなりうっとうしいので、あまりここまで細部にこだわらない方が良いかもしれません。（これへの対応策は下で。）

childテーマの設定

　テーマのPHPを編集しても、テーマが更新されると、そこにあったファイルは全部消されて、フォルダが中身ごと入れ替わってしまいます。それではテーマが更新されるたびに改造したPHPを再uploadしなくてはならず大変です。
　WordPressの場合、childテーマを有効にして、元あったPHPと同じフォルダ構成の場所に、改造したPHPをuploadしておくと、それが元のPHPと挿し変わって使われるようです。
　cocoonの場合、既にchildテーマが用意されているので、このフォルダに、tmpフォルダを追加して、そこに breadcrumb-page.php なり breadcrumbs.php なりをアップロードしておけば、親テーマがいくら更新されても、PHPの方は、残ったままになります。

KANSOの場合

　KANSOテーマの中で、このパンくずリストの表示に関わるプログラムの場所は、以下の通りです。

./wp-content/themes/kanso-general-master/template-parts/breadcrumb-page.php

　8行目の「home」と書いてあるのがこのリンクなので、その前にリンクを書けば、上位項目へのリンクも付け足すことができます。

<a href="http://www.******.com/"><span itemprop="name">Top</span></a>　>　<a href="<?php echo site_url(); ?>" itemprop="item"><span itemprop="name">**Top</span><meta itemprop="position" content="1"></a>

　編集にあたって、UTF-8の文字コードで保存しないと、漢字が文字化けしました。「表示のまま、文字コードを変更」したところ、正常に表示されるようになりました。

cocoonの場合　固定ページ

　ファイルは、固定ページならbreadcrumbs-page.phpです。
　投稿記事の方は、breadcrumbs.phpです。

./wp-content/themes/cocoon-master/tmp/breadcrumbs-page.php

　こちらの方は、KANSOと違って、訳が分かりません。
　13行目の、「ホーム」が、最上位階層の表示です。
　階層が下がるごとに、contentの数字が1上がっているようです。私は、上位にさらに二つを追加したので、WordPressの最上位は、3から始まります。
　下位項目は、ループでデータを取得しているので、この場合、3から始めるために、初期設定値を2にして、そこからループで1ずつプラスさせています。（ここらあたりの改造について、令和3年9月までの記述に間違いがあったので、訂正しました。）
　<span class=”fa fa-angle-right” aria-hidden=”true”></span> は、家の表示です。これはトップページに移動させて、途中に表示されるファイルマーク（<span class=”fa fa-file-o fa-fw” aria-hidden=”true”></span>）は、うっとうしいので削除しました。

<?php if ( !is_front_page() ): //個別ページでパンくずリストを表示する場合https://www.neko01.com/pc/wp/?page_id=19
$root_text = __( 'WP', THEME_NAME );
$root_text = apply_filters('breadcrumbs_page_root_text', $root_text);
?>
<div id="breadcrumb" class="breadcrumb breadcrumb-page<?php echo get_additional_page_breadcrumbs_classes(); ?>" itemscope itemtype="https://schema.org/BreadcrumbList">
  <?php $count = 2;
  $per_ids = array_reverse(get_post_ancestors($post->ID));
   ?><div class="breadcrumb-home" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">
<span class="fa fa-home fa-fw" aria-hidden="true"></span><a href="https://www.neko01.com/" itemprop="item"><span itemprop="name">ﾎｰﾑ</span></a><meta itemprop="position" content="1" /><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span></div>
<div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a href="https://www.neko01.com/pc" itemprop="item"><span itemprop="name">PC</span></a><meta itemprop="position" content="2" /><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span></div>
<div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a href="<?php echo esc_url(get_home_url()); ?>" itemprop="item"><span itemprop="name"><?php echo esc_html($root_text); ?></span></a><meta itemprop="position" content="3" /><?php echo (count($per_ids) == 0 && !is_page_breadcrumbs_include_post()) ? '' : '<span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span>' ?></div><?php foreach ( $per_ids as $par_id ){
    $count += 1;
    $page = get_post($par_id);
    $post_title = $page->post_title;
    $post_title = apply_filters('breadcrumbs_page_title', $post_title, $page);
    ?><div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a href="<?php echo esc_url(get_page_link( $par_id ));?>" itemprop="item"><span itemprop="name"><?php echo esc_html($post_title); ?></span></a><meta itemprop="position" content="<?php echo $count + 1; ?>" /><?php echo (count($per_ids)+1 == $count && !is_page_breadcrumbs_include_post()) ? '' : '<span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span>' ?></div>
  <?php } ?>
  <?php //ページタイトルを含める場合
  if (is_page_breadcrumbs_include_post()):
    ?><div class="breadcrumb-item"><span><?php the_title(); ?></span></div>
  <?php endif ?>
</div><!-- /#breadcrumb -->

cocoonの場合　投稿ページ

./wp-content/themes/cocoon-master/tmp/breadcrumbs-page.php

　投稿記事は、breadcrumbs.phpです。

<?php //カテゴリ用のパンくずリスト
/**
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
if ( !defined( 'ABSPATH' ) ) exit;

if (is_single_breadcrumbs_visible() && (is_single() || is_category())){
  $cats = get_the_category();
  $cat = (is_single() && isset($cats[0])) ? $cats[0] : get_category(get_query_var("cat"));
  if($cat && !is_wp_error($cat)){
    $echo = null;
    $root_text = __( 'PcBlog', THEME_NAME );
    $root_text = apply_filters('breadcrumbs_single_root_text', $root_text);
    //var_dump($par);
    echo '<div id="breadcrumb" class="breadcrumb breadcrumb-category'.get_additional_single_breadcrumbs_classes().'" itemscope itemtype="https://schema.org/BreadcrumbList">';
    echo '<div class="breadcrumb-home" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-home fa-fw" aria-hidden="true"></span><a href="https://www.neko01.com/" itemprop="item"><span itemprop="name">ﾎｰﾑ</span></a><meta itemprop="position" content="1" /><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span></div>
<div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a href="https://www.neko01.com/pc" itemprop="item"><span itemprop="name">PC</span></a><meta itemprop="position" content="2" /><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span></div>
<div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a href="'.esc_url(get_home_url()).'" itemprop="item"><span itemprop="name">'.esc_html($root_text).'</span></a><meta itemprop="position" content="3" /><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span></div>';
    $count = 3;
    $par = get_category($cat->parent);
    //カテゴリ情報の取得
    $cats = array();
    while($par && !is_wp_error($par) && $par->term_id != 0){
      $cats[] = $par;
      $par = get_category($par->parent);
    }
　　　　～（以下省略）～

　ページタイトルの、ファイルのイラストを消す場合は、

    //ページタイトルを含める場合
    if (is_single_breadcrumbs_include_post() && is_singular()) {
      echo '<div class="breadcrumb-item"><span class="fa fa-file-o fa-fw" aria-hidden="true"></span><span class="breadcrumb-caption">'.esc_html(get_the_title()).'</span></div>';
    }

マーカー部分を消します。

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