賢威の固定ページの上部にパンくずリストを表示させる方法

※当サイトにはプロモーションが含まれています。

賢威には、自動でパンくずリストを生成してくれる機能があります。

しかし、パンくずリストが表示されるのは、フッター(footer)部分のみです。

その為、固定ページのヘッダー部分にパンくずリストを表示する方法を紹介します。

ちなみに、これらを適用すると、このように表示されます。

パソコンで見た場合

パンくずリスト対応後(PC)

スマホで見た場合

パンくずリスト対応後(スマホ)

繰り返しになりますが、今回紹介するのは、固定ページのh1タイトルの上にパンくずリストを記載する方法です。

投稿ページに記載する方法は、こちらの記事をご参照ください。

この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

ワードプレス環境

テーマ:賢威8
WordPressバージョン:5.8.x
PHPバージョン:7.4.x
サーバー:さくらインターネット

※現在、WP:6.2.x、PHP:8.2.xでも動作しています

固定ページの上部にパンくずリストを表示させる方法

賢威の固定ページの上部にパンくずリストを表示させる方法です。

①親テーマにあるcontent-page.phpをダウンロードする

(WinSCPやFileZillaなどの)FTPソフトを使用して、ローカルホスト(自分のパソコン)に、親テーマにあるcontent-page.phpをダウンロードします。

なお、フォルダの構成は、概ね下記のようになっていると思います。

/home/(あなたが契約した名前)/www/(あなたが作成したフォルダ名)/wp-content/themes/keni80_wp_standard_all_202403231915/template-parts

content-page.phpをダウンロード

※通常、賢威の親テーマは「keni80_wp_standard_all_(日付+時間)」という形式になっています

②content-page.phpの内容を編集する

content-page.phpの22行目付近に記載されている

<h1 class="entry_title" itemprop="headline"><?php the_title(); ?></h1>

に、以下のコードを追加します。

<?php if ( is_keni_layout_breadcrumb() ) : ?>
<?php get_template_part( 'template-parts/part', 'breadcrumbs' ); ?>
<?php endif; ?>

実際のコードを見るとこんな感じになります。

content-page.phpの記載例

③子テーマ内にtemplate-partsフォルダを作成する

FTPソフトを使用して、子テーマ内に「template-partsフォルダ」を作成します。

template-partsフォルダの作成

※作成するのは「子テーマ」の方です。また、ファイル名は半角です。

④修正したcontent-page.phpを子テーマにアップロードする

コードを追加した、content-page.phpを、先程作成した「template-partsフォルダ内」にアップロードします。

content-page.phpを子テーマにアップロード

これで、h1タイトルの上に「パンくずリスト」が表示されているはずです。

ただし、余計な余白や境界線などを調整する必要があるので、CSSを調整したいと思います。

もし、サイトが真っ白になるなどの不具合があった場合は、content-page.phpを削除すれば元に戻ります。

何故なら、親テーマには一切変更を加えてないからです。

⑤CSSで見た目を調整する

CSSで、パンくずリストの見た目を調整します。

なお、ここに記載されているCSSは「賢威のパンくずリストをh1タイトルの上に表示させる方法」で記載されているのと全く同じ内容です。

その為、すでに「追加CSS」に下記の内容を記載されている場合は、このCSSは無視してください。

/* パンくずリスト調整 */
@media (min-width: 768px) {
.keni-main .keni-section h1 {
margin: 0px -40px 30px;
padding: 0px 40px 0;
}
}

.keni-section h1 {
background-image: none;
margin: 0px -40px 30px;
padding: 0px 40px 0;
}

.article-header .keni-breadcrumb-list_wrap {
border-top: none;
border-bottom: none;
padding: 5px 0 10px;
}

@media screen and (max-width: 767px) {
.keni-breadcrumb-list_wrap {
border-top: none;
border-bottom: none;
padding: 5px 5px 10px;
position: relative;
}
.keni-breadcrumb-list_wrap .keni-breadcrumb-list {
display: block;
white-space: nowrap;
padding: 0 10px 30px 0;
}

.keni-breadcrumb-list_wrap::after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100px;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
pointer-events: none;
}

.keni-breadcrumb-list_outer {
position: relative;
width: 100%;
}

ol.keni-breadcrumb-list_inner {
display: block;
overflow-x: scroll;
width: 100%;
padding-right: 45px;
padding-bottom: 6px;
white-space: nowrap;
}
}

なお、パンくずリストでサイト名を表示させない方法についても記事を書いています。

興味がございましたら、ご参照ください。

ご支援のお願い
この記事が役に立ったと感じたら・・・

Ny@Tech(にゃテック)

この記事が少しでもお役に立ったと感じていただけましたら、ぜひ下のリンクからお買い物をしていただけると幸いです。

ご購入いただいた金額の一部(1~3%程度)が私に入り、より多くの有益な記事を作るための励みになります。

下記のリンクを通じて、Amazonや楽天でお買い物いただけると嬉しいです。