今回はWordPressで独自のJavaScriptを有効化する方法を4つご紹介します。
WordPressで特定の記事だけJavaScriptを読み込ませたい場合、そのままscriptタグを記載してもWordPressの機能で削除されてしまいます。
たぶん、セキュリティ対策だと思うのですが、一部だけJavaScriptを利用した動作サンプルやAPIなどを使いたい場合に非常に困りますよね？
1. 記事内でdivタグを使う
WordPressだと、クラシックエディタやHTMLブロックの話になりますが、HTMLでJavaScriptのscriptタグをdivタグで囲むだけです！
一番簡単な方法だと思います。
実際に記事で使っているので紹介します。
|
1 2 3 |
<div> <script src="//cdn.jsdelivr.net/caniuse-embed/1.1.0/caniuse-embed.min.js"></script> </div> |
前回の記事で使用しています。
→上記で使用したJavaScriptは、以下のWordPressのプラグインに変更しました。
しかし、この方法がWordPressでJavaScriptを実装する上で、1番わかりやすく設置も簡単です。
注意点としては、scriptタグ内に空白行があってはならない、またscriptタグ内にdivタグを入れてはいけないようです。
2. テーマのフッターに書く
特定の記事だけではなくなりますが、WordPressのテーマのフッター（footer.phpなど）に書いた方が、サイト全体にJavaScriptを適用させるには手っ取り早い方法です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php wp_footer(); ?> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script> $(window).load(function() { $('.toplink').on('click', function() { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> </body> </html> |
3. functions.phpに書く
WordPressには、ある程度ユーザーがカスタマイズできるように、コンテンツを差し込むための[functions.php]が用意されていますので、スクリプトの場所にJavaScriptを挿入します。
この方法はテーマを作る際にも使用しましたが、それなりに知識が必要で手間もかかるし、こちらもサイト全体に反映されます。
|
1 2 3 4 5 6 |
function add_bs_scripts() { wp_enqueue_script( 'bs-jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js', array(), '20170901', true ); wp_enqueue_script( 'bs-bootstrap', '//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js', array(), '20170901', true ); } add_action( 'wp_enqueue_scripts', 'add_bs_scripts' ); |
4. プラグインを使う
最後に、[inline-javascript]というWordPressのプラグインもあります。
著者の場合は記事のレイアウトが崩れたので、あまりお勧めできませんが。。
コメント
コメント一覧 （2件）
[…] WordPressの記事内にJavaScriptを挿入する4つの方法https://minory.org/wordpress-javascript.htmlWordPressで特定の記事だけJavaScriptを読み込ませたい場合、そのままscriptタグを記載してもWordPressの機能で削 […]
はじめまして。大変困っていたところ、「scriptタグをdivタグで囲むだけ」との記事を拝見して一瞬で解決しました！本当に感謝しております。
ところが、pcでは問題なく動いたのですが、スマホでは全く動きません。
レスポンシブ機能のせいなのか、pcとスマホでは何かしらの違いがあるのでしょうが、全く分からずまた途方に暮れております。
大変恐縮ですが、そちらについてもご教授頂ければ幸いです。
どうぞ宜しくお願いします。