yamada_yoshiki Posted by

皆様突然ですが、WordPressの記事内にJavaScriptを埋め込む事が出来るのを知っていましたか?

JavaScriptが使えるということは頑張れば記事内に自作ゲームとか埋め込めんじゃね?と思い、ワクワクしながら試してみましたが上手くいかなかったのでその内容をまとめました。

記事内にJavaScriptを埋め込む方法

記事内にJavaScriptを埋め込む方法は簡単JavaScriptの処理<div><script>で囲むだけです。

通常のJavaScriptの記述例

<script>
  alert('WordPressでは動かないよ');
</script>

 

WordPress用のJavaScriptの記述例

<div>
  <script>
    alert('WordPressで動くよ');
  </script>
<div>

上記のような例をテキストに記述することでJavaScriptが動きます。

記事内にjQueryを埋め込む方法

WordPressではjQueryも記事内に記述することが可能です。

WordPressではデフォルトjQueryが読み込まれますが、jQueryカスタマイズされており、通常の記述方法では動きません。

WordPressの場合は、は先頭の$jQueryに変更してfunction( )function($)に変更することで実行できます。

通常のjQueryの記述例

<script>
  $(function() {
    alert('WordPressでは動かないよ');
  });
</script>

 

WordPress用のjQueryの記述例

<div>
  <script>
    jQuery(function($) {
      alert('WordPressで動くよ');
    });
  </script>
<div>

上記のような例をテキストに記述することでjQueryが動きます。

JavaScript・jQueryが動かない場合

JavaScript・jQueryが動かない方へ

記事を保存した際<script>が消えていませんか?
<script>が消える原因としてはユーザーの権限によって、タグや属性が一部使えないようです。

ユーザー権限を管理者に変更すれば<script>が使えるみたいですが、私が使用しているアカウント権限を変更することが出来ないので、<script>を使用することが出来ませんでした。

ユーザー権限の種類


管理者(Administrator):WordPressの全ての操作が可能。
編集者(Editor):コメントやリンクの管理などコンテンツに関する全ての操作が可能。
投稿者(Author):記事の投稿や編集、公開が可能。
寄稿者(Contributor):記事の下書きと編集のみ可能。
購読者(Subscriber):閲覧のみ可能。

最後に

今回は権限がない為、JavaScript・jQueryを記事内で動かすことが出来ませんでした。

<iframe>を使いJavaScriptを埋め込んだ別サイトを表示させる方法も考えましたが、<iframe>も権限により使えないみたいですね、、、

調べたところ権限を変更する他にfunctions.phpに下記コードを追加することでも解決出来るようです。

function add_theme_caps(){
    $role = get_role( 'author' );
    $role->add_cap( 'unfiltered_html' );
}
add_action( 'admin_init', 'add_theme_caps' );

get_role:指定した権限の種類を配列形式で取得。
unfiltered_html:htmlフィルタ無効化権限。
add_cap権限一覧にある権限を追加することが可能。
add_action:第一引数の関数が実行された際に第二引数の関数を実行する。

こちらも権限がなく追加することができませんでしたが、同じように悩んだ方の解決策になれば幸いです^_^

コメント

コメントを残す

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

14 − 8 =