wp_register_scriptとwp_register_styleの使い方

公開日 : 最終更新日 :

カテゴリー :

WordPressのfunctions.phpで使えるwp_register_script()とwp_register_style()についてわかったことを紹介します。wp_register_script()とwp_register_style()は、JSとCSSをテーマにセットする関数です。まぁテーマファイルのindex.phpやheader.phpに直接書いてもいいですが、functions.phpにまとめて書いておけば管理が楽になると思いますし、WordPressはあらかじめ登録してあるJQueryなどを呼び込むのでそういったものを管理のにもおすすめです。

wp_register_script()について

まずは、wp_register_script()とwp_register_style()の使い方からです。

wp_register_script($handle, $src, $deps, $ver, $in_footer);
引数名 説明 デフォルト
$handle 登録する識別名(必須) None
$src 登録するJavascriptのパス(必須) None
$deps Javascriptの依存性 array()
$ver パラメータの付与 false
$in_footer wp_head()かwp_footer()でつかうか false

引数について説明します。

  • $handleは登録させるフック名で、あらかじめWordPressで登録されているフック以外の好きな名前が決めれます
  • $srcはJavascriptのパスを書きます。この2つはwp_register_script()において必ず書かないといけない必須項目です
  • $depsはどのJavascriptの後に読み込ませるか決めることができます。基本的には、読み込ませるwp_register_script()の順に登録されますが、依存関係があるJavascript(JQueryプラグインなど)を登録させたい場合は、依存元のJavascriptの$handleを書いておくとそのJavascriptの後に登録されます
  • $verは読み込ませるJavascriptのパスにパラメータを付与できます。なにも書かないとWordPressのバージョン番号がパラメータに付与され、なにかパラメータを書いておくとそのパラメータが呼び込まれます。パラメータを付与させたくない場合は、NULLを書くことでパラメータが付与されません
  • $in_footerは登録する場所をwp_head()内かwp_footer()内で決めることができます。何も書かないとwp_head()内に登録されtrueとするとwp_footer()内に登録されます

wp_register_script()の使用例でGoogle Hosted LibrariesからJQueryをwp_footer()に読み込む使い方です。JQueryは、WordPressに登録されているのでwp_deregister_script()を使って解除する紹介します。

3行目のwp_deregister_script(‘jquery’)は、解除したいフック名を引数に書いておくとそのフック名に登録してあるJavascriptを解除してテーマに読み込まないようになります。5行目のwp_enqueue_script(‘jquery’)は、wp_register_scriptで登録したものを登録します。wp_enqueue_script()は、wp_register_script()と引数の形は同じなのでwp_enqueue_script()にwp_register_script()で使うものを引数に渡せば、wp_register_script()は必要ありません。ただし、wp_enqueue_script()は、$handleのみ必須でそれ以外はオプション扱いなので注意が必要です。

wp_register_style()について

wp_register_style()もwp_register_script()と同じような感じで使います。wp_register_script()がJavascriptの登録を行うのに対してwp_register_style()はCSSの登録を行います。wp_register_style()の仕組みは以下の通りです。

wp_register_script($handle, $src, $deps, $ver, $media);
引数名 説明 デフォルト
$handle 登録する識別名(必須) None
$src 登録するCSSのパス(必須) None
$deps CSSの依存性 array()
$ver パラメータの付与 false
$media <link>タグのmedia属性 all
  • $hanleは登録させるフック名で、あらかじめWordPressで登録されているフック以外の好きな名前を決めれます
  • $srcはCSSのパスを書きます。この2つはwp_register_style()において必ず書かないといけない必須項目です
  • $depsはどのCSSの後に登録するCSSを読みこませるかを決めれます。CSSフレームワーク等で登録するCSSを後ろに持ってきたい場合は、依存元のCSSの$handle名を書いておくとそのCSSの後に登録されます
  • $verは、読み込ませるCSSのパスにパラメータを付与できます。なにも書かないとWordPressのバージョン番号がパラメータに付与され、なにかパラメータを書いておくとそのパラメータが呼び込まれます。パラメータを付与させたくない場合は、NULLを書くことでパラメータが付与されません
  • $mediaは、<link>タグのmedia属性を指定できます。media属性に何が指定できるかは、コチラコチラ(英語)をご覧ください

wp_register_style()の使用例でstyle.cssを読み込む使い方です。

3行目のwp_register_style()でmainというフック名でstyle.cssを登録し4行目のwp_enqueue_style()でmainフックを読み込ませています。wp_enqueue_style()は、wp_enqueue_script()のCSS版といった感じでwp_enqueue_style()にwp_register_style()の引数を書けばwp_enqueue_style()のみで動きます。ただwp_enqueue_script()と同じように$handleのみが必須なので注意が必要です。

今回はJavascriptやCSSの登録を行うwp_register_script()とwp_register_style()を紹介しました。登録があるということは解除もあるので次回は解除を行うwp_deregister_script(),wp_deregister_style()を紹介します。

ピンバック

コメント

  1. Pingback icon
    雪が降ってくるプラグイン「snowy」を作りました | ワードプレスのホームページ制作|新宿区のフリーランスWebデザイン事務所 ピクセルデザイン

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>