WordPressの投稿にAngularJSのディレクティブを記述する方法

wp-admin

10年前

WordPress投稿本文にAngularJSディレクティブを記述する方法を備忘として残しました。

AngularJSをヘッダーでインクルードして利用できるようにする手順は下記参照。
ブートストラップ3を使って作成したナビゲーションメニューをAngularJSを使う形に変更する方法
　

１）”PS Disable Auto Formatting”というプラグインを導入

　
デフォルトでは、投稿本文内に<p>や<br />タグが自動で挿入されて整形されてしまいます。
　
これによってAngularJSのディレクティブやBootstrap3のタグが動作しなくなってしまうことがあるので、”PS Disable Auto Formatting”というプラグインを導入してこの機能を無効にします。
　

２）投稿本文にAngularJSのディレクティブタブを記述

　
ここでは、”Angular-ui bootstrap”のタブを記述してみます。
※詳細は以下の記事参照。
Bootstrap3でAngularJSを使用　tab
　

<uib-tabset>
  <uib-tab heading="Windows">
    <p>・Windowsのインストール手順</p>
    <p>・Windowsの設定手順</p>
    <p>・Windowsの実行手順</p>
  </uib-tab>
  <uib-tab heading="Linux">
    <p>・Linuxのインストール手順</p>
    <p>・Linuxの設定手順</p>
    <p>・Linuxの実行手順</p>
  </uib-tab>
  <uib-tab heading="MAC">
    <p>・MACのインストール手順</p>
    <p>・MACの設定手順</p>
    <p>・MACの実行手順</p>
  </uib-tab>
</uib-tabset>

　
特に追加でJavaScriptのコーディングをしなくても動作しました。