WordPress投稿内でAngularJSを使ってPHPの実行結果を取得して表示

wp-admin

10年前

WordPress投稿内でAngularJSを使ってPHPを実行し、取得した値を表示する方法についてです。

ここでは、WordPressサイト全体でAngularJSが利用できる状態であると仮定しています。
AngularJSをテーマのheader.phpでインクルードする手順は下記参照。
ブートストラップ3を使って作成したナビゲーションメニューをAngularJSを使う形に変更する方法
　
１）簡単なphpコード作成
　
（hello.php）
<?php
print “Hello World!”;
?>
　
２）AngularJSでスクリプト作成
　
AngularJSの$httpサービスを使って上記PHPスクリプトにアクセスし、実行した値”Hello World!”を取得します。
　
$scope.phpDataに上記で取得した値を設定します。
　
（php.js）

var myApp = angular.module('myApp', []);

myApp.controller('phpCtrl', ['$scope', '$http', function ($scope, $http) {
    $http({
      method: 'get',
      url: 'http://www.example.com/wp/wp-content/themes/testtm/js/php/hello.php'
      }).success(function(data) {
        $scope.phpData = data;
    });
}]);

　
３）WordPress投稿本文
　
・上記スクリプトphp.jsをインクルードします。
　
・スクリプトで定義したコントローラの名前”phpCtrl”を記述します。
<div ng-controller=”phpCtrl”>
　
・PHPで実行した値はスクリプト内で$scope.phpDataに保存されているので、この変数を投稿内でバインドして表示します。
{{phpData}}
　

<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/testtm/js/php.js'></script>

<div ng-controller="phpCtrl">
  {{phpData}}
</div>