Bootstrap3を使って作成したナビゲーションメニューをAngularJSを使う形で変更する方法をまとめました。
ブートストラップ3でナビゲーションメニューを作る方法は下記参照。
ブートストラップ3を使って自作テーマ作成(11)WordPressのメニュー画面でナビゲーションメニューを設定
※目次をクリックすると目次の下部にコンテンツが表示されます。
WordPressのテーマにAngularJSを導入
1)AngularJSとBootstrap3を共存するには?
上記参考記事で作成したナビゲーションメニューでは、ドロップダウンメニューなどの機能でBootstrap3のJavaScript機能を使用しています。
AngularJSを導入するとBootstrap3のJavaScriptのコードと干渉してしまうようで、AngularJSとBootstrap3を共存する場合は下記ツールを導入すると良いようです。
http://angular-ui.github.io/bootstrap/
2)header.phpのインクルード設定を変更
・jqueryは、WordPress同梱のものは使わない。
・AngularJSをインクルード
・AngularJSとBootstrap3を同梱させるツールui-bootstrap-tpls-0.9.0.min.jsをインクルード
・ナビゲーションメニュー用でAngularJSで記述したファイル(ang.js)をインクルード(ang.jsの内容は(2)参照)
上記参考記事で作成したナビゲーションメニューでは、ドロップダウンメニューなどの機能でBootstrap3のJavaScript機能を使用しています。
AngularJSを導入するとBootstrap3のJavaScriptのコードと干渉してしまうようで、AngularJSとBootstrap3を共存する場合は下記ツールを導入すると良いようです。
http://angular-ui.github.io/bootstrap/
2)header.phpのインクルード設定を変更
・jqueryは、WordPress同梱のものは使わない。
・AngularJSをインクルード
・AngularJSとBootstrap3を同梱させるツールui-bootstrap-tpls-0.9.0.min.jsをインクルード
・ナビゲーションメニュー用でAngularJSで記述したファイル(ang.js)をインクルード(ang.jsの内容は(2)参照)
<?php wp_deregister_script('jquery'); ?> <?php wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'); ?> <?php wp_enqueue_script('angular-script', get_template_directory_uri() . '/js/angular.min.js') ?> <?php wp_enqueue_script('ui-bootstrap-script', get_template_directory_uri() . '/js/ui-bootstrap-tpls-0.9.0.min.js'); ?> <?php wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/ang.js'); ?>
3)header.phpの<html>タグにng-appの記述追加
ここでは、モジュール名を”MyApp”としています。
<html ng-app=”MyApp” <?php language_attributes(); ?>>
ナビゲーションメニューをAngularJS対応に変更
ナビゲーションメニュー部に”collapse”コンポーネントを使用されていますが、Bootstrap3とAngularJS対応で記述の仕方が異なるので下記オンラインマニュアルを参照して変更しました。
http://angular-ui.github.io/bootstrap/#/collapse
http://angular-ui.github.io/bootstrap/#/collapse
(header.php) <div class="navbar navbar-fixed-top navbar-inverse" role="navigation"> <div class="container"> <div ng-controller="CollapseDemoCtrl"> <div class="navbar-header"> <button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse" collapse="isCollapsed"> <?php wp_nav_menu( array('theme_location' => 'primary', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker() ) );?> </div> </div> </div><!-- /.container --> </div><!-- /.navbar --> (JavaScript ang.js) var myApp = angular.module('MyApp', ['ui.bootstrap']); function CollapseDemoCtrl($scope) { $scope.isCollapsed = true; }
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchを使って内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ
- テーマ作成に関わるメモ
- WordPressコアの各ファイルの概要
- WordPressで使われるテーブル一覧
- WordPressのwpdbクラスを使ってテーブル操作
- WordPressの子テーマの概要、作り方
- ヘッダー、フッターにナビゲーションメニューを追加
- カテゴリーやアーカイブページなどに前後のページへのリンクを追加
- ブートストラップ3を使って自作テーマ作成
- (1)全体概要
- (2)ブートストラップのサンプルを使ってindex.phpを作成
- (3)header.php、sidebar.php、footer.php、index.phpのテンプレートファイル作成
- (4)JavaScriptインクルードの設定
- (5)投稿本文表示用のテンプレートファイルを作成
- (6)単一投稿用(single.php)のテンプレートファイル作成
- (7)固定ページ用(page.php)のテンプレートファイル作成
- (8)検索結果表示用(search.php)のテンプレートファイル作成
- (9)アーカイブ表示用(archive.php)のテンプレートファイル作成
- (10)カテゴリー表示用(category.php)のテンプレートファイル作成
- (11)WordPressのメニュー画面でナビゲーションメニューを設定
- (12)サイトタイトル、キャッチフレーズを表示できるようにheader.phpを修正
- (13)カスタムヘッダー画像を使えるようにheader.phpを修正
- (14)404.phpテンプレートファイルを作成
- (15)記事タイトル部分のCSS設定
- (16)記事メタデータ部分のCSS設定
- (17)記事本文部分のCSS設定
- (18)前後のページへのリンクのCSS設定
- (19)前後の投稿へのリンクのCSS設定
- (20)コメント投稿フォーム、コメント表示部のCSS設定
- (21)ウィジェット部のCSS設定
- (22)アーカイブページのCSS設定
- (23)画面を左右にスライドさせるボタンのCSS設定
- Bootstrapのフリーのテーマを使ってデザインを簡単にカスタマイズ
- ブートストラップ3を使って作成したナビゲーションメニューをAngularJSを使う形に変更する方法
- 投稿にメタボックスを追加する方法
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchで内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