自作のJavaScriptをWordPressで利用する方法

現在WordPress高速化のためにあれこれ勉強しているのですが、自作のJavaScriptをWordPressで追加して使う方法が調べても結構難しくて理解しにくかったので私なりにまとめてみようと思います。

注意点も幾つかありますのでその都度説明してみたいと思います。

前回「ページの先頭に戻るボタン」を自作しました。
ページの先頭に戻るボタンを自作してみた

今回はその続きです。

スポンサーリンク
スマートフォン買取

まずは自作したJavaScriptをアップロード

自作したJavaScriptをアップロードする場所としては幾つか候補があるようですが、私の場合は作成した「子テーマ」に入れる事にしました。ロリポップで説明しておくと「ロリポップのユーザー専用ページ」⇒「webツール」⇒「自分のドメイン」⇒「wp-content」⇒「themes」⇒「child(子テーマ)」に「js」という「フォルダ」を作成しました。ファイルではなくフォルダね。

js-1

js-2

それで今度は作成した「js」というフォルダの中に自作するjsの「ファイル」を追加します。

js-3

今回私が作成したのがページの先頭に戻る「scroll-top」というjsだったので、ファイル名は「scroll-top.js」としております。「〇〇.js」としておけば問題ないでしょう。

js-4

それでこの「〇〇.js」のファイルに肝心のJavaScript(jQuery)等を記述します。

js-5

ちなみに私の作成したページ先頭に戻るjQueryの記述。

jQuery(function(){
jQuery(window).scroll(function(){
var a=jQuery(window).scrollTop();
if(a>50){jQuery("#scroll-top").fadeIn("slow")
}else{
jQuery("#scroll-top").fadeOut("slow")}
});
jQuery("#scroll-top").on("click",function(){
jQuery("html,body").animate({scrollTop:0},"slow")}
)});

WordPressでjqueryの記述をするときには「$」ではなく「jQuery」を使います。これは説明は省略しますが詳しくは検索して調べると山ほど情報ができます。それと「(document).ready」は省略できます。そして保存を忘れずに。

functions.phpの作成

自作のjsをWordPressで利用する方法は幾つかあるのですが、functions.phpを利用するのが一番スマートだと思います。functions.phpを利用する事で複数のプラグインのjs、自作のjs、スタイルシート等、出力の順番をWordPressが判断してくれます。

WordPressでオリジナルのテーマを利用している場合はfunctions.phpを編集していきますが、オリジナルテーマではなく、子テーマを利用している方が多いと思いますので、子テーマを利用している場合は子テーマに「functions.php」を追加しておきます。既にある場合は追加は不要です。

「functions.php」を追加する場合には他の子テーマのように親テーマの記述をコピーするのではなく、白紙で作成しておきます。つまり、ファイル名だけ書いて保存すればOKです。

親テーマと同じ記述をするとブログが表示されない状態になります。ブログ真っ白になったらFTP(ロリポップFTP)で子テーマのfunctons.phpを元に戻せばOKです。おそらく記述ミスがあります。

js-6

WordPress側の準備

ここまでできたらWordPressに戻り、「外観」⇒「テーマの編集(エディタ)」と進み、先ほど作成した「functions.php」を開きます。

js-7

js-8

functions.phpでは最初と最後に次の記述をしておき、この中に処理を書きます。

<?php

//ここに処理を記述していきます

?>

自作のJavaScript(jQuery)を登録して装備

いよいよ本題です。functions.phpで自作のJavaScript(jQuery)を登録し出力する記述をします。wp_enqueue_script関数というのを使います。後で説明するのでまずは私の場合(scroll-top)の記述をしてみます。

if (!is_admin()) {
   function register_script(){
        wp_register_script( 'scroll-top', get_stylesheet_directory_uri() . '/js/scroll-top.js', array( 'jquery' ), '', true);
        }
    function add_script() {
        register_script();
        wp_enqueue_script('scroll-top');
        }
    add_action('wp_enqueue_scripts', 'add_script');
}

かなり大雑把な説明をしておくと「wp_register_script」で自作のJavaScript(jQuery)を登録し、「wp_enqueue_script」で装備するという感じで捕らえておけばよいと思います。「if (!is_admin())」というのが管理画面は除外する条件分岐です。

