【WP】自作PHPスクリプト挿入時WordPressにJavascriptやCSSを追加する方法

新年ということで新たに今年からサイトを始めるために、ワードプレスにPHPスクリプトを埋め込んで価格比較サイトを作るために正月からモゾモゾ動いています。

価格比較サイトを作ってみる

激安価格.com

こんな風にワードプレスの投稿ページに1つの商品をAmazon.co.jpとかヤフオクとかYahoo!ショッピング、楽天などを使って価格を調査・表示させるようにしました。

この価格比較テーブルの上に普通の記事を書いていきます。価格比較テーブルだけだとなんのコンテンツもないので意味がないものになってしまうので検索エンジンに嫌われてお客さんが来なくなってしまうので・・・

新たにCSSとjavascriptをワードプレスに追加

価格比較テーブルは価格の低い順になっているんですが、さらに価格が高い順やポイントありなし、送料無料、なしなどの比較ができるようにテーブルを並び替えたい!という欲求が湧いてきたので新たにテーブルを並び替えられるjavascriptを導入してみました。

tablekit.jsというjavascriptを導入すればテーブルを並び替えたり、幅を変えたり編集までできてしまう便利なツールがあります。

このtablekit.jsは他にprototype.jsが必要です。

早速導入してみます。

CSS,jsディレクトリにアップロード

テーマにアクセス

まずは、ワードプレスのサーバーにftpログインしてテーマのディレクトリにアクセスします。

CSSやjsのディレクトリ内にtablekit.jsとprototype.jsなどをアップロードしていきます。

javascriptアップロード

CSSも同様にCSSディレクトリにアップロードします。

function.phpに記述

header.phpに直接

<script type="text/javascript" src="/js/tablekit.js"></script>

などと書いてもいいのですが、問題が起きた時や高速読み込みなどのプラグインを導入したときなどにおかしくなりそうなので、ワードプレスが推奨しているやり方でcss,jsを導入してみます。

function.php

functions.phpを開いて以下のようにフックで追加してみます。

css,jsフックで追加

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');

などと書いても良いと思います。

ヘッダにcss,js表示された

ここまでやったらヘッダに正常に表示されました!

これで作業終わりかな?と思ったけど・・・・甘くは無かった(^_^;)

prototype.jsとjqueryのコンフリクト

テーブルが正常に入れ替わるか試したところ・・・ぜんぜん動かない・・・

ここで調べたところ、prototype.jsとjQueryがコンフリクト(衝突)していたので正常に動かなかったようです。

要素を調査

ブラウザにFirefoxを使っている場合は右クリックで「要素を調査」で開発に便利なツールが使えます。

TypeError: element.dispatchEvent is not a function

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();の下に移動します。jqueryを後ろに移動

tablekit.jsとprototype.js正常動作!

tablekit.jsとprototype.js正常動作

これでうまく動くようになりましたが・・・・今度はjQueryが・・・エラーになる。

おかしいなぁ、jQuery読み込んでるはずだけど・・・

jQueryエラー

jQueryをどこで使っているのだろうか?調べてみます。

未解決・・・今日解決するだろうか?

続きます。