ワードプレスの投稿にJavascriptを埋め込んで実行させることはできるのでしょうか?答えはできるのですがいろいろと問題もございます。ワードプレスの投稿に自動的に改行や段落を挿入する機能でpタグがJavascriptのコードにも入ってしまい、正しくコードを実行できなくなるのです。
今回はWordpressの投稿にJSを埋め込んで実行する方法をいくつかご紹介します。
1 改行をすべて取ってJSを投稿に挿入する
Javascriptを投稿に記載して動かない理由は、ワードプレスの自動改行挿入機能により、JSのコードにPタグが入ってしまいプログラムが実行不可能になるためです。すべての改行を外してから投稿に埋め込むと正しく動作します。
2 外部Javascriptを読み込む
Javascriptのコードを拡張子.jsのテキストファイルに全て記載し(<script>タグは不要です)、サイトのどこかお好きなところにアップロードします。このJSファイルを投稿に読み込むコードを記載することで正しくJSを投稿の中で実行させることができます。
外部JSを読み込むコードは下記のようなものとなります
<script type="text/javascript" src="https://wp-doctor.jp/js/aaa.js"></script>
https://wp-doctor.jp/js/aaa.jsの部分は作成されたJSファイルのURLと置き換えられてください
3 プラグインを使用してJavascriptを投稿に埋め込む
プラグインScripts n Stylesを使用すると、各投稿編集ページにJavascriptやスタイルCSSを記載できる欄が追加され、個別の投稿に自由にJSやCSSを挿入できるようになります。
プラグインを導入されたら、投稿編集画面に行くと、下記のような編集欄が投稿に追加されますので、Scriptタブのところに任意のJSを記載します。
どの方法がお勧め?
今後複数のJSを投稿に埋め込む予定がある場合は3、ひとつの投稿だけにJSを埋め込む場合は1,2がお勧めです。JSファイルがかなり行数が大きくなる場合は2がお勧めの方法です。