ど素人から毛を生やす。<延>

WordPressにフォームを置いて jquery.jpostal.js を使いたかった。

Web > WordPress > プラグイン 2015年10月30日(最終更新:1年前)

このページは2015.10.30に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。

WordPressにメールフォームを設置し、かつ郵便番号から住所を検索するjs・jquery.jpostal.jsを使用する方法です。

 

フォームメールのプラグインは、ボタンを押したらjquery.jpostal.jsを動かさなければならないので、途中でHTMLを直書きできる機能があるものなら何でも良いです。
Contact Form 7なら確実ですね。

そして、jquery.jpostal.jsを動かすために使用するプラグインは
CSS & JavaScript Toolbox

記事にCSSやjavascriptを追加するプラグインです。

詳しい使用法は、こちらのサイト様が詳しく書いてくださっているので参考頂くとして。

プラグインのエディタに、以前書いたjquery.jpostal.jsを動かすコードを書きます。

h271030

が、これではダメなのです。
動きません。

というのも、WordPressはjQueryprototype.jsの両方のjsライブラリを持っていまして。
これがよく似た形をしているため、単に $( で書けば、prototype.jsと見分けがつかない。
ブラウザにとって見分けがつかない

ので、エラーになるんですね。ブラウザが処理を間違えて。
この現象をコンクリフトというそうです。

解決法ですが、カプセル化、というものをすれば良いそうです。
プログラムを
(function($){ ... })(jQuery);
で囲んでしまうことです(囲み方は他にもあります)。

h271030_2

これでおk。
jquery.jpostal.jsの読み込みについてはノータッチで大丈夫です。

あとは、通常と同じ。右のPagesから、フォームメールを設置したページを選択して保存です。

 

参考サイト

NETAONE 【CSS & JavaScript Toolbox - WordPressの記事に挿入するコードを管理できるプラグイン】
kachibito.net 【WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例】

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)