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

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

 

icatch_.nopng

動かない。。。。

 

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

 

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>

 

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

836-1

 

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

836-2

 

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

 

解消方法(プラグイン「inline-javascript」)

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

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

836-3

 

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

836-4

 

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

836-5

 

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

 

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

 

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

 

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

836-6

 

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

836-7

 

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

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

 

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

836-8

 

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

836-9

 

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

836-10

 

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

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

 

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

836-12

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

 

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

836-11

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

 

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

836-13

 

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

836-14

 

所感

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

 

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

 

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

 

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

 

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

 

Author:yukio iizuka
プロフィール画像
フリーランスとしてUX視点で業務支援しています。 HCD-Net認定 人間中心設計専門家 LEGO®︎ SERIOUS PLAY®︎ メソッドと教材活用トレーニング修了認定ファシリテーター Hi-Standard好きです。
http://yukioiizuka.com
mislead
MISLEADの記事に共感いただけましたら
いいねをお願いします。

コメント一覧

  • marron

    記事がとてもわかりやすく、参考になりました!

  • mislead

    marron さん
    ありがとうございます。
    お役に立てて光栄です。

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください



       

© yukio iizuka All Rights Reserved...