Bootstrap5でWordPressのテーマを作るーレスポンシブなナビゲーション

2022年3月24日

Bootstrap5でWordPressのテーマを作るーレスポンシブなナビゲーション

Bootstrap5

bootstrap5, foundation, foundation6, WordPress

前回は、ヘッダーとサイドバーにウィジェットを設定しました。今回は、ナビゲーションを作ります。Bootstrap5の機能を使って、レスポンシブに対応したナビゲーションを作成します。

「nav.php」を以下のように修正します。

nav.php

<!-- nav -->
<div class="row">
    <div class="col">
        <nav class="navbar navbar-expand-md navbar-light mb-3">
            <div class="container-fluid">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切り替え">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <div class="navbar-nav">
                        <a class="nav-link nav-item" href="/">Home</a>
                        <a class="nav-link nav-item" href="/post/">page1</a>
                        <a class="nav-link nav-item" href="/">page2</a>
                        <a class="nav-link nav-item" href="">page3</a>
                    </div><!-- /navbar-nav -->
                </div><!-- /#navbarNav -->
            </div><!-- /container-fluid -->
        </nav>
    </div><!-- /col -->
</div><!-- /row -->
<!-- /nav -->

「nav.php」を修正してアップロードします。メニューが横並びで表示されます。

ブラウザーの幅を狭くすると、ハンバーガーアイコンが表示され、タップするとメニューが下に展開します。

Foundation6との違い_03
Foundartionのレスポンシブなナビゲーションの作り方を以前に書いていました。
「グローバルメニューもレスポンシブに　こんなに簡単でいいのだろうか?」
以前は、Foundationのドキュメントのどこかに書いてあった記憶がありますが、バージョンアップするにつれて、無くなっていましたね。
いろいろと試しながら作っていたのですが、久しぶりに自分で書いていたことを思い出しました。Foundationのほうがコードがシンプルに見えますが、古いバージョンの話なので、現状の最新バージョンでうまく動くかは未確認です。
Bootstrap5のほうは、幅100%で表示してセンタリングなどもできるので、使いやすいのではないでしょうか。