Bootstrap ナビゲーション バーを WordPress テーマに統合する方法

テーマの開発プロセスをスピードアップしたいと思ったことはありますか?答えは「はい」だと思います。あなたはすでに Bootstrap を理解しており、モックアップでそれを使用して開発していると思います。ここで、「Bootstrap コンポーネントを WordPress テーマに統合するにはどうすればよいですか?」という疑問が生じます。

この一連のチュートリアルでは、最も人気のある Bootstrap コンポーネントを WordPress テーマに統合する方法を説明します。 Navbar コンポーネントから始めましょう。これにより、応答性の高いナビゲーション バーを簡単に作成できます。このチュートリアルをわかりやすくするために、ロゴとメニューだけを含むナビゲーション バーを使用します。

---

1. Bootstrap フレームワークを使用してナビゲーション バーを作成する

以下は、Bootstrap ドキュメント ページのソース コードです:

リーリー

コードを詳しく見て、このチュートリアルの次の部分をよりよく理解するためにいくつかの点を明確にしましょう。

リーリー

Wrapper - ナビゲーション バーのコンテンツ全体をラップするクラス「navbar」とロール「navigation」を持つ

タグ。 リーリー

Header – 任意の画面サイズで表示されるクラス「navbar-header」を持つ

。 リーリー

トグル ボタン - 、小さな画面では折りたたまれたコンテンツを表します。このボタンは必須ですが、そのコンテンツは変更できます。 リーリー

ブランド – ロゴ付きのリンク。これはオプションであり、ここでは省略して他の場所に含めることができます。 リーリー

折りたたみ可能なコンテンツ - クラス「collapse」および「navbar-collapse」を持つ

。これには、小さな画面で折りたたむ必要があるすべてのコンテンツが含まれます。 リーリー

Menu – サイト ナビゲーションを表すクラス「nav navbar-nav」を持つ

。

---

2.モデルをテンプレートに統合する

この手順は、WordPress がインストールされており、開発中のテーマがアクティブ化されていることを前提としています。

＃＃＃２．１．メニューのテーマを準備する

functions.php

ファイルを開き、ナビゲーションがまだ登録されていない場合は登録します。 リーリー ブートストラップ ファイルと jQuery を登録する:

リーリー

Edward McIntyre の

wp-bootstrap-navwalker

クラスを GitHub からダウンロードします。ファイルをテーマのルート フォルダーに配置します。 functions.php に戻り、次のコードを貼り付けます: リーリー ＃＃＃２．２．バックエンドでメニューを作成

WordPress Web サイトのバックエンド

[外観] -> [メニュー]

に移動します。 「Primary」という名前の新しいメニューを作成し、そこに項目を追加します。

Manage Locations タブに移動し、「Main」という名前のテーマの場所に対してメニュー「Main」を指定します。変更内容を保存。

Wordpressメニュー管理ページ ＃＃＃２．３．ナビゲーション バー モデルをテンプレートに統合する

#header.php

を開き、ナビゲーション バー モデルをコピーして、表示したい場所に貼り付けます。次に、モデルの一部を WordPress のテンプレート機能に置き換えてみましょう。まず、ロゴへの正しいリンクを配置します。この行を変更します:

リーリー ＃＃＃に：＃＃＃ リーリー

次のステップでは、モデル メニューの代わりにバックエンドからメニューを出力します。これらの行の場合:

リーリー ＃＃＃そして：＃＃＃ リーリー これで、ブートストラップ ナビゲーション バー コンポーネントがテーマに統合されました。

＃＃＃結論は＃＃＃

このチュートリアルでは、Bootstrap CSS フレームワークを使用して作成されたナビゲーション バーを WordPress テーマに統合する方法について説明しました。テーマの開発をスピードアップするには、ソース ファイルをダウンロードしてテーマに貼り付けるだけです。

Envato Market では、Neon Bootstrap Admin Template や Selphy Electronics E-Commerce Boostrap Template などの優れた Bootstrap テーマやテンプレートも見つけることができます。

以上がBootstrap ナビゲーション バーを WordPress テーマに統合する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。