WordPressでJavascript/jQueryを使う
まずはfunctions.phpの編集
<?php
function load_scripts(){
wp_enqueue_script(
'fadeinjs', //名前（なんでも良い）
get_theme_file_uri( '/js/fadein.js' ), //読み込むファイル
array( 'jquery' ), //jQueryを先に読む
'', //特にいらない
true // HTMLの最後で読み込むかどうか
);
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );
?>
add_actionに関しては以下のページが詳しいです。
http://wp.undo.jp/function/add_action/
複数のjsファイルを読み込む場合はwp_enqueueを増やすだけです。
<?php
function load_scripts(){
wp_enqueue_script(
'fadeinjs',//名前（なんでも良い）
get_theme_file_uri( '/js/fadein.js' ), //読み込むファイル
array( 'jquery' ),//jQueryを先に読む
'',//特にいらない
true
);
wp_enqueue_script(
'fadeinjs',
get_theme_file_uri( '/js/add_file.js' ), //読み込むファイル
array( 'jquery' ),
'',
true
);
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );
?>
まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする
テンプレートファイルに追加するコード
上の作業でjsファイルが読み込まれるようになりました。これをテンプレートファイルで使えるようにするには、もう少しだけあります。とはいっても以下を追加するだけ。
<?php wp_head(); ?>
jQuery()でラップする
WordPressは$だけで書くと動かないことがあります。以下のようなコードは動きません。
$(function(){
$('#test').text('Hello World!');
});
これを以下のようにjQuery()でラップ（包む）してfunctionに$を渡すと動くようになります。例えばこんな感じです。
jQuery(function($){
$('#test').text('Hello World!');
});
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
4月27日まで