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

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

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

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

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


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

2)投稿本文に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のコーディングをしなくても動作しました。

モバイルバージョンを終了