この登録というのはwp_register_script( $handle, $src, $deps, $ver, $in_footer )という順番で書きます。ちょっと難しいですよね。簡単に説明しておきますね。

  • $handle : 登録する名前何にする?
  • $src : スクリプトファイルの場所はどこ?
  • $deps : スクリプトより前に読み込む必要がある物を記述。単体で動くならarray()。jQueryを使うならarray(jquery)
  • $ver : バージョン(特に必要ないなら「’’」のように空欄でOK。
  • $in_footer : フッターに入れるならtrue。head部分で出力ならfalse。

なのでハンドル名は自分で名づけて変更してもらえばOKです。それからパスURL($src)ですが、今回は「子テーマ」に追加したフォルダ「js」を作りました、その中に「scroll-top.js」というファイルを作りましたね。「get_stylesheet_directory_uri()」で子テーマのURLを出力できますので、get_stylesheet_directory_uri() . ‘/js/scroll-top.js’としています。

親テーマのディレクトリを取得する場合には 「get_template_directory_uri()」 を使用してください。以上の項目をwp_register_scriptで登録しておいて、wp_enqueue_script(’ハンドル名’)でブログに装備する事ができます。

これで装備しておけば登録している他のスクリプトとの順番をWordPressが自動的に判断して適切な出力をしてくれます。便利です。

また、上記の記述方法以外にもこんな書き方でもOKです。

if (!is_admin()) {
function my_scripts_method() {
    wp_enqueue_script('ハンドル名', 'パスURL', array( 'jquery'), 'バージョン', true);
    wp_enqueue_script('ハンドル名', 'パスURL', array(), 'バージョン', true);
    
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
}

登録する「wp_register_script」を省略して「wp_enqueue_script」だけで記述するという感じです。この場合は「wp_enqueue_script」に( $handle, $src, $deps, $ver, $in_footer )の情報を書いておけばOKです。

今回私がプラグインではなく自作の「scroll-top」を作ったのはサイトの表示速度を上げるためにJavaScript(jQuery)の記述をhead部分ではなく、フッターに持っていきたかったためです。

このようにfunctions.phpの記述でJavaScript(jQuery)をフッターに持って行けたのは非常に収穫でした。

フッターで出力するためには( $handle, $src, $deps, $ver, $in_footer )の部分の最後の項目をtrueにするだけですよね。

簡単な記述フォーマット

えっと、functions.phpへの記述は初心者の方には非常に難しいですし、同じ記述を書いてしまっただけでもブログが表示されなくなります。表示されない場合はFTP等でfunctions.phpを元に戻せばよいのですが、面倒なので基本形をまとめた記述をしておくと便利です。私が利用している記述を公開しておきます。

if (!is_admin()) {
   function deregister_script(){  // 登録解除の項目
        wp_deregister_script('jquery');
    }

   function register_script(){  // 登録の項目
        wp_register_script( 'scroll-top', get_stylesheet_directory_uri() . '/js/scroll-top.js', array( 'jquery' ), '', true);
        wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '1.11.1', true );
        }
    function add_script() {  // 装備の項目
        deregister_script();
        register_script();
        wp_enqueue_script('scroll-top');
        wp_enqueue_script('jquery');
        }
    add_action('wp_enqueue_scripts', 'add_script');
}

これは私の場合の記述例になりますが、「登録解除(wp_deregister_script)」と「登録(wp_register_script)」、それから「装備(wp_enqueue_script)」をまとめて書けるようにしております。

補足しておくと上記例ではjquery本体の登録を解除してCDN版jqueryを再登録しフッターで出力するようにしております。記述例を参考に自分用に書き直してみて下さいね。
WordPress高速化まとめページ

自作のJavaScriptをWordPressで利用する方法”に12件のコメントがあります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. 乃風

    しげぞう様

    こんばんは。いつもお世話になっております。
    現時点でJavaScriptはフッターに移動されているのですね。それはよかったです。分かりました、じゃ、私もCSSはそのまま残しておくことにします。

    あとは、ブラウザ―のキャッシュの変更ですね。早速、その記事に行ってみます。ありがとうございました。

  2. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。現時点でJavaScriptはフッターに移動されていると思いますので、レンダリングをブロックしているのはCSSファイル1枚だけだと思います。これもフッターに移動する事はできるのですが、CSSはそのまま残しておいて良いと思います。実際に私もそのようにしてます。

    後はブラウザのキャシュをちょっと変更するくらいでOKと思います。ブラウザのキャッシュに関しては次の記事です。
    http://dokidome.com/pege-speed/1145/

  3. 乃風

    しげぞうさんへ

    再び、この記事に戻ってきました。しげぞうさんの記事内の「WordPressの高速化」という親タイトルの中で、現時点で、3つの子タイトル以外は、全て設定がうまくいきました。その3つとは、
    ①レンダリングをブロックしているJavaScriptをフッターに移動させる
    ②プラグインで追加させるJavaScriptやCSSのハンドル名を調べる方法
    ③ページの先頭に戻るボタンを自作してみた(→今日、これから行くところです)
    です。

    上記の①は、「jQuery本体をCDNに置き換えて高速化」で代用しました。

    下記の④と⑤については、Autoptimizeで代用しました。
    ④CSSファイルをまとめて圧縮して高速化
    ⑤プラグインで追加されたCSSを1つにまとめてWordPressを高速化

    キャッシュ系のプラグインを再び起動させてから、今のこの状況で、PageSpeed Insightsで、速度を計ってみたのですが、「!修正が必要:」という欄からは、「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSS を排除する」というのは消えたのですが、替わりに、「サーバーの応答時間を短縮する」が出ました。

    その直ぐ下にあった修正方法ボタンをクリックすると、「Google のテストでは、お使いのサーバーは 1.4 秒で応答しました。サーバーの応答時間が遅くなる要因はたくさんあります。サーバーが多くの時間を費やしている箇所を監視し、測定する方法については、Google の推奨事項をお読みください。」と表示されました。

    そのGoogle の推奨事項を読んで見たのですが、なんだかよく分かりませんでした。どうしたらいいでしょうか。

    現在の、パソコンのスピードは、86/100速度で、モバイルの方は、78/100速度という結果が出ました。

    それと、「!修正を考慮:」の方に、今回初めて、「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」が表示されてしまいました。

    解決が必要な状況なら、その方法を教えてください。よろしくお願いします。いつもありがとうございます。

  4. 乃風

    しげぞうさんへ

    「functions.php」の後半の「//jquery」という部分の書き換え、うまくいきました。あれこれと考え、あれこれと見比べ、それでも分からずにいました。お返事を拝見し、「あ、そういうことだったのかぁ~・・・」って思いました。この書き換えの後、自分URLが表示された時は、やはりうれしかったです。いつもありがとうございます。

    親テーマのディレクトリを取得する件も、よく理解できました。ありがとうございました。

    戻るボタンに関してですが、画像やアイコンフォントなどに差し替える事とCSSで作成する事の違いが、全然分かってませんが、でも、「円形」にできる可能性があるのなら、じゃ、最後の記事「ページの先頭に戻るボタンを自作してみた」に進んでみます。ここは、かなりハードルが高そうですが、でも、やってみたい。今後もよろしくお願いします。

  5. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。親テーマのディレクトリを取得するのは例えば自分でオリジナルのテーマを作成しているとか、子テーマを作成せずにテンプレートを使っているような方です。子テーマでのカスタマイズをしている場合にはこれは必要はありません。

    また、戻るボタンは画像やアイコンフォントなどに差し替える事で円形にする事もできます。今回のボタンはCSSで作成しているので、このような形になってます。

  6. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。「functions.php」の後半の「//jquery」という部分以下が重複してしまいますので、まとめる必要があります。「//jquery」の部分から下の部分を削除して次のコードに差し替えて下さい。

    //jquery
    if (!is_admin()) {
        function deregister_script(){
             wp_deregister_script('jquery');
           
            
        }
        function register_script(){
            wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '1.11.1', true );
            wp_register_script( 'scroll-top', get_stylesheet_directory_uri() . '/js/scroll-top.js', array( 'jquery' ), '', true);
            
            
        }
        function add_script() {
            deregister_script();
            register_script();
           wp_enqueue_script('jquery');
            wp_enqueue_script('scroll-top');
            
                }
        add_action('wp_enqueue_scripts', 'add_script');
    }
  7. 乃風

    いつもお世話になっております。

    しげぞうさん、もう1つ分からないところがあります。ここの記事で、「親テーマのディレクトリを取得する場合には 「get_template_directory_uri()」 を使用してください。以上の項目をwp_register_scriptで登録しておいて、wp_enqueue_script(’ハンドル名’)でブログに装備する事ができます。」と書いてありましたが、どういう人が「親テーマのディレクトリを取得する」必要があるのでしょうか?

    私の場合、ここの記事の設定が終わったら、最後の記事である「ページの先頭に戻るボタンを自作してみた」へ進むつもりでいます。

    ここの記事では、トップに戻るボタンが金の延べ棒のような形で紹介されていますが、その形を直径1センチぐらいの円形に変更することも可能なのでしょうか? 

  8. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。ここは変更しなくてもOKです。ここでは自作したトップに戻るボタンに「scroll-top」という名前をつけてますので、このまま呼び出すハンドル名は「scroll-top」のままにしておいて下さい。自作のスクリプトなどを装備する時には自分で名前を付けてそのハンドル名を呼び出すという感じになります。

  9. 乃風

    いつもお世話になっております。

    funchitons.php上のコードに対して、「なのでハンドル名は自分で名づけて変更してもらえばOKです。」と書いてありましたが、下記のどこの部分をどのように変更すればいいのでしょうか? 上から3行目の wp_register_script( ‘scroll-top’,get_ のところの最後の部分である ‘scroll-top’ を、nokazeというハンドル名に変更してみたのですが、エラーが出てしまいました。よろしくお願いします。キャッシュ系のブラグインは、既に停止してあります。

    if (!is_admin()) {
    function register_script(){
    wp_register_script( ‘scroll-top’, get_stylesheet_directory_uri() . ‘/js/scroll-top.js’, array( ‘jquery’ ), ”, true);
    }
    function add_script() {
    register_script();
    wp_enqueue_script(‘scroll-top’);
    }
    add_action(‘wp_enqueue_scripts’, ‘add_script’);
    }

  10. 乃風

    こんにちは。いつもお世話になっております。ありがとうございます。お返事を拝見し、「あ、なるほど、そういうことだったのか・・・」と思いました。

    とにかく、何が何だか分からず、「これかな?」「あれかな?」と思いをグルグルと巡らし、しげぞうさんの記事と照らし合わせながら操作していたら、私の操作ミスで、昨日、突然、私のURLが、全部真っ白に消えてしまったんです。全身の血がザーーーーーーーーッと引きました。あれって、結構、ショック受けますね。うふふふふふ・・・。

    フッターの出力の件ですが・・・。ちょっと難しくて、苦戦するかもしれないのですね。そうでしたかぁ~・・・。とにかくやってみます。もし無理そうなら、一旦離れて、他にすべき設定がまだあるので、それをやってみるかして、心を落ち着けて、で、また戻ってきて、何回か試してみます。突破できるかもしれないし。

  11. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。CDN版jqueryを入れたら、元々WordPressに入っているjqueryと重複します。なので、WordPress本体のjqueryを出力しないようにして、代わりにCDN版のjqueryを使えるようにする手順が必要です。フッターで出力するのは次の記事に書いてますので、一度試して見てください。ちょっと難しい部分なので苦戦するかもしれません。
    レンダリングをブロックしている JavaScriptをフッターに移動させる

    もしまたできない場合や分からない場合には再度コメント下さい。

  12. 乃風

    いつもお世話になっております。独自スクロールを作るにあたり、「CDN版jquery」をブラグインし、有効化まで出来ました。最後の作業である「フッターで出力する」にはどうのようにしたらいいのでしょうか? フッターに関するそれらしき記事を、貴ブログ内で探してみたのですが、見当たりませんでした。よろしくお願いします。