WEB制作

【コーディング不要？！】ChatGPTのみでパンくずリスト作れます。【WordPressカスタマイズ】

 

こんにちは、すぎです。

今回の動画ではワードプレスでパンくずリストをプラグインを使用せずに実装する方法について説明します。
こんな感じの箇所です。

初心者でもわかりやすくハンズオン形式で進めていますので、ぜひ参考にしてみてください。

今回の内容はYouTubeでも公開しています。より詳細にお伝えしてますので、ぜひチェックして見てください。

プラグインなしでの実装の利点

パンくずリストをプラグインで実装することもできますが、今回はプラグインを使わずに進めます。

この方法の利点は、エラーやトラブルが発生した場合に、原因を特定しやすい点です。また、プラグインの過剰な使用はサイトのパフォーマンスに影響を与えることがあるため、できるだけコードで実装するのが推奨されています。

また、常に最新にアップデートしないとサイト改竄のリスクにさらすことにもつながってしまいます。

2. 実装手順

ChatGPTに

「パンクズリスト　実装 wp プラグインなし」
と聞きます。
出てきた通りに実装していきます。

  1. ファイルの編集
  2. ワードプレステーマのfunctions.phpを開きます。
    テンプレートファイルに関数を呼び出す
    • パンくずリストを表示したい場所に先ほどの関数を呼び出します。今回の例では、記事ページ（single.php）に実装しました。 
      function custom_breadcrumb() {
    // ホームリンクを表示
    echo '<nav class="breadcrumb"><a href="' . home_url() . '">ホーム</a>';

    // カテゴリーページの場合
    if (is_category() || is_single()) {
        echo " » ";
        the_category(' &bull; ');

        // シングルページの場合
        if (is_single()) {
            echo " » ";
            the_title();
        }
    } elseif (is_page()) { // 固定ページの場合
        echo " » ";
        echo the_title();
    } elseif (is_search()) { // 検索結果ページの場合
        echo " » 検索結果: " . get_search_query();
    }

    echo '</nav>';
}
​
    • 関数を設置します。

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

       

      デザインの調整

      • パンくずリストを適切に表示するために、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;
    color: #333;
}

実装の結果

パンくずリストが正しく表示され、ホームやカテゴリページへのリンクが機能しているのを確認しました。

特に、各リンクをクリックすると、該当ページにスムーズに移動できるため、ユーザビリティが向上します。また、デザインもページ全体にマッチするように調整できました。

4. まとめ

パンくずリストを追加することで、ユーザーがサイト内をナビゲートしやすくなり、SEOにも貢献します。

プラグインに頼らずにカスタム実装を行うことで、トラブルの原因を把握しやすくなり、サイトのパフォーマンスも向上します。ぜひこの方法を試してみてください。

以上が今回のハンズオンの内容です。

お疲れ様でした！

RELATED POST