誰かのためにデザインをして、なにかを作る。
そうして過ごす時間が好きです。

haicara > 記事一覧 > HTML/CSS > WordPressでプラグインを使わずにパンくずリストを設置する
WordPressでプラグインを使わずにパンくずリストを設置する

WordPressでプラグインを使わずにパンくずリストを設置する

WordPressでパンくずリストを作成する方法

パンくずリストは、ウェブサイトのナビゲーションを向上させ、ユーザーが現在のページの位置を簡単に把握できるようにするための重要な要素です。この記事では、WordPressサイトにパンくずリストを追加する方法について、具体的なコードとその解説を交えて説明します。

1. カスタム関数を追加する

まず、WordPressテーマのfunctions.phpファイルに以下のカスタム関数を追加します。この関数は、ホームページおよびブログのメインページを除く全てのページにパンくずリストを表示します。

function custom_breadcrumb() {
    if (is_front_page() || is_home()) {
        // ホームページまたはブログのメインページの場合はパンくずリストを表示しない
        return;
    }

    $home_link = home_url('/');
    echo '<nav class="breadcrumb" aria-label="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">';
    echo '<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
    echo '<a href="' . $home_link . '" itemprop="item"><span itemprop="name">ホーム</span></a>';
    echo '<meta itemprop="position" content="1" />';
    echo '</span>';

    $position = 2;

    if (is_category() || is_single() || is_tag()) {
        if (is_category()) {
            $category = get_queried_object();
            echo ' &gt; <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
            echo '<a href="' . get_category_link($category->term_id) . '" itemprop="item"><span itemprop="name">' . $category->name . '</span></a>';
            echo '<meta itemprop="position" content="' . $position . '" />';
            echo '</span>';
        } elseif (is_tag()) {
            $tag = get_queried_object();
            echo ' &gt; <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
            echo '<a href="' . get_tag_link($tag->term_id) . '" itemprop="item"><span itemprop="name">' . $tag->name . '</span></a>';
            echo '<meta itemprop="position" content="' . $position . '" />';
            echo '</span>';
        } elseif (is_single()) {
            $category = get_the_category();
            if ($category) {
                $category = $category[0];
                echo ' &gt; <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
                echo '<a href="' . get_category_link($category->term_id) . '" itemprop="item"><span itemprop="name">' . $category->name . '</span></a>';
                echo '<meta itemprop="position" content="' . $position . '" />';
                echo '</span>';
                $position++;
            }
            echo ' &gt; <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
            echo '<span itemprop="name">' . get_the_title() . '</span>';
            echo '<meta itemprop="position" content="' . $position . '" />';
            echo '</span>';
        }
    } elseif (is_page()) {
        echo ' &gt; <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
        echo '<span itemprop="name">' . get_the_title() . '</span>';
        echo '<meta itemprop="position" content="' . $position . '" />';
        echo '</span>';
    }

    echo '</nav>';
}

コードの説明

  • is_front_page()およびis_home()関数を使用して、ホームページとブログのメインページを除外しています。
  • home_url('/')でホームページのリンクを取得し、パンくずリストの最初の要素として追加します。
  • カテゴリページ、タグページ、シングルページ、固定ページのそれぞれの場合に応じて、パンくずリストの項目を動的に生成します。
  • schema.orgの構造化データを追加し、SEO効果を高めています。

2. テンプレートにパンくずリストを表示するコードを追加

次に、パンくずリストを表示したいテンプレートファイル（例：header.php）に以下のコードを追加します。

<?php if (function_exists('custom_breadcrumb')) custom_breadcrumb(); ?>

これにより、適切な場所にパンくずリストが表示されます。

3. スタイルシートの追加

最後に、パンくずリストのデザインを調整するために、テーマのスタイルシート（style.css）に以下のCSSを追加します。

.breadcrumb {
    font-size: 14px;
    margin: 10px 0;
}

.breadcrumb a {
    color: #0073aa;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    display: inline-block;
    margin-right: 5px;
}

このCSSを追加することで、パンくずリストの外観を調整し、より見やすくなります。

まとめ

この記事では、WordPressでパンくずリストを追加する方法について説明しました。パンくずリストは、ユーザーが現在のページの位置を把握しやすくするだけでなく、検索エンジン最適化（SEO）にも貢献します。ぜひ、このカスタム関数を活用して、あなたのWordPressサイトにパンくずリストを追加してみてください。

BACK SCROLL