前回はWordPressとAngularJSを連携してサイトマップの作成をする計画(設計プラン)を作りましたので、今回はクライアント部分、AngularJSでの実装及び、サーバーサイドへのアクセス方法に関して記載したいと思います。
AngularJSの実装
実装したい要件は以下の通りです。
- 初期表示時に、サイトマップの画面を表示する(他の画面も表示できるように作成)
- ヘッダー部分に横スクロールメニュー(サイトマップ用)を表示する(WordPress連携部分)
- カテゴリ選択した時に対象カテゴリの記事一覧(タイトルと説明(できれば)と画面表示するURL)を表示する
上のような要件を満たすように実装したいと思います。
大まかなフレームワーク
「フレームワーク」と言ってもAngularJSなどのようなフレームワークではなく、「処理の概要」という意味での処理フローです。
具体的には。。。
初期表示
土台にするHTMLファイルにAngularJSの機能を埋め込みます。(土台にするHTMLはBootStrapのテーマです。)
ファイル構成はGithubにアップしてあるのでそちらを参照ください。
まずは「index.html」です。
このHTMLファイルを下のように(一部)編集してやります。
<body ng-app= "pgBoxAG" class="bg-light" ng-controller="pgboxCtrl">
こうすることでAngularJSの下のコード部分が、モジュールとして機能するようにバインド(関連付け)されます。
/project/config.js
let app = angular.module('pgBoxAG', ['ngRoute']);
このコードは「pgBoxAG」トイウモジュールを作成します。という意味です。index.htmlには下のように、自作するJSファイルの中では下の順番で読まれるように実装しています。
<!-- PGボックス(上から順に読み込む) -->
<script src="./project/dataConst.js"></script>
<script src="./project/config.js"></script>
<script src="./project/services/service-config.js"></script>
<script src="./project/pgbox.js"></script>
<script src="./project/siteMapCtrl.js"></script>
< JSファイルの概要>
A.dataConst.jsには定数などの定義がしてあります。
B.config.jsには各モジュール(コントローラーとファクトリ)
C.pgbox.jsにはルートコントローラー
D.siteMapCtrl.jsにはサイトマップ用の各処理(サイトマップコントローラー)を実装しています。
WordPress連携
今夏のWordPress連携部分はヘッダー部分の横スクロールメニューの項目表示です。
大まかな処理としては下のように実装しています。
- pgbox.jsにあるコントローラーでSiteMapService（/project/service/（/project/service/serviceーconfig.js)を呼び出し、WordPressにある、カテゴリ一覧を取得する
- SitemapServiceからPHPファイルへリクエストを飛ばし返却値'(JSON)を取得して値を返却する
- PHPファイル (getCategories.php)でWordPressの部品を使用するための「おまじない」を使用してWordPressテンプレート(関数)を使用できるようにする。→
require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp/wp-load.php' ); - カテゴリ一覧を取得、JSONに変換してクライアント側に値を返却
というような処理を実装しました。
現段階(2020-01-05)では、横スクロールメニューからのカテゴリ毎の記事一覧が表示できない状態です(BootStrapテーマファイルがそのまま残っています。)
とりあえずは、こんな状態です。まだまだ実装は続きます。
でわでわ。。。
