GeneratePress テーマ：SEOプラグインを使用せずにブレッドクラムを追加する

WordPressでブレッドクラムを追加したい場合は、Yoast SEOやRank MathなどのSEOプラグインが提供するブレッドクラム機能を使用できます。 GeneratePress テーマでは、独自のフックを使用して、テーマファイルを直接編集せずにブレッドクラムを追加できます。

• GeneratePress テーマ：Rank Math SEOブレッドクラムを追加する方法
• Yoast SEOブレッドクラムをショートコードとして追加する方法

SEOプラグインを使わずに GeneratePress テーマにブレッドクラムを追加する方法を見てみましょう。

GeneratePress テーマ：SEOプラグインを使用せずにブレッドクラム（移動パス）を追加する方法

ブレッドクラムの役割と利点

ブレッドクラム（breadcrumbs）は、ウェブサイトの上部に表示されるナビゲーション機能で、ユーザーが現在のページがサイト内のどこにあるかを簡単に把握するのに役立ちます。この機能は、「ホーム » カテゴリ » 現在の投稿タイトル」など、階層パスをテキストリンクとして表示します。ブレッドクラムは ヘンゼルとグレーテルこのパン粉を残して道を見つけたおとぎ話から名前を取ったのです。

ブレッドクラムは、ユーザーエクスペリエンス（UX）と検索エンジン最適化（SEO）の両方にプラスの影響を与えます。ユーザーは自分の位置を簡単に把握し、目的の親カテゴリや前のステップにすばやく移動することができ、サイトの閲覧が容易になります。また、ブレッドクラムは、検索エンジンがサイトの構造を理解するのに役立ち、検索結果におけるサイトの露出とランキングの向上にもポジティブな役割を果たします。

ブレッドクラムを追加すると、Googleの検索結果に移動経路が表示され、SEOに有利に作用します。

WordPressではSEOプラグインを使って簡単にブレッドクラムを追加できます。 WordPress 私はブレッドクラムを参照してコードを追加してティーストーリーで使用しています。😄

SEOプラグインなしでブレッドクラムを追加する

SEOプラグインを使わずに GeneratePress テーマでブレッドクラムを追加したい場合Adding breadcrumbs without Yoast(Yoastなしでブレッドクラムを追加する)「フォーラムの記事では、GPテーマ開発者が提示するコードを利用できます。

<?php
function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
    if ( is_category() || is_single() ){
        echo "  »  ";
        the_category (' • ');
        if ( is_single() ) {
            echo " » ";
            the_title();
        }
    } elseif ( is_page() ) {
        echo " » ";
        echo the_title();
    }
}
get_breadcrumb();
?>

上記のコードを利用して別のプラグインにするか、 チャイルドテーマの関数ファイルに追加できます。たとえば、以下のように上記のコードを使って作成したブレッドクラムを利用するのか、Yoast SEOやRank Mathが提供するブレッドクラムを利用するのかを選択するプラグインを作成できます。

上記のコードを使用して作成したい場合は、次のコードをGPテーマの子テーマ関数ファイルに追加できます。

// 브레드크럼 출력 함수 정의 (보안 강화 포함)
function get_breadcrumb() {
    echo '<div id="breadcrumb">';
    echo '<a href="' . esc_url(home_url()) . '" rel="nofollow">Home</a>';

    if (is_category() || is_single()) {
        $categories = get_the_category();
        if (!empty($categories)) {
            echo ' &raquo; ';
            foreach ($categories as $i => $cat) {
                if ($i > 0) echo ' &bull; ';
                echo '<a href="' . esc_url(get_category_link($cat->term_id)) . '">' . esc_html($cat->name) . '</a>';
            }
        }

        if (is_single()) {
            echo ' &raquo; ' . esc_html(get_the_title());
        }
    } elseif (is_page()) {
        echo ' &raquo; ' . esc_html(get_the_title());
    }

    echo '</div>';
}

// GeneratePress hook에 브레드크럼 삽입
add_action('generate_before_entry_title', 'add_custom_breadcrumb_to_single');
function add_custom_breadcrumb_to_single() {
    if (is_single()) {
        get_breadcrumb();
    }
}

上記のコードをチャイルドテーマの関数ファイルに追加すると、個々の投稿に移動パスが投稿のタイトルの上に表示されます。

モバイルデバイスでは、タイトルが長くなると、末尾の記号が表示されるように CSSで制御できます。

たとえば、次のCSSコードを 外観 » カスタム » 追加 CSSに追加するか、チャイルドテーマのスタイルシートファイル（style.css）に追加すると、上の図のようにブレッドクラムが表示されます。

/* 자체 브레드크럼 스타일 */
        #breadcrumb {
            font-size: 12px;
            font-weight: 400;
            height: 34px;
            background-color: #595967;
            color: #aaa;
            line-height: 34px;
            padding: 0 15px;
            margin: 0 0 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #breadcrumb a,
        #breadcrumb em {
            display: inline-block;
        }
        #breadcrumb a {
            color: #aaa;
            transition: color .17s;
        }
        #breadcrumb a:hover {
            color: #fff;
        }

スタイルは自由に変更できます。

表示位置は、タイトルの上やタイトルの下などに表示されるように指定できます。場所を変更したい場合 GeneratePress テーマのフックに関する記事を参照してください。

• GeneratePress テーマフックを使用する

最後に、

以上、Yoast SEOのようなSEOプラグインを使わずに GeneratePress テーマでブレッドクラムを追加する方法を見てみました。

エレメンプロを使用している場合は、GPテーマ開発者が提示したコードをショートコードにして、シングルポストテンプレートの適切な場所に追加することができます。

// 브레드크럼 반환 함수 (숏코드용 보안 강화 포함)
function get_breadcrumb_markup() {
    $output = '<div id="breadcrumb">';
    $output .= '<a href="' . esc_url(home_url()) . '" rel="nofollow">Home</a>';

    if (is_category() || is_single()) {
        $categories = get_the_category();
        if (!empty($categories)) {
            $output .= ' &raquo; ';
            foreach ($categories as $i => $cat) {
                if ($i > 0) $output .= ' &bull; ';
                $output .= '<a href="' . esc_url(get_category_link($cat->term_id)) . '">' . esc_html($cat->name) . '</a>';
            }
        }

        if (is_single()) {
            $output .= ' &raquo; ' . esc_html(get_the_title());
        }
    } elseif (is_page()) {
        $output .= ' &raquo; ' . esc_html(get_the_title());
    }

    $output .= '</div>';
    return $output;
}

// 숏코드 등록: [breadcrumb]
add_shortcode('breadcrumb', 'get_breadcrumb_markup');

Avadaナ Newspaper テーマ など、いくつかの WordPress テーマでは独自のブレッドクラム機能を提供することもあります。

通常、SEOプラグインが提供する機能を使用すると、便利なブレッドクラムを追加できます。

参照

• 301リダイレクト、いつまで維持しなければSEOに効果的か？
• GeneratePress テーマ：ヘッダーとフッターにコードを追加する方法
• WordPressで簡単にランディングページを作成する（feat。エレメント、 GeneratePress, Divi)