WordPressでパンくずリストを設定する際に便利な方法！！プラグインと自作

wordpress

2024/11/17

Nextman

WordPressでパンくずリスト（breadcrumb）を設定する際に便利な方法はいくつかあります。以下に、プラグインを使用する方法と、自作する方法を紹介します。

1. プラグインを使用する方法

パンくずリストの設定を簡単に行いたい場合、プラグインを利用するのが手軽です。いくつか人気のあるプラグインを紹介します。

Yoast SEO

Yoast SEOはSEO対策に優れたプラグインですが、パンくずリスト機能も提供しています。

インストール手順:
1. WordPressの管理画面から「プラグイン > 新規追加」に移動し、Yoast SEOを検索してインストール・有効化します。
2. 「SEO > 検索の見た目 > パンくずリスト」の設定でパンくずリストを有効にします。
3. テーマ内でパンくずを表示させたい場所に以下のコードを追加します:
```
if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">','</p>');
}
```

Breadcrumb NavXT

Breadcrumb NavXTは、カスタマイズ性が高いパンくずリストを簡単に設定できるプラグインです。

インストール手順:
1. WordPressの管理画面から「プラグイン > 新規追加」に移動し、Breadcrumb NavXTを検索してインストール・有効化します。
2. プラグインが提供するショートコードやウィジェットを利用して、パンくずリストを簡単に表示できます。
3. テーマのPHPファイル内でパンくずを表示する場合は、以下のコードを追加します:
```
if ( function_exists('bcn_display') ) {
    bcn_display();
}
```

Rank Math SEO

Rank Math SEOも、パンくずリスト機能を備えた人気のSEOプラグインです。Yoast SEOと同様に、SEO対策とパンくずリストを両方簡単に設定できます。

インストール手順:
1. WordPressの管理画面から「プラグイン > 新規追加」に移動し、Rank Math SEOを検索してインストール・有効化します。
2. 「Rank Math > General Settings > Breadcrumbs」の設定からパンくずリストを有効化します。
3. テーマ内でパンくずを表示させたい場所に以下のコードを追加します:
```
if ( function_exists('rank_math_the_breadcrumbs') ) {
    rank_math_the_breadcrumbs();
}
```

2. 自作でパンくずリストを実装する方法

プラグインを使わずに自作することもできます。以下はシンプルなパンくずリストを実装するためのコード例です。

functions.phpに追加するコード:

まず、functions.phpに以下の関数を追加します。

function custom_breadcrumbs() {

    // パンくずのスタイル設定
    $separator = ' > ';
    $home = 'ホーム'; // ホームのテキスト
    $before = '<span class="current">'; // 現在のページ
    $after = '</span>'; // 現在のページ閉じタグ

    if (!is_home() && !is_front_page() || is_paged()) {

        echo '<nav class="breadcrumb">';
        global $post;
        $homeLink = home_url();
        echo '<a href="' . $homeLink . '">' . $home . '</a> ' . $separator . ' ';

        if (is_category()) {
            $category = get_the_category();
            if ($category) {
                $category_link = get_category_link($category[0]->term_id);
                echo '<a href="' . esc_url($category_link) . '">' . esc_html($category[0]->name) . '</a>';
            }
        } elseif (is_single()) {
            $category = get_the_category();
            if ($category) {
                $category_link = get_category_link($category[0]->term_id);
                echo '<a href="' . esc_url($category_link) . '">' . esc_html($category[0]->name) . '</a> ' . $separator . ' ';
            }
            echo $before . get_the_title() . $after;
        } elseif (is_page() && !$post->post_parent) {
            echo $before . get_the_title() . $after;
        } elseif (is_page() && $post->post_parent) {
            $parent_id  = $post->post_parent;
            $breadcrumbs = array();
            while ($parent_id) {
                $page = get_page($parent_id);
                $breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
                $parent_id  = $page->post_parent;
            }
            $breadcrumbs = array_reverse($breadcrumbs);
            foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $separator . ' ';
            echo $before . get_the_title() . $after;
        }

        echo '</nav>';
    }
}

テンプレートファイルに表示するコード:

パンくずリストを表示したい場所に以下のコードを挿入します。

if (function_exists('custom_breadcrumbs')) {
    custom_breadcrumbs();
}

3. カスタマイズオプション

CSSスタイル: パンくずリストを見やすくするために、CSSでスタイルを追加することも重要です。

.breadcrumb {
    font-size: 14px;
    margin-bottom: 20px;
}
.breadcrumb a {
    text-decoration: none;
    color: #0073aa;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb .current {
    font-weight: bold;
}

まとめ

プラグインを使えば、簡単にカスタマイズ可能なパンくずリストを導入できます。特にYoast SEOやBreadcrumb NavXTが人気です。
自作する場合は、functions.phpにカスタム関数を追加し、必要なテンプレートファイルに表示コードを挿入することでシンプルなパンくずリストを実装できます。

どちらの方法を選んでも、訪問者にとってサイトのナビゲーションがよりわかりやすくなり、SEOの面でも有効です。