Follow Us:

WordPress ワードプレスの投稿にJavascript JSを書き込む方法

  •  更新日:

ワードプレスの投稿に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がお勧めの方法です。

WordPress のどんなカスタマイズも請け負います。Wordpressのカスタマイズはワードプレスドクターにお任せください


関連タグ:

Wordpress ワードプレス ドクターBlog タグ一覧

© 2015-16. «WP Doctorワードプレスドクター». All right reserved.