今回は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:管理者
Amazonベストセラー
Now loading...