固定ページで作ったトップページにもパンくずリストを表示(WordPress + SWELL)

固定ページをトップページに設定した場合、そのページにはパンくずリスト(Breadcrumb List)が表示されませんでした。 トップページにも「 ホーム 」表示させたかったのでブログパーツと CSSで強制的に表示させた際の作業メモです。

このパンくずリストを表示する作業と並行して、PCではトップページのサイドメニューにあったコンテンツをトップページの最下段に移動させて1カラム構成に変更しました。PC画面とスマートフォン画面が同じ画面レイアウトになりました。

目次

トップページにパンくずリストを表示するブログパーツと CSSの作成

投稿ページ画面の横幅は900pxに設定しているので、固定ページもこのサイズに合わせて下記CSSでパンくずリストの設置位置の微調整を行っています。

STEP
パンくずリストの位置を調整するCSSの追加

 管理者メニューの 外観 > カスタマイズ > 追加CSS に下記コードをコピー

/* ウィジェットエリア自体の余白をリセット */
.w-topUpper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* パンくずリストの位置調整(左へ強制移動) */
.p-breadcrumb-top-fix {
    display: block !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px 0 !important; /* 上下余白(行間) */
    box-sizing: border-box !important;
    /* 左位置の調整:投稿ページと合うように数値を調整 */
    position: relative;
    left: -15px;
}

/* 文字色とアイコン色を黒に */
.p-breadcrumb-top-fix .p-breadcrumb__link,
.p-breadcrumb-top-fix .p-breadcrumb__link span,
.p-breadcrumb-top-fix .icon-home {
    color: #333 !important; /* 黒色に固定 */
    text-decoration: none !important;
    opacity: 1 !important;
}

/* ホバー時の文字色とアイコン色の透け具合を調節 */
.p-breadcrumb-top-fix .p-breadcrumb__link:hover {
    opacity: 0.7 !important;
}
STEP
ブログパーツでパンくずリスト作成

管理者メニューの ブログパーツ で「 ホーム 」を表示するコードをカスタムHTMLとして作成。このブログパーツの「呼び出しコード」をコピーしておく。

<div id="breadcrumb" class="p-breadcrumb l-container p-breadcrumb-top-fix">
    <ol class="p-breadcrumb__list" itemscope itemtype="https://schema.org">
        <li class="p-breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org">
            <a href="/" itemprop="item" class="p-breadcrumb__link">
                <span itemprop="name"><i class="icon-home"></i> ホーム</span>
            </a>
            <meta itemprop="position" content="1" />
        </li>
    </ol>
</div>
STEP
作成したブログパーツの呼び出しコードをウィジェットの「トップページ上部」にカスタムHTMLとしてコピー

管理者メニューの 外観 > ウィジェットで 「トップページ上部 」に「カスタムHTML」をドラッグして配置、ブログパーツの「呼び出しコード」をコピーして保存。

STEP
管理者メニューで不要な余白を詰めるCSS作成

固定ページで作ったトップページではパンくずリストとコンテンツ上との間の余白が大きかったので、この余白を詰める設定を行いました。

(1)管理者メニューの 外観 > カスタマイズ >トップページ > その他 で 「コンテンツ上の余白量」が「なし」になっているかを確認。

(2)Google Chromeのマウスの右クリックメニューの最下段にある「検証」で開く検証ツール(デベロッパーモード)を使って不要な余白要素を特定してその余白を詰めるCSSを作成。

.l-container .post_content {
    margin-top: 0 !important;
    padding-top: 0 !important;

固定ページ編集画面の下部にあるCSS用コード枠にコピー。

パンくずリストが表示されることを確認

トップページのメインビジュアルの下に「 ホーム 」のパンくずリストが表示されていることを確認できました。

PCブラウザで表示したサイト画像
iPhoneブラウザで表示したサイト画像

 

よかったらシェアしてね!
  • URLをコピーしました!
目次