VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで

ブートストラップ3を使って作成したナビゲーションメニューをAngularJSを使う形に変更する方法

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)参照)
 
<?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
 
(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;
}
モバイルバージョンを終了