新年ということで新たに今年からサイトを始めるために、ワードプレスにPHPスクリプトを埋め込んで価格比較サイトを作るために正月からモゾモゾ動いています。
価格比較サイトを作ってみる
こんな風にワードプレスの投稿ページに1つの商品をAmazon.co.jpとかヤフオクとかYahoo!ショッピング、楽天などを使って価格を調査・表示させるようにしました。
この価格比較テーブルの上に普通の記事を書いていきます。価格比較テーブルだけだとなんのコンテンツもないので意味がないものになってしまうので検索エンジンに嫌われてお客さんが来なくなってしまうので・・・
新たにCSSとjavascriptをワードプレスに追加
価格比較テーブルは価格の低い順になっているんですが、さらに価格が高い順やポイントありなし、送料無料、なしなどの比較ができるようにテーブルを並び替えたい!という欲求が湧いてきたので新たにテーブルを並び替えられるjavascriptを導入してみました。
tablekit.jsというjavascriptを導入すればテーブルを並び替えたり、幅を変えたり編集までできてしまう便利なツールがあります。
このtablekit.jsは他にprototype.jsが必要です。
早速導入してみます。
CSS,jsディレクトリにアップロード
まずは、ワードプレスのサーバーにftpログインしてテーマのディレクトリにアクセスします。
CSSやjsのディレクトリ内にtablekit.jsとprototype.jsなどをアップロードしていきます。
CSSも同様にCSSディレクトリにアップロードします。
function.phpに記述
header.phpに直接
<script type="text/javascript" src="/js/tablekit.js"></script>
などと書いてもいいのですが、問題が起きた時や高速読み込みなどのプラグインを導入したときなどにおかしくなりそうなので、ワードプレスが推奨しているやり方でcss,jsを導入してみます。
functions.phpを開いて以下のようにフックで追加してみます。
function theme_name_scripts() {
wp_enqueue_style( 'test', get_stylesheet_uri() . '/css/test.css');
wp_enqueue_script( 'prototype', get_template_directory_uri() . '/js/prototype.js');
wp_enqueue_script( 'tablekit', get_template_directory_uri() . '/js/tablekit.js');
wp_enqueue_script( 'test', get_template_directory_uri() . '/js/test.js');
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
こんな感じで追加します。
prototype
は直接ダウンロードできるので、
wp_enqueue_script( 'prototype', get_template_directory_uri() . 'https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js');
などと書いても良いと思います。
ここまでやったらヘッダに正常に表示されました!
これで作業終わりかな?と思ったけど・・・・甘くは無かった(^_^;)
prototype.jsとjqueryのコンフリクト
テーブルが正常に入れ替わるか試したところ・・・ぜんぜん動かない・・・
ここで調べたところ、prototype.jsとjQueryがコンフリクト(衝突)していたので正常に動かなかったようです。
ブラウザにFirefoxを使っている場合は右クリックで「要素を調査」で開発に便利なツールが使えます。
TypeError: element.dispatchEvent is not a function
要素を調査>コンソールを押すと、上記のようなエラーがでました。何の意味かちょっと不明だったので調べるとprototype.jsとjQueryのコンフリクトのようです。
解決方法は、どちらかを「$」を使わないようにするしかないようです。
jQuery日本語リファレンス:prototype.jsと同時に使うには
こちらに詳しく書いてあります。
仕方がないのでやってみますが、また不具合出そうな感じ。
jQuery.noConflict();
jQuery(document).ready(function(){});
これをtest.jsに記述しました。
さらに・・・
header.phpでjqueryの読み込みをprototype.jsよりも後にしなければいけないようですのでwp_head();の下に移動します。
tablekit.jsとprototype.js正常動作!
これでうまく動くようになりましたが・・・・今度はjQueryが・・・エラーになる。
おかしいなぁ、jQuery読み込んでるはずだけど・・・
jQueryをどこで使っているのだろうか?調べてみます。
未解決・・・今日解決するだろうか?
続きます。
コメント