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

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

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

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

<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を適用させるには手っ取り早い方法です。

<?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を挿入します。
この方法はテーマを作る際にも使用しましたが、それなりに知識が必要で手間もかかるし、こちらもサイト全体に反映されます。

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のプラグインもあります。
著者の場合は記事のレイアウトが崩れたので、あまりお勧めできませんが。。

• Original:https://minory.org/wordpress-javascript.html
• Source:Minory
• Author:管理者