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

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

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

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


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

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


 
ここでは、AngularJSのタブを記述してみます。
 

<tabset>
  <tab heading="タブのヘッダー名1">
    <p>タブ1の本文</p>
    <p>タブ1の本文</p>
    <p>タブ1の本文</p>
  </tab>
  <tab heading="タブのヘッダー名2">
    <p>タブ2の本文</p>
    <p>タブ2の本文</p>
    <p>タブ2の本文</p>
  </tab>
  <tab heading="タブのヘッダー名3">
    <p>タブ3の本文</p>
    <p>タブ3の本文</p>
    <p>タブ3の本文</p>
  </tab>
</tabset>

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

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です