自作の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の記述。

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では最初と最後に次の記述をしておき、この中に処理を書きます。

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

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

かなり大雑把な説明をしておくと「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です。

登録する「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を元に戻せばよいのですが、面倒なので基本形をまとめた記述をしておくと便利です。私が利用している記述を公開しておきます。

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

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

にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

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

コメントの反映には時間がかかる場合があります。

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

CAPTCHA


  1. しげぞう 投稿作成者

    乃風様

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

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

  2. 乃風

    しげぞうさんへ

    再び、この記事に戻ってきました。しげぞうさんの記事内の「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 を排除する」が表示されてしまいました。

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

  3. しげぞう 投稿作成者

    乃風様

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

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