パンくず表示を、何とかしよう

CMS 構成していたモノから、静的移行したサイトに多く見られる、全ページ『何でもかんでもパンくず設置』の設定。

たいていが、ページタイトルと同じ文字列が入る＝h1 のテキスト、となる場合が多いと思われる。

お知らせなど、詳細ページを、複製して作っていくと、title タグ, パンくず, h1 など複数箇所を置換して、という無駄な作業が発生する。設置例）https://kyoto-triathlon.jp/news/2023/20230703.html

title は、ページタイトルとしての文字列を、どこに採用するか変化する場合がある（上記ページでは、ページタイトルを不採用）ので、定型としづらい場合があるが、パンくずは、明らかにパンくず並びの、最後に位置する。

HTML 側

    <div id="pankuzu">
      <div class="subbody">
        <p><a href="/">トップ</a> > <a href="/news/index.html">お知らせ</a> >ローカルルールについて</p>
      </div>
    </div>
（略）
    <h1>ローカルルールについて</h1>

と、通常 h1 とパンくずは、section 違いなど、遠い位置に存在するため、jQuery で対応とする。

HTML 側の変更点。パンくずの、p タグ内を、固定されている部分だけを残して設置。

<p><a href="/">トップ</a> > <a href="/news/index.html">お知らせ</a> > </p>

jQuery 記述例

$('#pankuzu>.subbody>p').append($('h1').text()).clone();

＜動作考え方＞
h1 のテキストを取得
パンくずの最後の位置に設置

append は、取得するモノを『移動』するため、h1 そのものを指定すると、h1 をそのままパンくず位置に持って行ってしまう。
したがって、一旦 h1 を複製する必要がある。また、h1 の状態で複製となると不都合な場合もあるため、h1 内のテキストを取得し、そのテキストを複製（clone）。
テキストになったものを、パンくず（pankuzu>.subbody>p）の、内部末尾に設置（append）する。

パンくずを、なるべく早めに発動させたい場合は、h1 出現直後の適度な位置で

<script>
	$('#pankuzu>.subbody>p').append($('h1').text()).clone();
</script>

と、即時発火させても良いが、表示上あればよい、というレベルであれば、ページロード後で

<script>
$(function () {
	$('#pankuzu>.subbody>p').append($('h1').text()).clone();
});
</script>

として、head 内に、他のスクリプトとまとめて設置でも問題無いと考える。
場合によっては、common.js などに含めてしまって、一括で head 内で発動させる、ということでも対応できる。

上記例では h1 を取得したが、$('h1').text() の部分を、適宜変えることで、タイトルなどの文字列をパンくずと共通化することが可能となる。