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

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

価格比較サイトを作ってみる
新たにCSSとjavascriptをワードプレスに追加
1. CSS,jsディレクトリにアップロード
2. function.phpに記述
prototype.jsとjqueryのコンフリクト
tablekit.jsとprototype.js正常動作！

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

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

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

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

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

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

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

早速導入してみます。

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

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

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

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