WordPressにJavaScriptを投稿しても動かない！

WordPressで自作JavaScriptを動かしたいけど、かなり軽微な処理だし「本文中に書いちゃえ」ってことで、記事投稿ページをテキストモードにしてJavaScriptを記述しても、

 

動かない。。。。

 

なんてことありませんでしょうか。

 

WordPressは、投稿ページにそのままJavaScriptを記述しても動きません。

 

解決方法として以下2つがあります。

• プラグイン「inline-javascript」を利用する
• headタグの中にインラインで記述する、また外部ファイル化する

 

今日は、それぞれの方法を説明したいと思います。

 

事象の確認

まず、投稿ページにJavaScriptを書いて事象を確かめてみます。

 

具体的に投稿するJavaScriptのソースとあわせて説明していきます。

 

検証サイトであるpenguinweb.netに入力フォーム（JavaScriptでバリデート）のページを使って説明します。

このページに以下のJavaScriptを投稿してみます。

<script type="text/javascript">

function validation(){

 var errorMsg = "";

 // 必須項目(空かどうか)
 if(document.test.namae.value == ""){ // 「名前」の入力チェック
   errorMsg = "名前が空です。\n";
 }
 if(document.test.email.value == ""){ // 「メールアドレス」の入力をチェック
   errorMsg = errorMsg + "メールアドレスが空です。\n";
 }
 if(document.test.comments.value == ""){ // 「コメント」の入力をチェック
   errorMsg = errorMsg + "内容が空です。\n";
 }
 // メールアドレスチェック(@がある。また@移行にドット「.」が一個以上存在する)
 if(!document.test.email.value.match(/.+@.+\..+/)){
  errorMsg = errorMsg + "メールアドレスの形式が異なっています。\n";
 }

 // 電話番号チェック(ハイフンなし10桁or11桁)
 if(!document.test.email.value.match(/^\d{10}$|^\d{11}$/)){
  errorMsg = errorMsg + "電話番号の形式が異なっています。\n";
 }

 if(errorMsg) {
  alert(errorMsg);
  return false;
 }
}
</script>

 

投稿後、当該ページを見てみると以下の通り、表示上は特におかしな点はないですが、送信ボタンを押しても、動作してくれません。

 

ソースを見てみると、オレンジの枠のとおりPタグが追加されており、どうも正しく動作していない原因のようです。

 

JavaScriptの記述を調べてみると、script要素内に『<』『>』『&』を書いてはいけないルールになっています。やはり、Pタグが原因のようです。

 

解消方法（プラグイン「inline-javascript」）

正しく動くように「inline-javascript」をインストールしてみます。

管理画面左メニューのプラグインの新規追加より「inline-javascript」を検索しインストールをします。

 

インストールが終わったら、プラグインを有効かします。

 

下の画面の通り、以下のメッセージが表示されたら準備は完了です。

 

プラグインに対しての設定はないのですが、投稿したJavaScriptの記述の前後に

 

[inline]JavaScriptのソース[/inline]

 

のように[inline]〜[/inline]で囲ってやる必要があります。

 

なので、そのまま管理画面で先ほど投稿した記事を編集しましょう。

 

記事を保存すると、scriptのタグの「<」「>」がそれぞれ「[」「]」に変換されますが、プラグインの仕様なので、気にしなくてOKです。

 

これで、記述したJavaScriptが動作します。

最後に、ちゃんと動いているか確認しましょう。

 

先ほどのページにアクセスすると、表示上は変わったところはありません。

 

ソースを確認すると、先ほど自動で入っていたPタグが消えています。

 

動作を確認すると、意図通りの動作をしています。

 

解消方法（headタグの中にインラインで記述する、また外部ファイル化する）

headタグの中にインラインで記述する方法は、外部ファイル化したソースをheadタグの中に記述するだけなので、ここでは外部ファイル化で説明します。

 

参考サイトとして入力フォーム（JS外部ファイル化） を用意していますのでアクセスすると以下の画面が表示されます。

これは、入力フォーム（JavaScriptでバリデート）のJavaScript部分を外部ファイル化し、headタグで読み出しているだけです。

 

特定のページにアドホックに独自JavaScriptを使いたいことを考慮して、header.phpには「特定のページIDのときだけ独自JavaScriptを読み込む」という処理を追記します。

この投稿ページのIDは「97」なので、97を指定しています。

 

ページのソースを見ると、以下のとおり<script src=”http://penguinweb.net/wp-content/themes/twentyfourteen/js/form.js“></script>が表示されています。

 

最後に、動作確認として「送信」ボタンをクリックします。

 

所感

普通にブログとして利用するのであれば、独自のJavaScriptが必要になることはほとんどないかと思います。

 

WordPress前提でクライアントにシステムを提供するようなケースで、アドホックな処理が必要なときなんかに、本文中にちょっとだけインラインを使うって感じですよね。

 

「要望をお断りする」ってのが出来ればいいのですが、僕のような長いものに巻かれたい派の人間にはできません（笑）

 

対策としては、可能な限り汎用化してcommon.jsとかにまとめられるような設計を心がけるしかないですね。

 

さらに、jQueryを使うときもひと癖ありますので、また別の記事で紹介します。