たまには技術Tipsを。

WordPress上で、ボタンを押したら○○する…というコードを

$('#btn').click(function(){
  //ここに処理内容
});

というふうに書きたい場合。

通常、<head>内でjQueryを読み込み、その後で上記の自作jsを読み込みますよね。

自作javascriptの読み込み

まずは外部jsファイルの読み込みです。
まずはjsファイルを作成。子テーマ内にjsフォルダを作成し、その下にfunction.js という名前で格納します。

$(function(){
  $('#btn').click(function(){
    alert('button clicked!');
  });
});

まずは動作の確認のために、アラートを表示させるようにしました。

さて、次は読み込みです。
通常は<head></head>内で読み込みをしますが、WordPressでは、<head></head>内での読み込みではなく、functions.php内で読み込むのが正しいやり方です。（<head></head>内で読み込んでも動く場合もあるとは思いますが）

子テーマのfunctions.php内に以下を記述します。

/* 自作js読み込み */
function myfunction() {
&amp;amp;nbsp; wp_enqueue_script('function', get_stylesheet_directory_uri().'/js/function.js');
}
add_action('wp_enqueue_scripts', 'myfunction');

でも、動きません。あれ？

WordPressではjQueryは $ が使えない

どうやら、複数のjQueryを使った場合のコンフリクトを避けるために、$が使えないようになっているようです。

jQuery(function($) {
  $('#btn').click(function(){
    alert('button clicked'); 
  });
});

これで動きました☆

WordPressでjQueryを使おうとしてうまくいかない場合は、参考にしてみてくださいね。

参考：http://eastcoder.com/2014/07/using-jquery-with-wordpress/comment-page-1/

The following two tabs change content below.

柳田亜沙美

GeekGirlLabo代表。文系出身エンジニア。 プログラミングをはじめて15年、会社を設立して9年目になります。 システム開発講座やプログラミング講座の講師、アプリ開発やWebシステム開発のお仕事をしています。 酒と肉の日々。ずっと夜型だった生活を朝型に変えたら、人生が捗りました。