WordPressの記事内にJavaScriptを挿入する4つの方法

wordpress-javascript
  • URLをコピーしました!

今回はWordPressで独自のJavaScriptを有効化する方法を4つご紹介します。
WordPressで特定の記事だけJavaScriptを読み込ませたい場合、そのままscriptタグを記載してもWordPressの機能で削除されてしまいます。
たぶん、セキュリティ対策だと思うのですが、一部だけJavaScriptを利用した動作サンプルやAPIなどを使いたい場合に非常に困りますよね?

目次

1. 記事内でdivタグを使う

WordPressだと、クラシックエディタやHTMLブロックの話になりますが、HTMLJavaScriptscriptタグをdivタグで囲むだけです!
一番簡単な方法だと思います。
実際に記事で使っているので紹介します。

前回の記事で使用しています。
→上記で使用したJavaScriptは、以下のWordPressプラグインに変更しました。

WordPress.org 日本語
Embed Can I Use Add Can I Use support tables to your WordPress web site thanks to this shortcode. [ciu_embed]

しかし、この方法がWordPressJavaScriptを実装する上で、1番わかりやすく設置も簡単です。
注意点としては、scriptタグ内に空白行があってはならない、またscriptタグ内にdivタグを入れてはいけないようです。

2. テーマのフッターに書く

特定の記事だけではなくなりますが、WordPressテーマフッター(footer.phpなど)に書いた方が、サイト全体にJavaScriptを適用させるには手っ取り早い方法です。

3. functions.phpに書く

WordPressには、ある程度ユーザーがカスタマイズできるように、コンテンツを差し込むための[functions.php]が用意されていますので、スクリプトの場所にJavaScriptを挿入します。
この方法はテーマを作る際にも使用しましたが、それなりに知識が必要で手間もかかるし、こちらもサイト全体に反映されます。

4. プラグインを使う

最後に、[inline-javascript]というWordPressプラグインもあります。
著者の場合は記事のレイアウトが崩れたので、あまりお勧めできませんが。。

WordPress.org
Inline Javascript Plugin Plugin that insert inline javascript in Posts/Pages
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

  • はじめまして。大変困っていたところ、「scriptタグをdivタグで囲むだけ」との記事を拝見して一瞬で解決しました!本当に感謝しております。
    ところが、pcでは問題なく動いたのですが、スマホでは全く動きません。
    レスポンシブ機能のせいなのか、pcとスマホでは何かしらの違いがあるのでしょうが、全く分からずまた途方に暮れております。
    大変恐縮ですが、そちらについてもご教授頂ければ幸いです。
    どうぞ宜しくお願いします。

コメントする

CAPTCHA


目次