パンくずリストを付けてみた。

はじめに

潔いくらいの他力本願で、パンくずリストを付けてみました。

2019/02/01 6:10 記事の修正を行いました。
もう一度やろうと思った時に、たぶん躓くであろう頭の悪い自分のための備忘録として。
カスタマイズ方法を検索して間違って辿り着いてしまった方のために。（ないか）

環境

カスタマイズしたのは、WordPress ＋ Twenty Nineteen です。

参考サイト

コードは WEMO.tech さん。

WEMO.tech
[コピペで使える] WordPressでプラグインを使わずにパンくずリストを自動で作成し、好きな場所に表示させる方法

スタイルシートは、毎度お馴染みサルワカさん。

サルワカ
パンくずリストとは？作り方とCSSデザインサンプル12選

実装方法

WEMO.techさんの記事中にある【改良版】パンくずリスト生成関数を丸ごとコピー。（すいません）

子テーマの functions.php に貼り付けます。

ファイルの場所 → /子テーマ/functions.php

私は一番最後にある ?> の直前に貼り付けました。

子テーマの作り方は TN2019さんをご覧ください。（本当に他力ばっかりだ）

TN2019
【WordPress】テーマTwenty Nineteen の子テーマを作る方法

今回はタイトルの上にパンくずリストを出したかったので、entry-header.php に出力用コードを入れました。

ファイルの場所 → /子テーマ/template-parts/header/entry-header.php

出力用コード → <?php custom_breadcrumb(); ?>

[enrty-header.php の一部]

$discussion = ! is_page() && twentynineteen_can_show_post_thumbnail() ? twentynineteen_get_discussion_data() : null; ?>
<?php custom_breadcrumb(); ?>
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

タイトル（h1）を出力している php の上に出力用コードを追加しています。（下から2行目ね）

このままだと、出力結果が普通のリスト表示（・が付いて縦に並んじゃう）なので、スタイルシートのほうで調整をします。

ポイントは、横に並べるために display: inline を使うところですね。詳しくはサルワカさんのところをご覧ください。

ちなみに私のところはこんな感じにしました。

/* パンくず */
#breadcrumb ul{
    padding-left: 2px;
    font-size: 0.9em;
    }

#breadcrumb li{
    display: inline;
    list-style-type: none;
    }

#breadcrumb li a{
    text-decoration: none;
    color: #a8a8a8;
    }
    
#breadcrumb li:after{
    content: '>';
    padding: 0 3px;
    color: #a8a8a8;
    }
        
#breadcrumb li:last-child:after{
        content: '';
    }

#breadcrumb li:first-child a:before{
    font-family: Font Awesome\ 5 Free;
    content: '\f015';
    font-weight: 900;
    }

尚、li なんかに、「これはパンくずリストですよ」と明示的に書く方法（schema.org）もあるのですが、WEMO.tech さんの記事を見ると、

改良されたコードのschema.org対応版はありません（今では JSON-LD対応の方が推奨されているようなので、追加する予定もないです）

WEMO.tech

このように書かれていたので、それを信じてそのままコピペです。

漢らしいね。

ソースを見せるときに、他のサイトだともっと格好良い感じになっているんですけど、どうやるのかな。また調べてみよう。