wordpressでjsファイルが読み込めない。

セキュリティ的に問題があるのかもしれませんが、GitHubからダウンロードしたjs形式のファイルをwordpressの自サイトに表示させてみました。そのjsファイルは、雨を降らせるアニメーションの設定がされています。

functions.phpには最初に、

add_action('wp_enqueue_script','add_my_files');
function add_my_files(){
	if(is_page(720)){
		wp_enqueue_script('script-background',get_template_directory_uri().'/assets/js/raindrops.js',array('jquery'),'', true);
	}

と入力しましたが、雨は降りませんでした。
サイトの表示には問題ありませんが、デベロッパーツールで確認してみると、
「 Failed to load resource: the server responded with a status of 404 () 」
このようなエラーメッセージでした。
ファイルが見つからないという意味でしたが、ファイルは上記の通り get_template_directory_uri()配下に存在します。

またこのように、wp_register_scriptでjsファイルの登録をしてから、wp_enqueue_scriptで読み込んでもみたのですが、同じような結果でした　↓↓↓

add_action('wp_print_script','add_my_files');
	function register_my_files(){
		wp_register_script('script_background', get_template_directory_uri().'/assets/js/raindrops.js');
	}
	function add_my_files(){
		if(is_page(720)){
			wp_enqueue_script('script-background',get_template_directory_uri().'/assets/js/raindrops.js',array('jquery'),'', true);
		}
	}

この時のエラーメッセージは「 net::ERR_ABORTED 404 」となっていたので、これもまたファイルが見つからないという意味でしょうか。

また、wordpressのルールとしてjQueryを記述する際に、先頭の "$" をjQueryとしなければいけないのですが、raindrops.jsの冒頭にはこのように表記されていて、

$.widget("water.raindrops", {
    options: {
        waveLength: 340,    // Wave Length. A numeric value. The higher the number, the smaller the wave length.
        canvasWidth: 0,     // Width of the  water. Default is 100% of the parent's width
        canvasHeight: 0,    // Height of the water. Default is 50% of the parent's height 
        color: '#00aeef',   // Water Color
        frequency: 3,       // Raindrops frequency. Higher number means more frequent raindrops.
        waveHeight: 100 ,   // Wave height. Higher number means higher waves created by raindrops.
        density: 0.02,      // Water density. Higher number means shorter ripples.
        rippleSpeed:  0.1,  // Speed of the ripple effect. Higher number means faster ripples.
        rightPadding: 20,    // To cover unwanted gaps created by the animation.
        position:'absolute',
        positionBottom:0,
        positionLeft:0
    },
<!--以下に続く-->

この場合は、$.widget のところを jQuery.widget　とすれば良いのでしょうか。
jQueryはprogateで少しかじったことがある程度で、冒頭などは $(function() という形式でしか知らないため、実際のところ前行の内容で合っているか不安です。

何かおわかりでしたら、ご指南いただければ幸いです。